fix: update ui when shortcut changed

public/_locales/en/messages.json

@@ -6,15 +6,15 @@
     "message": "A simple bilingual translation extension & Greasemonkey script"
   },
   "toggle_translate": {
-    "message": "Toggle Translate (Alt+Q)"
+    "message": "Toggle Translate"
   },
   "toggle_style": {
-    "message": "Toggle Style (Alt+C)"
+    "message": "Toggle Style"
   },
   "open_options": {
-    "message": "Open Options (Alt+O)"
+    "message": "Open Options"
   },
   "open_tranbox": {
-    "message": "Translate Popup/Selected (Alt+S)"
+    "message": "Translate Popup/Selected"
   }
 }

public/_locales/zh_CN/messages.json

@@ -6,15 +6,15 @@
     "message": "一个简约的双语对照翻译扩展 & 油猴脚本"
   },
   "toggle_translate": {
-    "message": "开启翻译 (Alt+Q)"
+    "message": "开启翻译"
   },
   "toggle_style": {
-    "message": "切换样式 (Alt+C)"
+    "message": "切换样式"
   },
   "open_options": {
-    "message": "打开设置 (Alt+O)"
+    "message": "打开设置"
   },
   "open_tranbox": {
-    "message": "翻译弹窗/选中文字 (Alt+S)"
+    "message": "翻译弹窗/选中文字"
   }
 }

src/background.js

@@ -9,6 +9,7 @@ import {
   MSG_TRANS_TOGGLE_STYLE,
   MSG_OPEN_TRANBOX,
   MSG_CONTEXT_MENUS,
+  MSG_COMMAND_SHORTCUTS,
   CMD_TOGGLE_TRANSLATE,
   CMD_TOGGLE_STYLE,
   CMD_OPEN_OPTIONS,
@@ -138,6 +139,16 @@ browser.runtime.onMessage.addListener(
           removeContextMenus();
         }
         break;
+      case MSG_COMMAND_SHORTCUTS:
+        browser.commands
+          .getAll()
+          .then((commands) => {
+            sendResponse({ data: commands });
+          })
+          .catch((error) => {
+            sendResponse({ error: error.message });
+          });
+        break;
       default:
         sendResponse({ error: `message action is unavailable: ${action}` });
     }

src/config/i18n.js

@@ -112,8 +112,8 @@ export const I18N = {
     en: customApiHelpEN,
   },
   translate_alt: {
-    zh: `翻译 (Alt+Q)`,
-    en: `Translate (Alt+Q)`,
+    zh: `翻译`,
+    en: `Translate`,
   },
   basic_setting: {
     zh: `基本设置`,
@@ -232,8 +232,8 @@ export const I18N = {
     en: `Text Style`,
   },
   text_style_alt: {
-    zh: `文字样式 (Alt+C)`,
-    en: `Text Style (Alt+C)`,
+    zh: `文字样式`,
+    en: `Text Style`,
   },
   bg_color: {
     zh: `样式颜色`,

src/config/index.js

@@ -65,6 +65,7 @@ export const MSG_TRANS_GETRULE = "trans_getrule";
 export const MSG_TRANS_PUTRULE = "trans_putrule";
 export const MSG_TRANS_CURRULE = "trans_currule";
 export const MSG_CONTEXT_MENUS = "context_menus";
+export const MSG_COMMAND_SHORTCUTS = "command_shortcuts";
 
 export const THEME_LIGHT = "light";
 export const THEME_DARK = "dark";

src/views/Action/index.js

@@ -99,7 +99,7 @@ export default function Action({ translator, fab }) {
       contextMenus &&
         menuCommandIds.push(
           GM.registerMenuCommand(
-            "Toggle Translate (Alt+Q)",
+            "Toggle Translate",
             (event) => {
               translator.toggle();
               sendIframeMsg(MSG_TRANS_TOGGLE);
@@ -108,7 +108,7 @@ export default function Action({ translator, fab }) {
             "Q"
           ),
           GM.registerMenuCommand(
-            "Toggle Style (Alt+C)",
+            "Toggle Style",
             (event) => {
               translator.toggleStyle();
               sendIframeMsg(MSG_TRANS_TOGGLE_STYLE);
@@ -117,7 +117,7 @@ export default function Action({ translator, fab }) {
             "C"
           ),
           GM.registerMenuCommand(
-            "Open Menu (Alt+K)",
+            "Open Menu",
             (event) => {
               setShowPopup((pre) => !pre);
             },

src/views/Popup/index.js

@@ -18,6 +18,7 @@ import {
   MSG_TRANS_PUTRULE,
   MSG_OPEN_OPTIONS,
   MSG_SAVE_RULE,
+  MSG_COMMAND_SHORTCUTS,
   OPT_TRANS_ALL,
   OPT_LANGS_FROM,
   OPT_LANGS_TO,
@@ -30,6 +31,7 @@ import { tryClearCaches } from "../../libs";
 export default function Popup({ setShowPopup, translator: tran }) {
   const i18n = useI18n();
   const [rule, setRule] = useState(tran?.rule);
+  const [commands, setCommands] = useState({});
 
   const handleOpenSetting = () => {
     if (!tran) {
@@ -111,6 +113,32 @@ export default function Popup({ setShowPopup, translator: tran }) {
     })();
   }, [tran]);
 
+  useEffect(() => {
+    (async () => {
+      try {
+        const commands = {};
+        if (isExt) {
+          const res = await sendBgMsg(MSG_COMMAND_SHORTCUTS);
+          if (!res.error) {
+            res.data.forEach(({ name, shortcut }) => {
+              commands[name] = shortcut;
+            });
+          }
+        } else {
+          const shortcuts = tran.setting.shortcuts;
+          if (shortcuts) {
+            Object.entries(shortcuts).forEach(([key, val]) => {
+              commands[key] = val.join("+");
+            });
+          }
+        }
+        setCommands(commands);
+      } catch (err) {
+        console.log("[query cmds]", err);
+      }
+    })();
+  }, [tran]);
+
   if (!rule) {
     return (
       <Box minWidth={300}>
@@ -153,7 +181,11 @@ export default function Popup({ setShowPopup, translator: tran }) {
                 onChange={handleTransToggle}
               />
             }
-            label={i18n("translate_alt")}
+            label={
+              commands["toggleTranslate"]
+                ? `${i18n("translate_alt")}(${commands["toggleTranslate"]})`
+                : i18n("translate_alt")
+            }
           />
         </Stack>
 
@@ -211,7 +243,11 @@ export default function Popup({ setShowPopup, translator: tran }) {
           size="small"
           value={textStyle}
           name="textStyle"
-          label={i18n("text_style_alt")}
+          label={
+            commands["toggleStyle"]
+              ? `${i18n("text_style_alt")}(${commands["toggleStyle"]})`
+              : i18n("text_style_alt")
+          }
           onChange={handleChange}
         >
           {OPT_STYLE_ALL.map((item) => (

src/views/Selection/index.js

@@ -109,7 +109,7 @@ export default function Slection({ contextMenus, tranboxSetting, transApis }) {
       contextMenus &&
         menuCommandIds.push(
           GM.registerMenuCommand(
-            "Translate Selected Text (Alt+S)",
+            "Translate Selected Text",
             (event) => {
               handleTranbox();
             },