add command shortcuts & menu command

config-overrides.js

@@ -84,6 +84,7 @@ const userscriptWebpack = (config, env) => {
 // @downloadURL   ${process.env.REACT_APP_USERSCRIPT_DOWNLOADURL}
 // @updateURL     ${process.env.REACT_APP_USERSCRIPT_DOWNLOADURL}
 // @grant         GM.xmlHttpRequest
+// @grant         GM.registerMenuCommand
 // @grant         GM.setValue
 // @grant         GM.getValue
 // @grant         GM.deleteValue

public/_locales/en/messages.json

@@ -4,5 +4,8 @@
   },
   "app_description": {
     "message": "A minimalist bilingual translation Extension & Greasemonkey Script"
+  },
+  "toggle_translate": {
+    "message": "Toggle Translate"
   }
 }

public/_locales/zh_CN/messages.json

@@ -4,5 +4,8 @@
   },
   "app_description": {
     "message": "一个简约的双语网页翻译扩展 & 油猴脚本"
+  },
+  "toggle_translate": {
+    "message": "切换翻译"
   }
 }

public/manifest.firefox.json

@@ -15,6 +15,14 @@
       "matches": ["<all_urls>"]
     }
   ],
+  "commands": {
+    "toggleTranslate": {
+      "suggested_key": {
+        "default": "Alt+Q"
+      },
+      "description": "__MSG_toggle_translate__"
+    }
+  },
   "permissions": ["<all_urls>", "storage"],
   "icons": {
     "16": "images/logo16.png",

public/manifest.json

@@ -16,6 +16,14 @@
       "matches": ["<all_urls>"]
     }
   ],
+  "commands": {
+    "toggleTranslate": {
+      "suggested_key": {
+        "default": "Alt+Q"
+      },
+      "description": "__MSG_toggle_translate__"
+    }
+  },
   "permissions": ["storage"],
   "host_permissions": ["<all_urls>"],
   "icons": {

src/background.js

@@ -3,6 +3,8 @@ import {
   MSG_FETCH,
   MSG_FETCH_LIMIT,
   MSG_FETCH_CLEAR,
+  MSG_TRANS_TOGGLE,
+  CMD_TOGGLE_TRANSLATE,
   DEFAULT_SETTING,
   DEFAULT_RULES,
   DEFAULT_SYNC,
@@ -15,6 +17,7 @@ import storage from "./libs/storage";
 import { getSetting } from "./libs";
 import { syncAll } from "./libs/sync";
 import { fetchData, fetchPool } from "./libs/fetch";
+import { sendTabMsg } from "./libs/msg";
 
 /**
  * 插件安装
@@ -74,3 +77,16 @@ browser.runtime.onMessage.addListener(
     return true;
   }
 );
+
+/**
+ * 监听快捷键
+ */
+browser.commands.onCommand.addListener((command) => {
+  // console.log(`Command: ${command}`);
+  switch (command) {
+    case CMD_TOGGLE_TRANSLATE:
+      sendTabMsg(MSG_TRANS_TOGGLE);
+      break;
+    default:
+  }
+});

src/config/index.js

@@ -18,6 +18,8 @@ export const STOKEY_SYNC = `${APP_NAME}_sync`;
 export const STOKEY_FAB = `${APP_NAME}_fab`;
 export const STOKEY_RULESCACHE_PREFIX = `${APP_NAME}_rulescache_`;
 
+export const CMD_TOGGLE_TRANSLATE = "toggleTranslate";
+
 export const CLIENT_WEB = "web";
 export const CLIENT_CHROME = "chrome";
 export const CLIENT_EDGE = "edge";

src/userscript.js

@@ -54,4 +54,14 @@ import { Translator } from "./libs/translator";
       </CacheProvider>
     </React.StrictMode>
   );
+
+  // 注册菜单
+  GM.registerMenuCommand(
+    "Toggle Translate",
+    (event) => {
+      // console.log("Menu item selected", event);
+      translator.toggle();
+    },
+    "Q"
+  );
 })();

src/views/Action/index.js

@@ -112,7 +112,9 @@ export default function Action({ translator, fab }) {
           }
         >
           <Paper>
-            <Popup setShowPopup={setShowPopup} translator={translator} />
+            {showPopup && (
+              <Popup setShowPopup={setShowPopup} translator={translator} />
+            )}
           </Paper>
         </Draggable>
         <Draggable