v1.7.16

fix: move clear_cache button to bottom of popup
fix: tranbox shortcut in usserscript
2024-01-04 15:55:28 +08:00 · 2024-01-04 15:41:20 +08:00 · 2024-01-04 12:18:36 +08:00 · 2024-01-04 10:49:44 +08:00 · 2024-01-04 10:39:40 +08:00 · 2024-01-04 10:34:12 +08:00
58 changed files with 2481 additions and 944 deletions
--- a/.env
+++ b/.env
@@ -2,7 +2,7 @@ GENERATE_SOURCEMAP=false

 REACT_APP_NAME=KISS Translator
 REACT_APP_NAME_CN=简约翻译
-REACT_APP_VERSION=1.7.8
+REACT_APP_VERSION=1.7.16

 REACT_APP_HOMEPAGE=https://github.com/fishjar/kiss-translator

--- a/README.en.md
+++ b/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)

@@ -12,12 +12,13 @@ A simple [bilingual translation extension & Greasemonkey script](https://github.
  - [x] Chrome/Edge/Firefox/Kiwi
  - [ ] Safari
 - [x] Supports multiple translation services
-  - [x] Google/Microsoft/DeepL/OpenAI/Baidu/Tencent
+  - [x] Google/Microsoft/DeepL/OpenAI/Gemini/CloudflareAI/Baidu/Tencent
  - [x] Custom translation interface
 - [x] Covers common translation scenarios
  - [x] Web bilingual translation
  - [x] Input box translation
  - [x] Seletction translation
+    - [x] Favorite Words
  - [x] Mouseover translation
  - [x] YouTube subtitle translation
 - [x] Cross-client data synchronization
@@ -30,7 +31,7 @@ A simple [bilingual translation extension & Greasemonkey script](https://github.
  - `Alt+Q` Toggle Translation
  - `Alt+C` Toggle Styles
  - `Alt+K` Open Setting Popup
-  - `Alt+B` Open Translate Popup
+  - `Alt+S` Open Translate Popup / Translate Selected Text
  - `Alt+O` Open Options Page
  - `Alt+I` Input Box Translation

@@ -38,8 +39,8 @@ A simple [bilingual translation extension & Greasemonkey script](https://github.

 > Note: For the following reasons, it is recommended to use browser extensions first
 >
-> - Browser extension can use local language recognition
-> - Grease Monkey script will encounter more usage problems
+> - Browser extensions have more complete functions (local language recognition, context menu, etc.)
+> - 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)
@@ -47,9 +48,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

@@ -83,3 +84,7 @@ pnpm build
 ## Discussion

 - Join [Telegram Group](https://t.me/+RRCu_4oNwrM2NmFl)
+
+## Appreciate
+
+![appreciate](https://github.com/fishjar/kiss-translator/assets/1157624/ebaecabe-2934-4172-8085-af236f5ee399)
--- a/README.md
+++ b/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)

@@ -12,12 +12,13 @@
  - [x] Chrome/Edge/Firefox/Kiwi
  - [ ] Safari
 - [x] 支持多种翻译服务
-  - [x] Google/Microsoft/DeepL/OpenAI/Baidu/Tencent
+  - [x] Google/Microsoft/DeepL/OpenAI/Gemini/CloudflareAI/Baidu/Tencent
  - [x] 自定义翻译接口
 - [x] 覆盖常见翻译场景
  - [x] 网页双语对照翻译
  - [x] 输入框翻译
  - [x] 划词翻译
+    - [x] 收藏词汇
  - [x] 鼠标悬停翻译
  - [x] YouTube 字幕翻译
 - [x] 跨客户端数据同步
@@ -30,7 +31,7 @@
  - `Alt+Q` 开启翻译
  - `Alt+C` 切换样式
  - `Alt+K` 打开设置弹窗
-  - `Alt+B` 打开翻译弹窗
+  - `Alt+S` 打开翻译弹窗/翻译选中文字
  - `Alt+O` 打开设置页面
  - `Alt+I` 输入框翻译

@@ -38,8 +39,8 @@

 > 注：基于以下原因，建议优先使用浏览器扩展
 >
-> - 浏览器扩展可以使用本地的语言识别
-> - 油猴脚本会遇到更多使用上的问题
+> - 浏览器扩展的功能更完整（本地语言识别、右键菜单等）
+> - 油猴脚本会遇到更多使用上的问题（跨域问题、脚本冲突等）

 - [x] 浏览器扩展
  - [x] Chrome [安装地址](https://chrome.google.com/webstore/detail/kiss-translator/bdiifdefkgmcblbcghdlonllpjhhjgof?hl=zh-CN)
@@ -47,9 +48,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)

 ## 关联项目

@@ -64,7 +65,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)
  - 搭配本项目一起使用的划词翻译插件。
@@ -83,3 +84,7 @@ pnpm build
 ## 交流

 - 加入 [Telegram 群](https://t.me/+RRCu_4oNwrM2NmFl)
+
+## 赞赏
+
+![appreciate](https://github.com/fishjar/kiss-translator/assets/1157624/ebaecabe-2934-4172-8085-af236f5ee399)
--- a/config-overrides.js
+++ b/config-overrides.js
@@ -85,6 +85,7 @@ const userscriptWebpack = (config, env) => {
 // @updateURL     ${process.env.REACT_APP_USERSCRIPT_DOWNLOADURL}
 // @grant         GM.xmlHttpRequest
 // @grant         GM.registerMenuCommand
+// @grant         GM.unregisterMenuCommand
 // @grant         GM.setValue
 // @grant         GM.getValue
 // @grant         GM.deleteValue
@@ -97,6 +98,7 @@ const userscriptWebpack = (config, env) => {
 // @connect       api.deepl.com
 // @connect       www2.deepl.com
 // @connect       api.openai.com
+// @connect       generativelanguage.googleapis.com
 // @connect       openai.azure.com
 // @connect       workers.dev
 // @connect       github.io
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "kiss-translator",
  "description": "A minimalist bilingual translation Extension & Greasemonkey Script",
-  "version": "1.7.8",
+  "version": "1.7.16",
  "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"
  },
--- a/public/_locales/en/messages.json
+++ b/public/_locales/en/messages.json
@@ -6,12 +6,15 @@
    "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": "Translate Popup/Selected (Alt+S)"
  }
 }
--- a/public/_locales/zh_CN/messages.json
+++ b/public/_locales/zh_CN/messages.json
@@ -6,12 +6,15 @@
    "message": "一个简约的双语对照翻译扩展 & 油猴脚本"
  },
  "toggle_translate": {
-    "message": "开启翻译"
+    "message": "开启翻译 (Alt+Q)"
  },
  "toggle_style": {
-    "message": "切换样式"
+    "message": "切换样式 (Alt+C)"
  },
  "open_options": {
-    "message": "打开设置"
+    "message": "打开设置 (Alt+O)"
+  },
+  "open_tranbox": {
+    "message": "翻译弹窗/选中文字 (Alt+S)"
  }
 }
--- a/public/content.html
+++ b/public/content.html
@@ -64,6 +64,45 @@
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root">
+      <p>You need to enable <code>JavaScript</code> to run <span>this app.</span></p>
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
      <div id="content">
        <p>You need to enable JavaScript to run <span>this app.</span></p>
        The <span>embargo</span> has just lifted to confirm that AmpereOne is
--- a/public/manifest.firefox.json
+++ b/public/manifest.firefox.json
@@ -2,7 +2,7 @@
  "manifest_version": 2,
  "name": "__MSG_app_name__",
  "description": "__MSG_app_description__",
-  "version": "1.7.8",
+  "version": "1.7.16",
  "default_locale": "en",
  "author": "Gabe<yugang2002@gmail.com>",
  "homepage_url": "https://github.com/fishjar/kiss-translator",
@@ -28,6 +28,12 @@
      },
      "description": "__MSG_toggle_translate__"
    },
+    "openTranbox": {
+      "suggested_key": {
+        "default": "Alt+S"
+      },
+      "description": "__MSG_open_tranbox__"
+    },
    "toggleStyle": {
      "suggested_key": {
        "default": "Alt+C"
@@ -35,13 +41,10 @@
      "description": "__MSG_toggle_style__"
    },
    "openOptions": {
-      "suggested_key": {
-        "default": "Alt+O"
-      },
      "description": "__MSG_open_options__"
    }
  },
-  "permissions": ["<all_urls>", "storage"],
+  "permissions": ["<all_urls>", "storage", "contextMenus"],
  "icons": {
    "16": "images/logo16.png",
    "32": "images/logo32.png",
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -2,7 +2,7 @@
  "manifest_version": 3,
  "name": "__MSG_app_name__",
  "description": "__MSG_app_description__",
-  "version": "1.7.8",
+  "version": "1.7.16",
  "default_locale": "en",
  "author": "Gabe<yugang2002@gmail.com>",
  "homepage_url": "https://github.com/fishjar/kiss-translator",
@@ -29,6 +29,12 @@
      },
      "description": "__MSG_toggle_translate__"
    },
+    "openTranbox": {
+      "suggested_key": {
+        "default": "Alt+S"
+      },
+      "description": "__MSG_open_tranbox__"
+    },
    "toggleStyle": {
      "suggested_key": {
        "default": "Alt+C"
@@ -36,13 +42,10 @@
      "description": "__MSG_toggle_style__"
    },
    "openOptions": {
-      "suggested_key": {
-        "default": "Alt+O"
-      },
      "description": "__MSG_open_options__"
    }
  },
-  "permissions": ["storage"],
+  "permissions": ["storage", "contextMenus"],
  "host_permissions": ["<all_urls>"],
  "icons": {
    "16": "images/logo16.png",
--- a/src/apis/index.js
+++ b/src/apis/index.js
@@ -9,6 +9,8 @@ import {
  OPT_TRANS_BAIDU,
  OPT_TRANS_TENCENT,
  OPT_TRANS_OPENAI,
+  OPT_TRANS_GEMINI,
+  OPT_TRANS_CLOUDFLAREAI,
  OPT_TRANS_CUSTOMIZE,
  URL_CACHE_TRAN,
  KV_SALT_SYNC,
@@ -110,11 +112,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];
  }
@@ -176,12 +182,19 @@ export const apiTranslate = async ({
      trText = res?.choices?.[0].message.content;
      isSame = text === trText;
      break;
+    case OPT_TRANS_GEMINI:
+      trText = res?.candidates?.[0].content.parts[0].text;
+      isSame = text === trText;
+      break;
+    case OPT_TRANS_CLOUDFLAREAI:
+      trText = res?.result?.translated_text;
+      isSame = text === trText;
+      break;
    case OPT_TRANS_CUSTOMIZE:
      trText = res.text;
      isSame = to === res.from;
      break;
    default:
-      break;
  }

  return [trText, isSame, res];
--- a/src/background.js
+++ b/src/background.js
@@ -7,9 +7,12 @@ import {
  MSG_OPEN_OPTIONS,
  MSG_SAVE_RULE,
  MSG_TRANS_TOGGLE_STYLE,
+  MSG_OPEN_TRANBOX,
+  MSG_CONTEXT_MENUS,
  CMD_TOGGLE_TRANSLATE,
  CMD_TOGGLE_STYLE,
  CMD_OPEN_OPTIONS,
+  CMD_OPEN_TRANBOX,
 } from "./config";
 import { getSettingWithDefault, tryInitDefaultData } from "./libs/storage";
 import { trySyncSettingAndRules } from "./libs/sync";
@@ -21,30 +24,79 @@ import { saveRule } from "./libs/rules";

 globalThis.ContextType = "BACKGROUND";

+/**
+ * 添加右键菜单
+ */
+function addContextMenus() {
+  browser.contextMenus.create({
+    id: CMD_TOGGLE_TRANSLATE,
+    title: browser.i18n.getMessage("toggle_translate"),
+    contexts: ["page", "selection"],
+  });
+  browser.contextMenus.create({
+    id: CMD_TOGGLE_STYLE,
+    title: browser.i18n.getMessage("toggle_style"),
+    contexts: ["page", "selection"],
+  });
+  browser.contextMenus.create({
+    id: CMD_OPEN_TRANBOX,
+    title: browser.i18n.getMessage("open_tranbox"),
+    contexts: ["page", "selection"],
+  });
+  browser.contextMenus.create({
+    id: "options_separator",
+    type: "separator",
+    contexts: ["page", "selection"],
+  });
+  browser.contextMenus.create({
+    id: CMD_OPEN_OPTIONS,
+    title: browser.i18n.getMessage("open_options"),
+    contexts: ["page", "selection"],
+  });
+}
+
+/**
+ * 清除右键菜单
+ */
+function removeContextMenus() {
+  browser.contextMenus.removeAll();
+}
+
 /**
 * 插件安装
 */
 browser.runtime.onInstalled.addListener(() => {
  tryInitDefaultData();
+
+  // 右键菜单
+  addContextMenus();
 });

 /**
 * 浏览器启动
 */
 browser.runtime.onStartup.addListener(async () => {
-  console.log("browser onStartup");
-
  // 同步数据
  await trySyncSettingAndRules();

+  const {
+    clearCache,
+    contextMenus = true,
+    subrulesList,
+  } = await getSettingWithDefault();
+
  // 清除缓存
-  const setting = await getSettingWithDefault();
-  if (setting.clearCache) {
+  if (clearCache) {
    tryClearCaches();
  }

+  // 右键菜单
+  if (!contextMenus) {
+    removeContextMenus();
+  }
+
  // 同步订阅规则
-  trySyncAllSubRules(setting);
+  trySyncAllSubRules({ subrulesList });
 });

 /**
@@ -60,7 +112,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:
@@ -78,6 +130,14 @@ browser.runtime.onMessage.addListener(
      case MSG_SAVE_RULE:
        saveRule(args);
        break;
+      case MSG_CONTEXT_MENUS:
+        const { contextMenus } = args;
+        if (contextMenus) {
+          addContextMenus();
+        } else {
+          removeContextMenus();
+        }
+        break;
      default:
        sendResponse({ error: `message action is unavailable: ${action}` });
    }
@@ -94,6 +154,9 @@ browser.commands.onCommand.addListener((command) => {
    case CMD_TOGGLE_TRANSLATE:
      sendTabMsg(MSG_TRANS_TOGGLE);
      break;
+    case CMD_OPEN_TRANBOX:
+      sendTabMsg(MSG_OPEN_TRANBOX);
+      break;
    case CMD_TOGGLE_STYLE:
      sendTabMsg(MSG_TRANS_TOGGLE_STYLE);
      break;
@@ -103,3 +166,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_OPEN_TRANBOX:
+      sendTabMsg(MSG_OPEN_TRANBOX);
+      break;
+    case CMD_OPEN_OPTIONS:
+      browser.runtime.openOptionsPage();
+      break;
+    default:
+  }
+});
--- a/src/common.js
+++ b/src/common.js
@@ -8,25 +8,80 @@ import {
  MSG_TRANS_TOGGLE_STYLE,
  MSG_TRANS_GETRULE,
  MSG_TRANS_PUTRULE,
+  MSG_OPEN_TRANBOX,
  APP_LCNAME,
  DEFAULT_TRANBOX_SETTING,
 } from "./config";
-import { getRulesWithDefault, getFabWithDefault } from "./libs/storage";
+import { getFabWithDefault, getSettingWithDefault } from "./libs/storage";
 import { Translator } from "./libs/translator";
-import { sendIframeMsg, sendParentMsg } from "./libs/iframe";
-import { matchRule } from "./libs/rules";
+import { isIframe, sendIframeMsg, sendParentMsg } from "./libs/iframe";
 import Slection from "./views/Selection";
+import { touchTapListener } from "./libs/touch";
+import { debounce, genEventName } from "./libs/utils";
+import { handlePing, injectScript } from "./libs/gm";
+import { browser } from "./libs/browser";
+import { matchFixer } from "./libs/webfix";
+import { matchRule } from "./libs/rules";
+import { trySyncAllSubRules } from "./libs/subRules";
+import { isInBlacklist } from "./libs/blacklist";
+import inputTranslate from "./libs/inputTranslate";

-export async function runTranslator(setting) {
-  const href = document.location.href;
-  const rules = await getRulesWithDefault();
-  const rule = await matchRule(rules, href, setting);
-  const translator = new Translator(rule, setting);
-
-  return { translator, rule };
+/**
+ * 油猴脚本设置页面
+ */
+function runSettingPage() {
+  if (GM?.info?.script?.grant?.includes("unsafeWindow")) {
+    unsafeWindow.GM = GM;
+    unsafeWindow.APP_INFO = {
+      name: process.env.REACT_APP_NAME,
+      version: process.env.REACT_APP_VERSION,
+    };
+  } else {
+    const ping = genEventName();
+    window.addEventListener(ping, handlePing);
+    // window.eval(`(${injectScript})("${ping}")`); // eslint-disable-line
+    const script = document.createElement("script");
+    script.textContent = `(${injectScript})("${ping}")`;
+    document.head.append(script);
+  }
 }

-export function runIframe(setting) {
+/**
+ * 插件监听后端事件
+ * @param {*} translator
+ */
+function runtimeListener(translator) {
+  browser?.runtime.onMessage.addListener(async ({ action, args }) => {
+    switch (action) {
+      case MSG_TRANS_TOGGLE:
+        translator.toggle();
+        sendIframeMsg(MSG_TRANS_TOGGLE);
+        break;
+      case MSG_TRANS_TOGGLE_STYLE:
+        translator.toggleStyle();
+        sendIframeMsg(MSG_TRANS_TOGGLE_STYLE);
+        break;
+      case MSG_TRANS_GETRULE:
+        break;
+      case MSG_TRANS_PUTRULE:
+        translator.updateRule(args);
+        sendIframeMsg(MSG_TRANS_PUTRULE, args);
+        break;
+      case MSG_OPEN_TRANBOX:
+        window.dispatchEvent(new CustomEvent(MSG_OPEN_TRANBOX));
+        break;
+      default:
+        return { error: `message action is unavailable: ${action}` };
+    }
+    return { data: translator.rule };
+  });
+}
+
+/**
+ * iframe 页面执行
+ * @param {*} setting
+ */
+function runIframe(setting) {
  let translator;
  window.addEventListener("message", (e) => {
    const { action, args } = e.data || {};
@@ -50,12 +105,13 @@ export function runIframe(setting) {
  sendParentMsg(MSG_TRANS_GETRULE);
 }

-export async function showFab(translator) {
+/**
+ * 悬浮按钮
+ * @param {*} translator
+ * @returns
+ */
+async function showFab(translator) {
  const fab = await getFabWithDefault();
-  if (fab.isHide) {
-    return;
-  }
-
  const $action = document.createElement("div");
  $action.setAttribute("id", APP_LCNAME);
  document.body.parentElement.appendChild($action);
@@ -78,7 +134,13 @@ export async function showFab(translator) {
  );
 }

-export function showTransbox({
+/**
+ * 划词翻译
+ * @param {*} param0
+ * @returns
+ */
+function showTransbox({
+  contextMenus = true,
  tranboxSetting = DEFAULT_TRANBOX_SETTING,
  transApis,
 }) {
@@ -102,13 +164,21 @@ export function showTransbox({
  ReactDOM.createRoot(shadowRootElement).render(
    <React.StrictMode>
      <CacheProvider value={cache}>
-        <Slection tranboxSetting={tranboxSetting} transApis={transApis} />
+        <Slection
+          contextMenus={contextMenus}
+          tranboxSetting={tranboxSetting}
+          transApis={transApis}
+        />
      </CacheProvider>
    </React.StrictMode>
  );
 }

-export function windowListener(rule) {
+/**
+ * 监听来自iframe页面消息
+ * @param {*} rule
+ */
+function windowListener(rule) {
  window.addEventListener("message", (e) => {
    const { action } = e.data || {};
    switch (action) {
@@ -120,10 +190,94 @@ export function windowListener(rule) {
  });
 }

-export function showErr(err) {
-  console.error("[KISS-Translator]", err);
+/**
+ * 显示错误信息到页面顶部
+ * @param {*} message
+ */
+function showErr(message) {
  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);
 }
+
+/**
+ * 监听触屏操作
+ * @param {*} translator
+ * @returns
+ */
+function touchOperation(translator) {
+  const { touchTranslate = 2 } = translator.setting;
+  if (touchTranslate === 0) {
+    return;
+  }
+
+  const handleTap = debounce(() => {
+    translator.toggle();
+    sendIframeMsg(MSG_TRANS_TOGGLE);
+  });
+  touchTapListener(handleTap, touchTranslate);
+}
+
+/**
+ * 入口函数
+ */
+export async function run(isUserscript = false) {
+  try {
+    const href = document.location.href;
+
+    // 设置页面
+    if (
+      isUserscript &&
+      (href.includes(process.env.REACT_APP_OPTIONSPAGE_DEV) ||
+        href.includes(process.env.REACT_APP_OPTIONSPAGE) ||
+        href.includes(process.env.REACT_APP_OPTIONSPAGE2))
+    ) {
+      runSettingPage();
+      return;
+    }
+
+    // 读取设置信息
+    const setting = await getSettingWithDefault();
+
+    // 黑名单
+    if (isInBlacklist(href, setting)) {
+      return;
+    }
+
+    // 适配iframe
+    if (isIframe) {
+      runIframe(setting);
+      return;
+    }
+
+    // 不规范网页修复
+    const fixerSetting = await matchFixer(href, setting);
+
+    // 翻译网页
+    const rule = await matchRule(href, setting);
+    const translator = new Translator(rule, setting, fixerSetting);
+
+    // 监听消息
+    windowListener(rule);
+    !isUserscript && runtimeListener(translator);
+
+    // 输入框翻译
+    inputTranslate(setting);
+
+    // 划词翻译
+    showTransbox(setting);
+
+    // 浮球按钮
+    await showFab(translator);
+
+    // 触屏操作
+    touchOperation(translator);
+
+    // 同步订阅规则
+    isUserscript && (await trySyncAllSubRules(setting));
+  } catch (err) {
+    console.error("[KISS-Translator]", err);
+    showErr(err.message);
+  }
+}
--- a/src/config/i18n.js
+++ b/src/config/i18n.js
@@ -215,6 +215,14 @@ export const I18N = {
    zh: `目标语言`,
    en: `Target Language`,
  },
+  to_lang2: {
+    zh: `第二目标语言`,
+    en: `Target Language 2`,
+  },
+  to_lang2_helper: {
+    zh: `设定后，与目标语言产生互译效果，但依赖远程语言识别。`,
+    en: `After setting, it will produce mutual translation effect with the target language, but it relies on remote language recognition.`,
+  },
  text_style: {
    zh: `文字样式`,
    en: `Text Style`,
@@ -335,6 +343,10 @@ export const I18N = {
    zh: `高亮`,
    en: `Highlight`,
  },
+  blockquote: {
+    zh: `引用`,
+    en: `Blockquote`,
+  },
  diy_style: {
    zh: `自定义样式`,
    en: `Custom Style`,
@@ -344,16 +356,16 @@ export const I18N = {
    en: `Follow the syntax of "CSS"`,
  },
  setting: {
-    zh: `设置 (Alt+O)`,
-    en: `Setting (Alt+O)`,
+    zh: `设置`,
+    en: `Setting`,
  },
  pattern: {
    zh: `匹配网址`,
    en: `URL pattern`,
  },
  pattern_helper: {
-    zh: `1、支持星号(*)通配符。2、多个URL支持英文逗号“,”分隔。`,
-    en: `1. The asterisk (*) wildcard is supported. 2. Multiple URLs can be separated by English commas ",".`,
+    zh: `1、支持星号(*)通配符。2、多个URL用英文逗号“,”分隔。`,
+    en: `1. The asterisk (*) wildcard is supported. 2. Multiple URLs separated by English commas ",".`,
  },
  selector_helper: {
    zh: `1、遵循CSS选择器语法。2、留空表示采用全局设置。3、多个CSS选择器之间用“;”隔开。4、“shadow root”选择器和内部选择器用“>>>”隔开。`,
@@ -375,6 +387,22 @@ export const I18N = {
    zh: `选择器`,
    en: `Selector`,
  },
+  keep_selector: {
+    zh: `保留元素选择器`,
+    en: `Keep unchanged selector`,
+  },
+  keep_selector_helper: {
+    zh: `1、遵循CSS选择器语法。2、留空表示采用全局设置。`,
+    en: `1. Follow CSS selector syntax. 2. Leave blank to adopt the global setting.`,
+  },
+  root_selector: {
+    zh: `根选择器`,
+    en: `Root Selector`,
+  },
+  fixer_function: {
+    zh: `修复函数`,
+    en: `Fixer Function`,
+  },
  import: {
    zh: `导入`,
    en: `Import`,
@@ -539,6 +567,10 @@ export const I18N = {
    zh: `隐藏悬浮按钮`,
    en: `Hide Fab Button`,
  },
+  hide_tran_button: {
+    zh: `隐藏翻译按钮`,
+    en: `Hide Translate Button`,
+  },
  show: {
    zh: `显示`,
    en: `Show`,
@@ -555,11 +587,11 @@ export const I18N = {
    zh: `全局规则`,
    en: `Global Rule`,
  },
-  input_setting: {
-    zh: `输入框设置`,
-    en: `Input Box Setting`,
+  input_translate: {
+    zh: `输入框翻译`,
+    en: `Input Box Translation`,
  },
-  input_box_translation: {
+  use_input_box_translation: {
    zh: `启用输入框翻译`,
    en: `Input Box Translation`,
  },
@@ -620,16 +652,16 @@ export const I18N = {
    en: `Use Selection Translate`,
  },
  trigger_tranbox_shortcut: {
-    zh: `显示翻译框快捷键`,
-    en: `Toggle Translate Box Shortcut`,
+    zh: `显示翻译框/翻译选中文字快捷键`,
+    en: `Open Translate Popup/Translate Selected Shortcut`,
  },
  tranbtn_offset_x: {
-    zh: `翻译按钮偏移（X）`,
-    en: `Translate Button Offset (X)`,
+    zh: `翻译按钮偏移X（0-100）`,
+    en: `Translate Button Offset X (0-100)`,
  },
  tranbtn_offset_y: {
-    zh: `翻译按钮偏移（Y）`,
-    en: `Translate Button Offset (Y)`,
+    zh: `翻译按钮偏移Y（0-100）`,
+    en: `Translate Button Offset Y (0-100)`,
  },
  translated_text: {
    zh: `译文`,
@@ -639,4 +671,52 @@ export const I18N = {
    zh: `原文`,
    en: `Original Text`,
  },
+  favorite_words: {
+    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`,
+  },
+  translate_blacklist: {
+    zh: `禁用翻译名单`,
+    en: `Translate Blacklist`,
+  },
+  disable_langs: {
+    zh: `不翻译的语言`,
+    en: `Disable Languages`,
+  },
+  disable_langs_helper: {
+    zh: `此功能依赖准确的语言检测，建议启用远程语言检测。`,
+    en: `This feature relies on accurate language detection. It is recommended to enable remote language detection.`,
+  },
+  add_context_menus: {
+    zh: `添加右键菜单`,
+    en: `Add Context Menus`,
+  },
+  mulkeys_help: {
+    zh: `支持英文逗号隔开多个KEY轮寻调用。`,
+    en: `Supports multiple KEY round calling calls separated by English commas.`,
+  },
 };
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -1,5 +1,6 @@
 import {
  DEFAULT_SELECTOR,
+  DEFAULT_KEEP_SELECTOR,
  GLOBAL_KEY,
  REMAIN_KEY,
  SHADOW_KEY,
@@ -23,6 +24,8 @@ 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`;
 export const STOKEY_RULESCACHE_PREFIX = `${APP_NAME}_rulescache_`;
@@ -31,6 +34,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 CLIENT_WEB = "web";
 export const CLIENT_CHROME = "chrome";
@@ -40,6 +44,8 @@ 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";
 export const KV_SALT_SYNC = "KISS-Translator-SYNC";
@@ -54,9 +60,11 @@ 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_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";
+export const MSG_CONTEXT_MENUS = "context_menus";

 export const THEME_LIGHT = "light";
 export const THEME_DARK = "dark";
@@ -87,6 +95,8 @@ export const OPT_TRANS_DEEPLFREE = "DeepLFree";
 export const OPT_TRANS_BAIDU = "Baidu";
 export const OPT_TRANS_TENCENT = "Tencent";
 export const OPT_TRANS_OPENAI = "OpenAI";
+export const OPT_TRANS_GEMINI = "Gemini";
+export const OPT_TRANS_CLOUDFLAREAI = "CloudflareAI";
 export const OPT_TRANS_CUSTOMIZE = "Custom";
 export const OPT_TRANS_ALL = [
  OPT_TRANS_GOOGLE,
@@ -97,6 +107,8 @@ export const OPT_TRANS_ALL = [
  OPT_TRANS_BAIDU,
  OPT_TRANS_TENCENT,
  OPT_TRANS_OPENAI,
+  OPT_TRANS_GEMINI,
+  OPT_TRANS_CLOUDFLAREAI,
  OPT_TRANS_CUSTOMIZE,
 ];

@@ -218,6 +230,23 @@ export const OPT_LANGS_SPECIAL = {
  [OPT_TRANS_OPENAI]: new Map(
    OPT_LANGS_FROM.map(([key, val]) => [key, val.split(" - ")[0]])
  ),
+  [OPT_TRANS_GEMINI]: new Map(
+    OPT_LANGS_FROM.map(([key, val]) => [key, val.split(" - ")[0]])
+  ),
+  [OPT_TRANS_CLOUDFLAREAI]: new Map([
+    ["auto", ""],
+    ["zh-CN", "chinese"],
+    ["zh-TW", "chinese"],
+    ["en", "english"],
+    ["ar", "arabic"],
+    ["de", "german"],
+    ["ru", "russian"],
+    ["fr", "french"],
+    ["pt", "portuguese"],
+    ["ja", "japanese"],
+    ["es", "spanish"],
+    ["hi", "hindi"],
+  ]),
  [OPT_TRANS_CUSTOMIZE]: new Map([
    ...OPT_LANGS_FROM.map(([key]) => [key, key]),
    ["auto", ""],
@@ -245,6 +274,7 @@ export const OPT_STYLE_DASHLINE = "dash_line"; // 虚线
 export const OPT_STYLE_WAVYLINE = "wavy_line"; // 波浪线
 export const OPT_STYLE_FUZZY = "fuzzy"; // 模糊
 export const OPT_STYLE_HIGHLIGHT = "highlight"; // 高亮
+export const OPT_STYLE_BLOCKQUOTE = "blockquote"; // 引用
 export const OPT_STYLE_DIY = "diy_style"; // 自定义样式
 export const OPT_STYLE_ALL = [
  OPT_STYLE_NONE,
@@ -254,6 +284,7 @@ export const OPT_STYLE_ALL = [
  OPT_STYLE_WAVYLINE,
  OPT_STYLE_FUZZY,
  OPT_STYLE_HIGHLIGHT,
+  OPT_STYLE_BLOCKQUOTE,
  OPT_STYLE_DIY,
 ];
 export const OPT_STYLE_USE_COLOR = [
@@ -262,6 +293,7 @@ export const OPT_STYLE_USE_COLOR = [
  OPT_STYLE_DASHLINE,
  OPT_STYLE_WAVYLINE,
  OPT_STYLE_HIGHLIGHT,
+  OPT_STYLE_BLOCKQUOTE,
 ];

 export const OPT_MOUSEKEY_DISABLE = "mk_disable";
@@ -282,6 +314,7 @@ export const DEFAULT_FETCH_INTERVAL = 100; // 默认任务间隔时间

 export const PROMPT_PLACE_FROM = "{{from}}"; // 占位符
 export const PROMPT_PLACE_TO = "{{to}}"; // 占位符
+export const PROMPT_PLACE_TEXT = "{{text}}"; // 占位符

 export const DEFAULT_COLOR = "#209CEE"; // 默认高亮背景色/线条颜色

@@ -289,6 +322,7 @@ export const DEFAULT_COLOR = "#209CEE"; // 默认高亮背景色/线条颜色
 export const GLOBLA_RULE = {
  pattern: "*",
  selector: DEFAULT_SELECTOR,
+  keepSelector: DEFAULT_KEEP_SELECTOR,
  translator: OPT_TRANS_MICROSOFT,
  fromLang: "auto",
  toLang: "zh-CN",
@@ -313,15 +347,17 @@ export const DEFAULT_INPUT_RULE = {
 };

 // 划词翻译
-export const DEFAULT_TRANBOX_SHORTCUT = ["AltLeft", "KeyB"];
+export const DEFAULT_TRANBOX_SHORTCUT = ["AltLeft", "KeyS"];
 export const DEFAULT_TRANBOX_SETTING = {
  transOpen: true,
  translator: OPT_TRANS_MICROSOFT,
  fromLang: "auto",
  toLang: "zh-CN",
+  toLang2: "en",
  tranboxShortcut: DEFAULT_TRANBOX_SHORTCUT,
  btnOffsetX: 10,
  btnOffsetY: 10,
+  hideTranBtn: false,
 };

 // 订阅列表
@@ -360,6 +396,16 @@ export const DEFAULT_TRANS_APIS = {
    model: "gpt-4",
    prompt: `You will be provided with a sentence in ${PROMPT_PLACE_FROM}, and your task is to translate it into ${PROMPT_PLACE_TO}.`,
  },
+  [OPT_TRANS_GEMINI]: {
+    url: "https://generativelanguage.googleapis.com/v1/models",
+    key: "",
+    model: "gemini-pro",
+    prompt: `Translate the following text from ${PROMPT_PLACE_FROM} to ${PROMPT_PLACE_TO}:\n\n${PROMPT_PLACE_TEXT}`,
+  },
+  [OPT_TRANS_CLOUDFLAREAI]: {
+    url: "https://api.cloudflare.com/client/v4/accounts/{ACCOUNT_ID}/ai/run/@cf/meta/m2m100-1.2b",
+    key: "",
+  },
  [OPT_TRANS_CUSTOMIZE]: {
    url: "",
    key: "",
@@ -375,12 +421,19 @@ export const DEFAULT_SHORTCUTS = {
  [OPT_SHORTCUT_TRANSLATE]: ["AltLeft", "KeyQ"],
  [OPT_SHORTCUT_STYLE]: ["AltLeft", "KeyC"],
  [OPT_SHORTCUT_POPUP]: ["AltLeft", "KeyK"],
-  [OPT_SHORTCUT_SETTING]: ["AltLeft", "KeyN"],
+  [OPT_SHORTCUT_SETTING]: ["AltLeft", "KeyO"],
 };

 export const TRANS_MIN_LENGTH = 5; // 最短翻译长度
 export const TRANS_MAX_LENGTH = 5000; // 最长翻译长度
 export const TRANS_NEWLINE_LENGTH = 20; // 换行字符数
+export const DEFAULT_BLACKLIST = [
+  "https://fishjar.github.io/kiss-translator/options.html",
+  "https://translate.google.com",
+  "https://www.deepl.com/translator",
+  "oapi.dingtalk.com",
+  "login.dingtalk.com",
+]; // 禁用翻译名单

 export const DEFAULT_SETTING = {
  darkMode: false, // 深色模式
@@ -394,6 +447,7 @@ export const DEFAULT_SETTING = {
  injectRules: true, // 是否注入订阅规则
  injectWebfix: true, // 是否注入修复补丁
  detectRemote: false, // 是否使用远程语言检测
+  contextMenus: true, // 是否添加右键菜单
  subrulesList: DEFAULT_SUBRULES_LIST, // 订阅列表
  owSubrule: DEFAULT_OW_RULE, // 覆写订阅规则
  transApis: DEFAULT_TRANS_APIS, // 翻译接口
@@ -401,6 +455,9 @@ export const DEFAULT_SETTING = {
  shortcuts: DEFAULT_SHORTCUTS, // 快捷键
  inputRule: DEFAULT_INPUT_RULE, // 输入框设置
  tranboxSetting: DEFAULT_TRANBOX_SETTING, // 划词翻译设置
+  touchTranslate: 2, // 触屏翻译
+  blacklist: DEFAULT_BLACKLIST.join(",\n"), // 禁用翻译名单
+  disableLangs: [], // 不翻译的语言
 };

 export const DEFAULT_RULES = [GLOBLA_RULE];
--- a/src/config/rules.js
+++ b/src/config/rules.js
@@ -1,6 +1,5 @@
-const els = `li, p, h1, h2, h3, h4, h5, h6, dd, blockquote`;
-
-export const DEFAULT_SELECTOR = `:is(${els})`;
+export const DEFAULT_SELECTOR = `:is(li, p, h1, h2, h3, h4, h5, h6, dd, blockquote)`;
+export const DEFAULT_KEEP_SELECTOR = `code, img, svg`;

 export const GLOBAL_KEY = "*";
 export const REMAIN_KEY = "-";
@@ -10,6 +9,7 @@ export const SHADOW_KEY = ">>>";
 export const DEFAULT_RULE = {
  pattern: "",
  selector: "",
+  keepSelector: "",
  translator: GLOBAL_KEY,
  fromLang: GLOBAL_KEY,
  toLang: GLOBAL_KEY,
@@ -42,145 +42,155 @@ export const DEFAULT_OW_RULE = {
  textDiyStyle: DEFAULT_DIY_STYLE,
 };

-const RULES = [
-  {
-    pattern: `www.google.com/search`,
-    selector: `h3, .IsZvec, .VwiC3b`,
-  },
-  {
-    pattern: `news.google.com`,
-    selector: `h4`,
-  },
-  {
-    pattern: `www.foxnews.com`,
-    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"]`,
-  },
-  {
-    pattern: `bearblog.dev, www.theverge.com, www.tampermonkey.net/documentation.php`,
-    selector: DEFAULT_SELECTOR,
-  },
-  {
-    pattern: `themessenger.com`,
-    selector: `.leading-tight, .leading-tighter, .my-2 p, .font-body p, article ${DEFAULT_SELECTOR}`,
-  },
-  {
-    pattern: `www.telegraph.co.uk`,
-    selector: `article ${DEFAULT_SELECTOR}`,
-  },
-  {
-    pattern: `www.theguardian.com`,
-    selector: `.show-underline, .dcr-hup5wm div, .dcr-7vl6y8 div, .dcr-12evv1c, figcaption, article ${DEFAULT_SELECTOR}, [data-cy="mostviewed-footer"] h4`,
-  },
-  {
-    pattern: `www.semafor.com`,
-    selector: `${DEFAULT_SELECTOR}, .styles_intro__IYj__, [class*="styles_description"]`,
-  },
-  {
-    pattern: `www.noemamag.com`,
-    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`,
-  },
-  {
-    pattern: `restofworld.org`,
-    selector: `${DEFAULT_SELECTOR}, .recirc-story__headline, .recirc-story__dek`,
-  },
-  {
-    pattern: `www.axios.com`,
-    selector: `.h7, ${DEFAULT_SELECTOR}`,
-  },
-  {
-    pattern: `www.newyorker.com`,
-    selector: `.summary-item__hed, .summary-item__dek, .summary-collection-grid__dek, .dqtvfu, .rubric__link, .caption, article ${DEFAULT_SELECTOR}, .HEhan ${DEFAULT_SELECTOR}, .ContributorBioBio-fBolsO`,
-  },
-  {
-    pattern: `https://time.com/`,
-    selector: `h1, h3, .summary, .video-title, #article-body ${DEFAULT_SELECTOR}, .image-wrap-container .credit.body-caption, .media-heading`,
-  },
-  {
-    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`,
-  },
-];
+const RULES_MAP = {
+  "www.google.com/search": [`h3, .IsZvec, .VwiC3b`],
+  "news.google.com": [`[role="link"], .DY5T1d, .ifw3f, ${DEFAULT_SELECTOR}`],
+  "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}`,
+  ],
+  "www.telegraph.co.uk, go.dev/doc/": [`article ${DEFAULT_SELECTOR}`],
+  "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`,
+  ],
+  "restofworld.org": [
+    `${DEFAULT_SELECTOR}, .recirc-story__headline, .recirc-story__dek`,
+  ],
+  "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, .BaseText-ewhhUZ`,
+  ],
+  "time.com": [
+    `h1, h3, .summary, .video-title, #article-body ${DEFAULT_SELECTOR}, .image-wrap-container .credit.body-caption, .media-heading`,
+  ],
+  "www.dw.com": [
+    `.ts-teaser-title a, .news-title a, .title a, .teaser-description a, .hbudab h3, .hbudab p, figcaption ,article ${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, .lx-c-summary-points>li`,
+  ],
+  "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"]`],
+  "www.reddit.com": [
+    `div:is(.tbIApBd2DM_drfZQJjIum, ._1zPvgKHteTOub9dKkvrOl4,.ULWj94BYSOqoJDetxgcnU),a:is([class^="_334yl59"],[class^="_2GrMpxD"]),h1,h2,h3,h4,h5,h6,p,button`,
+  ],
+  "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}`,
+  ],
+  "www.bloomberg.com": [
+    `[data-component="headline"], [data-component="related-item-headline"], [data-component="title"], article ${DEFAULT_SELECTOR}`,
+  ],
+  "deno.land, docs.github.com": [`main ${DEFAULT_SELECTOR}`, `code, img, svg`],
+  "doc.rust-lang.org": [`.content ${DEFAULT_SELECTOR}`, `code, img, svg`],
+  "www.indiehackers.com": [
+    `h1, h3, .content ${DEFAULT_SELECTOR}, .feed-item__title-link`,
+  ],
+  "platform.openai.com/docs": [
+    `.docs-body ${DEFAULT_SELECTOR}`,
+    `code, img, svg`,
+  ],
+  "en.wikipedia.org": [
+    `h1, .mw-parser-output ${DEFAULT_SELECTOR}`,
+    `.mwe-math-element`,
+  ],
+  "stackoverflow.com": [
+    `h1, .s-prose p, .comment-body .comment-copy`,
+    `code, img, svg`,
+  ],
+  "www.npmjs.com/package, developer.chrome.com/docs, medium.com, developers.cloudflare.com, react.dev, create-react-app.dev, pytorch.org":
+    [`article ${DEFAULT_SELECTOR}`],
+  "news.ycombinator.com": [`.title, .commtext`],
+  "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`,
+    `code, img, svg`,
+  ],
+  "twitter.com": [
+    `[data-testid="tweetText"], [data-testid="birdwatch-pivot"]>div.css-1rynq56`,
+    `img, a, .r-18u37iz, .css-175oi2r`,
+  ],
+  "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`,
+  ],
+  "www.youtube.com": [
+    `h1, #video-title, #content-text, #title, yt-attributed-string>span>span, #ytp-caption-window-container .ytp-caption-segment`,
+  ],
+  "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}`],
+  "wx2.qq.com": [`.js_message_plain`],
+  "app.slack.com/client/": [
+    `.p-rich_text_section, .c-message_attachment__text, .p-rich_text_list li`,
+  ],
+  "discord.com/channels/": [
+    `li[id^=chat-messages] div[id^=message-content], div[class^=headerText], div[class^=name_], section[aria-label='Search Results'] div[id^=message-content]`,
+  ],
+  "t.me/s/": [`.js-message_text ${DEFAULT_SELECTOR}`],
+  "web.telegram.org/k/": [
+    `.message, .bot-commands-list-element-description, .reply-markup-button-text`,
+  ],
+  "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`],
+  "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']`,
+  ],
+  "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}`,
+  ],
+  "forum.ru-board.com": [`.tit, .dats, span.post, .lgf ${DEFAULT_SELECTOR}`],
+  "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`,
+    `code, img, svg`,
+  ],
+  "greasyfork.org": [
+    `h2, .script-link, .script-description, #additional-info ${DEFAULT_SELECTOR}`,
+  ],
+  "www.fmkorea.com": [`#container ${DEFAULT_SELECTOR}`],
+  "forum.arduino.cc": [
+    `.top-row>.title, .featured-topic>.title, .link-top-line>.title, .category-description, .topic-excerpt, .fancy-title, .cooked ${DEFAULT_SELECTOR}`,
+  ],
+  "docs.arduino.cc": [`[class^="tutorial-module--left"] ${DEFAULT_SELECTOR}`],
+  "www.historydefined.net": [`.wp-element-caption, ${DEFAULT_SELECTOR}`],
+};

-export const BUILTIN_RULES = RULES.sort((a, b) =>
-  a.pattern.localeCompare(b.pattern)
-).map((item) => ({
-  ...DEFAULT_RULE,
-  ...item,
-  transOpen: "true",
-}));
+export const BUILTIN_RULES = Object.entries(RULES_MAP)
+  .sort((a, b) => a[0].localeCompare(b[0]))
+  .map(([pattern, [selector, keepSelector = ""]]) => ({
+    ...DEFAULT_RULE,
+    pattern,
+    selector,
+    keepSelector,
+  }));
--- a/src/content.js
+++ b/src/content.js
@@ -1,76 +1,3 @@
-import { browser } from "./libs/browser";
-import {
-  MSG_TRANS_TOGGLE,
-  MSG_TRANS_TOGGLE_STYLE,
-  MSG_TRANS_GETRULE,
-  MSG_TRANS_PUTRULE,
-} from "./config";
-import { getSettingWithDefault } from "./libs/storage";
-import { isIframe, sendIframeMsg } from "./libs/iframe";
-import { runWebfix } from "./libs/webfix";
-import {
-  runIframe,
-  runTranslator,
-  showFab,
-  showTransbox,
-  windowListener,
-  showErr,
-} from "./common";
+import { run } from "./common";

-function runtimeListener(translator) {
-  browser?.runtime.onMessage.addListener(async ({ action, args }) => {
-    switch (action) {
-      case MSG_TRANS_TOGGLE:
-        translator.toggle();
-        sendIframeMsg(MSG_TRANS_TOGGLE);
-        break;
-      case MSG_TRANS_TOGGLE_STYLE:
-        translator.toggleStyle();
-        sendIframeMsg(MSG_TRANS_TOGGLE_STYLE);
-        break;
-      case MSG_TRANS_GETRULE:
-        break;
-      case MSG_TRANS_PUTRULE:
-        translator.updateRule(args);
-        sendIframeMsg(MSG_TRANS_PUTRULE, args);
-        break;
-      default:
-        return { error: `message action is unavailable: ${action}` };
-    }
-    return { data: translator.rule };
-  });
-}
-
-/**
- * 入口函数
- */
-(async () => {
-  try {
-    // 读取设置信息
-    const setting = await getSettingWithDefault();
-
-    // 适配iframe
-    if (isIframe) {
-      runIframe(setting);
-      return;
-    }
-
-    // 不规范网页修复
-    await runWebfix(setting);
-
-    // 翻译网页
-    const { translator, rule } = await runTranslator(setting);
-
-    // 监听消息
-    windowListener(rule);
-    runtimeListener(translator);
-
-    // 划词翻译
-    showTransbox(setting);
-
-    // 浮球按钮
-    await showFab(translator);
-  } catch (err) {
-    showErr(err);
-  }
-})();
+run();
--- a/src/hooks/FavWords.js
+++ b/src/hooks/FavWords.js
@@ -0,0 +1,67 @@
+import { KV_WORDS_KEY } from "../config";
+import { useCallback, useEffect, useState } from "react";
+import { trySyncWords } from "../libs/sync";
+import { getWordsWithDefault, setWords } from "../libs/storage";
+import { useSyncMeta } from "./Sync";
+
+export function useFavWords() {
+  const [loading, setLoading] = useState(false);
+  const [favWords, setFavWords] = useState({});
+  const { updateSyncMeta } = useSyncMeta();
+
+  const toggleFav = useCallback(
+    async (word) => {
+      const favs = { ...favWords };
+      if (favs[word]) {
+        delete favs[word];
+      } else {
+        favs[word] = { createdAt: Date.now() };
+      }
+      await setWords(favs);
+      await updateSyncMeta(KV_WORDS_KEY);
+      await trySyncWords();
+      setFavWords(favs);
+    },
+    [updateSyncMeta, favWords]
+  );
+
+  const mergeWords = useCallback(
+    async (newWords) => {
+      const favs = { ...favWords };
+      newWords.forEach((word) => {
+        if (!favs[word]) {
+          favs[word] = { createdAt: Date.now() };
+        }
+      });
+      await setWords(favs);
+      await updateSyncMeta(KV_WORDS_KEY);
+      await trySyncWords();
+      setFavWords(favs);
+    },
+    [updateSyncMeta, favWords]
+  );
+
+  const clearWords = useCallback(async () => {
+    await setWords({});
+    await updateSyncMeta(KV_WORDS_KEY);
+    await trySyncWords();
+    setFavWords({});
+  }, [updateSyncMeta]);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        setLoading(true);
+        await trySyncWords();
+        const favWords = await getWordsWithDefault();
+        setFavWords(favWords);
+      } catch (err) {
+        console.log("[query fav]", err);
+      } finally {
+        setLoading(false);
+      }
+    })();
+  }, []);
+
+  return { loading, favWords, toggleFav, mergeWords, clearWords };
+}
--- a/src/hooks/Storage.js
+++ b/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);
--- a/src/hooks/Theme.js
+++ b/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]);
--- a/src/hooks/Translate.js
+++ b/src/hooks/Translate.js
@@ -24,7 +24,11 @@ export function useTranslate(q, rule, setting) {
        setLoading(true);

        const deLang = await tryDetectLang(q, setting.detectRemote);
-        if (deLang && toLang.includes(deLang)) {
+        const disableLangs = setting.disableLangs || [];
+        if (
+          deLang &&
+          (toLang.includes(deLang) || disableLangs.includes(deLang))
+        ) {
          setSamelang(true);
        } else {
          const [trText, isSame] = await apiTranslate({
--- a/src/hooks/WebfixRules.js
+++ b/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 };
+}
--- a/src/libs/blacklist.js
+++ b/src/libs/blacklist.js
@@ -0,0 +1,13 @@
+import { isMatch } from "./utils";
+import { DEFAULT_BLACKLIST } from "../config";
+
+/**
+ * 检查是否在黑名单中
+ * @param {*} href
+ * @param {*} param1
+ * @returns
+ */
+export const isInBlacklist = (
+  href,
+  { blacklist = DEFAULT_BLACKLIST.join(",\n") }
+) => blacklist.split(",").some((url) => isMatch(href, url.trim()));
--- a/src/libs/fetch.js
+++ b/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;
  }
--- a/src/libs/inputTranslate.js
+++ b/src/libs/inputTranslate.js
@@ -0,0 +1,205 @@
+import {
+  DEFAULT_INPUT_RULE,
+  DEFAULT_TRANS_APIS,
+  DEFAULT_INPUT_SHORTCUT,
+  OPT_LANGS_LIST,
+} from "../config";
+import { genEventName, removeEndchar, matchInputStr, sleep } from "./utils";
+import { stepShortcutRegister } from "./shortcut";
+import { apiTranslate } from "../apis";
+import { tryDetectLang } from ".";
+import { loadingSvg } from "./svg";
+
+function isInputNode(node) {
+  return node.nodeName === "INPUT" || node.nodeName === "TEXTAREA";
+}
+
+function isEditAbleNode(node) {
+  return node.hasAttribute("contenteditable");
+}
+
+function selectContent(node) {
+  node.focus();
+  const range = document.createRange();
+  range.selectNodeContents(node);
+
+  const selection = window.getSelection();
+  selection.removeAllRanges();
+  selection.addRange(range);
+}
+
+function pasteContentEvent(node, text) {
+  node.focus();
+  const data = new DataTransfer();
+  data.setData("text/plain", text);
+
+  const event = new ClipboardEvent("paste", { clipboardData: data });
+  document.dispatchEvent(event);
+  data.clearData();
+}
+
+function pasteContentCommand(node, text) {
+  node.focus();
+  document.execCommand("insertText", false, text);
+}
+
+function collapseToEnd(node) {
+  node.focus();
+  const selection = window.getSelection();
+  selection.collapseToEnd();
+}
+
+function getNodeText(node) {
+  if (isInputNode(node)) {
+    return node.value;
+  }
+  return node.innerText || node.textContent || "";
+}
+
+function addLoading(node, loadingId) {
+  const div = document.createElement("div");
+  div.id = loadingId;
+  div.innerHTML = loadingSvg;
+  div.style.cssText = `
+      width: ${node.offsetWidth}px;
+      height: ${node.offsetHeight}px;
+      line-height: ${node.offsetHeight}px;
+      position: absolute;
+      text-align: center;
+      left: ${node.offsetLeft}px;
+      top: ${node.offsetTop}px;
+      z-index: 2147483647;
+    `;
+  node.offsetParent?.appendChild(div);
+}
+
+function removeLoading(node, loadingId) {
+  const div = node.offsetParent.querySelector(`#${loadingId}`);
+  if (div) {
+    div.remove();
+  }
+}
+
+/**
+ * 输入框翻译
+ */
+export default function inputTranslate ({
+  inputRule: {
+    transOpen,
+    triggerShortcut,
+    translator,
+    fromLang,
+    toLang,
+    triggerCount,
+    triggerTime,
+    transSign,
+  } = DEFAULT_INPUT_RULE,
+  transApis,
+  detectRemote,
+}) {
+  if (!transOpen) {
+    return;
+  }
+
+  const apiSetting = transApis?.[translator] || DEFAULT_TRANS_APIS[translator];
+  if (triggerShortcut.length === 0) {
+    triggerShortcut = DEFAULT_INPUT_SHORTCUT;
+    triggerCount = 1;
+  }
+
+  stepShortcutRegister(
+    triggerShortcut,
+    async () => {
+      let node = document.activeElement;
+
+      if (!node) {
+        return;
+      }
+
+      while (node.shadowRoot) {
+        node = node.shadowRoot.activeElement;
+      }
+
+      if (!isInputNode(node) && !isEditAbleNode(node)) {
+        return;
+      }
+
+      let initText = getNodeText(node);
+      if (triggerShortcut.length === 1 && triggerShortcut[0].length === 1) {
+        // todo: remove multiple char
+        initText = removeEndchar(initText, triggerShortcut[0], triggerCount);
+      }
+      if (!initText.trim()) {
+        return;
+      }
+
+      let text = initText;
+      if (transSign) {
+        const res = matchInputStr(text, transSign);
+        if (res) {
+          let lang = res[1];
+          if (lang === "zh" || lang === "cn") {
+            lang = "zh-CN";
+          } else if (lang === "tw" || lang === "hk") {
+            lang = "zh-TW";
+          }
+          if (lang && OPT_LANGS_LIST.includes(lang)) {
+            toLang = lang;
+          }
+          text = res[2];
+        }
+      }
+
+      // console.log("input -->", text);
+
+      const loadingId = "kiss-" + genEventName();
+      try {
+        addLoading(node, loadingId);
+
+        const deLang = await tryDetectLang(text, detectRemote);
+        if (deLang && toLang.includes(deLang)) {
+          return;
+        }
+
+        const [trText, isSame] = await apiTranslate({
+          translator,
+          text,
+          fromLang,
+          toLang,
+          apiSetting,
+        });
+        if (!trText || isSame) {
+          return;
+        }
+
+        if (isInputNode(node)) {
+          node.value = trText;
+          node.dispatchEvent(
+            new Event("input", { bubbles: true, cancelable: true })
+          );
+          return;
+        }
+
+        selectContent(node);
+        await sleep(200);
+
+        pasteContentEvent(node, trText);
+        await sleep(200);
+
+        // todo: use includes?
+        if (getNodeText(node).startsWith(initText)) {
+          pasteContentCommand(node, trText);
+          await sleep(100);
+        } else {
+          collapseToEnd(node);
+        }
+      } catch (err) {
+        console.log("[translate input]", err.message);
+      } finally {
+        removeLoading(node, loadingId);
+      }
+    },
+    triggerCount,
+    triggerTime
+  );
+}
--- a/src/libs/req.js
+++ b/src/libs/req.js
@@ -8,16 +8,39 @@ import {
  OPT_TRANS_BAIDU,
  OPT_TRANS_TENCENT,
  OPT_TRANS_OPENAI,
+  OPT_TRANS_GEMINI,
+  OPT_TRANS_CLOUDFLAREAI,
  OPT_TRANS_CUSTOMIZE,
  URL_MICROSOFT_TRAN,
  URL_TENCENT_TRANSMART,
  PROMPT_PLACE_FROM,
  PROMPT_PLACE_TO,
+  PROMPT_PLACE_TEXT,
 } from "../config";
 import { msAuth } from "./auth";
 import { genDeeplFree } from "../apis/deepl";
 import { genBaidu } from "../apis/baidu";

+const keyMap = new Map();
+
+// 轮询key
+const keyPick = (translator, key = "") => {
+  const keys = key
+    .split(",")
+    .map((item) => item.trim())
+    .filter(Boolean);
+
+  if (keys.length === 0) {
+    return "";
+  }
+
+  const preIndex = keyMap.get(translator) ?? -1;
+  const curIndex = (preIndex + 1) % keys.length;
+  keyMap.set(translator, curIndex);
+
+  return keys[curIndex];
+};
+
 /**
 * 构造缓存 request
 * @param {*} request
@@ -143,7 +166,7 @@ const genTencent = ({ text, from, to }) => {
  return [URL_TENCENT_TRANSMART, init];
 };

-const genOpenai = ({ text, from, to, url, key, prompt, model }) => {
+const genOpenAI = ({ text, from, to, url, key, prompt, model }) => {
  prompt = prompt
    .replaceAll(PROMPT_PLACE_FROM, from)
    .replaceAll(PROMPT_PLACE_TO, to);
@@ -177,6 +200,56 @@ const genOpenai = ({ text, from, to, url, key, prompt, model }) => {
  return [url, init];
 };

+const genGemini = ({ text, from, to, url, key, prompt, model }) => {
+  prompt = prompt
+    .replaceAll(PROMPT_PLACE_FROM, from)
+    .replaceAll(PROMPT_PLACE_TO, to)
+    .replaceAll(PROMPT_PLACE_TEXT, text);
+
+  const data = {
+    contents: [
+      {
+        // role: "user",
+        parts: [
+          {
+            text: prompt,
+          },
+        ],
+      },
+    ],
+  };
+
+  const input = `${url}/${model}:generateContent?key=${key}`;
+  const init = {
+    headers: {
+      "Content-type": "application/json",
+    },
+    method: "POST",
+    body: JSON.stringify(data),
+  };
+
+  return [input, init];
+};
+
+const genCloudflareAI = ({ text, from, to, url, key }) => {
+  const data = {
+    text,
+    source_lang: from,
+    target_lang: to,
+  };
+
+  const init = {
+    headers: {
+      "Content-type": "application/json",
+      Authorization: `Bearer ${key}`,
+    },
+    method: "POST",
+    body: JSON.stringify(data),
+  };
+
+  return [url, init];
+};
+
 const genCustom = ({ text, from, to, url, key }) => {
  const data = {
    text,
@@ -197,8 +270,24 @@ const genCustom = ({ text, from, to, url, key }) => {
  return [url, init];
 };

+/**
+ * 构造翻译接口 request
+ * @param {*}
+ * @returns
+ */
 export const newTransReq = ({ translator, text, from, to }, apiSetting) => {
  const args = { text, from, to, ...apiSetting };
+
+  switch (translator) {
+    case OPT_TRANS_DEEPL:
+    case OPT_TRANS_OPENAI:
+    case OPT_TRANS_GEMINI:
+    case OPT_TRANS_CLOUDFLAREAI:
+      args.key = keyPick(translator, args.key);
+      break;
+    default:
+  }
+
  switch (translator) {
    case OPT_TRANS_GOOGLE:
      return genGoogle(args);
@@ -215,7 +304,11 @@ export const newTransReq = ({ translator, text, from, to }, apiSetting) => {
    case OPT_TRANS_TENCENT:
      return genTencent(args);
    case OPT_TRANS_OPENAI:
-      return genOpenai(args);
+      return genOpenAI(args);
+    case OPT_TRANS_GEMINI:
+      return genGemini(args);
+    case OPT_TRANS_CLOUDFLAREAI:
+      return genCloudflareAI(args);
    case OPT_TRANS_CUSTOMIZE:
      return genCustom(args);
    default:
--- a/src/libs/rules.js
+++ b/src/libs/rules.js
@@ -21,7 +21,6 @@ import { trySyncRules } from "./sync";
 * @returns
 */
 export const matchRule = async (
-  rules,
  href,
  {
    injectRules = true,
@@ -29,7 +28,7 @@ export const matchRule = async (
    owSubrule = DEFAULT_OW_RULE,
  }
 ) => {
-  rules = [...rules];
+  const rules = await getRulesWithDefault();
  if (injectRules) {
    try {
      const selectedSub = subrulesList.find((item) => item.selected);
@@ -67,6 +66,7 @@ export const matchRule = async (
  }

  rule.selector = rule.selector?.trim() || globalRule.selector;
+  rule.keepSelector = rule.keepSelector?.trim() || globalRule.keepSelector;
  if (rule.textStyle === GLOBAL_KEY) {
    rule.textStyle = globalRule.textStyle;
    rule.bgColor = globalRule.bgColor;
@@ -113,6 +113,7 @@ export const checkRules = (rules) => {
      ({
        pattern,
        selector,
+        keepSelector,
        translator,
        fromLang,
        toLang,
@@ -123,6 +124,7 @@ export const checkRules = (rules) => {
      }) => ({
        pattern: pattern.trim(),
        selector: type(selector) === "string" ? selector : "",
+        keepSelector: type(keepSelector) === "string" ? keepSelector : "",
        bgColor: type(bgColor) === "string" ? bgColor : "",
        textDiyStyle: type(textDiyStyle) === "string" ? textDiyStyle : "",
        translator: matchValue([GLOBAL_KEY, ...OPT_TRANS_ALL], translator),
--- a/src/libs/shortcut.js
+++ b/src/libs/shortcut.js
@@ -36,8 +36,8 @@ export const shortcutListener = (fn, target = document, timeout = 3000) => {
    }
  };

-  target.addEventListener("keydown", handleKeydown);
-  target.addEventListener("keyup", handleKeyup);
+  target.addEventListener("keydown", handleKeydown, true);
+  target.addEventListener("keyup", handleKeyup, true);
  return () => {
    if (timer) {
      clearTimeout(timer);
--- a/src/libs/storage.js
+++ b/src/libs/storage.js
@@ -1,6 +1,8 @@
 import {
  STOKEY_SETTING,
  STOKEY_RULES,
+  STOKEY_WFRULES,
+  STOKEY_WORDS,
  STOKEY_FAB,
  STOKEY_SYNC,
  STOKEY_MSAUTH,
@@ -97,6 +99,21 @@ 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);
+
+/**
+ * 词汇列表
+ */
+export const getWords = () => getObj(STOKEY_WORDS);
+export const getWordsWithDefault = async () => (await getWords()) || {};
+export const setWords = (val) => setObj(STOKEY_WORDS, val);
+
 /**
 * 订阅规则
 */
--- a/src/libs/sync.js
+++ b/src/libs/sync.js
@@ -2,6 +2,8 @@ import {
  APP_LCNAME,
  KV_SETTING_KEY,
  KV_RULES_KEY,
+  KV_WFRULES_KEY,
+  KV_WORDS_KEY,
  KV_RULES_SHARE_KEY,
  KV_SALT_SHARE,
  OPT_SYNCTYPE_WEBDAV,
@@ -11,8 +13,12 @@ import {
  updateSync,
  getSettingWithDefault,
  getRulesWithDefault,
+  getWordsWithDefault,
+  getWebfixRulesWithDefault,
  setSetting,
  setRules,
+  setWebfixRules,
+  setWords,
 } from "./storage";
 import { apiSyncData } from "../apis";
 import { sha256, removeEndchar } from "./utils";
@@ -135,6 +141,44 @@ 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
+ */
+const syncWords = async () => {
+  const res = await syncData(KV_WORDS_KEY, getWordsWithDefault);
+  if (res?.isNew) {
+    await setWords(res.value);
+  }
+};
+
+export const trySyncWords = async () => {
+  try {
+    await syncWords();
+  } catch (err) {
+    console.log("[sync fav words]", err);
+  }
+};
+
 /**
 * 同步分享规则
 * @param {*} param0
@@ -163,9 +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();
 };
--- a/src/libs/touch.js
+++ b/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);
+  };
+}
--- a/src/libs/translator.js
+++ b/src/libs/translator.js
@@ -9,102 +9,19 @@ import {
  SHADOW_KEY,
  OPT_MOUSEKEY_DISABLE,
  OPT_MOUSEKEY_MOUSEOVER,
-  DEFAULT_INPUT_RULE,
-  DEFAULT_TRANS_APIS,
-  DEFAULT_INPUT_SHORTCUT,
-  OPT_LANGS_LIST,
 } from "../config";
 import Content from "../views/Content";
 import { updateFetchPool, clearFetchPool } from "./fetch";
-import {
-  debounce,
-  genEventName,
-  removeEndchar,
-  matchInputStr,
-  sleep,
-} from "./utils";
-import { stepShortcutRegister } from "./shortcut";
-import { apiTranslate } from "../apis";
-import { tryDetectLang } from ".";
-import { loadingSvg } from "./svg";
-
-function isInputNode(node) {
-  return node.nodeName === "INPUT" || node.nodeName === "TEXTAREA";
-}
-
-function isEditAbleNode(node) {
-  return node.hasAttribute("contenteditable");
-}
-
-function selectContent(node) {
-  node.focus();
-  const range = document.createRange();
-  range.selectNodeContents(node);
-
-  const selection = window.getSelection();
-  selection.removeAllRanges();
-  selection.addRange(range);
-}
-
-function pasteContentEvent(node, text) {
-  node.focus();
-  const data = new DataTransfer();
-  data.setData("text/plain", text);
-
-  const event = new ClipboardEvent("paste", { clipboardData: data });
-  document.dispatchEvent(event);
-  data.clearData();
-}
-
-function pasteContentCommand(node, text) {
-  node.focus();
-  document.execCommand("insertText", false, text);
-}
-
-function collapseToEnd(node) {
-  node.focus();
-  const selection = window.getSelection();
-  selection.collapseToEnd();
-}
-
-function getNodeText(node) {
-  if (isInputNode(node)) {
-    return node.value;
-  }
-  return node.innerText || node.textContent || "";
-}
-
-function addLoading(node, loadingId) {
-  const div = document.createElement("div");
-  div.id = loadingId;
-  div.innerHTML = loadingSvg;
-  div.style.cssText = `
-      width: ${node.offsetWidth}px;
-      height: ${node.offsetHeight}px;
-      line-height: ${node.offsetHeight}px;
-      position: absolute;
-      text-align: center;
-      left: ${node.offsetLeft}px;
-      top: ${node.offsetTop}px;
-      z-index: 2147483647;
-    `;
-  node.offsetParent?.appendChild(div);
-}
-
-function removeLoading(node, loadingId) {
-  const div = node.offsetParent.querySelector(`#${loadingId}`);
-  if (div) {
-    div.remove();
-  }
-}
+import { debounce, genEventName } from "./utils";
+import { runFixer } from "./webfix";

 /**
 * 翻译类
 */
 export class Translator {
  _rule = {};
-  _inputRule = {};
  _setting = {};
+  _fixerSetting = null;
  _rootNodes = new Set();
  _tranNodes = new Map();
  _skipNodeNames = [
@@ -176,22 +93,18 @@ export class Translator {
    };
  };

-  constructor(rule, setting) {
+  constructor(rule, setting, fixerSetting) {
    const { fetchInterval, fetchLimit } = setting;
    updateFetchPool(fetchInterval, fetchLimit);
    this._overrideAttachShadow();

    this._setting = setting;
    this._rule = rule;
+    this._fixerSetting = fixerSetting;

    if (rule.transOpen === "true") {
      this._register();
    }
-
-    this._inputRule = setting.inputRule || DEFAULT_INPUT_RULE;
-    if (this._inputRule.transOpen) {
-      this._registerInput();
-    }
  }

  get setting() {
@@ -325,6 +238,11 @@ export class Translator {
      return;
    }

+    // webfix
+    if (this._fixerSetting) {
+      runFixer(this._fixerSetting);
+    }
+
    // 搜索节点
    this._queryNodes();

@@ -349,141 +267,22 @@ export class Translator {
      // 监听鼠标悬停
      window.addEventListener("keydown", this._handleKeydown);
      this._tranNodes.forEach((_, node) => {
-        node.addEventListener("mouseover", this._handleMouseover);
-        node.addEventListener("mouseout", this._handleMouseout);
+        node.addEventListener("mouseenter", this._handleMouseover);
+        node.addEventListener("mouseleave", this._handleMouseout);
      });
    }
  };

-  _registerInput = () => {
-    const {
-      triggerShortcut: initTriggerShortcut,
-      translator,
-      fromLang,
-      toLang: initToLang,
-      triggerCount: initTriggerCount,
-      triggerTime,
-      transSign,
-    } = this._inputRule;
-    const apiSetting =
-      this._setting.transApis?.[translator] || DEFAULT_TRANS_APIS[translator];
-    const { detectRemote } = this._setting;
-
-    let triggerShortcut = initTriggerShortcut;
-    let triggerCount = initTriggerCount;
-    if (triggerShortcut.length === 0) {
-      triggerShortcut = DEFAULT_INPUT_SHORTCUT;
-      triggerCount = 1;
-    }
-
-    stepShortcutRegister(
-      triggerShortcut,
-      async () => {
-        let node = document.activeElement;
-
-        if (!node) {
-          return;
-        }
-
-        while (node.shadowRoot) {
-          node = node.shadowRoot.activeElement;
-        }
-
-        if (!isInputNode(node) && !isEditAbleNode(node)) {
-          return;
-        }
-
-        let initText = getNodeText(node);
-        if (triggerShortcut.length === 1 && triggerShortcut[0].length === 1) {
-          // todo: remove multiple char
-          initText = removeEndchar(initText, triggerShortcut[0], triggerCount);
-        }
-        if (!initText.trim()) {
-          return;
-        }
-
-        let text = initText;
-        let toLang = initToLang;
-        if (transSign) {
-          const res = matchInputStr(text, transSign);
-          if (res) {
-            let lang = res[1];
-            if (lang === "zh" || lang === "cn") {
-              lang = "zh-CN";
-            } else if (lang === "tw" || lang === "hk") {
-              lang = "zh-TW";
-            }
-            if (lang && OPT_LANGS_LIST.includes(lang)) {
-              toLang = lang;
-            }
-            text = res[2];
-          }
-        }
-
-        // console.log("input -->", text);
-
-        const loadingId = "kiss-" + genEventName();
-        try {
-          addLoading(node, loadingId);
-
-          const deLang = await tryDetectLang(text, detectRemote);
-          if (deLang && toLang.includes(deLang)) {
-            return;
-          }
-
-          const [trText, isSame] = await apiTranslate({
-            translator,
-            text,
-            fromLang,
-            toLang,
-            apiSetting,
-          });
-          if (!trText || isSame) {
-            return;
-          }
-
-          if (isInputNode(node)) {
-            node.value = trText;
-            node.dispatchEvent(
-              new Event("input", { bubbles: true, cancelable: true })
-            );
-            return;
-          }
-
-          selectContent(node);
-          await sleep(200);
-
-          pasteContentEvent(node, trText);
-          await sleep(200);
-
-          // todo: use includes?
-          if (getNodeText(node).startsWith(initText)) {
-            pasteContentCommand(node, trText);
-            await sleep(100);
-          } else {
-            collapseToEnd(node);
-          }
-        } catch (err) {
-          console.log("[translate input]", err.message);
-        } finally {
-          removeLoading(node, loadingId);
-        }
-      },
-      triggerCount,
-      triggerTime
-    );
-  };
-
  _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("mouseout", this._handleMouseout);
+      e.target.removeEventListener("mouseenter", this._handleMouseover);
+      e.target.removeEventListener("mouseleave", this._handleMouseout);
      this._render(e.target);
    } else {
      this._mouseoverNode = e.target;
@@ -491,7 +290,7 @@ export class Translator {
  };

  _handleMouseout = (e) => {
-    // console.log("mouseout", e);
+    // console.log("mouseleave", e);
    if (!this._tranNodes.has(e.target)) {
      return;
    }
@@ -504,10 +303,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 +338,9 @@ export class Translator {
      // 移除鼠标悬停监听
      window.removeEventListener("keydown", this._handleKeydown);
      this._tranNodes.forEach((_, node) => {
-        node.removeEventListener("mouseover", this._handleMouseover);
-        node.removeEventListener("mouseout", this._handleMouseout);
+        // node.style.pointerEvents = "none";
+        node.removeEventListener("mouseenter", this._handleMouseover);
+        node.removeEventListener("mouseleave", this._handleMouseout);
        // 移除已插入元素
        node.querySelector(APP_LCNAME)?.remove();
      });
@@ -557,6 +360,11 @@ export class Translator {
    }
  }, 500);

+  _invalidLength = (q) =>
+    !q ||
+    q.length < (this._setting.minLength ?? TRANS_MIN_LENGTH) ||
+    q.length > (this._setting.maxLength ?? TRANS_MAX_LENGTH);
+
  _render = (el) => {
    let traEl = el.querySelector(APP_LCNAME);

@@ -576,20 +384,45 @@ export class Translator {
      traEl.remove();
    }

-    const q = el.innerText.trim();
+    let q = el.innerText.trim();
    this._tranNodes.set(el, q);

    // 太长或太短
-    if (
-      !q ||
-      q.length < (this._setting.minLength ?? TRANS_MIN_LENGTH) ||
-      q.length > (this._setting.maxLength ?? TRANS_MAX_LENGTH)
-    ) {
+    if (this._invalidLength(q)) {
      return;
    }

    // console.log("---> ", q);

+    const keepSelector = this._rule.keepSelector || "";
+    const keeps = [];
+    if (keepSelector.trim()) {
+      let text = "";
+      el.childNodes.forEach((child) => {
+        if (child.nodeType === 1 && child.matches(keepSelector)) {
+          if (child.nodeName === "IMG") {
+            child.style.cssText += `width: ${child.width}px;`;
+            child.style.cssText += `height: ${child.height}px;`;
+          }
+          text += `#${keeps.length}#`;
+          keeps.push(child.outerHTML);
+        } else {
+          text += child.textContent;
+        }
+      });
+
+      // 太长或太短
+      if (this._invalidLength(text.replace(/#(\d+)#/g, "").trim())) {
+        return;
+      }
+
+      if (keeps.length > 0) {
+        q = text;
+      }
+    }
+
+    // console.log("---> ", q);
+
    traEl = document.createElement(APP_LCNAME);
    traEl.style.visibility = "visible";
    el.appendChild(traEl);
@@ -601,6 +434,6 @@ export class Translator {
    }

    const root = createRoot(traEl);
-    root.render(<Content q={q} translator={this} />);
+    root.render(<Content q={q} keeps={keeps} translator={this} />);
  };
 }
--- a/src/libs/webfix.js
+++ b/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;
-  if (childs.length === 1 && childs[0].nodeName === "#text") {
-    node.innerHTML = node.innerHTML
-      .split("\n")
-      .map((item) => `<p>${item || "&nbsp;"}</p>`)
-      .join("");
-  }
+function bnDivFixer(node) {
+  return bnFixer(node, "div");
 }

 /**
@@ -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,
@@ -197,26 +218,38 @@ export const loadOrFetchWebfix = async (url) => {
 };

 /**
- * 匹配站点
+ * 执行fixer
+ * @param {*} param0
 */
-export async function runWebfix({ injectWebfix }) {
+export async function runFixer({ selector, fixer, rootSelector }) {
  try {
-    if (!injectWebfix) {
-      return;
-    }
+    run(selector, fixerMap[fixer], rootSelector);
+  } catch (err) {
+    console.error(`[kiss-webfix run]: ${err.message}`);
+  }
+}

-    const href = document.location.href;
-    const sites = await loadOrFetchWebfix(process.env.REACT_APP_WEBFIXURL);
+/**
+ * 匹配fixer配置
+ */
+export async function matchFixer(href, { injectWebfix }) {
+  if (!injectWebfix) {
+    return null;
+  }
+
+  try {
+    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)) {
-        if (fixerMap[site.fixer]) {
-          run(site.selector, fixerMap[site.fixer], site.rootSelector);
-        }
-        break;
+      if (isMatch(href, site.pattern) && fixerMap[site.fixer]) {
+        return site;
      }
    }
  } catch (err) {
-    console.error(`[kiss-webfix]: ${err.message}`);
+    console.error(`[kiss-webfix match]: ${err.message}`);
  }
+
+  return null;
 }
--- a/src/userscript.js
+++ b/src/userscript.js
@@ -1,77 +1,3 @@
-import { getSettingWithDefault } from "./libs/storage";
-import { trySyncAllSubRules } from "./libs/subRules";
-import { isIframe } from "./libs/iframe";
-import { handlePing, injectScript } from "./libs/gm";
-import { genEventName } from "./libs/utils";
-import { runWebfix } from "./libs/webfix";
-import {
-  runIframe,
-  runTranslator,
-  showFab,
-  showTransbox,
-  windowListener,
-  showErr,
-} from "./common";
+import { run } from "./common";

-function runSettingPage() {
-  if (GM?.info?.script?.grant?.includes("unsafeWindow")) {
-    unsafeWindow.GM = GM;
-    unsafeWindow.APP_INFO = {
-      name: process.env.REACT_APP_NAME,
-      version: process.env.REACT_APP_VERSION,
-    };
-  } else {
-    const ping = genEventName();
-    window.addEventListener(ping, handlePing);
-    // window.eval(`(${injectScript})("${ping}")`); // eslint-disable-line
-    const script = document.createElement("script");
-    script.textContent = `(${injectScript})("${ping}")`;
-    document.head.append(script);
-  }
-}
-
-/**
- * 入口函数
- */
-(async () => {
-  try {
-    // 设置页面
-    if (
-      document.location.href.includes(process.env.REACT_APP_OPTIONSPAGE_DEV) ||
-      document.location.href.includes(process.env.REACT_APP_OPTIONSPAGE) ||
-      document.location.href.includes(process.env.REACT_APP_OPTIONSPAGE2)
-    ) {
-      runSettingPage();
-      return;
-    }
-
-    // 读取设置信息
-    const setting = await getSettingWithDefault();
-
-    // 适配iframe
-    if (isIframe) {
-      runIframe(setting);
-      return;
-    }
-
-    // 不规范网页修复
-    await runWebfix(setting);
-
-    // 翻译网页
-    const { translator, rule } = await runTranslator(setting);
-
-    // 监听消息
-    windowListener(rule);
-
-    // 划词翻译
-    showTransbox(setting);
-
-    // 浮球按钮
-    await showFab(translator);
-
-    // 同步订阅规则
-    await trySyncAllSubRules(setting);
-  } catch (err) {
-    showErr(err);
-  }
-})();
+run(true);
--- a/src/views/Action/index.js
+++ b/src/views/Action/index.js
@@ -95,40 +95,42 @@ export default function Action({ translator, fab }) {
    // 注册菜单
    try {
      const menuCommandIds = [];
-      menuCommandIds.push(
-        GM.registerMenuCommand(
-          "Toggle Translate (Alt+q)",
-          (event) => {
-            translator.toggle();
-            sendIframeMsg(MSG_TRANS_TOGGLE);
-            setShowPopup(false);
-          },
-          "Q"
-        ),
-        GM.registerMenuCommand(
-          "Toggle Style (Alt+c)",
-          (event) => {
-            translator.toggleStyle();
-            sendIframeMsg(MSG_TRANS_TOGGLE_STYLE);
-            setShowPopup(false);
-          },
-          "C"
-        ),
-        GM.registerMenuCommand(
-          "Open Menu (Alt+k)",
-          (event) => {
-            setShowPopup((pre) => !pre);
-          },
-          "K"
-        ),
-        GM.registerMenuCommand(
-          "Open Setting (Alt+o)",
-          (event) => {
-            window.open(process.env.REACT_APP_OPTIONSPAGE, "_blank");
-          },
-          "O"
-        )
-      );
+      const { contextMenus = true } = translator.setting;
+      contextMenus &&
+        menuCommandIds.push(
+          GM.registerMenuCommand(
+            "Toggle Translate (Alt+Q)",
+            (event) => {
+              translator.toggle();
+              sendIframeMsg(MSG_TRANS_TOGGLE);
+              setShowPopup(false);
+            },
+            "Q"
+          ),
+          GM.registerMenuCommand(
+            "Toggle Style (Alt+C)",
+            (event) => {
+              translator.toggleStyle();
+              sendIframeMsg(MSG_TRANS_TOGGLE_STYLE);
+              setShowPopup(false);
+            },
+            "C"
+          ),
+          GM.registerMenuCommand(
+            "Open Menu (Alt+K)",
+            (event) => {
+              setShowPopup((pre) => !pre);
+            },
+            "K"
+          ),
+          GM.registerMenuCommand(
+            "Open Setting",
+            (event) => {
+              window.open(process.env.REACT_APP_OPTIONSPAGE, "_blank");
+            },
+            "O"
+          )
+        );

      return () => {
        menuCommandIds.forEach((id) => {
@@ -215,7 +217,12 @@ export default function Action({ translator, fab }) {
                }
              }}
            >
-              <TranslateIcon />
+              <TranslateIcon
+                sx={{
+                  width: 24,
+                  height: 24,
+                }}
+              />
            </Fab>
          }
        />
--- a/src/views/Content/index.js
+++ b/src/views/Content/index.js
@@ -7,6 +7,7 @@ import {
  OPT_STYLE_WAVYLINE,
  OPT_STYLE_FUZZY,
  OPT_STYLE_HIGHLIGHT,
+  OPT_STYLE_BLOCKQUOTE,
  OPT_STYLE_DIY,
  DEFAULT_COLOR,
  MSG_TRANS_CURRULE,
@@ -34,6 +35,18 @@ const LineSpan = styled("span")`
  }
 `;

+const BlockquoteSpan = styled("span")`
+  opacity: 0.6;
+  -webkit-opacity: 0.6;
+  display: block;
+  padding: 0 0.75em;
+  border-left: 0.25em solid ${(props) => props.$lineColor};
+  &:hover {
+    opacity: 1;
+    -webkit-opacity: 1;
+  }
+`;
+
 const FuzzySpan = styled("span")`
  filter: blur(0.2em);
  -webkit-filter: blur(0.2em);
@@ -86,6 +99,12 @@ function StyledSpan({ textStyle, textDiyStyle, bgColor, children }) {
          {children}
        </HighlightSpan>
      );
+    case OPT_STYLE_BLOCKQUOTE: // 引用
+      return (
+        <BlockquoteSpan $lineColor={bgColor || DEFAULT_COLOR}>
+          {children}
+        </BlockquoteSpan>
+      );
    case OPT_STYLE_DIY: // 自定义
      return <DiySpan $diyStyle={textDiyStyle}>{children}</DiySpan>;
    default:
@@ -93,7 +112,7 @@ function StyledSpan({ textStyle, textDiyStyle, bgColor, children }) {
  }
 }

-export default function Content({ q, translator }) {
+export default function Content({ q, keeps, translator }) {
  const [rule, setRule] = useState(translator.rule);
  const { text, sameLang, loading } = useTranslate(q, rule, translator.setting);
  const { textStyle, bgColor = "", textDiyStyle = "" } = rule;
@@ -126,18 +145,28 @@ export default function Content({ q, translator }) {
    );
  }

-  if (text && !sameLang) {
-    return (
-      <>
-        {q.length >= newlineLength ? <br /> : " "}
-        <StyledSpan
-          textStyle={textStyle}
-          textDiyStyle={textDiyStyle}
-          bgColor={bgColor}
-        >
-          {text}
-        </StyledSpan>
-      </>
-    );
+  if (!text || sameLang) {
+    return;
  }
+
+  return (
+    <>
+      {q.length >= newlineLength ? <br /> : " "}
+      <StyledSpan
+        textStyle={textStyle}
+        textDiyStyle={textDiyStyle}
+        bgColor={bgColor}
+      >
+        {keeps.length > 0 ? (
+          <span
+            dangerouslySetInnerHTML={{
+              __html: text.replace(/#(\d+)#/g, (_, p) => keeps[parseInt(p)]),
+            }}
+          />
+        ) : (
+          text
+        )}
+      </StyledSpan>
+    </>
+  );
 }
--- a/src/views/Options/Apis.js
+++ b/src/views/Options/Apis.js
@@ -5,10 +5,13 @@ import CircularProgress from "@mui/material/CircularProgress";
 import {
  OPT_TRANS_ALL,
  OPT_TRANS_MICROSOFT,
+  OPT_TRANS_DEEPL,
  OPT_TRANS_DEEPLFREE,
  OPT_TRANS_BAIDU,
  OPT_TRANS_TENCENT,
  OPT_TRANS_OPENAI,
+  OPT_TRANS_GEMINI,
+  OPT_TRANS_CLOUDFLAREAI,
  OPT_TRANS_CUSTOMIZE,
  URL_KISS_PROXY,
 } from "../../config";
@@ -46,7 +49,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);
    }
@@ -82,6 +98,13 @@ function ApiFields({ translator }) {
    OPT_TRANS_TENCENT,
  ];

+  const mulkeysTranslators = [
+    OPT_TRANS_DEEPL,
+    OPT_TRANS_OPENAI,
+    OPT_TRANS_GEMINI,
+    OPT_TRANS_CLOUDFLAREAI,
+  ];
+
  return (
    <Stack spacing={3}>
      {!buildinTranslators.includes(translator) && (
@@ -99,10 +122,14 @@ function ApiFields({ translator }) {
            name="key"
            value={key}
            onChange={handleChange}
+            multiline={mulkeysTranslators.includes(translator)}
+            helperText={
+              mulkeysTranslators.includes(translator) ? i18n("mulkeys_help") : ""
+            }
          />
        </>
      )}
-      {translator === OPT_TRANS_OPENAI && (
+      {(translator === OPT_TRANS_OPENAI || translator === OPT_TRANS_GEMINI) && (
        <>
          <TextField
            size="small"
--- a/src/views/Options/DownloadButton.js
+++ b/src/views/Options/DownloadButton.js
@@ -0,0 +1,27 @@
+import FileDownloadIcon from "@mui/icons-material/FileDownload";
+import Button from "@mui/material/Button";
+
+export default function DownloadButton({ data, text, fileName }) {
+  const handleClick = (e) => {
+    e.preventDefault();
+    if (data) {
+      const url = window.URL.createObjectURL(new Blob([data]));
+      const link = document.createElement("a");
+      link.href = url;
+      link.setAttribute("download", fileName || `${Date.now()}.json`);
+      document.body.appendChild(link);
+      link.click();
+      link.remove();
+    }
+  };
+  return (
+    <Button
+      size="small"
+      variant="outlined"
+      onClick={handleClick}
+      startIcon={<FileDownloadIcon />}
+    >
+      {text}
+    </Button>
+  );
+}
--- a/src/views/Options/FavWords.js
+++ b/src/views/Options/FavWords.js
@@ -0,0 +1,150 @@
+import Stack from "@mui/material/Stack";
+import { OPT_TRANS_BAIDU } from "../../config";
+import { useEffect, useState } from "react";
+import Typography from "@mui/material/Typography";
+import Accordion from "@mui/material/Accordion";
+import AccordionSummary from "@mui/material/AccordionSummary";
+import AccordionDetails from "@mui/material/AccordionDetails";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import CircularProgress from "@mui/material/CircularProgress";
+import { useI18n } from "../../hooks/I18n";
+import Alert from "@mui/material/Alert";
+import { apiTranslate } from "../../apis";
+import Box from "@mui/material/Box";
+import { useFavWords } from "../../hooks/FavWords";
+import DictCont from "../Selection/DictCont";
+import DownloadButton from "./DownloadButton";
+import UploadButton from "./UploadButton";
+import Button from "@mui/material/Button";
+import ClearAllIcon from "@mui/icons-material/ClearAll";
+import { isValidWord } from "../../libs/utils";
+
+function DictField({ word }) {
+  const [dictResult, setDictResult] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    (async () => {
+      try {
+        setLoading(true);
+        setError("");
+        const dictRes = await apiTranslate({
+          text: word,
+          translator: OPT_TRANS_BAIDU,
+          fromLang: "en",
+          toLang: "zh-CN",
+        });
+        setDictResult(dictRes[2].dict_result);
+      } catch (err) {
+        setError(err.message);
+      } finally {
+        setLoading(false);
+      }
+    })();
+  }, [word]);
+
+  if (loading) {
+    return <CircularProgress size={24} />;
+  }
+
+  if (error) {
+    return <Alert severity="error">{error}</Alert>;
+  }
+
+  return <DictCont dictResult={dictResult} />;
+}
+
+function FavAccordion({ word, index }) {
+  const [expanded, setExpanded] = useState(false);
+
+  const handleChange = (e) => {
+    setExpanded((pre) => !pre);
+  };
+
+  return (
+    <Accordion expanded={expanded} onChange={handleChange}>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        {/* <Typography>{`[${new Date(
+          createdAt
+        ).toLocaleString()}] ${word}`}</Typography> */}
+        <Typography>{`${index + 1}. ${word}`}</Typography>
+      </AccordionSummary>
+      <AccordionDetails>
+        {expanded && <DictField word={word} />}
+      </AccordionDetails>
+    </Accordion>
+  );
+}
+
+export default function FavWords() {
+  const i18n = useI18n();
+  const { loading, favWords, mergeWords, clearWords } = useFavWords();
+  const favList = Object.entries(favWords).sort((a, b) =>
+    a[0].localeCompare(b[0])
+  );
+  const downloadList = favList.map(([word]) => word);
+
+  const handleImport = async (data) => {
+    try {
+      const newWords = data
+        .split("\n")
+        .map((line) => line.split(",")[0].trim())
+        .filter(isValidWord);
+      await mergeWords(newWords);
+    } catch (err) {
+      console.log("[import rules]", err);
+    }
+  };
+
+  return (
+    <Box>
+      <Stack spacing={3}>
+        <Stack
+          direction="row"
+          alignItems="center"
+          spacing={2}
+          useFlexGap
+          flexWrap="wrap"
+        >
+          <UploadButton
+            text={i18n("import")}
+            handleImport={handleImport}
+            fileType="text"
+            fileExts={[".txt", ".csv"]}
+          />
+          <DownloadButton
+            data={downloadList.join("\n")}
+            text={i18n("export")}
+            fileName={`kiss-words_${Date.now()}.txt`}
+          />
+          <Button
+            size="small"
+            variant="outlined"
+            onClick={() => {
+              clearWords();
+            }}
+            startIcon={<ClearAllIcon />}
+          >
+            {i18n("clear_all")}
+          </Button>
+        </Stack>
+
+        <Box>
+          {loading ? (
+            <CircularProgress size={24} />
+          ) : (
+            favList.map(([word, { createdAt }], index) => (
+              <FavAccordion
+                key={word}
+                index={index}
+                word={word}
+                createdAt={createdAt}
+              />
+            ))
+          )}
+        </Box>
+      </Stack>
+    </Box>
+  );
+}
--- a/src/views/Options/Header.js
+++ b/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>
--- a/src/views/Options/InputSetting.js
+++ b/src/views/Options/InputSetting.js
@@ -67,7 +67,7 @@ export default function InputSetting() {
              }}
            />
          }
-          label={i18n("input_box_translation")}
+          label={i18n("use_input_box_translation")}
        />

        <TextField
--- a/src/views/Options/Navigator.js
+++ b/src/views/Options/Navigator.js
@@ -13,7 +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 TranslateIcon from '@mui/icons-material/Translate';
+import SelectAllIcon from "@mui/icons-material/SelectAll";
+import EventNoteIcon from "@mui/icons-material/EventNote";

 function LinkItem({ label, url, icon }) {
  const match = useMatch(url);
@@ -41,8 +42,8 @@ export default function Navigator(props) {
      icon: <DesignServicesIcon />,
    },
    {
-      id: "input_setting",
-      label: i18n("input_setting"),
+      id: "input_translate",
+      label: i18n("input_translate"),
      url: "/input",
      icon: <InputIcon />,
    },
@@ -50,7 +51,7 @@ export default function Navigator(props) {
      id: "selection_translate",
      label: i18n("selection_translate"),
      url: "/tranbox",
-      icon: <TranslateIcon />,
+      icon: <SelectAllIcon />,
    },
    {
      id: "apis_setting",
@@ -70,6 +71,12 @@ export default function Navigator(props) {
      url: "/webfix",
      icon: <SendTimeExtensionIcon />,
    },
+    {
+      id: "words",
+      label: i18n("favorite_words"),
+      url: "/words",
+      icon: <EventNoteIcon />,
+    },
    { id: "about", label: i18n("about"), url: "/about", icon: <InfoIcon /> },
  ];
  return (
--- a/src/views/Options/Rules.js
+++ b/src/views/Options/Rules.js
@@ -16,7 +16,7 @@ import {
  URL_KISS_RULES_NEW_ISSUE,
  OPT_SYNCTYPE_WORKER,
 } from "../../config";
-import { useState, useRef, useEffect, useMemo } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { useI18n } from "../../hooks/I18n";
 import Typography from "@mui/material/Typography";
 import Accordion from "@mui/material/Accordion";
@@ -26,8 +26,6 @@ import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import { useRules } from "../../hooks/Rules";
 import MenuItem from "@mui/material/MenuItem";
 import Grid from "@mui/material/Grid";
-import FileDownloadIcon from "@mui/icons-material/FileDownload";
-import FileUploadIcon from "@mui/icons-material/FileUpload";
 import { useSetting } from "../../hooks/Setting";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import Switch from "@mui/material/Switch";
@@ -50,6 +48,8 @@ import OwSubRule from "./OwSubRule";
 import ClearAllIcon from "@mui/icons-material/ClearAll";
 import HelpButton from "./HelpButton";
 import { useSyncCaches } from "../../hooks/Sync";
+import DownloadButton from "./DownloadButton";
+import UploadButton from "./UploadButton";

 function RuleFields({ rule, rules, setShow, setKeyword }) {
  const initFormValues = rule || {
@@ -65,6 +65,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
  const {
    pattern,
    selector,
+    keepSelector = "",
    translator,
    fromLang,
    toLang,
@@ -179,6 +180,16 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
          onFocus={handleFocus}
          multiline
        />
+        <TextField
+          size="small"
+          label={i18n("keep_selector")}
+          helperText={i18n("keep_selector_helper")}
+          name="keepSelector"
+          value={keepSelector}
+          disabled={disabled}
+          onChange={handleChange}
+          multiline
+        />

        <Box>
          <Grid container spacing={2} columns={12}>
@@ -375,8 +386,9 @@ function RuleAccordion({ rule, rules }) {
    <Accordion expanded={expanded} onChange={handleChange}>
      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
        <Typography
-          style={{
+          sx={{
            opacity: rules ? 1 : 0.5,
+            overflowWrap: "anywhere",
          }}
        >
          {rule.pattern === GLOBAL_KEY
@@ -391,56 +403,6 @@ function RuleAccordion({ rule, rules }) {
  );
 }

-function DownloadButton({ data, text, fileName }) {
-  const handleClick = (e) => {
-    e.preventDefault();
-    if (data) {
-      const url = window.URL.createObjectURL(new Blob([data]));
-      const link = document.createElement("a");
-      link.href = url;
-      link.setAttribute("download", fileName || `${Date.now()}.json`);
-      document.body.appendChild(link);
-      link.click();
-      link.remove();
-    }
-  };
-  return (
-    <Button
-      size="small"
-      variant="outlined"
-      onClick={handleClick}
-      startIcon={<FileDownloadIcon />}
-    >
-      {text}
-    </Button>
-  );
-}
-
-function UploadButton({ onChange, text }) {
-  const inputRef = useRef(null);
-  const handleClick = () => {
-    inputRef.current && inputRef.current.click();
-  };
-
-  return (
-    <Button
-      size="small"
-      variant="outlined"
-      onClick={handleClick}
-      startIcon={<FileUploadIcon />}
-    >
-      {text}
-      <input
-        type="file"
-        accept=".json"
-        ref={inputRef}
-        onChange={onChange}
-        hidden
-      />
-    </Button>
-  );
-}
-
 function ShareButton({ rules, injectRules, selectedUrl }) {
  const alert = useAlert();
  const i18n = useI18n();
@@ -493,26 +455,12 @@ function UserRules({ subRules }) {
  const injectRules = !!setting?.injectRules;
  const { selectedUrl, selectedRules } = subRules;

-  const handleImport = (e) => {
-    const file = e.target.files[0];
-    if (!file) {
-      return;
+  const handleImport = async (data) => {
+    try {
+      await rules.merge(JSON.parse(data));
+    } catch (err) {
+      console.log("[import rules]", err);
    }
-
-    if (!file.type.includes("json")) {
-      alert(i18n("error_wrong_file_type"));
-      return;
-    }
-
-    const reader = new FileReader();
-    reader.onload = async (e) => {
-      try {
-        await rules.merge(JSON.parse(e.target.result));
-      } catch (err) {
-        console.log("[import rules]", err);
-      }
-    };
-    reader.readAsText(file);
  };

  const handleInject = () => {
@@ -552,10 +500,11 @@ function UserRules({ subRules }) {
          {i18n("add")}
        </Button>

-        <UploadButton text={i18n("import")} onChange={handleImport} />
+        <UploadButton text={i18n("import")} handleImport={handleImport} />
        <DownloadButton
          data={JSON.stringify([...rules.list].reverse(), null, 2)}
          text={i18n("export")}
+          fileName={`kiss-rules_${Date.now()}.json`}
        />

        <ShareButton
@@ -663,7 +612,14 @@ function SubRulesItem({

  return (
    <Stack direction="row" alignItems="center" spacing={2}>
-      <FormControlLabel value={url} control={<Radio />} label={url} />
+      <FormControlLabel
+        value={url}
+        control={<Radio />}
+        sx={{
+          overflowWrap: "anywhere",
+        }}
+        label={url}
+      />

      {syncAt && (
        <span style={{ marginLeft: "0.5em", opacity: 0.5 }}>
--- a/src/views/Options/Setting.js
+++ b/src/views/Options/Setting.js
@@ -23,10 +23,14 @@ import {
  OPT_SHORTCUT_STYLE,
  OPT_SHORTCUT_POPUP,
  OPT_SHORTCUT_SETTING,
+  OPT_LANGS_TO,
+  DEFAULT_BLACKLIST,
+  MSG_CONTEXT_MENUS,
 } from "../../config";
 import { useShortcut } from "../../hooks/Shortcut";
 import ShortcutInput from "./ShortcutInput";
 import { useFab } from "../../hooks/Fab";
+import { sendBgMsg } from "../../libs/msg";

 function ShortcutItem({ action, label }) {
  const { shortcut, setShortcut } = useShortcut(action);
@@ -60,6 +64,12 @@ export default function Settings() {
      case "newlineLength":
        value = limitNumber(value, 1, 1000);
        break;
+      case "touchTranslate":
+        value = limitNumber(value, 0, 4);
+        break;
+      case "contextMenus":
+        isExt && sendBgMsg(MSG_CONTEXT_MENUS, { contextMenus: value });
+        break;
      default:
    }
    updateSetting({
@@ -86,6 +96,10 @@ export default function Settings() {
    newlineLength = TRANS_NEWLINE_LENGTH,
    mouseKey = OPT_MOUSEKEY_DISABLE,
    detectRemote = false,
+    contextMenus = true,
+    touchTranslate = 2,
+    blacklist = DEFAULT_BLACKLIST.join(",\n"),
+    disableLangs = [],
  } = setting;
  const { isHide = false } = fab || {};

@@ -169,6 +183,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
@@ -184,6 +214,19 @@ export default function Settings() {
          </Select>
        </FormControl>

+        <FormControl size="small">
+          <InputLabel>{i18n("add_context_menus")}</InputLabel>
+          <Select
+            name="contextMenus"
+            value={contextMenus}
+            label={i18n("add_context_menus")}
+            onChange={handleChange}
+          >
+            <MenuItem value={false}>{i18n("disable")}</MenuItem>
+            <MenuItem value={true}>{i18n("enable")}</MenuItem>
+          </Select>
+        </FormControl>
+
        <FormControl size="small">
          <InputLabel>{i18n("detect_lang_remote")}</InputLabel>
          <Select
@@ -198,24 +241,44 @@ export default function Settings() {
          <FormHelperText>{i18n("detect_lang_remote_help")}</FormHelperText>
        </FormControl>

+        <FormControl size="small">
+          <InputLabel>{i18n("disable_langs")}</InputLabel>
+          <Select
+            multiple
+            name="disableLangs"
+            value={disableLangs}
+            label={i18n("disable_langs")}
+            onChange={handleChange}
+          >
+            {OPT_LANGS_TO.map(([langKey, langName]) => (
+              <MenuItem key={langKey} value={langKey}>
+                {langName}
+              </MenuItem>
+            ))}
+          </Select>
+          <FormHelperText>{i18n("disable_langs_helper")}</FormHelperText>
+        </FormControl>
+
        {isExt ? (
-          <FormControl size="small">
-            <InputLabel>{i18n("if_clear_cache")}</InputLabel>
-            <Select
-              name="clearCache"
-              value={clearCache}
-              label={i18n("if_clear_cache")}
-              onChange={handleChange}
-            >
-              <MenuItem value={false}>{i18n("clear_cache_never")}</MenuItem>
-              <MenuItem value={true}>{i18n("clear_cache_restart")}</MenuItem>
-            </Select>
-            <FormHelperText>
-              <Link component="button" onClick={handleClearCache}>
-                {i18n("clear_all_cache_now")}
-              </Link>
-            </FormHelperText>
-          </FormControl>
+          <>
+            <FormControl size="small">
+              <InputLabel>{i18n("if_clear_cache")}</InputLabel>
+              <Select
+                name="clearCache"
+                value={clearCache}
+                label={i18n("if_clear_cache")}
+                onChange={handleChange}
+              >
+                <MenuItem value={false}>{i18n("clear_cache_never")}</MenuItem>
+                <MenuItem value={true}>{i18n("clear_cache_restart")}</MenuItem>
+              </Select>
+              <FormHelperText>
+                <Link component="button" onClick={handleClearCache}>
+                  {i18n("clear_all_cache_now")}
+                </Link>
+              </FormHelperText>
+            </FormControl>
+          </>
        ) : (
          <>
            <Box>
@@ -248,6 +311,16 @@ export default function Settings() {
            </Box>
          </>
        )}
+
+        <TextField
+          size="small"
+          label={i18n("translate_blacklist")}
+          helperText={i18n("pattern_helper")}
+          name="blacklist"
+          defaultValue={blacklist}
+          onChange={handleChange}
+          multiline
+        />
      </Stack>
    </Box>
  );
--- a/src/views/Options/Tranbox.js
+++ b/src/views/Options/Tranbox.js
@@ -10,6 +10,7 @@ import Switch from "@mui/material/Switch";
 import { useCallback } from "react";
 import { limitNumber } from "../../libs/utils";
 import { useTranbox } from "../../hooks/Tranbox";
+import { isExt } from "../../libs/client";

 export default function Tranbox() {
  const i18n = useI18n();
@@ -19,7 +20,10 @@ export default function Tranbox() {
    e.preventDefault();
    let { name, value } = e.target;
    switch (name) {
-      case "btnOffsetX" || "btnOffsetY":
+      case "btnOffsetX":
+        value = limitNumber(value, 0, 100);
+        break;
+      case "btnOffsetY":
        value = limitNumber(value, 0, 100);
        break;
      default:
@@ -41,9 +45,11 @@ export default function Tranbox() {
    translator,
    fromLang,
    toLang,
+    toLang2 = "en",
    tranboxShortcut,
    btnOffsetX,
    btnOffsetY,
+    hideTranBtn = false,
  } = tranboxSetting;

  return (
@@ -108,6 +114,22 @@ export default function Tranbox() {
          ))}
        </TextField>

+        <TextField
+          select
+          size="small"
+          name="toLang2"
+          value={toLang2}
+          label={i18n("to_lang2")}
+          helperText={i18n("to_lang2_helper")}
+          onChange={handleChange}
+        >
+          {[["none", "None"], ...OPT_LANGS_TO].map(([lang, name]) => (
+            <MenuItem key={lang} value={lang}>
+              {name}
+            </MenuItem>
+          ))}
+        </TextField>
+
        <TextField
          size="small"
          label={i18n("tranbtn_offset_x")}
@@ -126,11 +148,25 @@ export default function Tranbox() {
          onChange={handleChange}
        />

-        <ShortcutInput
-          value={tranboxShortcut}
-          onChange={handleShortcutInput}
-          label={i18n("trigger_tranbox_shortcut")}
-        />
+        <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>
+
+        {!isExt && (
+          <ShortcutInput
+            value={tranboxShortcut}
+            onChange={handleShortcutInput}
+            label={i18n("trigger_tranbox_shortcut")}
+          />
+        )}
      </Stack>
    </Box>
  );
--- a/src/views/Options/UploadButton.js
+++ b/src/views/Options/UploadButton.js
@@ -0,0 +1,55 @@
+import { useRef } from "react";
+import FileUploadIcon from "@mui/icons-material/FileUpload";
+import { useI18n } from "../../hooks/I18n";
+import Button from "@mui/material/Button";
+
+export default function UploadButton({
+  handleImport,
+  text,
+  fileType = "json",
+  fileExts = [".json"],
+}) {
+  const i18n = useI18n();
+  const inputRef = useRef(null);
+  const handleClick = () => {
+    if (inputRef.current) {
+      inputRef.current.click();
+      inputRef.current.value = null;
+    }
+  };
+  const onChange = (e) => {
+    const file = e.target.files[0];
+    if (!file) {
+      return;
+    }
+
+    if (!file.type.includes(fileType)) {
+      alert(i18n("error_wrong_file_type"));
+      return;
+    }
+
+    const reader = new FileReader();
+    reader.onload = async (e) => {
+      handleImport(e.target.result);
+    };
+    reader.readAsText(file);
+  };
+
+  return (
+    <Button
+      size="small"
+      variant="outlined"
+      onClick={handleClick}
+      startIcon={<FileUploadIcon />}
+    >
+      {text}
+      <input
+        type="file"
+        accept={fileExts.join(", ")}
+        ref={inputRef}
+        onChange={onChange}
+        hidden
+      />
+    </Button>
+  );
+}
--- a/src/views/Options/Webfix.js
+++ b/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}>
-      <TextField
-        size="small"
-        label={"rootSelector"}
-        name="rootSelector"
-        value={rootSelector || "document"}
-        disabled
-      />
-      <TextField
-        size="small"
-        label={"selector"}
-        name="selector"
-        value={selector}
-        disabled
-      />
-      <TextField
-        size="small"
-        label={"fixer"}
-        name="fixer"
-        value={fixer}
-        disabled
-      />
-    </Stack>
+    <form onSubmit={handleSubmit}>
+      <Stack spacing={3}>
+        <TextField
+          size="small"
+          label={i18n("pattern")}
+          error={!!errors.pattern}
+          helperText={errors.pattern}
+          name="pattern"
+          value={pattern}
+          disabled={disabled}
+          onChange={handleChange}
+          onFocus={handleFocus}
+          multiline
+        />
+        <TextField
+          size="small"
+          label={i18n("root_selector")}
+          error={!!errors.rootSelector}
+          helperText={errors.rootSelector}
+          name="rootSelector"
+          value={rootSelector}
+          disabled={disabled}
+          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) => (
-                <ApiAccordion key={site.pattern} site={site} />
+              sites.map((rule) => (
+                <WebfixAccordion key={rule.pattern} rule={rule} />
              ))
            )}
          </Box>
--- a/src/views/Options/index.js
+++ b/src/views/Options/index.js
@@ -21,6 +21,7 @@ import Apis from "./Apis";
 import Webfix from "./Webfix";
 import InputSetting from "./InputSetting";
 import Tranbox from "./Tranbox";
+import FavWords from "./FavWords";

 export default function Options() {
  const [error, setError] = useState("");
@@ -125,6 +126,7 @@ export default function Options() {
                <Route path="apis" element={<Apis />} />
                <Route path="sync" element={<SyncSetting />} />
                <Route path="webfix" element={<Webfix />} />
+                <Route path="words" element={<FavWords />} />
                <Route path="about" element={<About />} />
              </Route>
            </Routes>
--- a/src/views/Popup/Header.js
+++ b/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 ? (
--- a/src/views/Popup/index.js
+++ b/src/views/Popup/index.js
@@ -22,7 +22,6 @@ import {
  OPT_LANGS_FROM,
  OPT_LANGS_TO,
  OPT_STYLE_ALL,
-  OPT_STYLE_USE_COLOR,
 } from "../../config";
 import { sendIframeMsg } from "../../libs/iframe";
 import { saveRule } from "../../libs/rules";
@@ -130,7 +129,7 @@ export default function Popup({ setShowPopup, translator: tran }) {
    );
  }

-  const { transOpen, translator, fromLang, toLang, textStyle, bgColor } = rule;
+  const { transOpen, translator, fromLang, toLang, textStyle } = rule;

  return (
    <Box minWidth={300}>
@@ -156,11 +155,6 @@ export default function Popup({ setShowPopup, translator: tran }) {
            }
            label={i18n("translate_alt")}
          />
-          {!isExt && (
-            <Button variant="text" onClick={handleClearCache}>
-              {i18n("clear_cache")}
-            </Button>
-          )}
        </Stack>

        <TextField
@@ -227,7 +221,7 @@ export default function Popup({ setShowPopup, translator: tran }) {
          ))}
        </TextField>

-        {OPT_STYLE_USE_COLOR.includes(textStyle) && (
+        {/* {OPT_STYLE_USE_COLOR.includes(textStyle) && (
          <TextField
            size="small"
            name="bgColor"
@@ -235,7 +229,7 @@ export default function Popup({ setShowPopup, translator: tran }) {
            label={i18n("bg_color")}
            onChange={handleChange}
          />
-        )}
+        )} */}

        <Stack
          direction="row"
@@ -246,6 +240,11 @@ export default function Popup({ setShowPopup, translator: tran }) {
          <Button variant="text" onClick={handleSaveRule}>
            {i18n("save_rule")}
          </Button>
+          {!isExt && (
+            <Button variant="text" onClick={handleClearCache}>
+              {i18n("clear_cache")}
+            </Button>
+          )}
          <Button variant="text" onClick={handleOpenSetting}>
            {i18n("setting")}
          </Button>
--- a/src/views/Selection/CopyBtn.js
+++ b/src/views/Selection/CopyBtn.js
@@ -0,0 +1,35 @@
+import IconButton from "@mui/material/IconButton";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import LibraryAddCheckIcon from "@mui/icons-material/LibraryAddCheck";
+import { useState } from "react";
+
+export default function CopyBtn({ text }) {
+  const [copied, setCopied] = useState(false);
+  const handleClick = async (e) => {
+    e.stopPropagation();
+    await navigator.clipboard.writeText(text);
+    setCopied(true);
+    const timer = setTimeout(() => {
+      clearTimeout(timer);
+      setCopied(false);
+    }, 500);
+  };
+  return (
+    <IconButton
+      size="small"
+      sx={{
+        opacity: 0.5,
+        "&:hover": {
+          opacity: 1,
+        },
+      }}
+      onClick={handleClick}
+    >
+      {copied ? (
+        <LibraryAddCheckIcon fontSize="inherit" />
+      ) : (
+        <ContentCopyIcon fontSize="inherit" />
+      )}
+    </IconButton>
+  );
+}
--- a/src/views/Selection/DictCont.js
+++ b/src/views/Selection/DictCont.js
@@ -0,0 +1,65 @@
+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: "第三人称单数",
+  word_ing: "现在分词",
+  word_done: "过去式",
+  word_past: "过去分词",
+  word_pl: "复数",
+  word_proto: "词源",
+};
+
+export default function DictCont({ dictResult }) {
+  if (!dictResult) {
+    return;
+  }
+
+  return (
+    <Box>
+      <Stack
+        direction="row"
+        justifyContent="space-between"
+        alignItems="flex-start"
+      >
+        <Typography variant="subtitle1" style={{ fontWeight: "bold" }}>
+          {dictResult.simple_means?.word_name}
+        </Typography>
+        <FavBtn word={dictResult.simple_means?.word_name} />
+      </Stack>
+
+      {dictResult.simple_means?.symbols?.map(({ ph_en, ph_am, parts }, idx) => (
+        <Typography key={idx} component="div">
+          {(ph_en || ph_am) && (
+            <Typography>{`英 /${ph_en || ""}/ 美 /${ph_am || ""}/`}</Typography>
+          )}
+          <ul style={{ margin: "0.5em 0" }}>
+            {parts.map(({ part, means }, idx) => (
+              <li key={idx}>
+                {part ? `[${part}] ${means.join("; ")}` : means.join("; ")}
+              </li>
+            ))}
+          </ul>
+        </Typography>
+      ))}
+
+      <Typography>
+        {Object.entries(dictResult.simple_means?.exchange || {})
+          .map(([key, val]) => `${exchangeMap[key] || key}: ${val.join(", ")}`)
+          .join("; ")}
+      </Typography>
+
+      <Stack direction="row" spacing={1} flexWrap="wrap" useFlexGap>
+        {Object.values(dictResult.simple_means?.tags || {})
+          .flat()
+          .filter((item) => item)
+          .map((item) => (
+            <Chip label={item} size="small" />
+          ))}
+      </Stack>
+    </Box>
+  );
+}
--- a/src/views/Selection/DraggableResizable.js
+++ b/src/views/Selection/DraggableResizable.js
@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import Paper from "@mui/material/Paper";
 import Box from "@mui/material/Box";
+import { isMobile } from "../../libs/mobile";

 function Pointer({
  direction,
@@ -16,21 +17,23 @@ function Pointer({
  const [origin, setOrigin] = useState(null);

  function handlePointerDown(e) {
-    e.target.setPointerCapture(e.pointerId);
+    !isMobile && e.target.setPointerCapture(e.pointerId);
+    const { clientX, clientY } = isMobile ? e.targetTouches[0] : e;
    setOrigin({
      x: position.x,
      y: position.y,
      w: size.w,
      h: size.h,
-      clientX: e.clientX,
-      clientY: e.clientY,
+      clientX,
+      clientY,
    });
  }

  function handlePointerMove(e) {
+    const { clientX, clientY } = isMobile ? e.targetTouches[0] : e;
    if (origin) {
-      const dx = e.clientX - origin.clientX;
-      const dy = e.clientY - origin.clientY;
+      const dx = clientX - origin.clientX;
+      const dy = clientY - origin.clientY;
      let x = position.x;
      let y = position.y;
      let w = size.w;
@@ -101,16 +104,24 @@ function Pointer({
  }

  function handlePointerUp(e) {
+    e.stopPropagation();
    setOrigin(null);
  }

+  const touchProps = isMobile
+    ? {
+        onTouchStart: handlePointerDown,
+        onTouchMove: handlePointerMove,
+        onTouchEnd: handlePointerUp,
+      }
+    : {
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerUp: handlePointerUp,
+      };
+
  return (
-    <div
-      {...props}
-      onPointerDown={handlePointerDown}
-      onPointerMove={handlePointerMove}
-      onPointerUp={handlePointerUp}
-    >
+    <div {...props} {...touchProps}>
      {children}
    </div>
  );
@@ -162,6 +173,7 @@ export default function DraggableResizable({
  return (
    <Box
      style={{
+        touchAction: "none",
        position: "fixed",
        left: position.x,
        top: position.y,
--- a/src/views/Selection/FavBtn.js
+++ b/src/views/Selection/FavBtn.js
@@ -0,0 +1,31 @@
+import IconButton from "@mui/material/IconButton";
+import FavoriteIcon from "@mui/icons-material/Favorite";
+import FavoriteBorderIcon from "@mui/icons-material/FavoriteBorder";
+import { useState } from "react";
+import { useFavWords } from "../../hooks/FavWords";
+
+export default function FavBtn({ word }) {
+  const { favWords, toggleFav } = useFavWords();
+  const [loading, setLoading] = useState(false);
+
+  const handleClick = async () => {
+    try {
+      setLoading(true);
+      await toggleFav(word);
+    } catch (err) {
+      console.log("[set fav]", err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <IconButton disabled={loading} size="small" onClick={handleClick}>
+      {favWords[word] ? (
+        <FavoriteIcon fontSize="inherit" />
+      ) : (
+        <FavoriteBorderIcon fontSize="inherit" />
+      )}
+    </IconButton>
+  );
+}
--- a/src/views/Selection/TranBox.js
+++ b/src/views/Selection/TranBox.js
@@ -8,10 +8,13 @@ import MenuItem from "@mui/material/MenuItem";
 import Grid from "@mui/material/Grid";
 import Box from "@mui/material/Box";
 import Divider from "@mui/material/Divider";
+import IconButton from "@mui/material/IconButton";
+import DoneIcon from "@mui/icons-material/Done";
 import { useI18n } from "../../hooks/I18n";
 import { OPT_TRANS_ALL, OPT_LANGS_FROM, OPT_LANGS_TO } from "../../config";
 import { useState, useRef } from "react";
 import TranCont from "./TranCont";
+import CopyBtn from "./CopyBtn";

 function TranForm({ text, setText, tranboxSetting, transApis }) {
  const i18n = useI18n();
@@ -21,6 +24,7 @@ function TranForm({ text, setText, tranboxSetting, transApis }) {
  const [translator, setTranslator] = useState(tranboxSetting.translator);
  const [fromLang, setFromLang] = useState(tranboxSetting.fromLang);
  const [toLang, setToLang] = useState(tranboxSetting.toLang);
+  const [toLang2, setToLang2] = useState(tranboxSetting.toLang2);
  const inputRef = useRef(null);

  return (
@@ -92,6 +96,7 @@ function TranForm({ text, setText, tranboxSetting, transApis }) {

      <Box>
        <TextField
+          size="small"
          label={i18n("original_text")}
          inputRef={inputRef}
          fullWidth
@@ -113,6 +118,31 @@ function TranForm({ text, setText, tranboxSetting, transApis }) {
            setEditMode(false);
            setText(editText.trim());
          }}
+          InputProps={{
+            endAdornment: (
+              <Stack
+                direction="row"
+                sx={{
+                  position: "absolute",
+                  right: 0,
+                  top: 0,
+                }}
+              >
+                {editMode ? (
+                  <IconButton
+                    size="small"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                    }}
+                  >
+                    <DoneIcon fontSize="inherit" />
+                  </IconButton>
+                ) : (
+                  <CopyBtn text={text} />
+                )}
+              </Stack>
+            ),
+          }}
        />
      </Box>

@@ -121,6 +151,9 @@ function TranForm({ text, setText, tranboxSetting, transApis }) {
        translator={translator}
        fromLang={fromLang}
        toLang={toLang}
+        toLang2={toLang2}
+        setToLang={setToLang}
+        setToLang2={setToLang2}
        transApis={transApis}
      />
    </Stack>
--- a/src/views/Selection/TranBtn.js
+++ b/src/views/Selection/TranBtn.js
@@ -1,17 +1,27 @@
+import { isMobile } from "../../libs/mobile";
+
 export default function TranBtn({ onClick, position, tranboxSetting }) {
+  const left = position.x + tranboxSetting.btnOffsetX;
+  const top = position.y + tranboxSetting.btnOffsetY;
+
+  const touchProps = isMobile
+    ? {
+        onTouchEnd: onClick,
+      }
+    : {
+        onMouseUp: onClick,
+      };
+
  return (
    <div
      style={{
        cursor: "pointer",
-        position: "fixed",
-        left: position.x + tranboxSetting.btnOffsetX,
-        top: position.y + tranboxSetting.btnOffsetY,
+        position: "absolute",
+        left,
+        top,
        zIndex: 2147483647,
      }}
-      onClick={onClick}
-      onMouseUp={(e) => {
-        e.stopPropagation();
-      }}
+      {...touchProps}
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
--- a/src/views/Selection/TranCont.js
+++ b/src/views/Selection/TranCont.js
@@ -2,67 +2,23 @@ import TextField from "@mui/material/TextField";
 import Box from "@mui/material/Box";
 import Alert from "@mui/material/Alert";
 import CircularProgress from "@mui/material/CircularProgress";
-import Chip from "@mui/material/Chip";
 import Stack from "@mui/material/Stack";
 import { useI18n } from "../../hooks/I18n";
 import { DEFAULT_TRANS_APIS, OPT_TRANS_BAIDU } from "../../config";
 import { useEffect, useState } from "react";
-import { apiTranslate } from "../../apis";
+import { apiTranslate, apiBaiduLangdetect } from "../../apis";
 import { isValidWord } from "../../libs/utils";
-
-const exchangeMap = {
-  word_third: "第三人称单数",
-  word_ing: "现在分词",
-  word_done: "过去式",
-  word_past: "过去分词",
-  word_pl: "复数",
-  word_proto: "原词",
-};
-
-function DictCont({ dictResult }) {
-  if (!dictResult) {
-    return;
-  }
-
-  return (
-    <Box>
-      <div style={{ fontWeight: "bold" }}>
-        {dictResult.simple_means?.word_name}
-      </div>
-      {dictResult.simple_means?.symbols?.map(({ ph_en, ph_am, parts }, idx) => (
-        <div key={idx}>
-          <div>{`英[${ph_en}] 美[${ph_am}]`}</div>
-          <ul style={{ margin: "0.5em 0" }}>
-            {parts.map(({ part, means }, idx) => (
-              <li key={idx}>
-                {part ? `[${part}] ${means.join("; ")}` : means.join("; ")}
-              </li>
-            ))}
-          </ul>
-        </div>
-      ))}
-      <div>
-        {Object.entries(dictResult.simple_means?.exchange || {})
-          .map(([key, val]) => `${exchangeMap[key] || key}: ${val.join(", ")}`)
-          .join("; ")}
-      </div>
-      <Stack direction="row" spacing={1}>
-        {Object.values(dictResult.simple_means?.tags || {})
-          .flat()
-          .filter((item) => item)
-          .map((item) => (
-            <Chip label={item} size="small" />
-          ))}
-      </Stack>
-    </Box>
-  );
-}
+import CopyBtn from "./CopyBtn";
+import DictCont from "./DictCont";

 export default function TranCont({
  text,
  translator,
  fromLang,
  toLang,
+  toLang2 = "en",
+  setToLang,
+  setToLang2,
  transApis,
 }) {
  const i18n = useI18n();
@@ -79,8 +35,18 @@ export default function TranCont({
        setError("");
        setDictResult(null);

-        const apis = { ...transApis, ...DEFAULT_TRANS_APIS };
-        const apiSetting = apis[translator];
+        // 互译
+        if (toLang !== toLang2 && toLang2 !== "none") {
+          const detectLang = await apiBaiduLangdetect(text);
+          if (detectLang === toLang) {
+            setToLang(toLang2);
+            setToLang2(toLang);
+            return;
+          }
+        }
+
+        const apiSetting =
+          transApis[translator] || DEFAULT_TRANS_APIS[translator];
        const tranRes = await apiTranslate({
          text,
          translator,
@@ -100,7 +66,6 @@ export default function TranCont({
              translator: OPT_TRANS_BAIDU,
              fromLang: "en",
              toLang: "zh-CN",
-              apiSetting: apis[OPT_TRANS_BAIDU],
            });
            setDictResult(dictRes[2].dict_result);
          }
@@ -111,16 +76,41 @@ export default function TranCont({
        setLoading(false);
      }
    })();
-  }, [text, translator, fromLang, toLang, transApis]);
+  }, [
+    text,
+    translator,
+    fromLang,
+    toLang,
+    toLang2,
+    setToLang,
+    setToLang2,
+    transApis,
+  ]);

  return (
    <>
      <Box>
        <TextField
+          size="small"
          label={i18n("translated_text")}
+          // disabled
          fullWidth
          multiline
          value={trText}
+          InputProps={{
+            endAdornment: (
+              <Stack
+                direction="row"
+                sx={{
+                  position: "absolute",
+                  right: 0,
+                  top: 0,
+                }}
+              >
+                <CopyBtn text={trText} />
+              </Stack>
+            ),
+          }}
        />
      </Box>

--- a/src/views/Selection/index.js
+++ b/src/views/Selection/index.js
@@ -1,61 +1,131 @@
-import { useState, useEffect } from "react";
-import TranBtn from "./Tranbtn";
-import TranBox from "./Tranbox";
+import { useState, useEffect, useCallback } from "react";
+import TranBtn from "./TranBtn";
+import TranBox from "./TranBox";
 import { shortcutRegister } from "../../libs/shortcut";
+import { sleep, limitNumber } from "../../libs/utils";
+import { isGm, isExt } from "../../libs/client";
+import { MSG_OPEN_TRANBOX, DEFAULT_TRANBOX_SHORTCUT } from "../../config";
+import { isMobile } from "../../libs/mobile";
+
+export default function Slection({ contextMenus, tranboxSetting, transApis }) {
+  const boxWidth = limitNumber(window.innerWidth, 300, 600);
+  const boxHeight = limitNumber(window.innerHeight, 200, 400);

-export default function Slection({ tranboxSetting, transApis }) {
  const [showBox, setShowBox] = useState(false);
  const [showBtn, setShowBtn] = useState(false);
  const [selectedText, setSelText] = useState("");
  const [text, setText] = useState("");
  const [position, setPosition] = useState({ x: 0, y: 0 });
-  const [boxSize, setBoxSize] = useState({ w: 600, h: 400 });
+  const [boxSize, setBoxSize] = useState({
+    w: boxWidth,
+    h: boxHeight,
+  });
  const [boxPosition, setBoxPosition] = useState({
-    x: (window.innerWidth - 600) / 2,
-    y: (window.innerHeight - 400) / 2,
+    x: (window.innerWidth - boxWidth) / 2,
+    y: (window.innerHeight - boxHeight) / 2,
  });

-  function handleMouseup(e) {
+  const handleClick = (e) => {
+    e.stopPropagation();
+
+    setShowBtn(false);
+    setText(selectedText);
+    setShowBox(true);
+  };
+
+  const handleTranbox = useCallback(() => {
+    setShowBtn(false);
+
    const selectedText = window.getSelection()?.toString()?.trim() || "";
    if (!selectedText) {
-      setShowBtn(false);
+      setShowBox((pre) => !pre);
      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);
-    }
-  };
-
-  useEffect(() => {
-    window.addEventListener("mouseup", handleMouseup);
-    return () => {
-      window.removeEventListener("mouseup", handleMouseup);
-    };
+    setShowBox(true);
  }, []);

  useEffect(() => {
-    const clearShortcut = shortcutRegister(
-      tranboxSetting.tranboxShortcut,
-      () => {
-        setShowBox((pre) => !pre);
+    async function handleMouseup(e) {
+      e.stopPropagation();
+      await sleep(10);
+
+      const selectedText = window.getSelection()?.toString()?.trim() || "";
+      setSelText(selectedText);
+      if (!selectedText) {
+        setShowBtn(false);
+        return;
      }
+
+      const { pageX, pageY } = isMobile ? e.changedTouches[0] : e;
+      !tranboxSetting.hideTranBtn && setShowBtn(true);
+      // setPosition({ x: e.clientX, y: e.clientY });
+      setPosition({ x: pageX, y: pageY });
+    }
+
+    // todo: mobile support
+    window.addEventListener("mouseup", handleMouseup);
+    // window.addEventListener(isMobile ? "touchend" : "mouseup", handleMouseup);
+    return () => {
+      window.removeEventListener(
+        isMobile ? "touchend" : "mouseup",
+        handleMouseup
+      );
+    };
+  }, [tranboxSetting.hideTranBtn]);
+
+  useEffect(() => {
+    if (isExt) {
+      return;
+    }
+
+    const clearShortcut = shortcutRegister(
+      tranboxSetting.tranboxShortcut || DEFAULT_TRANBOX_SHORTCUT,
+      handleTranbox
    );

    return () => {
      clearShortcut();
    };
-  }, [tranboxSetting.tranboxShortcut, setShowBox]);
+  }, [tranboxSetting.tranboxShortcut, handleTranbox]);
+
+  useEffect(() => {
+    window.addEventListener(MSG_OPEN_TRANBOX, handleTranbox);
+    return () => {
+      window.removeEventListener(MSG_OPEN_TRANBOX, handleTranbox);
+    };
+  }, [handleTranbox]);
+
+  useEffect(() => {
+    if (!isGm) {
+      return;
+    }
+
+    // 注册菜单
+    try {
+      const menuCommandIds = [];
+      contextMenus &&
+        menuCommandIds.push(
+          GM.registerMenuCommand(
+            "Translate Selected Text (Alt+S)",
+            (event) => {
+              handleTranbox();
+            },
+            "S"
+          )
+        );
+
+      return () => {
+        menuCommandIds.forEach((id) => {
+          GM.unregisterMenuCommand(id);
+        });
+      };
+    } catch (err) {
+      console.log("[registerMenuCommand]", err);
+    }
+  }, [handleTranbox, contextMenus]);

  return (
    <>
Author	SHA1	Message	Date
Gabe Yuan	82ebbcb6d6	v1.7.16	2024-01-04 15:55:28 +08:00
Gabe Yuan	2db11070c5	fix: move clear_cache button to bottom of popup	2024-01-04 15:41:20 +08:00
Gabe Yuan	5efd2517e7	fix: tranbox shortcut in usserscript	2024-01-04 12:18:36 +08:00
Gabe Yuan	c0ba654678	fix: remove bgcolor input from popup	2024-01-04 10:49:44 +08:00
Gabe Yuan	546a5a549b	fix: comment text	2024-01-04 10:39:40 +08:00
Gabe Yuan	cbf02c34e3	fix: remove position limit for tranbtn	2024-01-04 10:34:12 +08:00
Gabe Yuan	74a7258f10	fix: optimize key pick	2024-01-04 09:40:03 +08:00
Gabe Yuan	1006c044bc	fix: update readme	2024-01-03 15:48:34 +08:00
Gabe	ef4ea719f3	fix: Update README.md	2024-01-03 15:47:24 +08:00
Gabe	8b34afe69f	fix: Update README.md	2024-01-03 15:25:40 +08:00
Gabe Yuan	01292af298	feat: move open_tranbox shortcurt to browser commands	2024-01-03 13:10:02 +08:00
Gabe Yuan	cff8b2fe39	feat: move open_tranbox shortcurt to browser commands	2024-01-03 11:59:41 +08:00
Gabe Yuan	2cb20b5cc0	fix: update rules	2024-01-03 10:43:02 +08:00
Gabe Yuan	8f2aed18fe	fix: contextMenus created on page and selection	2024-01-03 10:32:11 +08:00
Gabe Yuan	d85831cc9a	fix: keep the translated image size unchanged	2024-01-03 10:10:54 +08:00
Gabe Yuan	55dc3a5556	feat: keep unchanged elements	2024-01-02 17:57:04 +08:00
Gabe Yuan	591afe08bd	feat: keep unchanged elements	2024-01-02 17:55:59 +08:00
Gabe Yuan	748f2002ab	fix: run webfix before translate	2023-12-27 15:44:02 +08:00
Gabe Yuan	d2d18a2384	fix: instagram input translate: addEventListener keyup	2023-12-27 11:25:53 +08:00
Gabe Yuan	35f4fa6aa7	fix: register menu command when hide fab button	2023-12-26 10:08:36 +08:00
Gabe Yuan	66fc2d22ed	feat: toto: selection translation on mobile support	2023-12-25 17:25:00 +08:00
Gabe Yuan	16cf9ee1ed	feat: toto: selection translation on mobile support	2023-12-25 17:21:59 +08:00
Gabe Yuan	d9d97bf14c	fix: selection button position	2023-12-25 14:42:13 +08:00
Gabe Yuan	dc811bd3c7	feat: selection translation on mobile support	2023-12-25 11:50:30 +08:00
Gabe Yuan	b939d1849a	feat: multi key calling support	2023-12-22 11:35:46 +08:00
Gabe Yuan	beca31f55d	v1.7.15	2023-12-21 14:24:08 +08:00
Gabe Yuan	c7df103950	feat: add gemini translator	2023-12-21 14:15:14 +08:00
Gabe Yuan	4bf7972ad5	fix: fab button fontsize	2023-12-19 15:34:40 +08:00
Gabe Yuan	534eaed1ed	refactor: input translate	2023-12-18 11:46:37 +08:00
Gabe Yuan	7e014e7385	fix: contextMenus setting	2023-12-15 11:43:01 +08:00
Gabe Yuan	34adb2660b	fix: grant GM.unregisterMenuCommand	2023-12-15 10:58:49 +08:00
Gabe Yuan	b6bc165cf0	fix: context munus	2023-12-11 17:26:49 +08:00
Gabe Yuan	bdd5ed7fc7	feat: mutual translation effect with the target language	2023-12-11 15:54:54 +08:00
Gabe Yuan	95d19417c3	fix: touch tap limit	2023-12-11 11:40:20 +08:00
Gabe Yuan	30ebebdd71	fix: tranbtn position: absolute	2023-12-11 11:38:47 +08:00
Gabe Yuan	e9c557776d	feat: context menus setting	2023-12-11 11:25:02 +08:00
Gabe Yuan	535a43b698	release: v1.7.14	2023-11-30 16:44:56 +08:00
Gabe Yuan	59752ed4aa	fix: set FormControl small size	2023-11-30 15:11:06 +08:00
Gabe Yuan	b3e7b8f3f1	fix: readme	2023-11-28 15:15:02 +08:00
Gabe Yuan	c4e9365512	fix: clipboard.writeText run with async	2023-11-28 14:59:31 +08:00
Gabe Yuan	7d3972d3a8	perf: merge Translate Popup/Selected shortcut	2023-11-28 13:36:40 +08:00
Gabe Yuan	52ca4306fd	feat: blockquote style	2023-11-28 11:41:45 +08:00
Gabe Yuan	da368ee612	feat: disable languages	2023-11-28 11:11:59 +08:00
Gabe Yuan	22c50e7765	feat: translate blacklist	2023-11-24 17:07:29 +08:00
Gabe Yuan	7bc39dd1bc	fix: default shortcut: open setting page	2023-11-23 17:47:50 +08:00
Gabe Yuan	c80ead6116	v1.7.13	2023-11-22 15:24:54 +08:00
Gabe Yuan	67e76e4009	update readme	2023-11-22 15:08:26 +08:00
Gabe Yuan	b213218a30	update readme	2023-11-22 15:04:52 +08:00
Gabe Yuan	c629a1252c	GM registerMenuCommand: open transbox, translate selected	2023-11-22 14:45:01 +08:00
Gabe Yuan	64d2481e93	update rules	2023-11-22 13:38:49 +08:00
Gabe Yuan	e7d6a6add8	update readme	2023-11-22 12:27:38 +08:00
Gabe Yuan	edc25f7da4	add touch option: four finger tap	2023-11-22 11:27:41 +08:00
Gabe Yuan	5bff84ace1	add context menus: open tranbox	2023-11-22 11:02:48 +08:00
Gabe Yuan	f8bfcba317	fix html fontsize	2023-11-22 10:23:14 +08:00
Gabe Yuan	013a05201b	add context menus	2023-11-21 11:36:46 +08:00
Gabe Yuan	433e811821	add context menus	2023-11-21 11:20:05 +08:00
Gabe Yuan	df4cfc0fbc	update readme	2023-11-17 11:38:42 +08:00
Gabe Yuan	1bfb465fd6	v1.7.12	2023-11-14 22:30:53 +08:00
Gabe Yuan	d5d5ec3fef	fix text	2023-11-14 16:55:44 +08:00
Gabe Yuan	0a32f94d32	update webfix	2023-11-14 15:15:19 +08:00
Gabe Yuan	8067f34ce6	update readme	2023-11-14 10:50:48 +08:00
Gabe Yuan	214c189a7c	fix text	2023-11-14 10:41:44 +08:00
Gabe Yuan	1f67afc8d8	fix error: addNode.querySelectorAll	2023-11-14 10:26:07 +08:00
Gabe Yuan	7d4af27919	user webfix rules	2023-11-14 10:19:23 +08:00
Gabe Yuan	2d651abfdd	user webfix rules...	2023-11-13 18:03:38 +08:00
Gabe Yuan	6e06fe79cd	bug fix: repace mouseover to mouseenter	2023-11-13 11:02:25 +08:00
Gabe Yuan	6093577591	sleep mouseup	2023-11-11 17:22:43 +08:00
Gabe Yuan	4b23ee733f	touch operation	2023-11-11 16:59:38 +08:00
Gabe Yuan	46428b7c7f	touch operation...	2023-11-10 18:00:34 +08:00
Gabe Yuan	6805340a9a	remove wrangler script	2023-11-10 10:56:17 +08:00
Gabe Yuan	df36ca8d8b	fix bug	2023-11-07 17:57:17 +08:00
Gabe Yuan	fe13de7c30	trans api return early	2023-11-07 17:52:33 +08:00
Gabe Yuan	b00f636b72	fix bug	2023-11-07 17:47:42 +08:00
Gabe Yuan	8d074e63e1	throw fetch error	2023-11-06 15:42:21 +08:00
Gabe Yuan	37989b0089	fix text	2023-11-06 12:06:10 +08:00
Gabe Yuan	477361eb40	replace getElementsByTagName to querySelectorAll	2023-11-05 16:20:44 +08:00
Gabe Yuan	94288b5dc3	show detail error to api test	2023-11-02 23:35:36 +08:00
Gabe Yuan	84de1e0f12	replace getElementsByName to getElementsByTagName	2023-11-02 10:59:26 +08:00
Gabe Yuan	06f93c1c10	repace querySelectorAll to getElementsByName	2023-11-02 10:56:46 +08:00
Gabe Yuan	450283b80a	v1.7.11	2023-10-27 17:14:13 +08:00
Gabe Yuan	44aeed03a6	fix dict ui	2023-10-27 14:51:53 +08:00
Gabe Yuan	fa4569415d	fix dict ui	2023-10-27 14:07:22 +08:00
Gabe Yuan	a341bf30ba	fix tranbox apisetting bug	2023-10-27 13:55:24 +08:00
Gabe Yuan	34a7354c84	fix dict tags stack	2023-10-27 13:18:42 +08:00
Gabe Yuan	21b5dfbe98	update readme	2023-10-27 00:11:44 +08:00
Gabe Yuan	c1920f5cdd	v1.7.10	2023-10-27 00:01:48 +08:00
Gabe Yuan	3e24568df9	add upload button for fav words	2023-10-26 23:55:05 +08:00
Gabe Yuan	b785cfe854	add download button for fav words	2023-10-26 17:59:49 +08:00
Gabe Yuan	15367bd117	add fav words page	2023-10-26 17:32:55 +08:00
Gabe Yuan	d7eaac5aca	update nav icon	2023-10-26 13:22:01 +08:00
Gabe Yuan	d4526d605c	fix i18n text	2023-10-26 13:18:02 +08:00
Gabe Yuan	52979356ca	fix i18n text	2023-10-26 13:10:25 +08:00
Gabe Yuan	c6d3d6454f	add copy button to tranbox	2023-10-26 12:24:24 +08:00
Gabe Yuan	0d7112187d	update readme	2023-10-26 11:17:10 +08:00
Gabe Yuan	045ff3c3d9	support: cloudflare ai	2023-10-26 11:13:50 +08:00
Gabe Yuan	dd68a73efd	set overflowWrap for long url	2023-10-26 10:41:04 +08:00
Gabe Yuan	5947dc182e	remove log	2023-10-25 16:19:58 +08:00
Gabe Yuan	e185bbdb4d	v1.7.9	2023-10-25 16:08:06 +08:00
Gabe Yuan	9368320c38	fix btn offset bug	2023-10-25 16:07:09 +08:00