add context menus: open tranbox

public/_locales/en/messages.json

@@ -14,6 +14,9 @@
   "open_options": {
     "message": "Open Options (Alt+O)"
   },
+  "open_tranbox": {
+    "message": "Open Translate Popup (Alt+B)"
+  },
   "translate_selected": {
     "message": "Translate Selected Text (Alt+S)"
   }

public/_locales/zh_CN/messages.json

@@ -14,6 +14,9 @@
   "open_options": {
     "message": "打开设置 (Alt+O)"
   },
+  "open_tranbox": {
+    "message": "打开翻译弹窗 (Alt+B)"
+  },
   "translate_selected": {
     "message": "翻译选中文字 (Alt+S)"
   }

src/background.js

@@ -8,9 +8,11 @@ import {
   MSG_SAVE_RULE,
   MSG_TRANS_TOGGLE_STYLE,
   MSG_TRANSLATE_SELECTED,
+  MSG_OPEN_TRANBOX,
   CMD_TOGGLE_TRANSLATE,
   CMD_TOGGLE_STYLE,
   CMD_OPEN_OPTIONS,
+  CMD_OPEN_TRANBOX,
   CMD_TRANSLATE_SELECTED,
 } from "./config";
 import { getSettingWithDefault, tryInitDefaultData } from "./libs/storage";
@@ -55,6 +57,11 @@ browser.runtime.onInstalled.addListener(() => {
     type: "separator",
     contexts: ["all"],
   });
+  browser.contextMenus.create({
+    id: CMD_OPEN_TRANBOX,
+    title: browser.i18n.getMessage("open_tranbox"),
+    contexts: ["all"],
+  });
   browser.contextMenus.create({
     id: CMD_OPEN_OPTIONS,
     title: browser.i18n.getMessage("open_options"),
@@ -147,6 +154,9 @@ browser.contextMenus.onClicked.addListener(({ menuItemId }) => {
     case CMD_TRANSLATE_SELECTED:
       sendTabMsg(MSG_TRANSLATE_SELECTED);
       break;
+    case CMD_OPEN_TRANBOX:
+      sendTabMsg(MSG_OPEN_TRANBOX);
+      break;
     case CMD_OPEN_OPTIONS:
       browser.runtime.openOptionsPage();
       break;

src/config/index.js

@@ -33,6 +33,7 @@ export const STOKEY_WEBFIXCACHE_PREFIX = `${APP_NAME}_webfixcache_`;
 export const CMD_TOGGLE_TRANSLATE = "toggleTranslate";
 export const CMD_TOGGLE_STYLE = "toggleStyle";
 export const CMD_OPEN_OPTIONS = "openOptions";
+export const CMD_OPEN_TRANBOX = "openTranbox";
 export const CMD_TRANSLATE_SELECTED = "translateSelected";
 
 export const CLIENT_WEB = "web";
@@ -60,6 +61,7 @@ export const MSG_SAVE_RULE = "save_rule";
 export const MSG_TRANS_TOGGLE = "trans_toggle";
 export const MSG_TRANS_TOGGLE_STYLE = "trans_toggle_style";
 export const MSG_TRANSLATE_SELECTED = "translate_selected";
+export const MSG_OPEN_TRANBOX = "open_tranbox";
 export const MSG_TRANS_GETRULE = "trans_getrule";
 export const MSG_TRANS_PUTRULE = "trans_putrule";
 export const MSG_TRANS_CURRULE = "trans_currule";

src/content.js

@@ -3,6 +3,7 @@ import {
   MSG_TRANS_TOGGLE,
   MSG_TRANS_TOGGLE_STYLE,
   MSG_TRANSLATE_SELECTED,
+  MSG_OPEN_TRANBOX,
   MSG_TRANS_GETRULE,
   MSG_TRANS_PUTRULE,
 } from "./config";
@@ -39,6 +40,9 @@ function runtimeListener(translator) {
       case MSG_TRANSLATE_SELECTED:
         window.dispatchEvent(new CustomEvent(MSG_TRANSLATE_SELECTED));
         break;
+      case MSG_OPEN_TRANBOX:
+        window.dispatchEvent(new CustomEvent(MSG_OPEN_TRANBOX));
+        break;
       default:
         return { error: `message action is unavailable: ${action}` };
     }

src/views/Popup/Header.js

@@ -1,4 +1,3 @@
-import Box from "@mui/material/Box";
 import IconButton from "@mui/material/IconButton";
 import CloseIcon from "@mui/icons-material/Close";
 import HomeIcon from "@mui/icons-material/Home";

src/views/Selection/index.js

@@ -3,7 +3,11 @@ import TranBtn from "./TranBtn";
 import TranBox from "./TranBox";
 import { shortcutRegister } from "../../libs/shortcut";
 import { sleep } from "../../libs/utils";
-import { MSG_TRANSLATE_SELECTED, DEFAULT_TRANSEL_SHORTCUT } from "../../config";
+import {
+  MSG_TRANSLATE_SELECTED,
+  MSG_OPEN_TRANBOX,
+  DEFAULT_TRANSEL_SHORTCUT,
+} from "../../config";
 
 export default function Slection({ tranboxSetting, transApis }) {
   const [showBox, setShowBox] = useState(false);
@@ -90,6 +94,16 @@ export default function Slection({ tranboxSetting, transApis }) {
     };
   }, [handleTranSelected]);
 
+  useEffect(() => {
+    const handleOpenTranbox = () => {
+      setShowBox((pre) => !pre);
+    };
+    window.addEventListener(MSG_OPEN_TRANBOX, handleOpenTranbox);
+    return () => {
+      window.removeEventListener(MSG_OPEN_TRANBOX, handleOpenTranbox);
+    };
+  }, []);
+
   return (
     <>
       {showBox && (