v1.7.13

.env

@@ -2,7 +2,7 @@ GENERATE_SOURCEMAP=false
 
 REACT_APP_NAME=KISS Translator
 REACT_APP_NAME_CN=简约翻译
-REACT_APP_VERSION=1.7.11
+REACT_APP_VERSION=1.7.13
 
 REACT_APP_HOMEPAGE=https://github.com/fishjar/kiss-translator
 

README.en.md

@@ -1,6 +1,6 @@
 # KISS Translator
 
-A simple [bilingual translation extension & Greasemonkey script](https://github.com/fishjar/kiss-translator).
+A simple, open source [bilingual translation extension & Greasemonkey script](https://github.com/fishjar/kiss-translator).
 
 [kiss-translator.webm](https://github.com/fishjar/kiss-translator/assets/1157624/f7ba8a5c-e4a8-4d5a-823a-5c5c67a0a47f)
 
@@ -34,13 +34,14 @@ A simple [bilingual translation extension & Greasemonkey script](https://github.
   - `Alt+B` Open Translate Popup
   - `Alt+O` Open Options Page
   - `Alt+I` Input Box Translation
+  - `Alt+S` Translate Selected Text
 
 ## Install
 
 > Note: For the following reasons, it is recommended to use browser extensions first
 >
-> - Browser extension can use local language recognition
+> - Browser extensions have more complete functions (local language recognition, context menu, etc.)
-> - Grease Monkey script will encounter more usage problems
+> - Grease Monkey script will encounter more usage problems (cross domain issues, script conflicts, etc.)
 
 - [x] Browser extension
   - [x] Chrome [Installation address](https://chrome.google.com/webstore/detail/kiss-translator/bdiifdefkgmcblbcghdlonllpjhhjgof?hl=zh-CN)
@@ -48,9 +49,9 @@ A simple [bilingual translation extension & Greasemonkey script](https://github.
   - [x] Firefox [Installation address](https://addons.mozilla.org/zh-CN/firefox/addon/kiss-translator/)
   - [ ] Safari
 - [x] GreaseMonkey Script
-  - [x] Chrome/Edge/Firefox ([Tampermonkey](https://www.tampermonkey.net/)/[Violentmonkey](https://violentmonkey.github.io/)) [Installation link 1](https://fishjar.github.io/kiss-translator/kiss-translator.user.js)、 [Installation link 2](https://kiss-translator.rayjar.com/kiss-translator.user.js)
+  - [x] Chrome/Edge/Firefox ([Tampermonkey](https://www.tampermonkey.net/)/[Violentmonkey](https://violentmonkey.github.io/)) [Installation link](https://fishjar.github.io/kiss-translator/kiss-translator.user.js)
     - Greasy Fork [Installation address](https://greasyfork.org/zh-CN/scripts/472840-kiss-translator)
-  - [x] iOS Safari ([Userscripts Safari](https://github.com/quoid/userscripts)) [Installation link 1](https://fishjar.github.io/kiss-translator/kiss-translator-ios-safari.user.js)、 [Installation link 2](https://kiss-translator.rayjar.com/kiss-translator.user-ios-safari.js)
+  - [x] iOS Safari ([Userscripts Safari](https://github.com/quoid/userscripts)) [Installation link](https://fishjar.github.io/kiss-translator/kiss-translator-ios-safari.user.js)
 
 ## Associated Projects
 

README.md

@@ -1,6 +1,6 @@
 # 简约翻译
 
-一个简约的 [双语对照翻译扩展 & 油猴脚本](https://github.com/fishjar/kiss-translator)。
+一个简约、开源的 [双语对照翻译扩展 & 油猴脚本](https://github.com/fishjar/kiss-translator)。
 
 [kiss-translator.webm](https://github.com/fishjar/kiss-translator/assets/1157624/f7ba8a5c-e4a8-4d5a-823a-5c5c67a0a47f)
 
@@ -34,13 +34,14 @@
   - `Alt+B` 打开翻译弹窗
   - `Alt+O` 打开设置页面
   - `Alt+I` 输入框翻译
+  - `Alt+S` 翻译选中文字
 
 ## 安装
 
 > 注：基于以下原因，建议优先使用浏览器扩展
 >
-> - 浏览器扩展可以使用本地的语言识别
+> - 浏览器扩展的功能更完整（本地语言识别、右键菜单等）
-> - 油猴脚本会遇到更多使用上的问题
+> - 油猴脚本会遇到更多使用上的问题（跨域问题、脚本冲突等）
 
 - [x] 浏览器扩展
   - [x] Chrome [安装地址](https://chrome.google.com/webstore/detail/kiss-translator/bdiifdefkgmcblbcghdlonllpjhhjgof?hl=zh-CN)
@@ -48,9 +49,9 @@
   - [x] Firefox [安装地址](https://addons.mozilla.org/zh-CN/firefox/addon/kiss-translator/)
   - [ ] Safari
 - [x] 油猴脚本
-  - [x] Chrome/Edge/Firefox ([Tampermonkey](https://www.tampermonkey.net/)/[Violentmonkey](https://violentmonkey.github.io/)) [安装链接 1](https://fishjar.github.io/kiss-translator/kiss-translator.user.js)、 [安装链接 2](https://kiss-translator.rayjar.com/kiss-translator.user.js)
+  - [x] Chrome/Edge/Firefox ([Tampermonkey](https://www.tampermonkey.net/)/[Violentmonkey](https://violentmonkey.github.io/)) [安装链接](https://fishjar.github.io/kiss-translator/kiss-translator.user.js)
     - Greasy Fork [安装地址](https://greasyfork.org/zh-CN/scripts/472840-kiss-translator)
-  - [x] iOS Safari ([Userscripts Safari](https://github.com/quoid/userscripts)) [安装链接 1](https://fishjar.github.io/kiss-translator/kiss-translator-ios-safari.user.js)、 [安装链接 2](https://kiss-translator.rayjar.com/kiss-translator.user-ios-safari.js)
+  - [x] iOS Safari ([Userscripts Safari](https://github.com/quoid/userscripts)) [安装链接](https://fishjar.github.io/kiss-translator/kiss-translator-ios-safari.user.js)
 
 ## 关联项目
 
@@ -65,7 +66,7 @@
   - 针对一些特殊网站的修正脚本。
   - 以便翻译软件得到更好的展示效果。
 - 翻译接口代理: [https://github.com/fishjar/kiss-proxy](https://github.com/fishjar/kiss-proxy)
-  - 如果访问某个翻译接口遇到网络问题，这个代理服务也许可以帮你到你。
+  - 如果访问某个翻译接口遇到网络问题，这个代理服务也许可以帮到你。
   - 自己部署，自己管理。
 - 简约词典插件: [https://github.com/fishjar/kiss-dictionary](https://github.com/fishjar/kiss-dictionary)
   - 搭配本项目一起使用的划词翻译插件。

package.json

@@ -1,7 +1,7 @@
 {
   "name": "kiss-translator",
   "description": "A minimalist bilingual translation Extension & Greasemonkey Script",
-  "version": "1.7.11",
+  "version": "1.7.13",
   "author": "Gabe<yugang2002@gmail.com>",
   "private": true,
   "dependencies": {
@@ -30,7 +30,6 @@
     "build:userscript": "rm -rf build/userscript && mkdir build/userscript && cp build/web/*.user.js build/userscript/",
     "build:rules": "babel-node src/rules.js",
     "build": "pnpm build:chrome && pnpm build:edge && pnpm build:firefox && pnpm build:web && pnpm build:userscript-ios && pnpm build:userscript && pnpm build:rules",
-    "deploy:web": "wrangler pages deploy ./build/web --project-name kiss-translator",
     "test": "react-app-rewired test",
     "eject": "react-scripts eject"
   },

public/_locales/en/messages.json

@@ -6,12 +6,18 @@
     "message": "A simple bilingual translation extension & Greasemonkey script"
   },
   "toggle_translate": {
-    "message": "Toggle Translate"
+    "message": "Toggle Translate (Alt+Q)"
   },
   "toggle_style": {
-    "message": "Toggle Style"
+    "message": "Toggle Style (Alt+C)"
   },
   "open_options": {
-    "message": "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

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

public/manifest.firefox.json

@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "__MSG_app_name__",
   "description": "__MSG_app_description__",
-  "version": "1.7.11",
+  "version": "1.7.13",
   "default_locale": "en",
   "author": "Gabe<yugang2002@gmail.com>",
   "homepage_url": "https://github.com/fishjar/kiss-translator",
@@ -41,7 +41,7 @@
       "description": "__MSG_open_options__"
     }
   },
-  "permissions": ["<all_urls>", "storage"],
+  "permissions": ["<all_urls>", "storage", "contextMenus"],
   "icons": {
     "16": "images/logo16.png",
     "32": "images/logo32.png",

public/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "__MSG_app_name__",
   "description": "__MSG_app_description__",
-  "version": "1.7.11",
+  "version": "1.7.13",
   "default_locale": "en",
   "author": "Gabe<yugang2002@gmail.com>",
   "homepage_url": "https://github.com/fishjar/kiss-translator",
@@ -42,7 +42,7 @@
       "description": "__MSG_open_options__"
     }
   },
-  "permissions": ["storage"],
+  "permissions": ["storage", "contextMenus"],
   "host_permissions": ["<all_urls>"],
   "icons": {
     "16": "images/logo16.png",

src/apis/index.js

@@ -111,11 +111,15 @@ export const apiTranslate = async ({
   let trText = "";
   let isSame = false;
 
+  if (!text) {
+    return [trText, true];
+  }
+
   const from =
     OPT_LANGS_SPECIAL[translator].get(fromLang) ??
     OPT_LANGS_SPECIAL[translator].get("auto");
   const to = OPT_LANGS_SPECIAL[translator].get(toLang);
-  if (!text || !to) {
+  if (!to) {
     console.log(`[trans] target lang: ${toLang} not support`);
     return [trText, isSame];
   }

src/background.js

@@ -7,9 +7,13 @@ import {
   MSG_OPEN_OPTIONS,
   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";
 import { trySyncSettingAndRules } from "./libs/sync";
@@ -26,14 +30,49 @@ globalThis.ContextType = "BACKGROUND";
  */
 browser.runtime.onInstalled.addListener(() => {
   tryInitDefaultData();
+
+  // 右键菜单
+  browser.contextMenus.create({
+    id: CMD_TRANSLATE_SELECTED,
+    title: browser.i18n.getMessage("translate_selected"),
+    contexts: ["selection"],
+  });
+  browser.contextMenus.create({
+    id: "selection_separator",
+    type: "separator",
+    contexts: ["selection"],
+  });
+  browser.contextMenus.create({
+    id: CMD_TOGGLE_TRANSLATE,
+    title: browser.i18n.getMessage("toggle_translate"),
+    contexts: ["all"],
+  });
+  browser.contextMenus.create({
+    id: CMD_TOGGLE_STYLE,
+    title: browser.i18n.getMessage("toggle_style"),
+    contexts: ["all"],
+  });
+  browser.contextMenus.create({
+    id: "options_separator",
+    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"),
+    contexts: ["all"],
+  });
 });
 
 /**
  * 浏览器启动
  */
 browser.runtime.onStartup.addListener(async () => {
-  console.log("browser onStartup");
-
   // 同步数据
   await trySyncSettingAndRules();
 
@@ -60,7 +99,7 @@ browser.runtime.onMessage.addListener(
             sendResponse({ data });
           })
           .catch((error) => {
-            sendResponse({ error: error.message });
+            sendResponse({ error: error.message, cause: error.cause });
           });
         break;
       case MSG_FETCH_LIMIT:
@@ -103,3 +142,24 @@ browser.commands.onCommand.addListener((command) => {
     default:
   }
 });
+
+browser.contextMenus.onClicked.addListener(({ menuItemId }) => {
+  switch (menuItemId) {
+    case CMD_TOGGLE_TRANSLATE:
+      sendTabMsg(MSG_TRANS_TOGGLE);
+      break;
+    case CMD_TOGGLE_STYLE:
+      sendTabMsg(MSG_TRANS_TOGGLE_STYLE);
+      break;
+    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;
+    default:
+  }
+});

src/common.js

@@ -16,6 +16,8 @@ import { Translator } from "./libs/translator";
 import { sendIframeMsg, sendParentMsg } from "./libs/iframe";
 import { matchRule } from "./libs/rules";
 import Slection from "./views/Selection";
+import { touchTapListener } from "./libs/touch";
+import { debounce } from "./libs/utils";
 
 export async function runTranslator(setting) {
   const href = document.location.href;
@@ -120,10 +122,22 @@ export function windowListener(rule) {
   });
 }
 
-export function showErr(err) {
+export function showErr(message) {
-  console.error("[KISS-Translator]", err);
   const $err = document.createElement("div");
-  $err.innerText = `KISS-Translator: ${err.message}`;
+  $err.innerText = `KISS-Translator: ${message}`;
   $err.style.cssText = "background:red; color:#fff;";
   document.body.prepend($err);
 }
+
+export function touchOperation(translator) {
+  const { touchTranslate = 2 } = translator.setting;
+  if (touchTranslate === 0) {
+    return;
+  }
+
+  const handleTap = debounce(() => {
+    translator.toggle();
+    sendIframeMsg(MSG_TRANS_TOGGLE);
+  });
+  touchTapListener(handleTap, touchTranslate);
+}

src/config/i18n.js

@@ -375,6 +375,14 @@ export const I18N = {
     zh: `选择器`,
     en: `Selector`,
   },
+  root_selector: {
+    zh: `根选择器`,
+    en: `Root Selector`,
+  },
+  fixer_function: {
+    zh: `修复函数`,
+    en: `Fixer Function`,
+  },
   import: {
     zh: `导入`,
     en: `Import`,
@@ -539,6 +547,10 @@ export const I18N = {
     zh: `隐藏悬浮按钮`,
     en: `Hide Fab Button`,
   },
+  hide_tran_button: {
+    zh: `隐藏翻译按钮`,
+    en: `Hide Translate Button`,
+  },
   show: {
     zh: `显示`,
     en: `Show`,
@@ -623,6 +635,10 @@ export const I18N = {
     zh: `显示翻译框快捷键`,
     en: `Toggle Translate Box Shortcut`,
   },
+  trigger_transel_shortcut: {
+    zh: `翻译选中文字快捷键`,
+    en: `Translate Selected Shortcut`,
+  },
   tranbtn_offset_x: {
     zh: `翻译按钮偏移X（0-100）`,
     en: `Translate Button Offset X (0-100)`,
@@ -643,4 +659,28 @@ export const I18N = {
     zh: `收藏词汇`,
     en: `Favorite Words`,
   },
+  touch_setting: {
+    zh: `触屏设置`,
+    en: `Touch Setting`,
+  },
+  touch_translate_shortcut: {
+    zh: `触屏翻译快捷方式`,
+    en: `Touch Translate Shortcut`,
+  },
+  touch_tap_0: {
+    zh: `禁用`,
+    en: `Disable`,
+  },
+  touch_tap_2: {
+    zh: `双指轻触`,
+    en: `Two finger tap`,
+  },
+  touch_tap_3: {
+    zh: `三指轻触`,
+    en: `Three finger tap`,
+  },
+  touch_tap_4: {
+    zh: `四指轻触`,
+    en: `Four finger tap`,
+  },
 };

src/config/index.js

@@ -23,6 +23,7 @@ export const STOKEY_MSAUTH = `${APP_NAME}_msauth`;
 export const STOKEY_BDAUTH = `${APP_NAME}_bdauth`;
 export const STOKEY_SETTING = `${APP_NAME}_setting`;
 export const STOKEY_RULES = `${APP_NAME}_rules`;
+export const STOKEY_WFRULES = `${APP_NAME}_webfix_rules`;
 export const STOKEY_WORDS = `${APP_NAME}_words`;
 export const STOKEY_SYNC = `${APP_NAME}_sync`;
 export const STOKEY_FAB = `${APP_NAME}_fab`;
@@ -32,6 +33,8 @@ 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";
 export const CLIENT_CHROME = "chrome";
@@ -41,6 +44,7 @@ export const CLIENT_USERSCRIPT = "userscript";
 export const CLIENT_EXTS = [CLIENT_CHROME, CLIENT_EDGE, CLIENT_FIREFOX];
 
 export const KV_RULES_KEY = "kiss-rules.json";
+export const KV_WFRULES_KEY = "kiss-webfix.json";
 export const KV_WORDS_KEY = "kiss-words.json";
 export const KV_RULES_SHARE_KEY = "kiss-rules-share.json";
 export const KV_SETTING_KEY = "kiss-setting.json";
@@ -56,6 +60,8 @@ export const MSG_OPEN_OPTIONS = "open_options";
 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";
@@ -332,14 +338,17 @@ export const DEFAULT_INPUT_RULE = {
 
 // 划词翻译
 export const DEFAULT_TRANBOX_SHORTCUT = ["AltLeft", "KeyB"];
+export const DEFAULT_TRANSEL_SHORTCUT = ["AltLeft", "KeyS"];
 export const DEFAULT_TRANBOX_SETTING = {
   transOpen: true,
   translator: OPT_TRANS_MICROSOFT,
   fromLang: "auto",
   toLang: "zh-CN",
   tranboxShortcut: DEFAULT_TRANBOX_SHORTCUT,
+  transelShortcut: DEFAULT_TRANSEL_SHORTCUT,
   btnOffsetX: 10,
   btnOffsetY: 10,
+  hideTranBtn: false,
 };
 
 // 订阅列表
@@ -423,6 +432,7 @@ export const DEFAULT_SETTING = {
   shortcuts: DEFAULT_SHORTCUTS, // 快捷键
   inputRule: DEFAULT_INPUT_RULE, // 输入框设置
   tranboxSetting: DEFAULT_TRANBOX_SETTING, // 划词翻译设置
+  touchTranslate: 2, // 触屏翻译
 };
 
 export const DEFAULT_RULES = [GLOBLA_RULE];

src/config/rules.js

@@ -1,6 +1,4 @@
-const els = `li, p, h1, h2, h3, h4, h5, h6, dd, blockquote`;
+export const DEFAULT_SELECTOR = `:is(li, p, h1, h2, h3, h4, h5, h6, dd, blockquote)`;
-
-export const DEFAULT_SELECTOR = `:is(${els})`;
 
 export const GLOBAL_KEY = "*";
 export const REMAIN_KEY = "-";
@@ -42,145 +40,66 @@ export const DEFAULT_OW_RULE = {
   textDiyStyle: DEFAULT_DIY_STYLE,
 };
 
-const RULES = [
+const RULES_MAP = {
-  {
+  "www.google.com/search": `h3, .IsZvec, .VwiC3b`,
-    pattern: `www.google.com/search`,
+  "news.google.com": `[role="link"], .DY5T1d, .ifw3f, ${DEFAULT_SELECTOR}`,
-    selector: `h3, .IsZvec, .VwiC3b`,
+  "www.foxnews.com": `h1, h2, .title, .sidebar [data-type="Title"], .article-content ${DEFAULT_SELECTOR}; [data-spotim-module="conversation"]>div >>> [data-spot-im-class="message-text"] p,  [data-spot-im-class="message-text"]`,
-  },
+  "bearblog.dev, www.theverge.com, www.tampermonkey.net/documentation.php": `${DEFAULT_SELECTOR}`,
-  {
+  "themessenger.com": `.leading-tight, .leading-tighter, .my-2 p, .font-body p, article ${DEFAULT_SELECTOR}`,
-    pattern: `news.google.com`,
+  "www.telegraph.co.uk, go.dev/doc/": `article ${DEFAULT_SELECTOR}`,
-    selector: `h4`,
+  "www.theguardian.com": `.show-underline, .dcr-hup5wm div, .dcr-7vl6y8 div, .dcr-12evv1c, figcaption, article ${DEFAULT_SELECTOR}, [data-cy="mostviewed-footer"] h4`,
-  },
+  "www.semafor.com": `${DEFAULT_SELECTOR}, .styles_intro__IYj__, [class*="styles_description"]`,
-  {
+  "www.noemamag.com": `.splash__title, .single-card__title, .single-card__type, .single-card__topic, .highlighted-content__title, .single-card__author, article ${DEFAULT_SELECTOR}, .quote__text, .wp-caption-text div`,
-    pattern: `www.foxnews.com`,
+  "restofworld.org": `${DEFAULT_SELECTOR}, .recirc-story__headline, .recirc-story__dek`,
-    selector: `h1, h2, .title, .sidebar [data-type="Title"], .article-content ${DEFAULT_SELECTOR}; [data-spotim-module="conversation"]>div >>> [data-spot-im-class="message-text"] p,  [data-spot-im-class="message-text"]`,
+  "www.axios.com": `.h7, ${DEFAULT_SELECTOR}`,
-  },
+  "www.newyorker.com": `.summary-item__hed, .summary-item__dek, .summary-collection-grid__dek, .dqtvfu, .rubric__link, .caption, article ${DEFAULT_SELECTOR}, .HEhan ${DEFAULT_SELECTOR}, .ContributorBioBio-fBolsO`,
-  {
+  "time.com": `h1, h3, .summary, .video-title, #article-body ${DEFAULT_SELECTOR}, .image-wrap-container .credit.body-caption, .media-heading`,
-    pattern: `bearblog.dev, www.theverge.com, www.tampermonkey.net/documentation.php`,
+  "www.dw.com": `.ts-teaser-title a, .news-title a, .title a, .teaser-description a, .hbudab h3, .hbudab p, figcaption ,article ${DEFAULT_SELECTOR}`,
-    selector: DEFAULT_SELECTOR,
+  "www.bbc.com": `h1, h2, .media__link, .media__summary, article ${DEFAULT_SELECTOR}, .ssrcss-y7krbn-Stack, .ssrcss-17zglt8-PromoHeadline, .ssrcss-18cjaf3-Headline, .gs-c-promo-heading__title, .gs-c-promo-summary, .media__content h3, .article__intro`,
-  },
+  "www.chinadaily.com.cn": `h1, .tMain [shape="rect"], .cMain [shape="rect"], .photo_art [shape="rect"], .mai_r [shape="rect"], .lisBox li, #Content ${DEFAULT_SELECTOR}`,
-  {
+  "www.facebook.com": `[role="main"] [dir="auto"]`,
-    pattern: `themessenger.com`,
+  "www.reddit.com": `[slot="title"], [slot="text-body"] ${DEFAULT_SELECTOR}, #-post-rtjson-content p`,
-    selector: `.leading-tight, .leading-tighter, .my-2 p, .font-body p, article ${DEFAULT_SELECTOR}`,
+  "www.quora.com": `.qu-wordBreak--break-word`,
-  },
+  "edition.cnn.com": `.container__title, .container__headline, .headline__text, .image__caption, [data-type="Title"], .article__content ${DEFAULT_SELECTOR}`,
-  {
+  "www.reuters.com": `#main-content [data-testid="Heading"], #main-content [data-testid="Body"], .article-body__content__17Yit ${DEFAULT_SELECTOR}`,
-    pattern: `www.telegraph.co.uk`,
+  "www.bloomberg.com": `[data-component="headline"], [data-component="related-item-headline"], [data-component="title"], article ${DEFAULT_SELECTOR}`,
-    selector: `article ${DEFAULT_SELECTOR}`,
+  "deno.land, docs.github.com": `main ${DEFAULT_SELECTOR}`,
-  },
+  "doc.rust-lang.org": `.content ${DEFAULT_SELECTOR}`,
-  {
+  "www.indiehackers.com": `h1, h3, .content ${DEFAULT_SELECTOR}, .feed-item__title-link`,
-    pattern: `www.theguardian.com`,
+  "platform.openai.com/docs": `.docs-body ${DEFAULT_SELECTOR}`,
-    selector: `.show-underline, .dcr-hup5wm div, .dcr-7vl6y8 div, .dcr-12evv1c, figcaption, article ${DEFAULT_SELECTOR}, [data-cy="mostviewed-footer"] h4`,
+  "en.wikipedia.org": `h1, .mw-parser-output ${DEFAULT_SELECTOR}`,
-  },
+  "stackoverflow.com": `h1, .s-prose p, .comment-body .comment-copy`,
-  {
+  "www.npmjs.com/package, developer.chrome.com/docs, medium.com, developers.cloudflare.com, react.dev, create-react-app.dev, pytorch.org": `article ${DEFAULT_SELECTOR}`,
-    pattern: `www.semafor.com`,
+  "news.ycombinator.com": `.title, .commtext`,
-    selector: `${DEFAULT_SELECTOR}, .styles_intro__IYj__, [class*="styles_description"]`,
+  "github.com": `.markdown-body ${DEFAULT_SELECTOR}, .repo-description p, .Layout-sidebar .f4, .container-lg .py-4 .f5, .container-lg .my-4 .f5, .Box-row .pr-4, .Box-row article .mt-1, [itemprop="description"], .markdown-title, bdi, .ws-pre-wrap, .status-meta, span.status-meta, .col-10.color-fg-muted, .TimelineItem-body, .pinned-item-list-item-content .color-fg-muted, .markdown-body td, .markdown-body th`,
-  },
+  "twitter.com": `[data-testid="tweetText"]`,
-  {
+  "m.youtube.com": `.slim-video-information-title .yt-core-attributed-string, .media-item-headline .yt-core-attributed-string, .comment-text .yt-core-attributed-string, .typography-body-2b .yt-core-attributed-string, #ytp-caption-window-container .ytp-caption-segment`,
-    pattern: `www.noemamag.com`,
+  "www.youtube.com": `h1, #video-title, #content-text, #title, yt-attributed-string>span>span, #ytp-caption-window-container .ytp-caption-segment`,
-    selector: `.splash__title, .single-card__title, .single-card__type, .single-card__topic, .highlighted-content__title, .single-card__author, article ${DEFAULT_SELECTOR}, .quote__text, .wp-caption-text div`,
+  "bard.google.com": `.query-content ${DEFAULT_SELECTOR}, message-content ${DEFAULT_SELECTOR}`,
-  },
+  "www.bing.com": `.b_algoSlug, .rwrl_padref; .cib-serp-main >>> .ac-textBlock ${DEFAULT_SELECTOR}, .text-message-content div`,
-  {
+  "www.phoronix.com": `article ${DEFAULT_SELECTOR}`,
-    pattern: `restofworld.org`,
+  "wx2.qq.com": `.js_message_plain`,
-    selector: `${DEFAULT_SELECTOR}, .recirc-story__headline, .recirc-story__dek`,
+  "app.slack.com/client/": `.p-rich_text_section, .c-message_attachment__text, .p-rich_text_list li`,
-  },
+  "discord.com/channels/": `div[id^=message-content]`,
-  {
+  "t.me/s/": `.js-message_text ${DEFAULT_SELECTOR}`,
-    pattern: `www.axios.com`,
+  "web.telegram.org/k/": `.message, .bot-commands-list-element-description, .reply-markup-button-text`,
-    selector: `.h7, ${DEFAULT_SELECTOR}`,
+  "web.telegram.org/a/": `.message, .text-content, .bot-commands-list-element-description, .reply-markup-button-text`,
-  },
+  "chromereleases.googleblog.com": `.title, .publishdate, p, i, .header-desc, .header-title, .text`,
-  {
+  "www.instagram.com/": `h1, article span[dir=auto] > span[dir=auto], ._ab1y`,
-    pattern: `www.newyorker.com`,
+  "www.instagram.com/p/,www.instagram.com/reels/": `h1, div[class='x9f619 xjbqb8w x78zum5 x168nmei x13lgxp2 x5pf9jr xo71vjh x1uhb9sk x1plvlek xryxfnj x1c4vz4f x2lah0s xdt5ytf xqjyukv x1cy8zhl x1oa3qoh x1nhvcw1'] > span[class='x1lliihq x1plvlek xryxfnj x1n2onr6 x193iq5w xeuugli x1fj9vlw x13faqbe x1vvkbs x1s928wv xhkezso x1gmr53x x1cpjm7i x1fgarty x1943h6x x1i0vuye xvs91rp xo1l8bm x5n08af x10wh9bi x1wdrske x8viiok x18hxmgj'], span[class='x193iq5w xeuugli x1fj9vlw x13faqbe x1vvkbs xt0psk2 x1i0vuye xvs91rp xo1l8bm x5n08af x10wh9bi x1wdrske x8viiok x18hxmgj']`,
-    selector: `.summary-item__hed, .summary-item__dek, .summary-collection-grid__dek, .dqtvfu, .rubric__link, .caption, article ${DEFAULT_SELECTOR}, .HEhan ${DEFAULT_SELECTOR}, .ContributorBioBio-fBolsO`,
+  "mail.google.com": `${DEFAULT_SELECTOR}, h2[data-thread-perm-id], span[data-thread-id], div[data-message-id] div[class=''], .messageBody, #views`,
-  },
+  "web.whatsapp.com": `.copyable-text > span`,
-  {
+  "chat.openai.com": `div[data-message-author-role] > div ${DEFAULT_SELECTOR}`,
-    pattern: `https://time.com/`,
+  "forum.ru-board.com": `.tit, .dats, span.post ${DEFAULT_SELECTOR}`,
-    selector: `h1, h3, .summary, .video-title, #article-body ${DEFAULT_SELECTOR}, .image-wrap-container .credit.body-caption, .media-heading`,
+  "education.github.com": `${DEFAULT_SELECTOR}, a, summary, span.Button-content`,
-  },
+  "blogs.windows.com": `${DEFAULT_SELECTOR}, .c-uhf-nav-link, figcaption`,
-  {
+  "developer.apple.com/documentation/": `#main ${DEFAULT_SELECTOR}, #main .abstract .content, #main .abstract.content, #main .link span`,
-    pattern: `www.dw.com`,
+};
-    selector: `.ts-teaser-title a, .news-title a, .title a, .teaser-description a, .hbudab h3, .hbudab p, figcaption ,article ${DEFAULT_SELECTOR}`,
-  },
-  {
-    pattern: `www.bbc.com`,
-    selector: `h1, h2, .media__link, .media__summary, article ${DEFAULT_SELECTOR}, .ssrcss-y7krbn-Stack, .ssrcss-1mrs5ns-PromoLink, .ssrcss-18cjaf3-Headline, .gs-c-promo-heading__title, .gs-c-promo-summary, .media__content h3, .article__intro`,
-  },
-  {
-    pattern: `www.chinadaily.com.cn`,
-    selector: `h1, .tMain [shape="rect"], .cMain [shape="rect"], .photo_art [shape="rect"], .mai_r [shape="rect"], .lisBox li, #Content ${DEFAULT_SELECTOR}`,
-  },
-  {
-    pattern: `www.facebook.com`,
-    selector: `[role="main"] [dir="auto"]`,
-  },
-  {
-    pattern: `www.reddit.com`,
-    selector: `[slot="title"], [slot="text-body"] ${DEFAULT_SELECTOR}, #-post-rtjson-content p`,
-  },
-  {
-    pattern: `www.quora.com`,
-    selector: `.qu-wordBreak--break-word`,
-  },
-  {
-    pattern: `edition.cnn.com`,
-    selector: `.container__title, .container__headline, .headline__text, .image__caption, [data-type="Title"], .article__content ${DEFAULT_SELECTOR}`,
-  },
-  {
-    pattern: `www.reuters.com`,
-    selector: `#main-content [data-testid="Heading"], #main-content [data-testid="Body"], .article-body__content__17Yit ${DEFAULT_SELECTOR}`,
-  },
-  {
-    pattern: `www.bloomberg.com`,
-    selector: `[data-component="headline"], [data-component="related-item-headline"], [data-component="title"], article ${DEFAULT_SELECTOR}`,
-  },
-  {
-    pattern: `deno.land, docs.github.com`,
-    selector: `main ${DEFAULT_SELECTOR}`,
-  },
-  {
-    pattern: `doc.rust-lang.org`,
-    selector: `#content ${DEFAULT_SELECTOR}`,
-  },
-  {
-    pattern: `www.indiehackers.com`,
-    selector: `h1, h3, .content ${DEFAULT_SELECTOR}, .feed-item__title-link`,
-  },
-  {
-    pattern: `platform.openai.com/docs`,
-    selector: `.docs-body ${DEFAULT_SELECTOR}`,
-  },
-  {
-    pattern: `en.wikipedia.org`,
-    selector: `h1, .mw-parser-output ${DEFAULT_SELECTOR}`,
-  },
-  {
-    pattern: `stackoverflow.com`,
-    selector: `h1, .s-prose p, .comment-body .comment-copy`,
-  },
-  {
-    pattern: `www.npmjs.com/package/, developer.chrome.com/docs, medium.com, developers.cloudflare.com, react.dev, create-react-app.dev, pytorch.org/`,
-    selector: `article ${DEFAULT_SELECTOR}`,
-  },
-  {
-    pattern: `news.ycombinator.com`,
-    selector: `.title, .commtext`,
-  },
-  {
-    pattern: `https://github.com/`,
-    selector: `.markdown-body ${DEFAULT_SELECTOR}, .repo-description p, .Layout-sidebar .f4, .container-lg .py-4 .f5, .container-lg .my-4 .f5, .Box-row .pr-4, .Box-row article .mt-1, [itemprop='description'], .markdown-title, bdi`,
-  },
-  {
-    pattern: `twitter.com`,
-    selector: `[data-testid='tweetText']`,
-  },
-  {
-    pattern: `youtube.com`,
-    selector: `h1, #video-title, #content-text, #title, yt-attributed-string>span>span`,
-  },
-];
 
-export const BUILTIN_RULES = RULES.sort((a, b) =>
+export const BUILTIN_RULES = Object.entries(RULES_MAP)
-  a.pattern.localeCompare(b.pattern)
+  .sort((a, b) => a[0].localeCompare(b[0]))
-).map((item) => ({
+  .map(([pattern, selector]) => ({
-  ...DEFAULT_RULE,
+    ...DEFAULT_RULE,
-  ...item,
+    pattern,
-  transOpen: "true",
+    selector,
-}));
+  }));

src/content.js

@@ -2,6 +2,8 @@ import { browser } from "./libs/browser";
 import {
   MSG_TRANS_TOGGLE,
   MSG_TRANS_TOGGLE_STYLE,
+  MSG_TRANSLATE_SELECTED,
+  MSG_OPEN_TRANBOX,
   MSG_TRANS_GETRULE,
   MSG_TRANS_PUTRULE,
 } from "./config";
@@ -15,6 +17,7 @@ import {
   showTransbox,
   windowListener,
   showErr,
+  touchOperation,
 } from "./common";
 
 function runtimeListener(translator) {
@@ -34,6 +37,12 @@ function runtimeListener(translator) {
         translator.updateRule(args);
         sendIframeMsg(MSG_TRANS_PUTRULE, args);
         break;
+      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}` };
     }
@@ -70,7 +79,11 @@ function runtimeListener(translator) {
 
     // 浮球按钮
     await showFab(translator);
+
+    // 触屏操作
+    touchOperation(translator);
   } catch (err) {
-    showErr(err);
+    console.error("[KISS-Translator]", err);
+    showErr(err.message);
   }
 })();

src/hooks/Storage.js

@@ -1,6 +1,12 @@
 import { useCallback, useEffect, useState } from "react";
 import { storage } from "../libs/storage";
 
+/**
+ * 
+ * @param {*} key 
+ * @param {*} defaultVal 需为调用hook外的常量
+ * @returns 
+ */
 export function useStorage(key, defaultVal) {
   const [loading, setLoading] = useState(false);
   const [data, setData] = useState(null);

src/hooks/Theme.js

@@ -12,10 +12,24 @@ import { THEME_DARK, THEME_LIGHT } from "../config";
 export default function Theme({ children, options }) {
   const { darkMode } = useDarkMode();
   const theme = useMemo(() => {
+    let htmlFontSize = 16;
+    try {
+      const s = window.getComputedStyle(document.body.parentNode).fontSize;
+      const fontSize = parseInt(s.replace("px", ""));
+      if (fontSize > 0 && fontSize < 1000) {
+        htmlFontSize = fontSize;
+      }
+    } catch (err) {
+      //
+    }
+
     return createTheme({
       palette: {
         mode: darkMode ? THEME_DARK : THEME_LIGHT,
       },
+      typography: {
+        htmlFontSize,
+      },
       ...options,
     });
   }, [darkMode, options]);

src/hooks/WebfixRules.js

@@ -0,0 +1,58 @@
+import { STOKEY_WFRULES, KV_WFRULES_KEY } from "../config";
+import { useStorage } from "./Storage";
+import { trySyncWebfixRules } from "../libs/sync";
+import { useCallback } from "react";
+import { useSyncMeta } from "./Sync";
+
+const DEFAULT_WFRULES = [];
+
+/**
+ * 修复规则 hook
+ * @returns
+ */
+export function useWebfixRules() {
+  const { data: list, save } = useStorage(STOKEY_WFRULES, DEFAULT_WFRULES);
+  const { updateSyncMeta } = useSyncMeta();
+
+  const updateRules = useCallback(
+    async (rules) => {
+      await save(rules);
+      await updateSyncMeta(KV_WFRULES_KEY);
+      trySyncWebfixRules();
+    },
+    [save, updateSyncMeta]
+  );
+
+  const add = useCallback(
+    async (rule) => {
+      const rules = [...list];
+      if (rules.map((item) => item.pattern).includes(rule.pattern)) {
+        return;
+      }
+      rules.unshift(rule);
+      await updateRules(rules);
+    },
+    [list, updateRules]
+  );
+
+  const del = useCallback(
+    async (pattern) => {
+      let rules = [...list];
+      rules = rules.filter((item) => item.pattern !== pattern);
+      await updateRules(rules);
+    },
+    [list, updateRules]
+  );
+
+  const put = useCallback(
+    async (pattern, obj) => {
+      const rules = [...list];
+      const rule = rules.find((r) => r.pattern === pattern);
+      rule && Object.assign(rule, obj);
+      await updateRules(rules);
+    },
+    [list, updateRules]
+  );
+
+  return { list, add, del, put };
+}

src/libs/fetch.js

@@ -55,6 +55,10 @@ export const fetchApi = async ({ input, init, transOpts, apiSetting }) => {
     [input, init] = await newTransReq(transOpts, apiSetting);
   }
 
+  if (!input) {
+    throw new Error("url is empty");
+  }
+
   if (isGm) {
     let info;
     if (window.KISS_GM) {
@@ -127,7 +131,13 @@ export const fetchData = async (
     }
 
     if (!res?.ok) {
-      throw new Error(`response: ${res.statusText}`);
+      const cause = {
+        status: res.status,
+      };
+      if (res.headers.get("Content-Type")?.includes("json")) {
+        cause.body = await res.json();
+      }
+      throw new Error(`response: [${res.status}] ${res.statusText}`, { cause });
     }
 
     // 插入缓存
@@ -163,7 +173,7 @@ export const fetchPolyfill = async (input, opts) => {
   if (isExt && !isBg()) {
     const res = await sendBgMsg(MSG_FETCH, { input, opts });
     if (res.error) {
-      throw new Error(res.error);
+      throw new Error(res.error, { cause: res.cause });
     }
     return res.data;
   }

src/libs/storage.js

@@ -1,6 +1,7 @@
 import {
   STOKEY_SETTING,
   STOKEY_RULES,
+  STOKEY_WFRULES,
   STOKEY_WORDS,
   STOKEY_FAB,
   STOKEY_SYNC,
@@ -98,6 +99,14 @@ export const getRulesWithDefault = async () =>
   (await getRules()) || DEFAULT_RULES;
 export const setRules = (val) => setObj(STOKEY_RULES, val);
 
+/**
+ * 修复规则列表
+ */
+export const getWebfixRules = () => getObj(STOKEY_WFRULES);
+export const getWebfixRulesWithDefault = async () =>
+  (await getWebfixRules()) || [];
+export const setWebfixRules = (val) => setObj(STOKEY_WFRULES, val);
+
 /**
  * 词汇列表
  */

src/libs/sync.js

@@ -2,6 +2,7 @@ import {
   APP_LCNAME,
   KV_SETTING_KEY,
   KV_RULES_KEY,
+  KV_WFRULES_KEY,
   KV_WORDS_KEY,
   KV_RULES_SHARE_KEY,
   KV_SALT_SHARE,
@@ -13,8 +14,10 @@ import {
   getSettingWithDefault,
   getRulesWithDefault,
   getWordsWithDefault,
+  getWebfixRulesWithDefault,
   setSetting,
   setRules,
+  setWebfixRules,
   setWords,
 } from "./storage";
 import { apiSyncData } from "../apis";
@@ -138,6 +141,25 @@ export const trySyncRules = async () => {
   }
 };
 
+/**
+ * 同步修复规则
+ * @returns
+ */
+const syncWebfixRules = async () => {
+  const res = await syncData(KV_WFRULES_KEY, getWebfixRulesWithDefault);
+  if (res?.isNew) {
+    await setWebfixRules(res.value);
+  }
+};
+
+export const trySyncWebfixRules = async () => {
+  try {
+    await syncWebfixRules();
+  } catch (err) {
+    console.log("[sync user webfix rules]", err);
+  }
+};
+
 /**
  * 同步词汇
  * @returns
@@ -185,11 +207,13 @@ export const syncShareRules = async ({ rules, syncUrl, syncKey }) => {
 export const syncSettingAndRules = async () => {
   await syncSetting();
   await syncRules();
+  await syncWebfixRules();
   await syncWords();
 };
 
 export const trySyncSettingAndRules = async () => {
   await trySyncSetting();
   await trySyncRules();
+  await trySyncWebfixRules();
   await trySyncWords();
 };

src/libs/touch.js

@@ -0,0 +1,12 @@
+export function touchTapListener(fn, touchsLength) {
+  const handleTouchend = (e) => {
+    if (e.touches.length === touchsLength) {
+      fn();
+    }
+  };
+
+  document.addEventListener("touchstart", handleTouchend);
+  return () => {
+    document.removeEventListener("touchstart", handleTouchend);
+  };
+}

src/libs/translator.js

@@ -349,8 +349,8 @@ export class Translator {
       // 监听鼠标悬停
       window.addEventListener("keydown", this._handleKeydown);
       this._tranNodes.forEach((_, node) => {
-        node.addEventListener("mouseover", this._handleMouseover);
+        node.addEventListener("mouseenter", this._handleMouseover);
-        node.addEventListener("mouseout", this._handleMouseout);
+        node.addEventListener("mouseleave", this._handleMouseout);
       });
     }
   };
@@ -475,15 +475,15 @@ export class Translator {
   };
 
   _handleMouseover = (e) => {
-    // console.log("mouseover", e);
+    // console.log("mouseenter", e);
     if (!this._tranNodes.has(e.target)) {
       return;
     }
 
     const key = this._setting.mouseKey.slice(3);
     if (this._setting.mouseKey === OPT_MOUSEKEY_MOUSEOVER || e[key]) {
-      e.target.removeEventListener("mouseover", this._handleMouseover);
+      e.target.removeEventListener("mouseenter", this._handleMouseover);
-      e.target.removeEventListener("mouseout", this._handleMouseout);
+      e.target.removeEventListener("mouseleave", this._handleMouseout);
       this._render(e.target);
     } else {
       this._mouseoverNode = e.target;
@@ -491,7 +491,7 @@ export class Translator {
   };
 
   _handleMouseout = (e) => {
-    // console.log("mouseout", e);
+    // console.log("mouseleave", e);
     if (!this._tranNodes.has(e.target)) {
       return;
     }
@@ -504,10 +504,13 @@ export class Translator {
     const key = this._setting.mouseKey.slice(3);
     if (e[key] && this._mouseoverNode) {
       this._mouseoverNode.removeEventListener(
-        "mouseover",
+        "mouseenter",
         this._handleMouseover
       );
-      this._mouseoverNode.removeEventListener("mouseout", this._handleMouseout);
+      this._mouseoverNode.removeEventListener(
+        "mouseleave",
+        this._handleMouseout
+      );
 
       const node = this._mouseoverNode;
       this._render(node);
@@ -536,8 +539,9 @@ export class Translator {
       // 移除鼠标悬停监听
       window.removeEventListener("keydown", this._handleKeydown);
       this._tranNodes.forEach((_, node) => {
-        node.removeEventListener("mouseover", this._handleMouseover);
+        // node.style.pointerEvents = "none";
-        node.removeEventListener("mouseout", this._handleMouseout);
+        node.removeEventListener("mouseenter", this._handleMouseover);
+        node.removeEventListener("mouseleave", this._handleMouseout);
         // 移除已插入元素
         node.querySelector(APP_LCNAME)?.remove();
       });

src/libs/webfix.js

@@ -1,5 +1,5 @@
 import { isMatch } from "./utils";
-import { getWebfix, setWebfix } from "./storage";
+import { getWebfix, setWebfix, getWebfixRulesWithDefault } from "./storage";
 import { apiFetch } from "../apis";
 
 /**
@@ -7,7 +7,16 @@ import { apiFetch } from "../apis";
  */
 const FIXER_BR = "br";
 const FIXER_BN = "bn";
+const FIXER_BR_DIV = "brToDiv";
+const FIXER_BN_DIV = "bnToDiv";
 const FIXER_FONTSIZE = "fontSize";
+export const FIXER_ALL = [
+  FIXER_BR,
+  FIXER_BN,
+  FIXER_BR_DIV,
+  FIXER_BN_DIV,
+  // FIXER_FONTSIZE,
+];
 
 /**
  * 需要修复的站点列表
@@ -54,7 +63,7 @@ const fixedSign = "kissfixed";
  * @param {*} node
  * @returns
  */
-function brFixer(node) {
+function brFixer(node, tag = "p") {
   if (node.hasAttribute(fixedSign)) {
     return;
   }
@@ -81,13 +90,13 @@ function brFixer(node) {
   var html = "";
   node.childNodes.forEach(function (child, index) {
     if (index === 0) {
-      html += "<p>";
+      html += `<${tag} class="kiss-p">`;
     }
 
     if (gapTags.indexOf(child.nodeName) !== -1) {
-      html += "</p><p>";
+      html += `</${tag}><${tag} class="kiss-p">`;
     } else if (newlineTags.indexOf(child.nodeName) !== -1) {
-      html += "</p>" + child.outerHTML + "<p>";
+      html += `</${tag}>${child.outerHTML}<${tag} class="kiss-p">`;
     } else if (child.outerHTML) {
       html += child.outerHTML;
     } else if (child.nodeValue) {
@@ -95,30 +104,34 @@ function brFixer(node) {
     }
 
     if (index === node.childNodes.length - 1) {
-      html += "</p>";
+      html += `</${tag}>`;
     }
   });
   node.innerHTML = html;
 }
 
+function brDivFixer(node) {
+  return brFixer(node, "div");
+}
+
 /**
  * 目标是将 `\n` 替换成 `p`
  * @param {*} node
  * @returns
  */
-function bnFixer(node) {
+function bnFixer(node, tag = "p") {
   if (node.hasAttribute(fixedSign)) {
     return;
   }
   node.setAttribute(fixedSign, "true");
+  node.innerHTML = node.innerHTML
+    .split("\n")
+    .map((item) => `<${tag} class="kiss-p">${item || "&nbsp;"}</${tag}>`)
+    .join("");
+}
 
-  const childs = node.childNodes;
+function bnDivFixer(node) {
-  if (childs.length === 1 && childs[0].nodeName === "#text") {
+  return bnFixer(node, "div");
-    node.innerHTML = node.innerHTML
-      .split("\n")
-      .map((item) => `<p>${item || "&nbsp;"}</p>`)
-      .join("");
-  }
 }
 
 /**
@@ -135,6 +148,8 @@ function fontSizeFixer(node) {
 const fixerMap = {
   [FIXER_BR]: brFixer,
   [FIXER_BN]: bnFixer,
+  [FIXER_BR_DIV]: brDivFixer,
+  [FIXER_BN_DIV]: bnDivFixer,
   [FIXER_FONTSIZE]: fontSizeFixer,
 };
 
@@ -148,7 +163,11 @@ function run(selector, fixer, rootSelector) {
   var mutaObserver = new MutationObserver(function (mutations) {
     mutations.forEach(function (mutation) {
       mutation.addedNodes.forEach(function (addNode) {
-        addNode.querySelectorAll(selector).forEach(fixer);
+        if (addNode && addNode.querySelectorAll) {
+          addNode.querySelectorAll(selector).forEach(function (node) {
+            fixer(node);
+          });
+        }
       });
     });
   });
@@ -159,7 +178,9 @@ function run(selector, fixer, rootSelector) {
   }
 
   rootNodes.forEach(function (rootNode) {
-    rootNode.querySelectorAll(selector).forEach(fixer);
+    rootNode.querySelectorAll(selector).forEach(function (node) {
+      fixer(node);
+    });
     mutaObserver.observe(rootNode, {
       childList: true,
       subtree: true,
@@ -206,7 +227,9 @@ export async function runWebfix({ injectWebfix }) {
     }
 
     const href = document.location.href;
-    const sites = await loadOrFetchWebfix(process.env.REACT_APP_WEBFIXURL);
+    const userSites = await getWebfixRulesWithDefault();
+    const subSites = await loadOrFetchWebfix(process.env.REACT_APP_WEBFIXURL);
+    const sites = [...userSites, ...subSites];
     for (var i = 0; i < sites.length; i++) {
       var site = sites[i];
       if (isMatch(href, site.pattern)) {

src/userscript.js

@@ -11,6 +11,7 @@ import {
   showTransbox,
   windowListener,
   showErr,
+  touchOperation,
 } from "./common";
 
 function runSettingPage() {
@@ -69,9 +70,13 @@ function runSettingPage() {
     // 浮球按钮
     await showFab(translator);
 
+    // 触屏操作
+    touchOperation(translator);
+
     // 同步订阅规则
     await trySyncAllSubRules(setting);
   } catch (err) {
-    showErr(err);
+    console.error("[KISS-Translator]", err);
+    showErr(err.message);
   }
 })();

src/views/Options/Apis.js

@@ -46,7 +46,20 @@ function TestButton({ translator, api }) {
       }
       alert.success(i18n("test_success"));
     } catch (err) {
-      alert.error(`${i18n("test_failed")}: ${err.message}`);
+      // alert.error(`${i18n("test_failed")}: ${err.message}`);
+      alert.error(
+        <>
+          <div>{`${i18n("test_failed")}: ${err.message}`}</div>
+          <pre
+            style={{
+              maxWidth: 400,
+              overflow: "auto",
+            }}
+          >
+            {JSON.stringify(err.cause || {}, null, 2)}
+          </pre>
+        </>
+      );
     } finally {
       setLoading(false);
     }

src/views/Options/Header.js

@@ -6,6 +6,7 @@ import Box from "@mui/material/Box";
 import Link from "@mui/material/Link";
 import { useI18n } from "../../hooks/I18n";
 import DarkModeButton from "./DarkModeButton";
+import Typography from "@mui/material/Typography";
 
 function Header(props) {
   const i18n = useI18n();
@@ -30,14 +31,14 @@ function Header(props) {
             <MenuIcon />
           </IconButton>
         </Box>
-        <Box sx={{ flexGrow: 1 }}>
+        <Typography component="div" sx={{ flexGrow: 1, fontWeight: "bold" }}>
           <Link
             underline="none"
             color="inherit"
             href={process.env.REACT_APP_HOMEPAGE}
             target="_blank"
           >{`${i18n("app_name")} v${process.env.REACT_APP_VERSION}`}</Link>
-        </Box>
+        </Typography>
         <DarkModeButton />
       </Toolbar>
     </AppBar>

src/views/Options/Navigator.js

@@ -13,8 +13,8 @@ import SyncIcon from "@mui/icons-material/Sync";
 import ApiIcon from "@mui/icons-material/Api";
 import SendTimeExtensionIcon from "@mui/icons-material/SendTimeExtension";
 import InputIcon from "@mui/icons-material/Input";
-import SelectAllIcon from '@mui/icons-material/SelectAll';
+import SelectAllIcon from "@mui/icons-material/SelectAll";
-import EventNoteIcon from '@mui/icons-material/EventNote';
+import EventNoteIcon from "@mui/icons-material/EventNote";
 
 function LinkItem({ label, url, icon }) {
   const match = useMatch(url);

src/views/Options/Setting.js

@@ -60,6 +60,9 @@ export default function Settings() {
       case "newlineLength":
         value = limitNumber(value, 1, 1000);
         break;
+      case "touchTranslate":
+        value = limitNumber(value, 0, 3);
+        break;
       default:
     }
     updateSetting({
@@ -86,6 +89,7 @@ export default function Settings() {
     newlineLength = TRANS_NEWLINE_LENGTH,
     mouseKey = OPT_MOUSEKEY_DISABLE,
     detectRemote = false,
+    touchTranslate = 2,
   } = setting;
   const { isHide = false } = fab || {};
 
@@ -169,6 +173,22 @@ export default function Settings() {
           </Select>
         </FormControl>
 
+        <FormControl size="small">
+          <InputLabel>{i18n("touch_translate_shortcut")}</InputLabel>
+          <Select
+            name="touchTranslate"
+            value={touchTranslate}
+            label={i18n("touch_translate_shortcut")}
+            onChange={handleChange}
+          >
+            {[0, 2, 3, 4].map((item) => (
+              <MenuItem key={item} value={item}>
+                {i18n(`touch_tap_${item}`)}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+
         <FormControl size="small">
           <InputLabel>{i18n("hide_fab_button")}</InputLabel>
           <Select

src/views/Options/Tranbox.js

@@ -3,7 +3,12 @@ import Stack from "@mui/material/Stack";
 import TextField from "@mui/material/TextField";
 import MenuItem from "@mui/material/MenuItem";
 import { useI18n } from "../../hooks/I18n";
-import { OPT_TRANS_ALL, OPT_LANGS_FROM, OPT_LANGS_TO } from "../../config";
+import {
+  OPT_TRANS_ALL,
+  OPT_LANGS_FROM,
+  OPT_LANGS_TO,
+  DEFAULT_TRANSEL_SHORTCUT,
+} from "../../config";
 import ShortcutInput from "./ShortcutInput";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import Switch from "@mui/material/Switch";
@@ -39,14 +44,23 @@ export default function Tranbox() {
     [updateTranbox]
   );
 
+  const handleShortcutTransel = useCallback(
+    (val) => {
+      updateTranbox({ transelShortcut: val });
+    },
+    [updateTranbox]
+  );
+
   const {
     transOpen,
     translator,
     fromLang,
     toLang,
     tranboxShortcut,
+    transelShortcut = DEFAULT_TRANSEL_SHORTCUT,
     btnOffsetX,
     btnOffsetY,
+    hideTranBtn = false,
   } = tranboxSetting;
 
   return (
@@ -129,11 +143,29 @@ export default function Tranbox() {
           onChange={handleChange}
         />
 
+        <TextField
+          select
+          size="small"
+          name="hideTranBtn"
+          value={hideTranBtn}
+          label={i18n("hide_tran_button")}
+          onChange={handleChange}
+        >
+          <MenuItem value={false}>{i18n("show")}</MenuItem>
+          <MenuItem value={true}>{i18n("hide")}</MenuItem>
+        </TextField>
+
         <ShortcutInput
           value={tranboxShortcut}
           onChange={handleShortcutInput}
           label={i18n("trigger_tranbox_shortcut")}
         />
+
+        <ShortcutInput
+          value={transelShortcut}
+          onChange={handleShortcutTransel}
+          label={i18n("trigger_transel_shortcut")}
+        />
       </Stack>
     </Box>
   );

src/views/Options/Webfix.js

@@ -13,43 +13,204 @@ import FormControlLabel from "@mui/material/FormControlLabel";
 import Switch from "@mui/material/Switch";
 import { useSetting } from "../../hooks/Setting";
 import CircularProgress from "@mui/material/CircularProgress";
-import { syncWebfix, loadOrFetchWebfix } from "../../libs/webfix";
+import { syncWebfix, loadOrFetchWebfix, FIXER_ALL } from "../../libs/webfix";
 import Button from "@mui/material/Button";
 import SyncIcon from "@mui/icons-material/Sync";
 import { useAlert } from "../../hooks/Alert";
 import HelpButton from "./HelpButton";
 import { URL_KISS_RULES_NEW_ISSUE } from "../../config";
+import MenuItem from "@mui/material/MenuItem";
+import { useWebfixRules } from "../../hooks/WebfixRules";
+
+function WebfixFields({ rule, webfix, setShow }) {
+  const editMode = !!rule;
+  const initFormValues = rule || {
+    pattern: "",
+    selector: "",
+    rootSelector: "",
+    fixer: FIXER_ALL[0],
+  };
+  const i18n = useI18n();
+  const [disabled, setDisabled] = useState(editMode);
+  const [errors, setErrors] = useState({});
+  const [formValues, setFormValues] = useState(initFormValues);
+
+  const { pattern, selector, rootSelector, fixer } = formValues;
+
+  const hasSamePattern = (str) => {
+    for (const item of webfix.list || []) {
+      if (item.pattern === str && rule?.pattern !== str) {
+        return true;
+      }
+    }
+    return false;
+  };
+
+  const handleFocus = (e) => {
+    e.preventDefault();
+    const { name } = e.target;
+    setErrors((pre) => ({ ...pre, [name]: "" }));
+  };
+
+  const handleChange = (e) => {
+    e.preventDefault();
+    const { name, value } = e.target;
+    setFormValues((pre) => ({ ...pre, [name]: value }));
+  };
+
+  const handleCancel = (e) => {
+    e.preventDefault();
+    if (editMode) {
+      setDisabled(true);
+    } else {
+      setShow(false);
+    }
+    setFormValues(initFormValues);
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const errors = {};
+    if (!pattern.trim()) {
+      errors.pattern = i18n("error_cant_be_blank");
+    }
+    if (hasSamePattern(pattern)) {
+      errors.pattern = i18n("error_duplicate_values");
+    }
+    if (!selector.trim()) {
+      errors.selector = i18n("error_cant_be_blank");
+    }
+    if (Object.keys(errors).length > 0) {
+      setErrors(errors);
+      return;
+    }
+
+    if (editMode) {
+      // 编辑
+      setDisabled(true);
+      webfix.put(rule.pattern, formValues);
+    } else {
+      // 添加
+      webfix.add(formValues);
+      setShow(false);
+      setFormValues(initFormValues);
+    }
+  };
 
-function ApiFields({ site }) {
-  const { selector, rootSelector, fixer } = site;
   return (
-    <Stack spacing={3}>
+    <form onSubmit={handleSubmit}>
-      <TextField
+      <Stack spacing={3}>
-        size="small"
+        <TextField
-        label={"rootSelector"}
+          size="small"
-        name="rootSelector"
+          label={i18n("pattern")}
-        value={rootSelector || "document"}
+          error={!!errors.pattern}
-        disabled
+          helperText={errors.pattern}
-      />
+          name="pattern"
-      <TextField
+          value={pattern}
-        size="small"
+          disabled={disabled}
-        label={"selector"}
+          onChange={handleChange}
-        name="selector"
+          onFocus={handleFocus}
-        value={selector}
+          multiline
-        disabled
+        />
-      />
+        <TextField
-      <TextField
+          size="small"
-        size="small"
+          label={i18n("root_selector")}
-        label={"fixer"}
+          error={!!errors.rootSelector}
-        name="fixer"
+          helperText={errors.rootSelector}
-        value={fixer}
+          name="rootSelector"
-        disabled
+          value={rootSelector}
-      />
+          disabled={disabled}
-    </Stack>
+          onChange={handleChange}
+          onFocus={handleFocus}
+          multiline
+        />
+        <TextField
+          size="small"
+          label={i18n("selector")}
+          error={!!errors.selector}
+          helperText={errors.selector}
+          name="selector"
+          value={selector}
+          disabled={disabled}
+          onChange={handleChange}
+          onFocus={handleFocus}
+          multiline
+        />
+        <TextField
+          select
+          size="small"
+          name="fixer"
+          value={fixer}
+          label={i18n("fixer_function")}
+          disabled={disabled}
+          onChange={handleChange}
+        >
+          {FIXER_ALL.map((item) => (
+            <MenuItem key={item} value={item}>
+              {item}
+            </MenuItem>
+          ))}
+        </TextField>
+
+        {webfix &&
+          (editMode ? (
+            // 编辑
+            <Stack direction="row" spacing={2}>
+              {disabled ? (
+                <>
+                  <Button
+                    size="small"
+                    variant="contained"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      setDisabled(false);
+                    }}
+                  >
+                    {i18n("edit")}
+                  </Button>
+                  <Button
+                    size="small"
+                    variant="outlined"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      webfix.del(rule.pattern);
+                    }}
+                  >
+                    {i18n("delete")}
+                  </Button>
+                </>
+              ) : (
+                <>
+                  <Button size="small" variant="contained" type="submit">
+                    {i18n("save")}
+                  </Button>
+                  <Button
+                    size="small"
+                    variant="outlined"
+                    onClick={handleCancel}
+                  >
+                    {i18n("cancel")}
+                  </Button>
+                </>
+              )}
+            </Stack>
+          ) : (
+            // 添加
+            <Stack direction="row" spacing={2}>
+              <Button size="small" variant="contained" type="submit">
+                {i18n("save")}
+              </Button>
+              <Button size="small" variant="outlined" onClick={handleCancel}>
+                {i18n("cancel")}
+              </Button>
+            </Stack>
+          ))}
+      </Stack>
+    </form>
   );
 }
 
-function ApiAccordion({ site }) {
+function WebfixAccordion({ rule, webfix }) {
   const [expanded, setExpanded] = useState(false);
 
   const handleChange = (e) => {
@@ -59,10 +220,17 @@ function ApiAccordion({ site }) {
   return (
     <Accordion expanded={expanded} onChange={handleChange}>
       <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-        <Typography>{site.pattern}</Typography>
+        <Typography
+          sx={{
+            opacity: webfix ? 1 : 0.5,
+            overflowWrap: "anywhere",
+          }}
+        >
+          {rule.pattern}
+        </Typography>
       </AccordionSummary>
       <AccordionDetails>
-        {expanded && <ApiFields site={site} />}
+        {expanded && <WebfixFields rule={rule} webfix={webfix} />}
       </AccordionDetails>
     </Accordion>
   );
@@ -74,6 +242,8 @@ export default function Webfix() {
   const i18n = useI18n();
   const alert = useAlert();
   const { setting, updateSetting } = useSetting();
+  const [showAdd, setShowAdd] = useState(false);
+  const webfix = useWebfixRules();
 
   const loadSites = useCallback(async () => {
     const sites = await loadOrFetchWebfix(process.env.REACT_APP_WEBFIXURL);
@@ -120,6 +290,18 @@ export default function Webfix() {
           useFlexGap
           flexWrap="wrap"
         >
+          <Button
+            size="small"
+            variant="contained"
+            disabled={showAdd}
+            onClick={(e) => {
+              e.preventDefault();
+              setShowAdd(true);
+            }}
+          >
+            {i18n("add")}
+          </Button>
+
           <Button
             size="small"
             variant="outlined"
@@ -146,6 +328,16 @@ export default function Webfix() {
           />
         </Stack>
 
+        {showAdd && <WebfixFields webfix={webfix} setShow={setShowAdd} />}
+
+        {webfix.list?.length > 0 && (
+          <Box>
+            {webfix.list.map((rule) => (
+              <WebfixAccordion key={rule.pattern} rule={rule} webfix={webfix} />
+            ))}
+          </Box>
+        )}
+
         {setting.injectWebfix && (
           <Box>
             {loading ? (
@@ -153,8 +345,8 @@ export default function Webfix() {
                 <CircularProgress size={16} />
               </center>
             ) : (
-              sites.map((site) => (
+              sites.map((rule) => (
-                <ApiAccordion key={site.pattern} site={site} />
+                <WebfixAccordion key={rule.pattern} rule={rule} />
               ))
             )}
           </Box>

src/views/Popup/Header.js

@@ -1,9 +1,9 @@
-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";
 import Stack from "@mui/material/Stack";
 import DarkModeButton from "../Options/DarkModeButton";
+import Typography from "@mui/material/Typography";
 
 export default function Header({ setShowPopup }) {
   const handleHomepage = () => {
@@ -21,14 +21,16 @@ export default function Header({ setShowPopup }) {
         <IconButton onClick={handleHomepage}>
           <HomeIcon />
         </IconButton>
-        <Box
+        <Typography
+          component="div"
           sx={{
             userSelect: "none",
             WebkitUserSelect: "none",
+            fontWeight: "bold",
           }}
         >
           {`${process.env.REACT_APP_NAME} v${process.env.REACT_APP_VERSION}`}
-        </Box>
+        </Typography>
       </Stack>
 
       {setShowPopup ? (

src/views/Selection/DictCont.js

@@ -2,6 +2,7 @@ import Box from "@mui/material/Box";
 import Chip from "@mui/material/Chip";
 import Stack from "@mui/material/Stack";
 import FavBtn from "./FavBtn";
+import Typography from "@mui/material/Typography";
 
 const exchangeMap = {
   word_third: "第三人称单数",
@@ -9,7 +10,7 @@ const exchangeMap = {
   word_done: "过去式",
   word_past: "过去分词",
   word_pl: "复数",
-  word_proto: "原词",
+  word_proto: "词源",
 };
 
 export default function DictCont({ dictResult }) {
@@ -24,16 +25,16 @@ export default function DictCont({ dictResult }) {
         justifyContent="space-between"
         alignItems="flex-start"
       >
-        <div style={{ fontWeight: "bold" }}>
+        <Typography variant="subtitle1" style={{ fontWeight: "bold" }}>
           {dictResult.simple_means?.word_name}
-        </div>
+        </Typography>
         <FavBtn word={dictResult.simple_means?.word_name} />
       </Stack>
 
       {dictResult.simple_means?.symbols?.map(({ ph_en, ph_am, parts }, idx) => (
-        <div key={idx}>
+        <Typography key={idx} component="div">
           {(ph_en || ph_am) && (
-            <div>{`英/${ph_en || ""}/ 美/${ph_am || ""}/`}</div>
+            <Typography>{`英 /${ph_en || ""}/ 美 /${ph_am || ""}/`}</Typography>
           )}
           <ul style={{ margin: "0.5em 0" }}>
             {parts.map(({ part, means }, idx) => (
@@ -42,14 +43,14 @@ export default function DictCont({ dictResult }) {
               </li>
             ))}
           </ul>
-        </div>
+        </Typography>
       ))}
 
-      <div>
+      <Typography>
         {Object.entries(dictResult.simple_means?.exchange || {})
           .map(([key, val]) => `${exchangeMap[key] || key}: ${val.join(", ")}`)
           .join("; ")}
-      </div>
+      </Typography>
 
       <Stack direction="row" spacing={1} flexWrap="wrap" useFlexGap>
         {Object.values(dictResult.simple_means?.tags || {})

src/views/Selection/TranBox.js

@@ -95,6 +95,7 @@ function TranForm({ text, setText, tranboxSetting, transApis }) {
 
       <Box>
         <TextField
+          size="small"
           label={i18n("original_text")}
           inputRef={inputRef}
           fullWidth

src/views/Selection/TranCont.js

@@ -69,6 +69,7 @@ export default function TranCont({
     <>
       <Box>
         <TextField
+          size="small"
           label={i18n("translated_text")}
           // disabled
           fullWidth

src/views/Selection/index.js

@@ -1,7 +1,14 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import TranBtn from "./TranBtn";
 import TranBox from "./TranBox";
 import { shortcutRegister } from "../../libs/shortcut";
+import { sleep } from "../../libs/utils";
+import { isGm } from "../../libs/client";
+import {
+  MSG_TRANSLATE_SELECTED,
+  MSG_OPEN_TRANBOX,
+  DEFAULT_TRANSEL_SHORTCUT,
+} from "../../config";
 
 export default function Slection({ tranboxSetting, transApis }) {
   const [showBox, setShowBox] = useState(false);
@@ -15,34 +22,47 @@ export default function Slection({ tranboxSetting, transApis }) {
     y: (window.innerHeight - 400) / 2,
   });
 
-  function handleMouseup(e) {
+  const handleClick = (e) => {
+    e.stopPropagation();
+
+    setShowBtn(false);
+    setText(selectedText);
+    setShowBox(true);
+  };
+
+  const handleTranSelected = useCallback(() => {
+    setShowBtn(false);
+
     const selectedText = window.getSelection()?.toString()?.trim() || "";
     if (!selectedText) {
-      setShowBtn(false);
       return;
     }
 
     setSelText(selectedText);
-    setShowBtn(true);
-    setPosition({ x: e.clientX, y: e.clientY });
-  }
-
-  const handleClick = (e) => {
-    e.stopPropagation();
-    setShowBtn(false);
-
     setText(selectedText);
-    if (!showBox) {
+    setShowBox(true);
-      setShowBox(true);
+  }, []);
-    }
-  };
 
   useEffect(() => {
+    async function handleMouseup(e) {
+      await sleep(10);
+
+      const selectedText = window.getSelection()?.toString()?.trim() || "";
+      setSelText(selectedText);
+      if (!selectedText) {
+        setShowBtn(false);
+        return;
+      }
+
+      !tranboxSetting.hideTranBtn && setShowBtn(true);
+      setPosition({ x: e.clientX, y: e.clientY });
+    }
+
     window.addEventListener("mouseup", handleMouseup);
     return () => {
       window.removeEventListener("mouseup", handleMouseup);
     };
-  }, []);
+  }, [tranboxSetting.hideTranBtn]);
 
   useEffect(() => {
     const clearShortcut = shortcutRegister(
@@ -55,7 +75,70 @@ export default function Slection({ tranboxSetting, transApis }) {
     return () => {
       clearShortcut();
     };
-  }, [tranboxSetting.tranboxShortcut, setShowBox]);
+  }, [tranboxSetting.tranboxShortcut]);
+
+  useEffect(() => {
+    const clearShortcut = shortcutRegister(
+      tranboxSetting.transelShortcut || DEFAULT_TRANSEL_SHORTCUT,
+      handleTranSelected
+    );
+
+    return () => {
+      clearShortcut();
+    };
+  }, [tranboxSetting.transelShortcut, handleTranSelected]);
+
+  useEffect(() => {
+    window.addEventListener(MSG_TRANSLATE_SELECTED, handleTranSelected);
+    return () => {
+      window.removeEventListener(MSG_TRANSLATE_SELECTED, handleTranSelected);
+    };
+  }, [handleTranSelected]);
+
+  useEffect(() => {
+    const handleOpenTranbox = () => {
+      setShowBox((pre) => !pre);
+    };
+    window.addEventListener(MSG_OPEN_TRANBOX, handleOpenTranbox);
+    return () => {
+      window.removeEventListener(MSG_OPEN_TRANBOX, handleOpenTranbox);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!isGm) {
+      return;
+    }
+
+    // 注册菜单
+    try {
+      const menuCommandIds = [];
+      menuCommandIds.push(
+        GM.registerMenuCommand(
+          "Translate Selected Text (Alt+S)",
+          (event) => {
+            handleTranSelected();
+          },
+          "S"
+        ),
+        GM.registerMenuCommand(
+          "Open Translate Popup (Alt+B)",
+          (event) => {
+            setShowBox((pre) => !pre);
+          },
+          "B"
+        )
+      );
+
+      return () => {
+        menuCommandIds.forEach((id) => {
+          GM.unregisterMenuCommand(id);
+        });
+      };
+    } catch (err) {
+      console.log("[registerMenuCommand]", err);
+    }
+  }, [handleTranSelected]);
 
   return (
     <>