✨ 兼容GM_registerMenuCommand #358

Author: CodFrm

example/gm_menu.js

@@ -5,8 +5,8 @@
 // @description  创建菜单, 可以显示在右上角的插件弹出页和浏览器右键菜单中
 // @author       You
 // @match        https://bbs.tampermonkey.net.cn/
-// @grant GM_registerMenuCommand
-// @grant GM_unregisterMenuCommand
+// @grant        GM_registerMenuCommand
+// @grant        GM_unregisterMenuCommand
 // ==/UserScript==
 
 const id = GM_registerMenuCommand(
@@ -15,7 +15,7 @@ const id = GM_registerMenuCommand(
     console.log(id);
     GM_unregisterMenuCommand(id);
   },
-  "h"
+  { accessKey: "k", title: "测试菜单标题", autoClose: false }
 );
 
 const id2 = GM_registerMenuCommand(
@@ -26,3 +26,15 @@ const id2 = GM_registerMenuCommand(
   },
   "j"
 );
+
+setTimeout(() => {
+  // 修改名字
+  GM_registerMenuCommand(
+    "修改后的测试菜单",
+    () => {
+      console.log("修改后的", id);
+      GM_unregisterMenuCommand(id);
+    },
+    { id: id, accessKey: "k", title: "修改后的测试菜单标题", autoClose: false }
+  );
+}, 5000);

src/app/service/content/gm_api.ts

@@ -243,18 +243,29 @@ export default class GMApi {
   }
 
   @GMContext.API()
-  GM_registerMenuCommand(name: string, listener: () => void, accessKey?: string): number {
+  GM_registerMenuCommand(name: string, listener: () => void, accessKey?: string | { id?: number }): number {
     if (!this.menuMap) {
       this.menuMap = new Map();
     }
-    let flag = 0;
-    this.menuMap.forEach((val, menuId) => {
-      if (val === name) {
-        flag = menuId;
+    if (typeof accessKey === "object") {
+      // 如果是对象，并且有id属性,则直接使用id
+      if (accessKey.id && this.menuMap.has(accessKey.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;
+      }
+    } else {
+      let flag = 0;
+      this.menuMap.forEach((val, menuId) => {
+        if (val === name) {
+          flag = menuId;
+        }
+      });
+      if (flag) {
+        return flag;
       }
-    });
-    if (flag) {
-      return flag;
     }
     this.eventId += 1;
     const id = this.eventId;

src/app/service/queue.ts

@@ -48,7 +48,7 @@ export type ScriptMenuRegisterCallbackValue = {
   uuid: string;
   id: number;
   name: string;
-  accessKey: string;
+  options?: { autoClose?: string; title?: string; accessKey?: string };
   tabId: number;
   frameId: number;
   documentId: string;

src/app/service/service_worker/gm_api.ts

@@ -645,7 +645,7 @@ export default class GMApi {
       uuid: request.script.uuid,
       id: id,
       name: name,
-      accessKey: accessKey,
+      options: typeof accessKey === "object" ? accessKey : { accessKey: accessKey },
       tabId: sender.getSender().tab?.id || -1,
       frameId: sender.getSender().frameId,
       documentId: sender.getSender().documentId,

src/app/service/service_worker/popup.ts

@@ -25,7 +25,7 @@ import { getStorageName } from "@App/pkg/utils/utils";
 export type ScriptMenuItem = {
   id: number;
   name: string;
-  accessKey?: string;
+  options?: { autoClose?: string; title?: string; accessKey?: string };
   tabId: number; //-1表示后台脚本
   frameId?: number;
   documentId?: string;
@@ -119,11 +119,15 @@ export class PopupService {
           script.menus.push({
             id: message.id,
             name: message.name,
-            accessKey: message.accessKey,
+            options: message.options,
             tabId: message.tabId,
             frameId: message.frameId,
             documentId: message.documentId,
           });
+        } else {
+          // 存在修改信息
+          menu.name = message.name;
+          menu.options = message.options;
         }
       }
       this.updateScriptMenu();

src/pages/components/ScriptMenuList/index.tsx

@@ -55,6 +55,26 @@ const ScriptMenuList: React.FC<{
   }
   useEffect(() => {
     setList(script);
+    // 注册菜单快捷键
+    const listeners: ((e: KeyboardEvent) => void)[] = [];
+    script.forEach((item) => {
+      item.menus.forEach((menu) => {
+        if (menu.options?.accessKey) {
+          const listener = (e: KeyboardEvent) => {
+            if (e.key.toUpperCase() === menu.options!.accessKey!.toUpperCase()) {
+              sendMenuAction(item.uuid, menu);
+            }
+          };
+          document.addEventListener("keypress", listener);
+          listeners.push(listener);
+        }
+      });
+    });
+    return () => {
+      listeners.forEach((listener) => {
+        document.removeEventListener("keypress", listener);
+      });
+    };
   }, [script]);
 
   useEffect(() => {
@@ -209,25 +229,20 @@ const ScriptMenuList: React.FC<{
                 : item.menus?.slice(0, menuExpandNum)
               : item.menus
             )?.map((menu) => {
-              if (menu.accessKey) {
-                document.addEventListener("keypress", (e) => {
-                  if (e.key.toUpperCase() === menu.accessKey!.toUpperCase()) {
-                    sendMenuAction(item.uuid, menu);
-                  }
-                });
-              }
+              console.log("menu", menu);
               return (
                 <Button
                   className="text-left"
                   key={menu.id}
                   type="secondary"
                   icon={<IconMenu />}
+                  title={menu.options?.title}
                   onClick={() => {
                     sendMenuAction(item.uuid, menu);
                   }}
                 >
                   {menu.name}
-                  {menu.accessKey && `(${menu.accessKey.toUpperCase()})`}
+                  {menu.options?.accessKey && `(${menu.options.accessKey.toUpperCase()})`}
                 </Button>
               );
             })}

src/types/scriptcat.d.ts

@@ -97,7 +97,18 @@ declare function GM_getResourceText(name: string): string | undefined;
 
 declare function GM_getResourceURL(name: string, isBlobUrl?: boolean): string | undefined;
 
-declare function GM_registerMenuCommand(name: string, listener: () => void, accessKey?: string): number;
+declare function GM_registerMenuCommand(
+  name: string,
+  listener: () => void,
+  optionsOrAccessKey?:
+    | string
+    | {
+        id?: number | string;
+        accessKey?: string;
+        autoClose?: boolean;
+        title?: string;
+      }
+): number;
 
 declare function GM_unregisterMenuCommand(id: number): void;