add command shortcuts & menu command

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