✨ 实现 CAT_registerMenuInput 支持快捷输入交互 (#411)

* 实现 GM_registerMenuCommand 支持快捷输入交互

 - 实现 用户可通过
`GM_registerMenuCommand` 方法在 `popup 页面`与脚本快捷输入交互
   - 支持 `"text" | "number" | "boolean"` 三种交互方式
   - 新增4个脚本猫独有的options可选字段 `inputType` `inputLabel` `inputDefaultValue` `inputPlaceholder` 用于控制 `popup` 交互界面
 - 修复 `autoClose` 字段不生效的bug

* Update gm_api.ts

* Update scriptcat.d.ts

* 修复 autoClose 默认值应为true

* 使用 form 重构交互元素 / 实现 inputValue 会话记忆

* 设置 新API CAT_registerMenuInput / CAT_unregisterMenuInput

* Revert "实现 inputValue 会话记忆"

Author: DreamNya

example/cat_bg_input_menu.js

@@ -0,0 +1,73 @@
+// ==UserScript==
+// @name         bg cat input menu
+// @namespace    https://bbs.tampermonkey.net.cn/
+// @version      0.1.0
+// @description  在后台脚本中带交互输入的快捷菜单
+// @author       You
+// @background
+// @grant        CAT_registerMenuInput
+// @grant        CAT_unregisterMenuInput
+// @grant        GM_notification
+// ==/UserScript==
+
+return new Promise((resolve) => {
+  const id = CAT_registerMenuInput(
+    "测试菜单",
+    () => {
+      console.log(id);
+      CAT_unregisterMenuInput(id);
+    },
+    "z"
+  );
+
+  CAT_registerMenuInput(
+    "测试菜单boolean",
+    (inputValue) => {
+      GM_notification({
+        title: "测试菜单boolean",
+        text: "" + inputValue,
+      });
+    },
+    {
+      inputType: "boolean",
+      inputLabel: "是否通知",
+      inputDefaultValue: true,
+      autoClose: false,
+    }
+  );
+
+  CAT_registerMenuInput(
+    "测试菜单text",
+    (inputValue) => {
+      GM_notification({
+        title: "测试菜单text",
+        text: "" + inputValue,
+      });
+    },
+    {
+      inputType: "text",
+      inputLabel: "通知内容",
+      inputValue: "text",
+      autoClose: false,
+    }
+  );
+
+  CAT_registerMenuInput(
+    "测试菜单number",
+    (inputValue) => {
+      setTimeout(() => {
+        GM_notification({
+          title: "测试菜单number",
+          text: "" + (1000 + inputValue),
+        });
+      }, 1000 + inputValue);
+    },
+    {
+      inputType: "number",
+      inputLabel: "延迟ms",
+      inputPlaceholder: "最低1000ms",
+    }
+  );
+
+  resolve();
+});

example/gm_bg_menu.js

@@ -15,4 +15,4 @@ return new Promise((resolve) => {
     GM_unregisterMenuCommand(id);
     resolve();
   }, "z");
-});
+});

packages/eslint/compat-grant.js

@@ -2,6 +2,8 @@ const compat_grant = require("eslint-plugin-userscripts/dist/data/compat-grant.j
 const compatMap = {
   CAT_userConfig: [{ type: "scriptcat", versionConstraint: ">=0.11.0-beta" }],
   CAT_fileStorage: [{ type: "scriptcat", versionConstraint: ">=0.11.0" }],
+  CAT_registerMenuInput: [{ type: "scriptcat", versionConstraint: ">=0.17.0-beta.2" }],
+  CAT_unregisterMenuInput: [{ type: "scriptcat", versionConstraint: ">=0.17.0-beta.2" }],
   ...compat_grant.compatMap,
 };
 

packages/eslint/linter-config.ts

@@ -13,6 +13,8 @@ const config = {
     CATRetryError: "readonly",
     CAT_fileStorage: "readonly",
     CAT_userConfig: "readonly",
+    CAT_registerMenuInput: "readonly",
+    CAT_unregisterMenuInput: "readonly",
   },
   rules: {
     "constructor-super": ["error"],

src/app/service/content/gm_api.ts

@@ -10,6 +10,7 @@ import EventEmitter from "eventemitter3";
 import { getStorageName } from "@App/pkg/utils/utils";
 import { MessageRequest } from "../service_worker/gm_api";
 import { ScriptLoadInfo } from "../service_worker/runtime";
+import { ScriptMenuItem } from "../service_worker/popup";
 
 interface ApiParam {
   depend?: string[];
@@ -299,20 +300,26 @@ export default class GMApi {
   }
 
   @GMContext.API()
-  GM_registerMenuCommand(name: string, listener: () => void, accessKey?: string | { id?: number }): number {
+  GM_registerMenuCommand(
+    name: string,
+    listener: (inputValue?: any) => void,
+    options_or_accessKey?: ScriptMenuItem["options"] | string
+  ): number {
     if (!this.menuMap) {
       this.menuMap = new Map();
     }
-    if (typeof accessKey === "object") {
+    if (typeof options_or_accessKey === "object") {
+      const option: ScriptMenuItem["options"] = options_or_accessKey;
       // 如果是对象，并且有id属性,则直接使用id
-      if (accessKey.id && this.menuMap.has(accessKey.id)) {
+      if (option.id && this.menuMap.has(option.id)) {
         // 如果id存在,则直接使用
-        this.EE.removeAllListeners("menuClick:" + accessKey.id);
-        this.EE.addListener("menuClick:" + accessKey.id, listener);
-        this.sendMessage("GM_registerMenuCommand", [accessKey.id, name, accessKey]);
-        return accessKey.id;
+        this.EE.removeAllListeners("menuClick:" + option.id);
+        this.EE.addListener("menuClick:" + option.id, listener);
+        this.sendMessage("GM_registerMenuCommand", [option.id, name, option]);
+        return option.id;
       }
     } else {
+      options_or_accessKey = { accessKey: options_or_accessKey };
       let flag = 0;
       this.menuMap.forEach((val, menuId) => {
         if (val === name) {
@@ -325,12 +332,20 @@ export default class GMApi {
     }
     this.eventId += 1;
     const id = this.eventId;
+    options_or_accessKey.id = id;
     this.menuMap.set(id, name);
     this.EE.addListener("menuClick:" + id, listener);
-    this.sendMessage("GM_registerMenuCommand", [id, name, accessKey]);
+    this.sendMessage("GM_registerMenuCommand", [id, name, options_or_accessKey]);
     return id;
   }
 
+  @GMContext.API({
+    depend: ["GM_registerMenuCommand"],
+  })
+  CAT_registerMenuInput(...args: Parameters<GMApi["GM_registerMenuCommand"]>): number {
+    return this.GM_registerMenuCommand(...args);
+  }
+
   @GMContext.API()
   GM_addStyle(css: string) {
     // 与content页的消息通讯实际是同步,此方法不需要经过background
@@ -394,6 +409,13 @@ export default class GMApi {
     this.sendMessage("GM_unregisterMenuCommand", [id]);
   }
 
+  @GMContext.API({
+    depend: ["GM_unregisterMenuCommand"],
+  })
+  CAT_unregisterMenuInput(...args: Parameters<GMApi["GM_unregisterMenuCommand"]>): void {
+    this.GM_unregisterMenuCommand(...args);
+  }
+
   @GMContext.API()
   CAT_userConfig() {
     return this.sendMessage("CAT_userConfig", []);

src/app/service/queue.ts

@@ -2,6 +2,7 @@ import { MessageQueue } from "@Packages/message/message_queue";
 import { Script, SCRIPT_RUN_STATUS } from "../repo/scripts";
 import { InstallSource } from "./service_worker";
 import { Subscribe } from "../repo/subscribe";
+import { ScriptMenuItem } from "./service_worker/popup";
 
 export function subscribeScriptInstall(
   messageQueue: MessageQueue,
@@ -48,7 +49,7 @@ export type ScriptMenuRegisterCallbackValue = {
   uuid: string;
   id: number;
   name: string;
-  options?: { autoClose?: string; title?: string; accessKey?: string };
+  options?: ScriptMenuItem["options"];
   tabId: number;
   frameId: number;
   documentId: string;

src/app/service/service_worker/client.ts

@@ -233,10 +233,11 @@ export class PopupClient extends Client {
     return this.do("getPopupData", data);
   }
 
-  menuClick(uuid: string, data: ScriptMenuItem) {
+  menuClick(uuid: string, data: ScriptMenuItem, inputValue?: any) {
     return this.do("menuClick", {
       uuid,
       id: data.id,
+      inputValue,
       sender: {
         tabId: data.tabId,
         frameId: data.frameId,

src/app/service/service_worker/gm_api.ts

@@ -730,22 +730,22 @@ export default class GMApi {
     });
   }
 
-  @PermissionVerify.API()
+  @PermissionVerify.API({ alias: ["CAT_registerMenuInput"] })
   GM_registerMenuCommand(request: Request, sender: GetSender) {
-    const [id, name, accessKey] = request.params;
+    const [id, name, options] = request.params;
     // 触发菜单注册, 在popup中处理
     this.mq.emit("registerMenuCommand", {
       uuid: request.script.uuid,
-      id: id,
-      name: name,
-      options: typeof accessKey === "object" ? accessKey : { accessKey: accessKey },
+      id,
+      name,
+      options,
       tabId: sender.getSender().tab?.id || -1,
       frameId: sender.getSender().frameId,
       documentId: sender.getSender().documentId,
     });
   }
 
-  @PermissionVerify.API()
+  @PermissionVerify.API({ alias: ["CAT_unregisterMenuInput"] })
   GM_unregisterMenuCommand(request: Request, sender: GetSender) {
     const [id] = request.params;
     // 触发菜单取消注册, 在popup中处理

src/app/service/service_worker/popup.ts

@@ -25,7 +25,17 @@ import { getStorageName } from "@App/pkg/utils/utils";
 export type ScriptMenuItem = {
   id: number;
   name: string;
-  options?: { autoClose?: string; title?: string; accessKey?: string };
+  options?: {
+    id?: number;
+    autoClose?: boolean;
+    title?: string;
+    accessKey?: string;
+    // 可选输入框
+    inputType?: "text" | "number" | "boolean";
+    inputLabel?: string;
+    inputDefaultValue?: string | number | boolean;
+    inputPlaceholder?: string;
+  };
   tabId: number; //-1表示后台脚本
   frameId?: number;
   documentId?: string;
@@ -58,16 +68,18 @@ export class PopupService {
   genScriptMenuByTabMap(menu: ScriptMenu[]) {
     let n = 0;
     menu.forEach((script) => {
+      // 如果是带输入框的菜单则不在页面内注册
+      const nonInputMenus = script.menus.filter((item) => !item.options?.inputType);
       // 创建脚本菜单
-      if (script.menus.length) {
-        n += script.menus.length;
+      if (nonInputMenus.length) {
+        n += nonInputMenus.length;
         chrome.contextMenus.create({
           id: `scriptMenu_` + script.uuid,
           title: script.name,
           contexts: ["all"],
           parentId: "scriptMenu",
         });
-        script.menus.forEach((menu) => {
+        nonInputMenus.forEach((menu) => {
           // 创建菜单
           chrome.contextMenus.create({
             id: `scriptMenu_menu_${script.uuid}_${menu.id}`,
@@ -320,12 +332,23 @@ export class PopupService {
     });
   }
 
-  menuClick({ uuid, id, sender }: { uuid: string; id: number; sender: ExtMessageSender }) {
+  menuClick({
+    uuid,
+    id,
+    sender,
+    inputValue,
+  }: {
+    uuid: string;
+    id: number;
+    sender: ExtMessageSender;
+    inputValue?: any;
+  }) {
     // 菜单点击事件
     this.runtime.emitEventToTab(sender, {
       uuid,
       event: "menuClick",
       eventId: id.toString(),
+      data: inputValue,
     });
     return Promise.resolve(true);
   }