add shortcut: Toggle Style

public/_locales/en/messages.json

@@ -7,5 +7,8 @@
   },
   "toggle_translate": {
     "message": "Toggle Translate"
+  },
+  "toggle_style": {
+    "message": "Toggle Style"
   }
 }

public/_locales/zh_CN/messages.json

@@ -7,5 +7,8 @@
   },
   "toggle_translate": {
     "message": "切换翻译"
+  },
+  "toggle_style": {
+    "message": "切换样式"
   }
 }

public/manifest.firefox.json

@@ -21,6 +21,12 @@
         "default": "Alt+Q"
       },
       "description": "__MSG_toggle_translate__"
+    },
+    "toggleStyle": {
+      "suggested_key": {
+        "default": "Alt+C"
+      },
+      "description": "__MSG_toggle_style__"
     }
   },
   "permissions": ["<all_urls>", "storage"],

public/manifest.json

@@ -22,6 +22,12 @@
         "default": "Alt+Q"
       },
       "description": "__MSG_toggle_translate__"
+    },
+    "toggleStyle": {
+      "suggested_key": {
+        "default": "Alt+C"
+      },
+      "description": "__MSG_toggle_style__"
     }
   },
   "permissions": ["storage"],

src/background.js

@@ -4,7 +4,9 @@ import {
   MSG_FETCH_LIMIT,
   MSG_FETCH_CLEAR,
   MSG_TRANS_TOGGLE,
+  MSG_TRANS_TOGGLE_STYLE,
   CMD_TOGGLE_TRANSLATE,
+  CMD_TOGGLE_STYLE,
   DEFAULT_SETTING,
   DEFAULT_RULES,
   DEFAULT_SYNC,
@@ -87,6 +89,9 @@ browser.commands.onCommand.addListener((command) => {
     case CMD_TOGGLE_TRANSLATE:
       sendTabMsg(MSG_TRANS_TOGGLE);
       break;
+    case CMD_TOGGLE_STYLE:
+      sendTabMsg(MSG_TRANS_TOGGLE_STYLE);
+      break;
     default:
   }
 });

src/config/index.js

@@ -19,6 +19,7 @@ export const STOKEY_FAB = `${APP_NAME}_fab`;
 export const STOKEY_RULESCACHE_PREFIX = `${APP_NAME}_rulescache_`;
 
 export const CMD_TOGGLE_TRANSLATE = "toggleTranslate";
+export const CMD_TOGGLE_STYLE = "toggleStyle";
 
 export const CLIENT_WEB = "web";
 export const CLIENT_CHROME = "chrome";
@@ -39,6 +40,7 @@ export const MSG_FETCH = "fetch";
 export const MSG_FETCH_LIMIT = "fetch_limit";
 export const MSG_FETCH_CLEAR = "fetch_clear";
 export const MSG_TRANS_TOGGLE = "trans_toggle";
+export const MSG_TRANS_TOGGLE_STYLE = "trans_toggle_style";
 export const MSG_TRANS_GETRULE = "trans_getrule";
 export const MSG_TRANS_PUTRULE = "trans_putrule";
 export const MSG_TRANS_CURRULE = "trans_currule";

src/content.js

@@ -1,6 +1,7 @@
 import { browser } from "./libs/browser";
 import {
   MSG_TRANS_TOGGLE,
+  MSG_TRANS_TOGGLE_STYLE,
   MSG_TRANS_GETRULE,
   MSG_TRANS_PUTRULE,
 } from "./config";
@@ -22,6 +23,9 @@ import { Translator } from "./libs/translator";
       case MSG_TRANS_TOGGLE:
         translator.toggle();
         break;
+      case MSG_TRANS_TOGGLE_STYLE:
+        translator.toggleStyle();
+        break;
       case MSG_TRANS_GETRULE:
         break;
       case MSG_TRANS_PUTRULE:

src/libs/translator.js

@@ -5,6 +5,8 @@ import {
   TRANS_MAX_LENGTH,
   EVENT_KISS,
   MSG_TRANS_CURRULE,
+  OPT_STYLE_DASHLINE,
+  OPT_STYLE_FUZZY,
 } from "../config";
 import { queryEls } from ".";
 import Content from "../views/Content";
@@ -86,6 +88,14 @@ export class Translator {
     }
   };
 
+  toggleStyle = () => {
+    const textStyle =
+      this.rule.textStyle === OPT_STYLE_FUZZY
+        ? OPT_STYLE_DASHLINE
+        : OPT_STYLE_FUZZY;
+    this.rule = { ...this.rule, textStyle };
+  };
+
   _register = () => {
     // 监听节点变化
     this._mutaObserver.observe(document, {

src/userscript.js

@@ -59,9 +59,15 @@ import { Translator } from "./libs/translator";
   GM.registerMenuCommand(
     "Toggle Translate",
     (event) => {
-      // console.log("Menu item selected", event);
       translator.toggle();
     },
     "Q"
   );
+  GM.registerMenuCommand(
+    "Toggle Style",
+    (event) => {
+      translator.toggleStyle();
+    },
+    "C"
+  );
 })();