v1.8.5

fix: rules
feat: close tranbox when click away
2024-04-02 17:01:34 +08:00 · 2024-04-01 12:35:54 +08:00 · 2024-04-01 12:25:59 +08:00 · 2024-04-01 11:50:29 +08:00 · 2024-03-27 14:24:41 +08:00 · 2024-03-26 17:50:56 +08:00
73 changed files with 3301 additions and 1944 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.12
+REACT_APP_VERSION=1.8.5

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

@@ -17,8 +17,6 @@ REACT_APP_RULESURL=https://fishjar.github.io/kiss-rules/kiss-rules.json
 REACT_APP_RULESURL_ON=https://fishjar.github.io/kiss-rules/kiss-rules-on.json
 REACT_APP_RULESURL_OFF=https://fishjar.github.io/kiss-rules/kiss-rules-off.json

-REACT_APP_WEBFIXURL=https://fishjar.github.io/kiss-rules/kiss-webfix.json
-
 REACT_APP_VERSIONFILE=https://fishjar.github.io/kiss-translator/version.txt
 REACT_APP_VERSIONFILE2=https://kiss-translator.rayjar.com/version.txt

--- 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)

@@ -9,10 +9,10 @@ A simple [bilingual translation extension & Greasemonkey script](https://github.
 - [x] Keep it simple, smart
 - [x] Open source
 - [x] Adapt to common browsers
-  - [x] Chrome/Edge/Firefox/Kiwi
+  - [x] Chrome/Edge/Firefox/Kiwi/Orion
  - [ ] Safari
 - [x] Supports multiple translation services
-  - [x] Google/Microsoft/DeepL/OpenAI/CloudflareAI/Baidu/Tencent
+  - [x] Google/Microsoft/DeepL/OpenAI/Gemini/CloudflareAI/Baidu/Tencent
  - [x] Custom translation interface
 - [x] Covers common translation scenarios
  - [x] Web bilingual translation
@@ -26,12 +26,13 @@ A simple [bilingual translation extension & Greasemonkey script](https://github.
  - [x] WebDAV
 - [x] Custom translation rules
  - [x] Rule subscription/rule sharing
+  - [x] Customized terminology
 - [x] Custom translation style
 - [x] Custom shortcut keys
  - `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

@@ -39,17 +40,19 @@ 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)
+    - [x] Kiwi (Android)
+    - [x] Orion (iOS)
  - [x] Edge [Installation address](https://microsoftedge.microsoft.com/addons/detail/%E7%AE%80%E7%BA%A6%E7%BF%BB%E8%AF%91/jemckldkclkinpjighnoilpbldbdmmlh?hl=zh-CN)
  - [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](https://fishjar.github.io/kiss-translator/kiss-translator.user.js)
-    - Greasy Fork [Installation address](https://greasyfork.org/zh-CN/scripts/472840-kiss-translator)
+    - [Greasy Fork](https://greasyfork.org/zh-CN/scripts/472840-kiss-translator)
  - [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
@@ -61,9 +64,6 @@ A simple [bilingual translation extension & Greasemonkey script](https://github.
 - Community subscription rules: [https://github.com/fishjar/kiss-rules](https://github.com/fishjar/kiss-rules)
  - Provides the latest and most complete list of subscription rules maintained by the community.
  - Help with rules-related issues.
- Web page correction script: [https://github.com/fishjar/kiss-webfixer](https://github.com/fishjar/kiss-webfixer)
-  - Fixed scripts for some special sites.
-  - So that the translation software can get better display effect.
 - Translation interface agent: [https://github.com/fishjar/kiss-proxy](https://github.com/fishjar/kiss-proxy)
  - If you encounter network problems when accessing a certain translation interface, this proxy service may help you.
  - Deploy and manage by yourself.
@@ -84,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)

@@ -9,10 +9,10 @@
 - [x] 保持简约
 - [x] 开放源代码
 - [x] 适配常见浏览器
-  - [x] Chrome/Edge/Firefox/Kiwi
+  - [x] Chrome/Edge/Firefox/Kiwi/Orion
  - [ ] Safari
 - [x] 支持多种翻译服务
-  - [x] Google/Microsoft/DeepL/OpenAI/CloudflareAI/Baidu/Tencent
+  - [x] Google/Microsoft/DeepL/OpenAI/Gemini/CloudflareAI/Baidu/Tencent
  - [x] 自定义翻译接口
 - [x] 覆盖常见翻译场景
  - [x] 网页双语对照翻译
@@ -26,12 +26,13 @@
  - [x] WebDAV
 - [x] 自定义翻译规则
  - [x] 规则订阅/规则分享
+  - [x] 自定义专业术语
 - [x] 自定义译文样式
 - [x] 自定义快捷键
  - `Alt+Q` 开启翻译
  - `Alt+C` 切换样式
  - `Alt+K` 打开设置弹窗
-  - `Alt+B` 打开翻译弹窗
+  - `Alt+S` 打开翻译弹窗/翻译选中文字
  - `Alt+O` 打开设置页面
  - `Alt+I` 输入框翻译

@@ -39,17 +40,19 @@

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

 - [x] 浏览器扩展
  - [x] Chrome [安装地址](https://chrome.google.com/webstore/detail/kiss-translator/bdiifdefkgmcblbcghdlonllpjhhjgof?hl=zh-CN)
+    - [x] Kiwi (Android)
+    - [x] Orion (iOS)
  - [x] Edge [安装地址](https://microsoftedge.microsoft.com/addons/detail/%E7%AE%80%E7%BA%A6%E7%BF%BB%E8%AF%91/jemckldkclkinpjighnoilpbldbdmmlh?hl=zh-CN)
  - [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/)) [安装链接](https://fishjar.github.io/kiss-translator/kiss-translator.user.js)
-    - Greasy Fork [安装地址](https://greasyfork.org/zh-CN/scripts/472840-kiss-translator)
+    - [Greasy Fork](https://greasyfork.org/zh-CN/scripts/472840-kiss-translator)
  - [x] iOS Safari ([Userscripts Safari](https://github.com/quoid/userscripts)) [安装链接](https://fishjar.github.io/kiss-translator/kiss-translator-ios-safari.user.js)

 ## 关联项目
@@ -61,11 +64,8 @@
 - 社区订阅规则: [https://github.com/fishjar/kiss-rules](https://github.com/fishjar/kiss-rules)
  - 提供社区维护的，最新最全的订阅规则列表。
  - 求助规则相关的问题。
- 网页修正脚本: [https://github.com/fishjar/kiss-webfixer](https://github.com/fishjar/kiss-webfixer)
-  - 针对一些特殊网站的修正脚本。
-  - 以便翻译软件得到更好的展示效果。
 - 翻译接口代理: [https://github.com/fishjar/kiss-proxy](https://github.com/fishjar/kiss-proxy)
-  - 如果访问某个翻译接口遇到网络问题，这个代理服务也许可以帮你到你。
+  - 如果访问某个翻译接口遇到网络问题，这个代理服务也许可以帮到你。
  - 自己部署，自己管理。
 - 简约词典插件: [https://github.com/fishjar/kiss-dictionary](https://github.com/fishjar/kiss-dictionary)
  - 搭配本项目一起使用的划词翻译插件。
@@ -84,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,20 +1,20 @@
 {
  "name": "kiss-translator",
  "description": "A minimalist bilingual translation Extension & Greasemonkey Script",
-  "version": "1.7.12",
+  "version": "1.8.5",
  "author": "Gabe<yugang2002@gmail.com>",
  "private": true,
  "dependencies": {
    "@emotion/cache": "^11.11.0",
    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.10.8",
-    "@mui/icons-material": "^5.11.11",
-    "@mui/material": "^5.11.12",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.14.9",
+    "@mui/material": "^5.14.10",
    "query-string": "^8.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-markdown": "^8.0.7",
-    "react-router-dom": "^6.10.0",
+    "react-router-dom": "^6.16.0",
    "react-scripts": "5.0.1",
    "webdav": "^5.3.0",
    "webextension-polyfill": "^0.10.0"
@@ -22,14 +22,15 @@
  "scripts": {
    "start": "REACT_APP_CLIENT=web react-app-rewired start",
    "start:userscript": "REACT_APP_CLIENT=userscript react-app-rewired start",
-    "build:chrome": "rm -rf build/chrome && BUILD_PATH=./build/chrome REACT_APP_CLIENT=chrome react-app-rewired build",
+    "build:chrome": "rm -rf build/chrome && BUILD_PATH=./build/chrome REACT_APP_CLIENT=chrome react-app-rewired build && rm build/chrome/content.html",
    "build:edge": "rm -rf build/edge && cp -r build/chrome build/edge",
-    "build:firefox": "rm -rf build/firefox && cp -r build/chrome build/firefox && cat ./build/firefox/manifest.firefox.json > ./build/firefox/manifest.json",
+    "build:firefox": "rm -rf build/firefox && cp -r build/chrome build/firefox && cat ./build/firefox/manifest.firefox.json > ./build/firefox/manifest.json && rm build/*/manifest.firefox.json",
    "build:web": "rm -rf build/web && BUILD_PATH=./build/web REACT_APP_CLIENT=userscript react-app-rewired build",
    "build:userscript-ios": "file1=build/web/kiss-translator.user.js file2=build/web/kiss-translator-ios-safari.user.js && cp $file1 $file2 && sed -i 's|// @grant         unsafeWindow|// @inject-into   content|g' $file2",
    "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",
+    "pack": "cd build && zip -r chrome.zip chrome && zip -r edge.zip edge && cd firefox && zip -r ../firefox.zip .",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
@@ -57,10 +58,10 @@
    ]
  },
  "devDependencies": {
-    "@babel/core": "^7.22.10",
-    "@babel/node": "^7.22.10",
+    "@babel/core": "^7.22.20",
+    "@babel/node": "^7.22.19",
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@babel/preset-env": "^7.22.10",
+    "@babel/preset-env": "^7.22.20",
    "react-app-rewired": "^2.2.1"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/_locales/en/messages.json
+++ b/public/_locales/en/messages.json
@@ -13,5 +13,8 @@
  },
  "open_options": {
    "message": "Open Options"
+  },
+  "open_tranbox": {
+    "message": "Translate Popup/Selected"
  }
 }
--- a/public/_locales/zh_CN/messages.json
+++ b/public/_locales/zh_CN/messages.json
@@ -13,5 +13,8 @@
  },
  "open_options": {
    "message": "打开设置"
+  },
+  "open_tranbox": {
+    "message": "翻译弹窗/选中文字"
  }
 }
--- 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.12",
+  "version": "1.8.5",
  "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,16 @@
      "description": "__MSG_toggle_style__"
    },
    "openOptions": {
-      "suggested_key": {
-        "default": "Alt+O"
-      },
      "description": "__MSG_open_options__"
    }
  },
-  "permissions": ["<all_urls>", "storage"],
+  "permissions": [
+    "<all_urls>",
+    "storage",
+    "contextMenus",
+    "scripting",
+    "declarativeNetRequest"
+  ],
  "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.12",
+  "version": "1.8.5",
  "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,15 @@
      "description": "__MSG_toggle_style__"
    },
    "openOptions": {
-      "suggested_key": {
-        "default": "Alt+O"
-      },
      "description": "__MSG_open_options__"
    }
  },
-  "permissions": ["storage"],
+  "permissions": [
+    "storage",
+    "contextMenus",
+    "scripting",
+    "declarativeNetRequest"
+  ],
  "host_permissions": ["<all_urls>"],
  "icons": {
    "16": "images/logo16.png",
--- a/src/apis/baidu.js
+++ b/src/apis/baidu.js
@@ -1,6 +1,10 @@
 import queryString from "query-string";
 import { getBdauth, setBdauth } from "../libs/storage";
-import { URL_BAIDU_WEB, URL_BAIDU_TRAN } from "../config";
+import {
+  URL_BAIDU_WEB,
+  URL_BAIDU_TRANSAPI_V2,
+  URL_BAIDU_TRANSAPI,
+} from "../config";
 import { fetchApi } from "../libs/fetch";

 /* eslint-disable */
@@ -203,7 +207,12 @@ const _bdAuth = () => {

 const bdAuth = _bdAuth();

-export const genBaidu = async ({ text, from, to }) => {
+/**
+ * 失效作废
+ * @param {*} param0
+ * @returns
+ */
+export const genBaiduV2 = async ({ text, from, to }) => {
  const { token, gtk } = await bdAuth();
  const sign = getSign(text, gtk);
  const data = {
@@ -217,7 +226,7 @@ export const genBaidu = async ({ text, from, to }) => {
    ts: Date.now(),
  };

-  const input = `${URL_BAIDU_TRAN}?from=${from}&to=${to}`;
+  const input = `${URL_BAIDU_TRANSAPI_V2}?from=${from}&to=${to}`;
  const init = {
    headers: {
      "content-type": "application/x-www-form-urlencoded; charset=UTF-8",
@@ -228,3 +237,22 @@ export const genBaidu = async ({ text, from, to }) => {

  return [input, init];
 };
+
+export const genBaidu = async ({ text, from, to }) => {
+  const data = {
+    from,
+    to,
+    query: text,
+    source: "txt",
+  };
+
+  const init = {
+    headers: {
+      "content-type": "application/x-www-form-urlencoded; charset=UTF-8",
+    },
+    method: "POST",
+    body: queryString.stringify(data),
+  };
+
+  return [URL_BAIDU_TRANSAPI, init];
+};
--- a/src/apis/index.js
+++ b/src/apis/index.js
@@ -9,11 +9,14 @@ 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,
  URL_BAIDU_LANGDETECT,
+  URL_BAIDU_SUGGEST,
+  URL_BAIDU_TTS,
  OPT_LANGS_BAIDU,
  URL_TENCENT_TRANSMART,
  OPT_LANGS_TENCENT,
@@ -69,6 +72,44 @@ export const apiBaiduLangdetect = async (text) => {
  return "";
 };

+/**
+ * 百度翻译建议
+ * @param {*} text
+ * @returns
+ */
+export const apiBaiduSuggest = async (text) => {
+  const res = await fetchPolyfill(URL_BAIDU_SUGGEST, {
+    headers: {
+      "Content-type": "application/json",
+    },
+    method: "POST",
+    body: JSON.stringify({
+      kw: text,
+    }),
+    useCache: true,
+  });
+
+  if (res.errno === 0) {
+    return res.data;
+  }
+
+  return [];
+};
+
+/**
+ * 百度语音
+ * @param {*} text
+ * @param {*} lan
+ * @param {*} spd
+ * @returns
+ */
+export const apiBaiduTTS = (text, lan = "uk", spd = 3) => {
+  const url = `${URL_BAIDU_TTS}?${queryString.stringify({ lan, text, spd })}`;
+  return fetchPolyfill(url, {
+    useCache: false, // 为避免缓存过快增长，禁用缓存语音数据
+  });
+};
+
 /**
 * 腾讯语言识别
 * @param {*} text
@@ -124,11 +165,14 @@ export const apiTranslate = async ({
    return [trText, isSame];
  }

+  // 版本号一/二位升级，旧缓存失效
+  const [v1, v2] = process.env.REACT_APP_VERSION.split(".");
  const cacheOpts = {
    translator,
    text,
    fromLang,
    toLang,
+    version: [v1, v2].join("."),
  };

  const transOpts = {
@@ -154,7 +198,9 @@ export const apiTranslate = async ({
      isSame = to === res.src;
      break;
    case OPT_TRANS_MICROSOFT:
-      trText = res[0].translations.map((item) => item.text).join(" ");
+      trText = res
+        .map((item) => item.translations.map((item) => item.text).join(" "))
+        .join(" ");
      isSame = text === trText;
      break;
    case OPT_TRANS_DEEPL:
@@ -170,15 +216,28 @@ export const apiTranslate = async ({
      isSame = to === res.source_lang;
      break;
    case OPT_TRANS_BAIDU:
-      trText = res.trans_result?.data.map((item) => item.dst).join(" ");
-      isSame = res.trans_result?.to === res.trans_result?.from;
+      // trText = res.trans_result?.data.map((item) => item.dst).join(" ");
+      // isSame = res.trans_result?.to === res.trans_result?.from;
+      if (res.type === 1) {
+        trText = Object.keys(JSON.parse(res.result).content[0].mean[0].cont)[0];
+        isSame = to === res.from;
+      } else if (res.type === 2) {
+        trText = res.data.map((item) => item.dst).join(" ");
+        isSame = to === res.from;
+      }
      break;
    case OPT_TRANS_TENCENT:
      trText = res.auto_translation;
      isSame = text === trText;
      break;
    case OPT_TRANS_OPENAI:
-      trText = res?.choices?.[0].message.content;
+      trText = res?.choices?.map((item) => item.message.content).join(" ");
+      isSame = text === trText;
+      break;
+    case OPT_TRANS_GEMINI:
+      trText = res?.candidates
+        ?.map((item) => item.content?.parts.map((item) => item.text).join(" "))
+        .join(" ");
      isSame = text === trText;
      break;
    case OPT_TRANS_CLOUDFLAREAI:
--- a/src/background.js
+++ b/src/background.js
@@ -7,9 +7,17 @@ import {
  MSG_OPEN_OPTIONS,
  MSG_SAVE_RULE,
  MSG_TRANS_TOGGLE_STYLE,
+  MSG_OPEN_TRANBOX,
+  MSG_CONTEXT_MENUS,
+  MSG_COMMAND_SHORTCUTS,
+  MSG_INJECT_JS,
+  MSG_INJECT_CSS,
+  MSG_UPDATE_CSP,
+  DEFAULT_CSPLIST,
  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";
@@ -18,72 +26,184 @@ import { sendTabMsg } from "./libs/msg";
 import { trySyncAllSubRules } from "./libs/subRules";
 import { tryClearCaches } from "./libs";
 import { saveRule } from "./libs/rules";
+import { getCurTabId } from "./libs/msg";
+import { injectInlineJs, injectInternalCss } from "./libs/injector";
+import { kissLog } from "./libs/log";

 globalThis.ContextType = "BACKGROUND";

+const REMOVE_HEADERS = [
+  `content-security-policy`,
+  `content-security-policy-report-only`,
+  `x-webkit-csp`,
+  `x-content-security-policy`,
+];
+
+/**
+ * 添加右键菜单
+ */
+async function addContextMenus(contextMenuType = 1) {
+  // 添加前先删除,避免重复ID的错误
+  try {
+    await browser.contextMenus.removeAll();
+  } catch (err) {
+    //
+  }
+
+  switch (contextMenuType) {
+    case 1:
+      browser.contextMenus.create({
+        id: CMD_TOGGLE_TRANSLATE,
+        title: browser.i18n.getMessage("app_name"),
+        contexts: ["page", "selection"],
+      });
+      break;
+    case 2:
+      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"],
+      });
+      break;
+    default:
+  }
+}
+
+/**
+ * 更新CSP策略
+ * @param {*} csplist
+ */
+async function updateCspRules(csplist = DEFAULT_CSPLIST.join(",\n")) {
+  try {
+    const newRules = csplist
+      .split(/\n|,/)
+      .map((url) => url.trim())
+      .filter(Boolean)
+      .map((url, idx) => ({
+        id: idx + 1,
+        action: {
+          type: "modifyHeaders",
+          responseHeaders: REMOVE_HEADERS.map((header) => ({
+            operation: "remove",
+            header,
+          })),
+        },
+        condition: {
+          urlFilter: url,
+          resourceTypes: ["main_frame", "sub_frame"],
+        },
+      }));
+    const oldRules = await browser.declarativeNetRequest.getDynamicRules();
+    const oldRuleIds = oldRules.map((rule) => rule.id);
+    await browser.declarativeNetRequest.updateDynamicRules({
+      removeRuleIds: oldRuleIds,
+      addRules: newRules,
+    });
+  } catch (err) {
+    kissLog(err, "update csp rules");
+  }
+}
+
 /**
 * 插件安装
 */
 browser.runtime.onInstalled.addListener(() => {
  tryInitDefaultData();
+
+  // 右键菜单
+  addContextMenus();
+
+  // 禁用CSP
+  updateCspRules();
 });

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

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

+  // 右键菜单
+  // firefox重启后菜单会消失,故重复添加
+  addContextMenus(contextMenuType);
+
+  // 禁用CSP
+  updateCspRules(csplist);
+
  // 同步订阅规则
-  trySyncAllSubRules(setting);
+  trySyncAllSubRules({ subrulesList });
 });

 /**
 * 监听消息
 */
-browser.runtime.onMessage.addListener(
-  ({ action, args }, sender, sendResponse) => {
-    switch (action) {
-      case MSG_FETCH:
-        const { input, opts } = args;
-        fetchData(input, opts)
-          .then((data) => {
-            sendResponse({ data });
-          })
-          .catch((error) => {
-            sendResponse({ error: error.message, cause: error.cause });
-          });
-        break;
-      case MSG_FETCH_LIMIT:
-        const { interval, limit } = args;
-        fetchPool.update(interval, limit);
-        sendResponse({ data: "ok" });
-        break;
-      case MSG_FETCH_CLEAR:
-        fetchPool.clear();
-        sendResponse({ data: "ok" });
-        break;
-      case MSG_OPEN_OPTIONS:
-        browser.runtime.openOptionsPage();
-        break;
-      case MSG_SAVE_RULE:
-        saveRule(args);
-        break;
-      default:
-        sendResponse({ error: `message action is unavailable: ${action}` });
-    }
-    return true;
+browser.runtime.onMessage.addListener(async ({ action, args }) => {
+  switch (action) {
+    case MSG_FETCH:
+      const { input, opts } = args;
+      return await fetchData(input, opts);
+    case MSG_FETCH_LIMIT:
+      const { interval, limit } = args;
+      return fetchPool.update(interval, limit);
+    case MSG_FETCH_CLEAR:
+      return fetchPool.clear();
+    case MSG_OPEN_OPTIONS:
+      return await browser.runtime.openOptionsPage();
+    case MSG_SAVE_RULE:
+      return await saveRule(args);
+    case MSG_INJECT_JS:
+      return await browser.scripting.executeScript({
+        target: { tabId: await getCurTabId(), allFrames: true },
+        func: injectInlineJs,
+        args: [args],
+        world: "MAIN",
+      });
+    case MSG_INJECT_CSS:
+      return await browser.scripting.executeScript({
+        target: { tabId: await getCurTabId(), allFrames: true },
+        func: injectInternalCss,
+        args: [args],
+        world: "MAIN",
+      });
+    case MSG_UPDATE_CSP:
+      return await updateCspRules(args);
+    case MSG_CONTEXT_MENUS:
+      return await addContextMenus(args);
+    case MSG_COMMAND_SHORTCUTS:
+      return await browser.commands.getAll();
+    default:
+      throw new Error(`message action is unavailable: ${action}`);
  }
-);
+});

 /**
 * 监听快捷键
@@ -94,6 +214,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 +226,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,28 +8,79 @@ 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 } from "./libs/iframe";
 import Slection from "./views/Selection";
 import { touchTapListener } from "./libs/touch";
-import { debounce } from "./libs/utils";
+import { debounce, genEventName } from "./libs/utils";
+import { handlePing, injectScript } from "./libs/gm";
+import { browser } from "./libs/browser";
+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) {
-  let translator;
+/**
+ * 插件监听后端事件
+ * @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 {*} translator
+ */
+function runIframe(translator) {
  window.addEventListener("message", (e) => {
    const { action, args } = e.data || {};
    switch (action) {
@@ -40,26 +91,25 @@ export function runIframe(setting) {
        translator?.toggleStyle();
        break;
      case MSG_TRANS_PUTRULE:
-        if (!translator) {
-          translator = new Translator(args, setting);
-        } else {
-          translator.updateRule(args || {});
-        }
+        translator.updateRule(args || {});
        break;
      default:
    }
  });
-  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);
+  $action.style.fontSize = "0";
+  $action.style.width = "0";
+  $action.style.height = "0";
  document.body.parentElement.appendChild($action);
  const shadowContainer = $action.attachShadow({ mode: "closed" });
  const emotionRoot = document.createElement("style");
@@ -80,7 +130,13 @@ export async function showFab(translator) {
  );
 }

-export function showTransbox({
+/**
+ * 划词翻译
+ * @param {*} param0
+ * @returns
+ */
+function showTransbox({
+  contextMenuType,
  tranboxSetting = DEFAULT_TRANBOX_SETTING,
  transApis,
 }) {
@@ -90,6 +146,9 @@ export function showTransbox({

  const $tranbox = document.createElement("div");
  $tranbox.setAttribute("id", "kiss-transbox");
+  $tranbox.style.fontSize = "0";
+  $tranbox.style.width = "0";
+  $tranbox.style.height = "0";
  document.body.parentElement.appendChild($tranbox);
  const shadowContainer = $tranbox.attachShadow({ mode: "closed" });
  const emotionRoot = document.createElement("style");
@@ -104,32 +163,33 @@ export function showTransbox({
  ReactDOM.createRoot(shadowRootElement).render(
    <React.StrictMode>
      <CacheProvider value={cache}>
-        <Slection tranboxSetting={tranboxSetting} transApis={transApis} />
+        <Slection
+          contextMenuType={contextMenuType}
+          tranboxSetting={tranboxSetting}
+          transApis={transApis}
+        />
      </CacheProvider>
    </React.StrictMode>
  );
 }

-export function windowListener(rule) {
-  window.addEventListener("message", (e) => {
-    const { action } = e.data || {};
-    switch (action) {
-      case MSG_TRANS_GETRULE:
-        sendIframeMsg(MSG_TRANS_PUTRULE, rule);
-        break;
-      default:
-    }
-  });
-}
-
-export function showErr(message) {
+/**
+ * 显示错误信息到页面顶部
+ * @param {*} message
+ */
+function showErr(message) {
  const $err = document.createElement("div");
  $err.innerText = `KISS-Translator: ${message}`;
  $err.style.cssText = "background:red; color:#fff;";
  document.body.prepend($err);
 }

-export function touchOperation(translator) {
+/**
+ * 监听触屏操作
+ * @param {*} translator
+ * @returns
+ */
+function touchOperation(translator) {
  const { touchTranslate = 2 } = translator.setting;
  if (touchTranslate === 0) {
    return;
@@ -141,3 +201,62 @@ export function touchOperation(translator) {
  });
  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;
+    }
+
+    // 翻译网页
+    const rule = await matchRule(href, setting);
+    const translator = new Translator(rule, setting);
+
+    // 适配iframe
+    if (isIframe) {
+      runIframe(translator);
+      return;
+    }
+
+    // 监听消息
+    !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
@@ -112,8 +112,8 @@ export const I18N = {
    en: customApiHelpEN,
  },
  translate_alt: {
-    zh: `翻译 (Alt+Q)`,
-    en: `Translate (Alt+Q)`,
+    zh: `翻译`,
+    en: `Translate`,
  },
  basic_setting: {
    zh: `基本设置`,
@@ -160,20 +160,24 @@ export const I18N = {
    en: `Interface Language`,
  },
  fetch_limit: {
-    zh: `最大请求数量 (1-100)`,
-    en: `Maximum Number Of Request (1-100)`,
+    zh: `最大并发请求数量 (1-100)`,
+    en: `Maximum Number Of Concurrent Requests (1-100)`,
  },
  fetch_interval: {
-    zh: `请求间隔时间 (0-5000ms)`,
-    en: `Request Interval (0-5000ms)`,
+    zh: `每次请求间隔时间 (0-5000ms)`,
+    en: `Time Between Requests (0-5000ms)`,
+  },
+  translate_interval: {
+    zh: `重新翻译间隔时间 (100-5000ms)`,
+    en: `Retranslation Interval (100-5000ms)`,
  },
  min_translate_length: {
-    zh: `最小翻译长度 (1-100)`,
-    en: `Min Translate Length (1-100)`,
+    zh: `最小翻译字符数 (1-100)`,
+    en: `Minimum number Of Translated Characters (1-100)`,
  },
  max_translate_length: {
-    zh: `最大翻译长度 (100-10000)`,
-    en: `Max Translate Length (100-10000)`,
+    zh: `最大翻译字符数 (100-10000)`,
+    en: `Maximum number Of Translated Characters (100-10000)`,
  },
  num_of_newline_characters: {
    zh: `换行字符数 (1-1000)`,
@@ -183,16 +187,20 @@ export const I18N = {
    zh: `翻译服务`,
    en: `Translate Service`,
  },
-  mouseover_translation: {
-    zh: `鼠标悬停翻译`,
-    en: `Mouseover translation`,
+  translate_timing: {
+    zh: `翻译时机`,
+    en: `Translate Timing`,
  },
-  mk_disable: {
-    zh: `禁用`,
-    en: `Disable`,
+  mk_pagescroll: {
+    zh: `滚动加载翻译（推荐）`,
+    en: `Rolling Loading (Suggested)`,
+  },
+  mk_pageopen: {
+    zh: `页面打开全部翻译`,
+    en: `Page Open`,
  },
  mk_mouseover: {
-    zh: `鼠标悬停`,
+    zh: `鼠标悬停翻译`,
    en: `Mouseover`,
  },
  mk_ctrlKey: {
@@ -215,13 +223,21 @@ 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: `文字样式`,
+    zh: `译文样式`,
    en: `Text Style`,
  },
  text_style_alt: {
-    zh: `文字样式 (Alt+C)`,
-    en: `Text Style (Alt+C)`,
+    zh: `译文样式`,
+    en: `Text Style`,
  },
  bg_color: {
    zh: `样式颜色`,
@@ -295,6 +311,10 @@ export const I18N = {
    zh: `2、“订阅规则”的注入位置是倒数第二的位置，因此除全局规则(*)外，“个人规则”优先级比“订阅规则”高，“个人规则”填写同样的网址会覆盖”订阅规则“的条目。`,
    en: `2. The injection position of "Subscription Rules" is the penultimate position. Therefore, except for the global rules (*), the priority of "Personal Rules" is higher than that of "Subscription Rules". Filling in the same url in "Personal Rules" will overwrite "Subscription Rules" entry.`,
  },
+  rules_warn_3: {
+    zh: `3、关于规则填写：输入框留空或下拉框选“*”表示采用全局规则。`,
+    en: `3. Regarding filling in the rules: Leave the input box blank or select "*" in the drop-down box to use global rule.`,
+  },
  sync_warn: {
    zh: `如果服务器存在其他客户端同步的数据，第一次同步将直接覆盖本地配置，后面则根据修改时间，新的覆盖旧的。`,
    en: `If the server has data synchronized by other clients, the first synchronization will directly overwrite the local configuration, and later, according to the modification time, the new one will overwrite the old one.`,
@@ -335,6 +355,10 @@ export const I18N = {
    zh: `高亮`,
    en: `Highlight`,
  },
+  blockquote: {
+    zh: `引用`,
+    en: `Blockquote`,
+  },
  diy_style: {
    zh: `自定义样式`,
    en: `Custom Style`,
@@ -344,20 +368,20 @@ 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. Supports the asterisk (*) wildcard character. 2. Separate multiple URLs with newlines or English commas ",".`,
  },
  selector_helper: {
-    zh: `1、遵循CSS选择器语法。2、留空表示采用全局设置。3、多个CSS选择器之间用“;”隔开。4、“shadow root”选择器和内部选择器用“>>>”隔开。`,
-    en: `1. Follow CSS selector syntax. 2. Leave blank to adopt the global setting. 3. Separate multiple CSS selectors with ";". 4. The "shadow root" selector and the internal selector are separated by ">>>".`,
+    zh: `1、遵循CSS选择器语法。2、多个CSS选择器之间用“;”隔开。3、“shadow root”选择器和内部选择器用“>>>”隔开。`,
+    en: `1. Follow CSS selector syntax. 2. Separate multiple CSS selectors with ";". 3. The "shadow root" selector and the internal selector are separated by ">>>".`,
  },
  translate_switch: {
    zh: `开启翻译`,
@@ -375,6 +399,50 @@ 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. Sub-element selectors are separated by ">>>".`,
+  },
+  terms: {
+    zh: `专业术语`,
+    en: `Terms`,
+  },
+  terms_helper: {
+    zh: `1、支持正则表达式匹配，无需斜杆，不支持修饰符。2、多条术语用换行或分号“;”隔开。3、术语和译文用英文逗号“,”隔开。4、没有译文视为不翻译术语。`,
+    en: `1. Supports regular expression matching, no slash required, and no modifiers are supported. 2. Separate multiple terms with newlines or semicolons ";". 3. Terms and translations are separated by English commas ",". 4. If there is no translation, the term will be deemed not to be translated.`,
+  },
+  selector_style: {
+    zh: `选择器节点样式`,
+    en: `Selector Style`,
+  },
+  selector_style_helper: {
+    zh: `开启翻译时注入，关闭翻译时不会移除。`,
+    en: `It is injected when translation is turned on and will not be removed when translation is turned off.`,
+  },
+  selector_parent_style: {
+    zh: `选择器父节点样式`,
+    en: `Selector Parent Style`,
+  },
+  inject_js: {
+    zh: `注入JS`,
+    en: `Inject JS`,
+  },
+  inject_js_helper: {
+    zh: `1、开启翻译时注入运行，关闭翻译时移除。2、随着页面变化，可能会多次注入运行。`,
+    en: `1. Inject and run when translation is turned on, and removed when translation is turned off. 2. As the page changes, it may be injected and run multiple times.`,
+  },
+  inject_css: {
+    zh: `注入CSS`,
+    en: `Inject CSS`,
+  },
+  inject_css_helper: {
+    zh: `开启翻译时注入，关闭翻译时将移除。`,
+    en: `Injected when translation is enabled and removed when translation is disabled.`,
+  },
  root_selector: {
    zh: `根选择器`,
    en: `Root Selector`,
@@ -383,6 +451,10 @@ export const I18N = {
    zh: `修复函数`,
    en: `Fixer Function`,
  },
+  fixer_function_helper: {
+    zh: `1、br是将<br>换行替换成<p "kiss-p">。2、bn是将\\n换行替换成<p "kiss-p">。3、brToDiv和bnToDiv是替换成<div class="kiss-p">。`,
+    en: `1. br replaces <br> line breaks with <p "kiss-p">. 2. bn replaces \\n newline with <p "kiss-p">. 3. brToDiv and bnToDiv are replaced with <div class="kiss-p">.`,
+  },
  import: {
    zh: `导入`,
    en: `Import`,
@@ -547,6 +619,14 @@ export const I18N = {
    zh: `隐藏悬浮按钮`,
    en: `Hide Fab Button`,
  },
+  hide_tran_button: {
+    zh: `隐藏翻译按钮`,
+    en: `Hide Translate Button`,
+  },
+  hide_click_away: {
+    zh: `点击外部关闭弹窗`,
+    en: `Click outside to close the pop-up window`,
+  },
  show: {
    zh: `显示`,
    en: `Show`,
@@ -628,8 +708,8 @@ 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（0-100）`,
@@ -671,4 +751,72 @@ export const I18N = {
    zh: `三指轻触`,
    en: `Three finger tap`,
  },
+  touch_tap_4: {
+    zh: `四指轻触`,
+    en: `Four finger tap`,
+  },
+  translate_blacklist: {
+    zh: `禁用翻译名单`,
+    en: `Translate Blacklist`,
+  },
+  disabled_csplist: {
+    zh: `禁用CSP名单`,
+    en: `Disabled CSP List`,
+  },
+  disabled_csplist_helper: {
+    zh: `3、通过调整CSP策略，使得某些页面能够注入JS/CSS/Media，请谨慎使用，除非您已知晓相关风险。`,
+    en: `3. By adjusting the CSP policy, some pages can inject JS/CSS/Media. Please use it with caution unless you are aware of the related risks.`,
+  },
+  skip_langs: {
+    zh: `不翻译的语言`,
+    en: `Disable Languages`,
+  },
+  skip_langs_helper: {
+    zh: `此功能依赖准确的语言检测，建议启用远程语言检测。`,
+    en: `This feature relies on accurate language detection. It is recommended to enable remote language detection.`,
+  },
+  context_menus: {
+    zh: `右键菜单`,
+    en: `Context Menus`,
+  },
+  hide_context_menus: {
+    zh: `隐藏右键菜单`,
+    en: `Hide Context Menus`,
+  },
+  simple_context_menus: {
+    zh: `简单右键菜单`,
+    en: `Simple_context_menus Context Menus`,
+  },
+  secondary_context_menus: {
+    zh: `二级右键菜单`,
+    en: `Secondary Context Menus`,
+  },
+  mulkeys_help: {
+    zh: `支持用换行或英文逗号“,”分隔多个KEY轮询调用。`,
+    en: `Supports multiple KEY polling calls separated by newlines or English commas ",".`,
+  },
+  translation_element_tag: {
+    zh: `译文元素标签`,
+    en: `Translation Element Tag`,
+  },
+  show_only_translations: {
+    zh: `仅显示译文`,
+    en: `Show Only Translations`,
+  },
+  show_only_translations_help: {
+    zh: `非完美实现，某些页面可能有样式等问题。`,
+    en: `It is not a perfect implementation and some pages may have style issues.`,
+  },
+  translate_page_title: {
+    zh: `是否翻译页面标题`,
+    en: `Translate Page Title`,
+  },
+  more: {
+    zh: `更多`,
+    en: `More`,
+  },
+  fixer_selector: {
+    zh: `网页修复选择器`,
+    en: `Fixer Selector`,
+  },
 };
--- 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,16 +24,15 @@ 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_`;
-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";
@@ -42,7 +42,6 @@ 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";
@@ -58,9 +57,15 @@ 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 MSG_COMMAND_SHORTCUTS = "command_shortcuts";
+export const MSG_INJECT_JS = "inject_js";
+export const MSG_INJECT_CSS = "inject_css";
+export const MSG_UPDATE_CSP = "update_csp";

 export const THEME_LIGHT = "light";
 export const THEME_DARK = "dark";
@@ -78,8 +83,11 @@ export const URL_MICROSOFT_TRAN =
  "https://api-edge.cognitive.microsofttranslator.com/translate";
 export const URL_MICROSOFT_AUTH = "https://edge.microsoft.com/translate/auth";
 export const URL_BAIDU_LANGDETECT = "https://fanyi.baidu.com/langdetect";
+export const URL_BAIDU_SUGGEST = "https://fanyi.baidu.com/sug";
+export const URL_BAIDU_TTS = "https://fanyi.baidu.com/gettts";
 export const URL_BAIDU_WEB = "https://fanyi.baidu.com/";
-export const URL_BAIDU_TRAN = "https://fanyi.baidu.com/v2transapi";
+export const URL_BAIDU_TRANSAPI = "https://fanyi.baidu.com/transapi";
+export const URL_BAIDU_TRANSAPI_V2 = "https://fanyi.baidu.com/v2transapi";
 export const URL_DEEPLFREE_TRAN = "https://www2.deepl.com/jsonrpc";
 export const URL_TENCENT_TRANSMART = "https://transmart.qq.com/api/imt";

@@ -91,19 +99,29 @@ 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_CUSTOMIZE_2 = "Custom2";
+export const OPT_TRANS_CUSTOMIZE_3 = "Custom3";
+export const OPT_TRANS_CUSTOMIZE_4 = "Custom4";
+export const OPT_TRANS_CUSTOMIZE_5 = "Custom5";
 export const OPT_TRANS_ALL = [
  OPT_TRANS_GOOGLE,
  OPT_TRANS_MICROSOFT,
+  OPT_TRANS_BAIDU,
+  OPT_TRANS_TENCENT,
  OPT_TRANS_DEEPL,
  OPT_TRANS_DEEPLFREE,
  OPT_TRANS_DEEPLX,
-  OPT_TRANS_BAIDU,
-  OPT_TRANS_TENCENT,
  OPT_TRANS_OPENAI,
+  OPT_TRANS_GEMINI,
  OPT_TRANS_CLOUDFLAREAI,
  OPT_TRANS_CUSTOMIZE,
+  OPT_TRANS_CUSTOMIZE_2,
+  OPT_TRANS_CUSTOMIZE_3,
+  OPT_TRANS_CUSTOMIZE_4,
+  OPT_TRANS_CUSTOMIZE_5,
 ];

 export const OPT_LANGS_TO = [
@@ -224,6 +242,9 @@ 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"],
@@ -265,6 +286,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,
@@ -274,6 +296,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 = [
@@ -282,19 +305,22 @@ 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";
-export const OPT_MOUSEKEY_MOUSEOVER = "mk_mouseover";
-export const OPT_MOUSEKEY_CONTROL = "mk_ctrlKey";
-export const OPT_MOUSEKEY_SHIFT = "mk_shiftKey";
-export const OPT_MOUSEKEY_ALT = "mk_altKey";
-export const OPT_MOUSEKEY_ALL = [
-  OPT_MOUSEKEY_DISABLE,
-  OPT_MOUSEKEY_MOUSEOVER,
-  OPT_MOUSEKEY_CONTROL,
-  OPT_MOUSEKEY_SHIFT,
-  OPT_MOUSEKEY_ALT,
+export const OPT_TIMING_PAGESCROLL = "mk_pagescroll"; // 滚动加载翻译
+export const OPT_TIMING_PAGEOPEN = "mk_pageopen"; // 直接翻译到底
+export const OPT_TIMING_MOUSEOVER = "mk_mouseover";
+export const OPT_TIMING_CONTROL = "mk_ctrlKey";
+export const OPT_TIMING_SHIFT = "mk_shiftKey";
+export const OPT_TIMING_ALT = "mk_altKey";
+export const OPT_TIMING_ALL = [
+  OPT_TIMING_PAGESCROLL,
+  OPT_TIMING_PAGEOPEN,
+  OPT_TIMING_MOUSEOVER,
+  OPT_TIMING_CONTROL,
+  OPT_TIMING_SHIFT,
+  OPT_TIMING_ALT,
 ];

 export const DEFAULT_FETCH_LIMIT = 10; // 默认最大任务数量
@@ -302,20 +328,39 @@ 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"; // 默认高亮背景色/线条颜色

+export const DEFAULT_TRANS_TAG = "span";
+export const DEFAULT_SELECT_STYLE =
+  "-webkit-line-clamp: unset; max-height: none; height: auto;";
+
 // 全局规则
 export const GLOBLA_RULE = {
-  pattern: "*",
-  selector: DEFAULT_SELECTOR,
-  translator: OPT_TRANS_MICROSOFT,
-  fromLang: "auto",
-  toLang: "zh-CN",
-  textStyle: OPT_STYLE_DASHLINE,
-  transOpen: "false",
-  bgColor: "",
-  textDiyStyle: "",
+  pattern: "*", // 匹配网址
+  selector: DEFAULT_SELECTOR, // 选择器
+  keepSelector: DEFAULT_KEEP_SELECTOR, // 保留元素选择器
+  terms: "", // 专业术语
+  translator: OPT_TRANS_MICROSOFT, // 翻译服务
+  fromLang: "auto", // 源语言
+  toLang: "zh-CN", // 目标语言
+  textStyle: OPT_STYLE_DASHLINE, // 译文样式
+  transOpen: "false", // 开启翻译
+  bgColor: "", // 译文颜色
+  textDiyStyle: "", // 自定义译文样式
+  selectStyle: DEFAULT_SELECT_STYLE, // 选择器节点样式
+  parentStyle: DEFAULT_SELECT_STYLE, // 选择器父节点样式
+  injectJs: "", // 注入JS
+  injectCss: "", // 注入CSS
+  transOnly: "false", // 是否仅显示译文
+  transTiming: OPT_TIMING_PAGESCROLL, // 翻译时机/鼠标悬停翻译
+  transTag: DEFAULT_TRANS_TAG, // 译文元素标签
+  transTitle: "false", // 是否同时翻译页面标题
+  detectRemote: "false", // 是否使用远程语言检测
+  skipLangs: [], // 不翻译的语言
+  fixerSelector: "", // 修复函数选择器
+  fixerFunc: "-", // 修复函数
 };

 // 输入框翻译
@@ -333,15 +378,18 @@ 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, // 是否隐藏翻译按钮
+  hideClickAway: false, // 是否点击外部关闭弹窗
 };

 // 订阅列表
@@ -361,33 +409,74 @@ export const DEFAULT_SUBRULES_LIST = [
 ];

 // 翻译接口
+const defaultCustomApi = {
+  url: "",
+  key: "",
+  fetchLimit: DEFAULT_FETCH_LIMIT,
+  fetchInterval: DEFAULT_FETCH_INTERVAL,
+};
 export const DEFAULT_TRANS_APIS = {
  [OPT_TRANS_GOOGLE]: {
    url: "https://translate.googleapis.com/translate_a/single",
    key: "",
+    fetchLimit: DEFAULT_FETCH_LIMIT, // 最大任务数量
+    fetchInterval: DEFAULT_FETCH_INTERVAL, // 任务间隔时间
+  },
+  [OPT_TRANS_MICROSOFT]: {
+    fetchLimit: DEFAULT_FETCH_LIMIT,
+    fetchInterval: DEFAULT_FETCH_INTERVAL,
+  },
+  [OPT_TRANS_BAIDU]: {
+    fetchLimit: DEFAULT_FETCH_LIMIT,
+    fetchInterval: DEFAULT_FETCH_INTERVAL,
+  },
+  [OPT_TRANS_TENCENT]: {
+    fetchLimit: DEFAULT_FETCH_LIMIT,
+    fetchInterval: DEFAULT_FETCH_INTERVAL,
  },
  [OPT_TRANS_DEEPL]: {
    url: "https://api-free.deepl.com/v2/translate",
    key: "",
+    fetchLimit: 1,
+    fetchInterval: 500,
+  },
+  [OPT_TRANS_DEEPLFREE]: {
+    fetchLimit: 1,
+    fetchInterval: 500,
  },
  [OPT_TRANS_DEEPLX]: {
    url: "http://localhost:1188/translate",
    key: "",
+    fetchLimit: 1,
+    fetchInterval: 500,
  },
  [OPT_TRANS_OPENAI]: {
    url: "https://api.openai.com/v1/chat/completions",
    key: "",
    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}.`,
+    fetchLimit: 1,
+    fetchInterval: 500,
+  },
+  [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}`,
+    fetchLimit: 1,
+    fetchInterval: 500,
  },
  [OPT_TRANS_CLOUDFLAREAI]: {
    url: "https://api.cloudflare.com/client/v4/accounts/{ACCOUNT_ID}/ai/run/@cf/meta/m2m100-1.2b",
    key: "",
+    fetchLimit: 1,
+    fetchInterval: 500,
  },
-  [OPT_TRANS_CUSTOMIZE]: {
-    url: "",
-    key: "",
-  },
+  [OPT_TRANS_CUSTOMIZE]: defaultCustomApi,
+  [OPT_TRANS_CUSTOMIZE_2]: defaultCustomApi,
+  [OPT_TRANS_CUSTOMIZE_3]: defaultCustomApi,
+  [OPT_TRANS_CUSTOMIZE_4]: defaultCustomApi,
+  [OPT_TRANS_CUSTOMIZE_5]: defaultCustomApi,
 };

 // 默认快捷键
@@ -399,33 +488,50 @@ 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_CSPLIST = ["https://github.com"]; // 禁用CSP名单

 export const DEFAULT_SETTING = {
  darkMode: false, // 深色模式
  uiLang: "en", // 界面语言
-  fetchLimit: DEFAULT_FETCH_LIMIT, // 最大任务数量
-  fetchInterval: DEFAULT_FETCH_INTERVAL, // 任务间隔时间
+  // fetchLimit: DEFAULT_FETCH_LIMIT, // 最大任务数量(移至transApis，作废)
+  // fetchInterval: DEFAULT_FETCH_INTERVAL, // 任务间隔时间(移至transApis，作废)
  minLength: TRANS_MIN_LENGTH,
  maxLength: TRANS_MAX_LENGTH,
  newlineLength: TRANS_NEWLINE_LENGTH,
  clearCache: false, // 是否在浏览器下次启动时清除缓存
  injectRules: true, // 是否注入订阅规则
-  injectWebfix: true, // 是否注入修复补丁
-  detectRemote: false, // 是否使用远程语言检测
+  // injectWebfix: true, // 是否注入修复补丁(作废)
+  // detectRemote: false, // 是否使用远程语言检测(移至rule，作废)
+  // contextMenus: true, // 是否添加右键菜单(作废)
+  contextMenuType: 1, // 右键菜单类型(0不显示，1简单菜单，2多级菜单)
+  // transTag: DEFAULT_TRANS_TAG, // 译文元素标签(移至rule，作废)
+  // transOnly: false, // 是否仅显示译文(移至rule，作废)
+  // transTitle: false, // 是否同时翻译页面标题(移至rule，作废)
  subrulesList: DEFAULT_SUBRULES_LIST, // 订阅列表
  owSubrule: DEFAULT_OW_RULE, // 覆写订阅规则
  transApis: DEFAULT_TRANS_APIS, // 翻译接口
-  mouseKey: OPT_MOUSEKEY_DISABLE, // 鼠标悬停翻译
+  // mouseKey: OPT_TIMING_PAGESCROLL, // 翻译时机/鼠标悬停翻译(移至rule，作废)
  shortcuts: DEFAULT_SHORTCUTS, // 快捷键
  inputRule: DEFAULT_INPUT_RULE, // 输入框设置
  tranboxSetting: DEFAULT_TRANBOX_SETTING, // 划词翻译设置
  touchTranslate: 2, // 触屏翻译
+  blacklist: DEFAULT_BLACKLIST.join(",\n"), // 禁用翻译名单
+  csplist: DEFAULT_CSPLIST.join(",\n"), // 禁用CSP名单
+  // disableLangs: [], // 不翻译的语言(移至rule，作废)
+  transInterval: 500, // 翻译间隔时间
 };

 export const DEFAULT_RULES = [GLOBLA_RULE];
--- a/src/config/rules.js
+++ b/src/config/rules.js
@@ -1,22 +1,35 @@
-const els = `li, p, h1, h2, h3, h4, h5, h6, dd, blockquote`;
-
-export const DEFAULT_SELECTOR = `:is(${els})`;
+import { FIXER_BR, FIXER_BN, FIXER_BR_DIV, FIXER_BN_DIV } from "../libs/webfix";

 export const GLOBAL_KEY = "*";
 export const REMAIN_KEY = "-";
-
 export const SHADOW_KEY = ">>>";

+export const DEFAULT_SELECTOR = `:is(li, p, h1, h2, h3, h4, h5, h6, dd, blockquote, .kiss-p)`;
+export const DEFAULT_KEEP_SELECTOR = `code, img, svg, pre`;
 export const DEFAULT_RULE = {
-  pattern: "",
-  selector: "",
-  translator: GLOBAL_KEY,
-  fromLang: GLOBAL_KEY,
-  toLang: GLOBAL_KEY,
-  textStyle: GLOBAL_KEY,
-  transOpen: GLOBAL_KEY,
-  bgColor: "",
-  textDiyStyle: "",
+  pattern: "", // 匹配网址
+  selector: "", // 选择器
+  keepSelector: "", // 保留元素选择器
+  terms: "", // 专业术语
+  translator: GLOBAL_KEY, // 翻译服务
+  fromLang: GLOBAL_KEY, // 源语言
+  toLang: GLOBAL_KEY, // 目标语言
+  textStyle: GLOBAL_KEY, // 译文样式
+  transOpen: GLOBAL_KEY, // 开启翻译
+  bgColor: "", // 译文颜色
+  textDiyStyle: "", // 自定义译文样式
+  selectStyle: "", // 选择器节点样式
+  parentStyle: "", // 选择器父节点样式
+  injectJs: "", // 注入JS
+  injectCss: "", // 注入CSS
+  transOnly: GLOBAL_KEY, // 是否仅显示译文
+  transTiming: GLOBAL_KEY, // 翻译时机/鼠标悬停翻译
+  transTag: GLOBAL_KEY, // 译文元素标签
+  transTitle: GLOBAL_KEY, // 是否同时翻译页面标题
+  detectRemote: GLOBAL_KEY, // 是否使用远程语言检测
+  skipLangs: [], // 不翻译的语言
+  fixerSelector: "", // 修复函数选择器
+  fixerFunc: GLOBAL_KEY, // 修复函数
 };

 const DEFAULT_DIY_STYLE = `color: #666;
@@ -42,145 +55,264 @@ export const DEFAULT_OW_RULE = {
  textDiyStyle: DEFAULT_DIY_STYLE,
 };

-const RULES = [
-  {
-    pattern: `www.google.com/search`,
+const RULES_MAP = {
+  "www.google.com/search": {
    selector: `h3, .IsZvec, .VwiC3b`,
  },
-  {
-    pattern: `news.google.com`,
-    selector: `h4`,
+  "news.google.com": {
+    selector: `[data-n-tid], ${DEFAULT_SELECTOR}`,
  },
-  {
-    pattern: `www.foxnews.com`,
+  "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,
+  "bearblog.dev, www.theverge.com, www.tampermonkey.net/documentation.php": {
+    selector: `${DEFAULT_SELECTOR}`,
  },
-  {
-    pattern: `themessenger.com`,
+  "themessenger.com": {
    selector: `.leading-tight, .leading-tighter, .my-2 p, .font-body p, article ${DEFAULT_SELECTOR}`,
  },
-  {
-    pattern: `www.telegraph.co.uk`,
+  "www.telegraph.co.uk, go.dev/doc/": {
    selector: `article ${DEFAULT_SELECTOR}`,
  },
-  {
-    pattern: `www.theguardian.com`,
+  "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`,
+  "www.semafor.com": {
    selector: `${DEFAULT_SELECTOR}, .styles_intro__IYj__, [class*="styles_description"]`,
  },
-  {
-    pattern: `www.noemamag.com`,
+  "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`,
+  "restofworld.org": {
    selector: `${DEFAULT_SELECTOR}, .recirc-story__headline, .recirc-story__dek`,
  },
-  {
-    pattern: `www.axios.com`,
+  "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`,
+  "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, .BaseText-ewhhUZ`,
  },
-  {
-    pattern: `https://time.com/`,
+  "time.com": {
    selector: `h1, h3, .summary, .video-title, #article-body ${DEFAULT_SELECTOR}, .image-wrap-container .credit.body-caption, .media-heading`,
  },
-  {
-    pattern: `www.dw.com`,
+  "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`,
+  "www.bbc.com": {
+    selector: `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`,
  },
-  {
-    pattern: `www.chinadaily.com.cn`,
+  "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`,
+  "www.facebook.com": {
    selector: `[role="main"] [dir="auto"]`,
  },
-  {
-    pattern: `www.reddit.com`,
-    selector: `[slot="title"], [slot="text-body"] ${DEFAULT_SELECTOR}, #-post-rtjson-content p`,
+  "www.reddit.com, new.reddit.com, sh.reddit.com": {
+    selector: `:is(#AppRouter-main-content, #overlayScrollContainer) :is([class^=tbIA],[class^=_1zP],[class^=ULWj],[class^=_2Jj], [class^=_334],[class^=_2Gr],[class^=_7T4],[class^=_1WO], ${DEFAULT_SELECTOR}); [id^="post-title"], :is([slot="text-body"], [slot="comment"]) ${DEFAULT_SELECTOR}, recent-posts h3, aside :is(span:has(>h2), p); shreddit-subreddit-header >>> :is(#title, #description)`,
  },
-  {
-    pattern: `www.quora.com`,
+  "www.quora.com": {
    selector: `.qu-wordBreak--break-word`,
  },
-  {
-    pattern: `edition.cnn.com`,
+  "edition.cnn.com": {
    selector: `.container__title, .container__headline, .headline__text, .image__caption, [data-type="Title"], .article__content ${DEFAULT_SELECTOR}`,
  },
-  {
-    pattern: `www.reuters.com`,
+  "www.reuters.com": {
    selector: `#main-content [data-testid="Heading"], #main-content [data-testid="Body"], .article-body__content__17Yit ${DEFAULT_SELECTOR}`,
  },
-  {
-    pattern: `www.bloomberg.com`,
+  "www.bloomberg.com": {
    selector: `[data-component="headline"], [data-component="related-item-headline"], [data-component="title"], article ${DEFAULT_SELECTOR}`,
  },
-  {
-    pattern: `deno.land, docs.github.com`,
+  "deno.land, docs.github.com": {
    selector: `main ${DEFAULT_SELECTOR}`,
+    keepSelector: DEFAULT_KEEP_SELECTOR,
  },
-  {
-    pattern: `doc.rust-lang.org`,
-    selector: `#content ${DEFAULT_SELECTOR}`,
+  "doc.rust-lang.org": {
+    selector: `.content ${DEFAULT_SELECTOR}`,
+    keepSelector: DEFAULT_KEEP_SELECTOR,
  },
-  {
-    pattern: `www.indiehackers.com`,
+  "www.indiehackers.com": {
    selector: `h1, h3, .content ${DEFAULT_SELECTOR}, .feed-item__title-link`,
  },
-  {
-    pattern: `platform.openai.com/docs`,
+  "platform.openai.com/docs": {
    selector: `.docs-body ${DEFAULT_SELECTOR}`,
+    keepSelector: DEFAULT_KEEP_SELECTOR,
  },
-  {
-    pattern: `en.wikipedia.org`,
+  "en.wikipedia.org": {
    selector: `h1, .mw-parser-output ${DEFAULT_SELECTOR}`,
+    keepSelector: `.mwe-math-element`,
  },
-  {
-    pattern: `stackoverflow.com`,
-    selector: `h1, .s-prose p, .comment-body .comment-copy`,
+  "stackoverflow.com, serverfault.com, superuser.com, stackexchange.com, askubuntu.com, stackapps.com, mathoverflow.net":
+    {
+      selector: `.s-prose ${DEFAULT_SELECTOR}, .comment-copy, .question-hyperlink, .s-post-summary--content-title, .s-post-summary--content-excerpt`,
+      keepSelector: `${DEFAULT_KEEP_SELECTOR}, .math-container`,
+    },
+  "www.npmjs.com/package, developer.chrome.com/docs, medium.com, react.dev, create-react-app.dev, pytorch.org":
+    {
+      selector: `article ${DEFAULT_SELECTOR}`,
+    },
+  "news.ycombinator.com": {
+    selector: `.title, p`,
+    fixerSelector: `.toptext, .commtext`,
+    fixerFunc: FIXER_BR,
  },
-  {
-    pattern: `www.npmjs.com/package/, developer.chrome.com/docs, medium.com, developers.cloudflare.com, react.dev, create-react-app.dev, pytorch.org/`,
+  "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, .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`,
+    keepSelector: DEFAULT_KEEP_SELECTOR,
+  },
+  "twitter.com": {
+    selector: `[data-testid="tweetText"], [data-testid="birdwatch-pivot"]>div.css-1rynq56`,
+    keepSelector: `img, a, .r-18u37iz, .css-175oi2r`,
+  },
+  "m.youtube.com": {
+    selector: `.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`,
+    selectStyle: `-webkit-line-clamp: unset; max-height: none; height: auto;`,
+    parentStyle: `-webkit-line-clamp: unset; max-height: none; height: auto;`,
+    keepSelector: `img, #content-text>a`,
+  },
+  "www.youtube.com": {
+    selector: `h1, #video-title, #content-text, #title, yt-attributed-string>span>span, #ytp-caption-window-container .ytp-caption-segment`,
+    selectStyle: `-webkit-line-clamp: unset; max-height: none; height: auto;`,
+    parentStyle: `-webkit-line-clamp: unset; max-height: none; height: auto;`,
+    keepSelector: `img, #content-text>a`,
+  },
+  "bard.google.com": {
+    selector: `.query-content ${DEFAULT_SELECTOR}, message-content ${DEFAULT_SELECTOR}`,
+  },
+  "www.bing.com, copilot.microsoft.com": {
+    selector: `.b_algoSlug, .rwrl_padref; .cib-serp-main >>> .ac-textBlock ${DEFAULT_SELECTOR}, .text-message-content div`,
+  },
+  "www.phoronix.com": {
+    selector: `article ${DEFAULT_SELECTOR}`,
+    fixerSelector: `.content`,
+    fixerFunc: FIXER_BR,
+  },
+  "wx2.qq.com": {
+    selector: `.js_message_plain`,
+  },
+  "app.slack.com/client/": {
+    selector: `.p-rich_text_section, .c-message_attachment__text, .p-rich_text_list li`,
+  },
+  "discord.com/channels/": {
+    selector: `div[class^=message], div[class^=headerText], div[class^=name_], section[aria-label='Search Results'] div[id^=message-content], div[id^=message]`,
+    keepSelector: `li[class^='card'] div[class^='message'], [class^='embedFieldValue'], [data-list-item-id^='forum-channel-list'] div[class^='headerText']`,
+  },
+  "t.me/s/": {
+    selector: `.js-message_text ${DEFAULT_SELECTOR}`,
+    fixerSelector: `.tgme_widget_message_text`,
+    fixerFunc: FIXER_BR,
+  },
+  "web.telegram.org/k": {
+    selector: `div.kiss-p`,
+    keepSelector: `div[class^=time], .peer-title, .document-wrapper, .message.spoilers-container custom-emoji-element, reactions-element`,
+    fixerSelector: `.message`,
+    fixerFunc: FIXER_BN_DIV,
+  },
+  "web.telegram.org/a": {
+    selector: `.text-content > .kiss-p`,
+    keepSelector: `.Reactions, .time, .peer-title, .document-wrapper, .message.spoilers-container custom-emoji-element`,
+    fixerSelector: `.text-content`,
+    fixerFunc: FIXER_BR_DIV,
+  },
+  "www.instagram.com/": {
+    selector: `h1, article span[dir=auto] > span[dir=auto], ._ab1y`,
+  },
+  "www.instagram.com/p/,www.instagram.com/reels/": {
+    selector: `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": {
+    selector: `.a3s.aiL ${DEFAULT_SELECTOR}, span[data-thread-id]`,
+    fixerSelector: `.a3s.aiL`,
+    fixerFunc: FIXER_BR,
+  },
+  "web.whatsapp.com": {
+    selector: `.copyable-text > span`,
+  },
+  "chat.openai.com": {
+    selector: `div[data-message-author-role] > div ${DEFAULT_SELECTOR}`,
+    fixerSelector: `div[data-message-author-role='user'] > div`,
+    fixerFunc: FIXER_BN,
+  },
+  "forum.ru-board.com": {
+    selector: `.tit, .dats, .kiss-p, .lgf ${DEFAULT_SELECTOR}`,
+    fixerSelector: `span.post`,
+    fixerFunc: FIXER_BR,
+  },
+  "education.github.com": {
+    selector: `${DEFAULT_SELECTOR}, a, summary, span.Button-content`,
+  },
+  "blogs.windows.com": {
+    selector: `${DEFAULT_SELECTOR}, .c-uhf-nav-link, figcaption`,
+    fixerSelector: `.t-content>div>ul>li`,
+    fixerFunc: FIXER_BR,
+  },
+  "developer.apple.com/documentation/": {
+    selector: `#main ${DEFAULT_SELECTOR}, #main .abstract .content, #main .abstract.content, #main .link span`,
+    keepSelector: DEFAULT_KEEP_SELECTOR,
+  },
+  "greasyfork.org": {
+    selector: `h2, .script-link, .script-description, #additional-info ${DEFAULT_SELECTOR}`,
+  },
+  "www.fmkorea.com": {
+    selector: `#container ${DEFAULT_SELECTOR}`,
+  },
+  "forum.arduino.cc": {
+    selector: `.top-row>.title, .featured-topic>.title, .link-top-line>.title, .category-description, .topic-excerpt, .fancy-title, .cooked ${DEFAULT_SELECTOR}`,
+  },
+  "docs.arduino.cc": {
+    selector: `[class^="tutorial-module--left"] ${DEFAULT_SELECTOR}`,
+  },
+  "www.historydefined.net": {
+    selector: `.wp-element-caption, ${DEFAULT_SELECTOR}`,
+  },
+  "gobyexample.com": {
+    selector: `.docs p`,
+    keepSelector: `code`,
+  },
+  "go.dev/tour": {
+    selector: `#left-side ${DEFAULT_SELECTOR}`,
+    keepSelector: `code, img, svg >>> code`,
+  },
+  "pkg.go.dev": {
+    selector: `.Documentation-content ${DEFAULT_SELECTOR}`,
+    keepSelector: `${DEFAULT_KEEP_SELECTOR}, a, span`,
+  },
+  "docs.rs": {
+    selector: `.docblock ${DEFAULT_SELECTOR}, .docblock-short`,
+    keepSelector: `code >>> code`,
+  },
+  "randomnerdtutorials.com": {
    selector: `article ${DEFAULT_SELECTOR}`,
  },
-  {
-    pattern: `news.ycombinator.com`,
-    selector: `.title, .commtext`,
+  "notebooks.githubusercontent.com/view/ipynb": {
+    selector: `#notebook-container ${DEFAULT_SELECTOR}`,
+    keepSelector: DEFAULT_KEEP_SELECTOR,
  },
-  {
-    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`,
+  "developers.cloudflare.com": {
+    selector: `article ${DEFAULT_SELECTOR}, .WorkerStarter--description`,
+    keepSelector: `a[rel='noopener'], code`,
  },
-  {
-    pattern: `twitter.com`,
-    selector: `[data-testid='tweetText']`,
+  "ubuntuforums.org": {
+    fixerSelector: `.postcontent`,
+    fixerFunc: FIXER_BR,
  },
-  {
-    pattern: `youtube.com`,
-    selector: `h1, #video-title, #content-text, #title, yt-attributed-string>span>span`,
+  "play.google.com/store/apps/details": {
+    fixerSelector: `[data-g-id="description"]`,
+    fixerFunc: FIXER_BR,
  },
-];
+  "news.yahoo.co.jp/articles/": {
+    fixerSelector: `.sc-cTsKDU`,
+    fixerFunc: FIXER_BN,
+  },
+  "chromereleases.googleblog.com": {
+    fixerSelector: `.post-content, .post-content > span, li > span`,
+    fixerFunc: FIXER_BR,
+  },
+};

-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, rule]) => ({
+    ...DEFAULT_RULE,
+    ...rule,
+    pattern,
+  }));
--- a/src/content.js
+++ b/src/content.js
@@ -1,81 +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,
-  touchOperation,
-} 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);
-
-    // 触屏操作
-    touchOperation(translator);
-  } catch (err) {
-    console.error("[KISS-Translator]", err);
-    showErr(err.message);
-  }
-})();
+run();
--- a/src/hooks/Audio.js
+++ b/src/hooks/Audio.js
@@ -0,0 +1,61 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { apiBaiduTTS } from "../apis";
+import { kissLog } from "../libs/log";
+
+/**
+ * 声音播放hook
+ * @param {*} src
+ * @returns
+ */
+export function useAudio(src) {
+  const audioRef = useRef(null);
+  const [error, setError] = useState(null);
+  const [ready, setReady] = useState(false);
+  const [playing, setPlaying] = useState(false);
+
+  const onPlay = useCallback(() => {
+    audioRef.current?.play();
+  }, []);
+
+  useEffect(() => {
+    if (!src) {
+      return;
+    }
+    const audio = new Audio(src);
+    audio.addEventListener("error", (err) => setError(err));
+    audio.addEventListener("canplaythrough", () => setReady(true));
+    audio.addEventListener("play", () => setPlaying(true));
+    audio.addEventListener("ended", () => setPlaying(false));
+    audioRef.current = audio;
+  }, [src]);
+
+  return {
+    error,
+    ready,
+    playing,
+    onPlay,
+  };
+}
+
+/**
+ * 获取语音hook
+ * @param {*} text
+ * @param {*} lan
+ * @param {*} spd
+ * @returns
+ */
+export function useTextAudio(text, lan = "uk", spd = 3) {
+  const [src, setSrc] = useState("");
+
+  useEffect(() => {
+    (async () => {
+      try {
+        setSrc(await apiBaiduTTS(text, lan, spd));
+      } catch (err) {
+        kissLog(err, "baidu tts");
+      }
+    })();
+  }, [text, lan, spd]);
+
+  return useAudio(src);
+}
--- a/src/hooks/FavWords.js
+++ b/src/hooks/FavWords.js
@@ -3,6 +3,7 @@ import { useCallback, useEffect, useState } from "react";
 import { trySyncWords } from "../libs/sync";
 import { getWordsWithDefault, setWords } from "../libs/storage";
 import { useSyncMeta } from "./Sync";
+import { kissLog } from "../libs/log";

 export function useFavWords() {
  const [loading, setLoading] = useState(false);
@@ -56,7 +57,7 @@ export function useFavWords() {
        const favWords = await getWordsWithDefault();
        setFavWords(favWords);
      } catch (err) {
-        console.log("[query fav]", err);
+        kissLog(err, "query fav");
      } finally {
        setLoading(false);
      }
--- a/src/hooks/Storage.js
+++ b/src/hooks/Storage.js
@@ -1,11 +1,12 @@
 import { useCallback, useEffect, useState } from "react";
 import { storage } from "../libs/storage";
+import { kissLog } from "../libs/log";

 /**
- * 
- * @param {*} key 
+ *
+ * @param {*} key
 * @param {*} defaultVal 需为调用hook外的常量
- * @returns 
+ * @returns
 */
 export function useStorage(key, defaultVal) {
  const [loading, setLoading] = useState(false);
@@ -40,7 +41,7 @@ export function useStorage(key, defaultVal) {
        setData(val);
      }
    } catch (err) {
-      console.log("[storage reload]", err.message);
+      kissLog(err, "storage reload");
    } finally {
      setLoading(false);
    }
@@ -58,7 +59,7 @@ export function useStorage(key, defaultVal) {
          await storage.setObj(key, defaultVal);
        }
      } catch (err) {
-        console.log("[storage load]", err.message);
+        kissLog(err, "storage load");
      } finally {
        setLoading(false);
      }
--- a/src/hooks/SubRules.js
+++ b/src/hooks/SubRules.js
@@ -3,6 +3,7 @@ import { useSetting } from "./Setting";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { loadOrFetchSubRules } from "../libs/subRules";
 import { delSubRules } from "../libs/storage";
+import { kissLog } from "../libs/log";

 /**
 * 订阅规则
@@ -72,7 +73,7 @@ export function useSubRules() {
          const rules = await loadOrFetchSubRules(selectedUrl);
          setSelectedRules(rules);
        } catch (err) {
-          console.log("[loadOrFetchSubRules]", err);
+          kissLog(err, "loadOrFetchSubRules");
        } finally {
          setLoading(false);
        }
--- 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
@@ -3,6 +3,7 @@ import { useState } from "react";
 import { tryDetectLang } from "../libs";
 import { apiTranslate } from "../apis";
 import { DEFAULT_TRANS_APIS } from "../config";
+import { kissLog } from "../libs/log";

 /**
 * 翻译hook
@@ -16,15 +17,21 @@ export function useTranslate(q, rule, setting) {
  const [loading, setLoading] = useState(false);
  const [sameLang, setSamelang] = useState(false);

-  const { translator, fromLang, toLang } = rule;
+  const { translator, fromLang, toLang, detectRemote, skipLangs = [] } = rule;

  useEffect(() => {
    (async () => {
      try {
        setLoading(true);

-        const deLang = await tryDetectLang(q, setting.detectRemote);
-        if (deLang && toLang.includes(deLang)) {
+        if (!q.replace(/\[(\d+)\]/g, "").trim()) {
+          setText(q);
+          setSamelang(false);
+          return;
+        }
+
+        const deLang = await tryDetectLang(q, detectRemote === "true");
+        if (deLang && (toLang.includes(deLang) || skipLangs.includes(deLang))) {
          setSamelang(true);
        } else {
          const [trText, isSame] = await apiTranslate({
@@ -39,12 +46,12 @@ export function useTranslate(q, rule, setting) {
          setSamelang(isSame);
        }
      } catch (err) {
-        console.log("[translate]", err);
+        kissLog(err, "translate");
      } finally {
        setLoading(false);
      }
    })();
-  }, [q, translator, fromLang, toLang, setting]);
+  }, [q, translator, fromLang, toLang, detectRemote, skipLangs, setting]);

  return { text, sameLang, loading };
 }
--- a/src/hooks/WebfixRules.js
+++ b/src/hooks/WebfixRules.js
@@ -1,58 +0,0 @@
-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/auth.js
+++ b/src/libs/auth.js
@@ -1,12 +1,13 @@
 import { getMsauth, setMsauth } from "./storage";
 import { URL_MICROSOFT_AUTH } from "../config";
 import { fetchData } from "./fetch";
+import { kissLog } from "./log";

 const parseMSToken = (token) => {
  try {
    return JSON.parse(atob(token.split(".")[1])).exp;
  } catch (err) {
-    console.log("[parseMSToken]", err);
+    kissLog(err, "parseMSToken");
  }
  return 0;
 };
--- a/src/libs/blacklist.js
+++ b/src/libs/blacklist.js
@@ -0,0 +1,10 @@
+import { isMatch } from "./utils";
+
+/**
+ * 检查是否在黑名单中
+ * @param {*} href
+ * @param {*} param1
+ * @returns
+ */
+export const isInBlacklist = (href, { blacklist }) =>
+  blacklist.split(/\n|,/).some((url) => isMatch(href, url.trim()));
--- a/src/libs/browser.js
+++ b/src/libs/browser.js
@@ -8,7 +8,7 @@ function _browser() {
  try {
    return require("webextension-polyfill");
  } catch (err) {
-    // console.log("[browser]", err.message);
+    // kissLog(err, "browser");
  }
 }

--- a/src/libs/fetch.js
+++ b/src/libs/fetch.js
@@ -11,6 +11,10 @@ import {
 } from "../config";
 import { isBg } from "./browser";
 import { newCacheReq, newTransReq } from "./req";
+import { kissLog } from "./log";
+import { blobToBase64 } from "./utils";
+
+const TIMEOUT = 5000;

 /**
 * 油猴脚本的请求封装
@@ -26,6 +30,7 @@ export const fetchGM = async (input, { method = "GET", headers, body } = {}) =>
      headers,
      data: body,
      // withCredentials: true,
+      timeout: TIMEOUT,
      onload: ({ response, responseHeaders, status, statusText, ...opts }) => {
        const headers = {};
        responseHeaders.split("\n").forEach((line) => {
@@ -86,6 +91,10 @@ export const fetchApi = async ({ input, init, transOpts, apiSetting }) => {
    }
  }

+  if (AbortSignal?.timeout) {
+    Object.assign(init, { signal: AbortSignal.timeout(TIMEOUT) });
+  }
+
  return fetch(input, init);
 };

@@ -118,7 +127,7 @@ export const fetchData = async (
      const cache = await caches.open(CACHE_NAME);
      res = await cache.match(cacheReq);
    } catch (err) {
-      console.log("[cache match]", err.message);
+      kissLog(err, "cache match");
    }
  }

@@ -131,13 +140,14 @@ export const fetchData = async (
    }

    if (!res?.ok) {
-      const cause = {
+      const msg = {
+        url: input,
        status: res.status,
      };
      if (res.headers.get("Content-Type")?.includes("json")) {
-        cause.body = await res.json();
+        msg.response = await res.json();
      }
-      throw new Error(`response: [${res.status}] ${res.statusText}`, { cause });
+      throw new Error(JSON.stringify(msg));
    }

    // 插入缓存
@@ -146,7 +156,7 @@ export const fetchData = async (
        const cache = await caches.open(CACHE_NAME);
        await cache.put(cacheReq, res.clone());
      } catch (err) {
-        console.log("[cache put]", err.message);
+        kissLog(err, "cache put");
      }
    }
  }
@@ -154,6 +164,9 @@ export const fetchData = async (
  const contentType = res.headers.get("Content-Type");
  if (contentType?.includes("json")) {
    return await res.json();
+  } else if (contentType?.includes("audio")) {
+    const blob = await res.blob();
+    return await blobToBase64(blob);
  }
  return await res.text();
 };
@@ -171,11 +184,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, { cause: res.cause });
-    }
-    return res.data;
+    return await sendBgMsg(MSG_FETCH, { input, opts });
  }

  // 油猴/网页/BackgroundPage
@@ -189,10 +198,7 @@ export const fetchPolyfill = async (input, opts) => {
 */
 export const updateFetchPool = async (interval, limit) => {
  if (isExt) {
-    const res = await sendBgMsg(MSG_FETCH_LIMIT, { interval, limit });
-    if (res.error) {
-      throw new Error(res.error);
-    }
+    await sendBgMsg(MSG_FETCH_LIMIT, { interval, limit });
  } else {
    fetchPool.update(interval, limit);
  }
@@ -203,10 +209,7 @@ export const updateFetchPool = async (interval, limit) => {
 */
 export const clearFetchPool = async () => {
  if (isExt) {
-    const res = await sendBgMsg(MSG_FETCH_CLEAR);
-    if (res.error) {
-      throw new Error(res.error);
-    }
+    await sendBgMsg(MSG_FETCH_CLEAR);
  } else {
    fetchPool.clear();
  }
--- a/src/libs/index.js
+++ b/src/libs/index.js
@@ -1,6 +1,7 @@
 import { CACHE_NAME } from "../config";
 import { browser } from "./browser";
 import { apiBaiduLangdetect } from "../apis";
+import { kissLog } from "./log";

 /**
 * 清除缓存数据
@@ -9,7 +10,7 @@ export const tryClearCaches = async () => {
  try {
    caches.delete(CACHE_NAME);
  } catch (err) {
-    console.log("[clean caches]", err.message);
+    kissLog(err, "clean caches");
  }
 };

@@ -25,7 +26,7 @@ export const tryDetectLang = async (q, useRemote = false) => {
    try {
      lang = await apiBaiduLangdetect(q);
    } catch (err) {
-      console.log("[detect lang remote]", err.message);
+      kissLog(err, "detect lang remote");
    }
  }

@@ -34,7 +35,7 @@ export const tryDetectLang = async (q, useRemote = false) => {
      const res = await browser?.i18n?.detectLanguage(q);
      lang = res?.languages?.[0]?.language;
    } catch (err) {
-      console.log("[detect lang local]", err.message);
+      kissLog(err, "detect lang local");
    }
  }

--- a/src/libs/injector.js
+++ b/src/libs/injector.js
@@ -0,0 +1,35 @@
+// Function to inject inline JavaScript code
+export const injectInlineJs = (code) => {
+  const el = document.createElement("script");
+  el.setAttribute("data-source", "KISS-Calendar injectInlineJs");
+  el.setAttribute("type", "text/javascript");
+  el.textContent = code;
+  document.body?.appendChild(el);
+};
+
+// Function to inject external JavaScript file
+export const injectExternalJs = (src) => {
+  const el = document.createElement("script");
+  el.setAttribute("data-source", "KISS-Calendar injectExternalJs");
+  el.setAttribute("type", "text/javascript");
+  el.setAttribute("src", src);
+  document.body?.appendChild(el);
+};
+
+// Function to inject internal CSS code
+export const injectInternalCss = (styles) => {
+  const el = document.createElement("style");
+  el.setAttribute("data-source", "KISS-Calendar injectInternalCss");
+  el.textContent = styles;
+  document.head?.appendChild(el);
+};
+
+// Function to inject external CSS file
+export const injectExternalCss = (href) => {
+  const el = document.createElement("link");
+  el.setAttribute("data-source", "KISS-Calendar injectExternalCss");
+  el.setAttribute("rel", "stylesheet");
+  el.setAttribute("type", "text/css");
+  el.setAttribute("href", href);
+  document.head?.appendChild(el);
+};
--- a/src/libs/inputTranslate.js
+++ b/src/libs/inputTranslate.js
@@ -0,0 +1,199 @@
+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 { loadingSvg } from "./svg";
+import { kissLog } from "./log";
+
+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,
+}) {
+  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 [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) {
+        kissLog(err, "translate input");
+      } finally {
+        removeLoading(node, loadingId);
+      }
+    },
+    triggerCount,
+    triggerTime
+  );
+}
--- a/src/libs/log.js
+++ b/src/libs/log.js
@@ -0,0 +1,12 @@
+/**
+ * 日志函数
+ * @param {*} msg
+ * @param {*} type
+ */
+export const kissLog = (msg, type) => {
+  let prefix = `[KISS-Translator]`;
+  if (type) {
+    prefix += `[${type}]`;
+  }
+  console.log(`${prefix} ${msg}`);
+};
--- a/src/libs/msg.js
+++ b/src/libs/msg.js
@@ -1,5 +1,22 @@
 import { browser } from "./browser";

+/**
+ * 获取当前tab信息
+ * @returns
+ */
+export const getCurTab = async () => {
+  const [tab] = await browser.tabs.query({
+    active: true,
+    lastFocusedWindow: true,
+  });
+  return tab;
+};
+
+export const getCurTabId = async () => {
+  const tab = await getCurTab();
+  return tab.id;
+};
+
 /**
 * 发送消息给background
 * @param {*} action
@@ -16,15 +33,6 @@ export const sendBgMsg = (action, args) =>
 * @returns
 */
 export const sendTabMsg = async (action, args) => {
-  const tabs = await browser.tabs.query({ active: true, currentWindow: true });
-  return browser.tabs.sendMessage(tabs[0].id, { action, args });
-};
-
-/**
- * 获取当前tab信息
- * @returns
- */
-export const getTabInfo = async () => {
-  const tabs = await browser.tabs.query({ active: true, currentWindow: true });
-  return tabs[0];
+  const tabId = await getCurTabId();
+  return browser.tabs.sendMessage(tabId, { action, args });
 };
--- a/src/libs/pool.js
+++ b/src/libs/pool.js
@@ -1,3 +1,5 @@
+import { kissLog } from "./log";
+
 /**
 * 任务池
 * @param {*} fn
@@ -35,7 +37,7 @@ export const taskPool = (
          const res = await fn({ ...args, ...preArgs });
          resolve(res);
        } catch (err) {
-          console.log("[task]", retry, err);
+          kissLog(err, "task");
          if (retry < maxRetry) {
            const retryTimer = setTimeout(() => {
              clearTimeout(retryTimer);
--- a/src/libs/req.js
+++ b/src/libs/req.js
@@ -8,17 +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(/\n|,/)
+    .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
@@ -178,6 +200,37 @@ 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,
@@ -224,6 +277,17 @@ const genCustom = ({ text, from, to, url, key }) => {
 */
 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);
@@ -241,6 +305,8 @@ export const newTransReq = ({ translator, text, from, to }, apiSetting) => {
      return genTencent(args);
    case OPT_TRANS_OPENAI:
      return genOpenAI(args);
+    case OPT_TRANS_GEMINI:
+      return genGemini(args);
    case OPT_TRANS_CLOUDFLAREAI:
      return genCloudflareAI(args);
    case OPT_TRANS_CUSTOMIZE:
--- a/src/libs/rules.js
+++ b/src/libs/rules.js
@@ -6,13 +6,14 @@ import {
  OPT_STYLE_ALL,
  OPT_LANGS_FROM,
  OPT_LANGS_TO,
+  OPT_TIMING_ALL,
  GLOBLA_RULE,
-  DEFAULT_SUBRULES_LIST,
-  DEFAULT_OW_RULE,
 } from "../config";
 import { loadOrFetchSubRules } from "./subRules";
 import { getRulesWithDefault, setRules } from "./storage";
 import { trySyncRules } from "./sync";
+import { FIXER_ALL } from "./webfix";
+import { kissLog } from "./log";

 /**
 * 根据href匹配规则
@@ -21,15 +22,10 @@ import { trySyncRules } from "./sync";
 * @returns
 */
 export const matchRule = async (
-  rules,
  href,
-  {
-    injectRules = true,
-    subrulesList = DEFAULT_SUBRULES_LIST,
-    owSubrule = DEFAULT_OW_RULE,
-  }
+  { injectRules, subrulesList, owSubrule }
 ) => {
-  rules = [...rules];
+  const rules = await getRulesWithDefault();
  if (injectRules) {
    try {
      const selectedSub = subrulesList.find((item) => item.selected);
@@ -54,19 +50,56 @@ export const matchRule = async (
        rules.splice(-1, 0, ...subRules);
      }
    } catch (err) {
-      console.log("[load injectRules]", err);
+      kissLog(err, "load injectRules");
    }
  }

  const rule = rules.find((r) =>
    r.pattern.split(",").some((p) => isMatch(href, p.trim()))
  );
-  const globalRule = rules.find((r) => r.pattern === GLOBAL_KEY) || GLOBLA_RULE;
+  const globalRule = {
+    ...GLOBLA_RULE,
+    ...(rules.find((r) => r.pattern === GLOBAL_KEY) || {}),
+  };
  if (!rule) {
    return globalRule;
  }

-  rule.selector = rule.selector?.trim() || globalRule.selector;
+  [
+    "selector",
+    "keepSelector",
+    "terms",
+    "selectStyle",
+    "parentStyle",
+    "injectJs",
+    "injectCss",
+    "fixerSelector",
+  ].forEach((key) => {
+    if (!rule[key]?.trim()) {
+      rule[key] = globalRule[key];
+    }
+  });
+
+  [
+    "translator",
+    "fromLang",
+    "toLang",
+    "transOpen",
+    "transOnly",
+    "transTiming",
+    "transTag",
+    "transTitle",
+    "detectRemote",
+    "fixerFunc",
+  ].forEach((key) => {
+    if (rule[key] === undefined || rule[key] === GLOBAL_KEY) {
+      rule[key] = globalRule[key];
+    }
+  });
+
+  if (!rule.skipLangs || rule.skipLangs.length === 0) {
+    rule.skipLangs = globalRule.skipLangs;
+  }
  if (rule.textStyle === GLOBAL_KEY) {
    rule.textStyle = globalRule.textStyle;
    rule.bgColor = globalRule.bgColor;
@@ -75,11 +108,6 @@ export const matchRule = async (
    rule.bgColor = rule.bgColor?.trim() || globalRule.bgColor;
    rule.textDiyStyle = rule.textDiyStyle?.trim() || globalRule.textDiyStyle;
  }
-  ["translator", "fromLang", "toLang", "transOpen"].forEach((key) => {
-    if (rule[key] === GLOBAL_KEY) {
-      rule[key] = globalRule[key];
-    }
-  });

  return rule;
 };
@@ -113,6 +141,12 @@ export const checkRules = (rules) => {
      ({
        pattern,
        selector,
+        keepSelector,
+        terms,
+        selectStyle,
+        parentStyle,
+        injectJs,
+        injectCss,
        translator,
        fromLang,
        toLang,
@@ -120,9 +154,23 @@ export const checkRules = (rules) => {
        transOpen,
        bgColor,
        textDiyStyle,
+        transOnly,
+        transTiming,
+        transTag,
+        transTitle,
+        detectRemote,
+        skipLangs,
+        fixerSelector,
+        fixerFunc,
      }) => ({
        pattern: pattern.trim(),
        selector: type(selector) === "string" ? selector : "",
+        keepSelector: type(keepSelector) === "string" ? keepSelector : "",
+        terms: type(terms) === "string" ? terms : "",
+        selectStyle: type(selectStyle) === "string" ? selectStyle : "",
+        parentStyle: type(parentStyle) === "string" ? parentStyle : "",
+        injectJs: type(injectJs) === "string" ? injectJs : "",
+        injectCss: type(injectCss) === "string" ? injectCss : "",
        bgColor: type(bgColor) === "string" ? bgColor : "",
        textDiyStyle: type(textDiyStyle) === "string" ? textDiyStyle : "",
        translator: matchValue([GLOBAL_KEY, ...OPT_TRANS_ALL], translator),
@@ -130,6 +178,14 @@ export const checkRules = (rules) => {
        toLang: matchValue([GLOBAL_KEY, ...toLangs], toLang),
        textStyle: matchValue([GLOBAL_KEY, ...OPT_STYLE_ALL], textStyle),
        transOpen: matchValue([GLOBAL_KEY, "true", "false"], transOpen),
+        transOnly: matchValue([GLOBAL_KEY, "true", "false"], transOnly),
+        transTiming: matchValue([GLOBAL_KEY, ...OPT_TIMING_ALL], transTiming),
+        transTag: matchValue([GLOBAL_KEY, "span", "font"], transTag),
+        transTitle: matchValue([GLOBAL_KEY, "true", "false"], transTitle),
+        detectRemote: matchValue([GLOBAL_KEY, "true", "false"], detectRemote),
+        skipLangs: type(skipLangs) === "array" ? skipLangs : [],
+        fixerSelector: type(fixerSelector) === "string" ? fixerSelector : "",
+        fixerFunc: matchValue([GLOBAL_KEY, ...FIXER_ALL], fixerFunc),
      })
    );

--- 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,14 +1,12 @@
 import {
  STOKEY_SETTING,
  STOKEY_RULES,
-  STOKEY_WFRULES,
  STOKEY_WORDS,
  STOKEY_FAB,
  STOKEY_SYNC,
  STOKEY_MSAUTH,
  STOKEY_BDAUTH,
  STOKEY_RULESCACHE_PREFIX,
-  STOKEY_WEBFIXCACHE_PREFIX,
  DEFAULT_SETTING,
  DEFAULT_RULES,
  DEFAULT_SYNC,
@@ -16,6 +14,7 @@ import {
 } from "../config";
 import { isExt, isGm } from "./client";
 import { browser } from "./browser";
+import { kissLog } from "./log";

 async function set(key, val) {
  if (isExt) {
@@ -86,8 +85,10 @@ export const storage = {
 * 设置信息
 */
 export const getSetting = () => getObj(STOKEY_SETTING);
-export const getSettingWithDefault = async () =>
-  (await getSetting()) || DEFAULT_SETTING;
+export const getSettingWithDefault = async () => ({
+  ...DEFAULT_SETTING,
+  ...((await getSetting()) || {}),
+});
 export const setSetting = (val) => setObj(STOKEY_SETTING, val);
 export const updateSetting = (obj) => putObj(STOKEY_SETTING, obj);

@@ -99,14 +100,6 @@ 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);
-
 /**
 * 词汇列表
 */
@@ -123,14 +116,6 @@ export const delSubRules = (url) => del(STOKEY_RULESCACHE_PREFIX + url);
 export const setSubRules = (url, val) =>
  setObj(STOKEY_RULESCACHE_PREFIX + url, val);

-/**
- * 修复站点
- */
-export const getWebfix = (url) => getObj(STOKEY_WEBFIXCACHE_PREFIX + url);
-export const getWebfixWithDefault = async () => (await getWebfix()) || [];
-export const setWebfix = (url, val) =>
-  setObj(STOKEY_WEBFIXCACHE_PREFIX + url, val);
-
 /**
 * fab位置
 */
@@ -171,6 +156,6 @@ export const tryInitDefaultData = async () => {
      BUILTIN_RULES
    );
  } catch (err) {
-    console.log("[init default]", err);
+    kissLog(err, "init default");
  }
 };
--- a/src/libs/subRules.js
+++ b/src/libs/subRules.js
@@ -8,7 +8,7 @@ import {
 import { apiFetch } from "../apis";
 import { checkRules } from "./rules";
 import { isAllchar } from "./utils";
-import { syncWebfix } from "./webfix";
+import { kissLog } from "./log";

 /**
 * 更新缓存同步时间
@@ -42,12 +42,12 @@ export const syncSubRules = async (url) => {
 * @returns
 */
 export const syncAllSubRules = async (subrulesList) => {
-  for (let subrules of subrulesList) {
+  for (const subrules of subrulesList) {
    try {
      await syncSubRules(subrules.url);
      await updateSyncDataCache(subrules.url);
    } catch (err) {
-      console.log(`[sync subrule error]: ${subrules.url}`, err);
+      kissLog(err, `sync subrule error: ${subrules.url}`);
    }
  }
 };
@@ -66,12 +66,9 @@ export const trySyncAllSubRules = async ({ subrulesList }) => {
      // 同步订阅规则
      await syncAllSubRules(subrulesList);
      await updateSync({ subRulesSyncAt: now });
-
-      // 同步修复规则
-      await syncWebfix(process.env.REACT_APP_WEBFIXURL);
    }
  } catch (err) {
-    console.log("[try sync all subrules]", err);
+    kissLog(err, "try sync all subrules");
  }
 };

--- a/src/libs/sync.js
+++ b/src/libs/sync.js
@@ -2,7 +2,6 @@ import {
  APP_LCNAME,
  KV_SETTING_KEY,
  KV_RULES_KEY,
-  KV_WFRULES_KEY,
  KV_WORDS_KEY,
  KV_RULES_SHARE_KEY,
  KV_SALT_SHARE,
@@ -14,16 +13,15 @@ import {
  getSettingWithDefault,
  getRulesWithDefault,
  getWordsWithDefault,
-  getWebfixRulesWithDefault,
  setSetting,
  setRules,
-  setWebfixRules,
  setWords,
 } from "./storage";
 import { apiSyncData } from "../apis";
 import { sha256, removeEndchar } from "./utils";
 import { createClient, getPatcher } from "webdav";
 import { fetchApi } from "./fetch";
+import { kissLog } from "./log";

 getPatcher().patch("request", (opts) => {
  return fetchApi({
@@ -118,7 +116,7 @@ export const trySyncSetting = async () => {
  try {
    await syncSetting();
  } catch (err) {
-    console.log("[sync setting]", err);
+    kissLog(err, "sync setting");
  }
 };

@@ -137,26 +135,7 @@ export const trySyncRules = async () => {
  try {
    await syncRules();
  } catch (err) {
-    console.log("[sync user rules]", err);
-  }
-};
-
-/**
- * 同步修复规则
- * @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);
+    kissLog(err, "sync user rules");
  }
 };

@@ -175,7 +154,7 @@ export const trySyncWords = async () => {
  try {
    await syncWords();
  } catch (err) {
-    console.log("[sync fav words]", err);
+    kissLog(err, "sync fav words");
  }
 };

@@ -207,13 +186,11 @@ 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/translator.js
+++ b/src/libs/translator.js
@@ -4,106 +4,33 @@ import {
  TRANS_MIN_LENGTH,
  TRANS_MAX_LENGTH,
  MSG_TRANS_CURRULE,
+  MSG_INJECT_JS,
+  MSG_INJECT_CSS,
  OPT_STYLE_DASHLINE,
  OPT_STYLE_FUZZY,
  SHADOW_KEY,
-  OPT_MOUSEKEY_DISABLE,
-  OPT_MOUSEKEY_MOUSEOVER,
-  DEFAULT_INPUT_RULE,
+  OPT_TIMING_PAGESCROLL,
+  OPT_TIMING_PAGEOPEN,
+  OPT_TIMING_MOUSEOVER,
  DEFAULT_TRANS_APIS,
-  DEFAULT_INPUT_SHORTCUT,
-  OPT_LANGS_LIST,
+  DEFAULT_FETCH_LIMIT,
+  DEFAULT_FETCH_INTERVAL,
 } 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 { debounce, genEventName } from "./utils";
+import { runFixer } from "./webfix";
 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 { sendBgMsg } from "./msg";
+import { isExt } from "./client";
+import { injectInlineJs, injectInternalCss } from "./injector";
+import { kissLog } from "./log";

 /**
 * 翻译类
 */
 export class Translator {
  _rule = {};
-  _inputRule = {};
  _setting = {};
  _rootNodes = new Set();
  _tranNodes = new Map();
@@ -125,14 +52,17 @@ export class Translator {
  ];
  _eventName = genEventName();
  _mouseoverNode = null;
+  _keepSelector = [null, null];
+  _terms = [];
+  _docTitle = "";

  // 显示
  _interseObserver = new IntersectionObserver(
-    (intersections) => {
-      intersections.forEach((intersection) => {
-        if (intersection.isIntersecting) {
-          this._render(intersection.target);
-          this._interseObserver.unobserve(intersection.target);
+    (entries, observer) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          observer.unobserve(entry.target);
+          this._render(entry.target);
        }
      });
    },
@@ -176,22 +106,37 @@ export class Translator {
    };
  };

-  constructor(rule, setting) {
-    const { fetchInterval, fetchLimit } = setting;
+  _updatePool(translator) {
+    if (!translator) {
+      return;
+    }
+
+    const {
+      fetchInterval = DEFAULT_FETCH_INTERVAL,
+      fetchLimit = DEFAULT_FETCH_LIMIT,
+    } = this._setting.transApis[translator] || {};
    updateFetchPool(fetchInterval, fetchLimit);
+  }
+
+  constructor(rule, setting) {
    this._overrideAttachShadow();

    this._setting = setting;
    this._rule = rule;

+    this._keepSelector = (rule.keepSelector || "")
+      .split(SHADOW_KEY)
+      .map((item) => item.trim());
+    this._terms = (rule.terms || "")
+      .split(/\n|;/)
+      .map((item) => item.split(",").map((item) => item.trim()))
+      .filter(([term]) => Boolean(term));
+
+    this._updatePool(rule.translator);
+
    if (rule.transOpen === "true") {
      this._register();
    }
-
-    this._inputRule = setting.inputRule || DEFAULT_INPUT_RULE;
-    if (this._inputRule.transOpen) {
-      this._registerInput();
-    }
  }

  get setting() {
@@ -225,6 +170,7 @@ export class Translator {

  updateRule = (obj) => {
    this.rule = { ...this.rule, ...obj };
+    this._updatePool(obj.translator);
  };

  toggle = () => {
@@ -245,11 +191,25 @@ export class Translator {
    this.rule = { ...this.rule, textStyle };
  };

+  translateText = async (text) => {
+    const { translator, fromLang, toLang } = this._rule;
+    const apiSetting =
+      this._setting.transApis?.[translator] || DEFAULT_TRANS_APIS[translator];
+    const [trText] = await apiTranslate({
+      text,
+      translator,
+      fromLang,
+      toLang,
+      apiSetting,
+    });
+    return trText;
+  };
+
  _querySelectorAll = (selector, node) => {
    try {
      return Array.from(node.querySelectorAll(selector));
    } catch (err) {
-      console.log(`[querySelectorAll err]: ${selector}`);
+      kissLog(selector, "querySelectorAll err");
    }
    return [];
  };
@@ -321,10 +281,26 @@ export class Translator {
  };

  _register = () => {
-    if (this._rule.fromLang === this._rule.toLang) {
+    const { fromLang, toLang, injectJs, injectCss, fixerSelector, fixerFunc } =
+      this._rule;
+    if (fromLang === toLang) {
      return;
    }

+    // webfix
+    if (fixerSelector && fixerFunc !== "-") {
+      runFixer(fixerSelector, fixerFunc);
+    }
+
+    // 注入用户JS/CSS
+    if (isExt) {
+      injectJs && sendBgMsg(MSG_INJECT_JS, injectJs);
+      injectCss && sendBgMsg(MSG_INJECT_CSS, injectCss);
+    } else {
+      injectJs && injectInlineJs(injectJs);
+      injectCss && injectInternalCss(injectCss);
+    }
+
    // 搜索节点
    this._queryNodes();

@@ -338,13 +314,18 @@ export class Translator {
    });

    if (
-      !this._setting.mouseKey ||
-      this._setting.mouseKey === OPT_MOUSEKEY_DISABLE
+      !this._rule.transTiming ||
+      this._rule.transTiming === OPT_TIMING_PAGESCROLL
    ) {
      // 监听节点显示
      this._tranNodes.forEach((_, node) => {
        this._interseObserver.observe(node);
      });
+    } else if (this._rule.transTiming === OPT_TIMING_PAGEOPEN) {
+      // 全文直接翻译
+      this._tranNodes.forEach((_, node) => {
+        this._render(node);
+      });
    } else {
      // 监听鼠标悬停
      window.addEventListener("keydown", this._handleKeydown);
@@ -353,125 +334,15 @@ export class Translator {
        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;
+    // 翻译页面标题
+    if (this._rule.transTitle === "true" && !this._docTitle) {
+      const title = document.title;
+      this._docTitle = title;
+      this.translateText(title).then((trText) => {
+        document.title = `${trText} | ${title}`;
+      });
    }
-
-    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) => {
@@ -480,8 +351,8 @@ export class Translator {
      return;
    }

-    const key = this._setting.mouseKey.slice(3);
-    if (this._setting.mouseKey === OPT_MOUSEKEY_MOUSEOVER || e[key]) {
+    const key = this._rule.transTiming.slice(3);
+    if (this._rule.transTiming === OPT_TIMING_MOUSEOVER || e[key]) {
      e.target.removeEventListener("mouseenter", this._handleMouseover);
      e.target.removeEventListener("mouseleave", this._handleMouseout);
      this._render(e.target);
@@ -501,7 +372,7 @@ export class Translator {

  _handleKeydown = (e) => {
    // console.log("keydown", e);
-    const key = this._setting.mouseKey.slice(3);
+    const key = this._rule.transTiming.slice(3);
    if (e[key] && this._mouseoverNode) {
      this._mouseoverNode.removeEventListener(
        "mouseenter",
@@ -519,33 +390,45 @@ export class Translator {
  };

  _unRegister = () => {
+    // 恢复页面标题
+    if (this._docTitle) {
+      document.title = this._docTitle;
+      this._docTitle = "";
+    }
+
    // 解除节点变化监听
    this._mutaObserver.disconnect();

    // 解除节点显示监听
    // this._interseObserver.disconnect();

-    if (
-      !this._setting.mouseKey ||
-      this._setting.mouseKey === OPT_MOUSEKEY_DISABLE
-    ) {
-      // 解除节点显示监听
-      this._tranNodes.forEach((_, node) => {
+    // 移除键盘监听
+    window.removeEventListener("keydown", this._handleKeydown);
+
+    this._tranNodes.forEach((innerHTML, node) => {
+      if (
+        !this._rule.transTiming ||
+        this._rule.transTiming === OPT_TIMING_PAGESCROLL
+      ) {
+        // 解除节点显示监听
        this._interseObserver.unobserve(node);
-        // 移除已插入元素
-        node.querySelector(APP_LCNAME)?.remove();
-      });
-    } else {
-      // 移除鼠标悬停监听
-      window.removeEventListener("keydown", this._handleKeydown);
-      this._tranNodes.forEach((_, node) => {
+      } else if (this._rule.transTiming !== OPT_TIMING_PAGEOPEN) {
+        // 移除鼠标悬停监听
        // node.style.pointerEvents = "none";
        node.removeEventListener("mouseenter", this._handleMouseover);
        node.removeEventListener("mouseleave", this._handleMouseout);
-        // 移除已插入元素
+      }
+
+      // 移除/恢复元素
+      if (innerHTML && this._rule.transOnly === "true") {
+        node.innerHTML = innerHTML;
+      } else {
        node.querySelector(APP_LCNAME)?.remove();
-      });
-    }
+      }
+    });
+
+    // 移除用户JS/CSS
+    this._removeInjector();

    // 清空节点集合
    this._rootNodes.clear();
@@ -555,17 +438,36 @@ export class Translator {
    clearFetchPool();
  };

+  _removeInjector = () => {
+    document
+      .querySelectorAll(`[data-source^="KISS-Calendar"]`)
+      ?.forEach((el) => el.remove());
+  };
+
  _reTranslate = debounce(() => {
    if (this._rule.transOpen === "true") {
+      window.removeEventListener("keydown", this._handleKeydown);
+      this._mutaObserver.disconnect();
+      this._interseObserver.disconnect();
+      this._removeInjector();
      this._register();
    }
-  }, 500);
+  }, this._setting.transInterval);
+
+  _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);

    // 已翻译
    if (traEl) {
+      if (this._rule.transOnly === "true") {
+        return;
+      }
+
      const preText = this._tranNodes.get(el);
      const curText = el.innerText.trim();
      // const traText = traEl.innerText.trim();
@@ -580,31 +482,75 @@ export class Translator {
      traEl.remove();
    }

-    const q = el.innerText.trim();
-    this._tranNodes.set(el, q);
+    let q = el.innerText.trim();
+    if (this._rule.transOnly === "true") {
+      this._tranNodes.set(el, el.innerHTML);
+    } else {
+      this._tranNodes.set(el, q);
+    }
+    const keeps = [];
+
+    // 保留元素
+    const [matchSelector, subSelector] = this._keepSelector;
+    if (matchSelector || subSelector) {
+      let text = "";
+      el.childNodes.forEach((child) => {
+        if (
+          child.nodeType === 1 &&
+          ((matchSelector && child.matches(matchSelector)) ||
+            (subSelector && child.querySelector(subSelector)))
+        ) {
+          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 (keeps.length > 0) {
+        // textContent会保留些无用的换行符，严重影响翻译质量
+        if (q.includes("\n")) {
+          q = text;
+        } else {
+          q = text.replaceAll("\n", " ");
+        }
+      }
+    }

    // 太长或太短
-    if (
-      !q ||
-      q.length < (this._setting.minLength ?? TRANS_MIN_LENGTH) ||
-      q.length > (this._setting.maxLength ?? TRANS_MAX_LENGTH)
-    ) {
+    if (this._invalidLength(q.replace(/\[(\d+)\]/g, "").trim())) {
      return;
    }

-    // console.log("---> ", q);
+    // 专业术语
+    if (this._terms.length > 0) {
+      for (const term of this._terms) {
+        const re = new RegExp(term[0], "g");
+        q = q.replace(re, (t) => {
+          const text = `[${keeps.length}]`;
+          keeps.push(`<i class="kiss-trem">${term[1] || t}</i>`);
+          return text;
+        });
+      }
+    }

    traEl = document.createElement(APP_LCNAME);
    traEl.style.visibility = "visible";
+    // if (this._rule.transOnly === "true") {
+    //   el.innerHTML = "";
+    // }
+    const { selectStyle, parentStyle } = this._rule;
    el.appendChild(traEl);
-    el.style.cssText +=
-      "-webkit-line-clamp: unset; max-height: none; height: auto;";
+    el.style.cssText += selectStyle;
    if (el.parentElement) {
-      el.parentElement.style.cssText +=
-        "-webkit-line-clamp: unset; max-height: none; height: auto;";
+      el.parentElement.style.cssText += parentStyle;
    }

    const root = createRoot(traEl);
-    root.render(<Content q={q} translator={this} />);
+    root.render(<Content q={q} keeps={keeps} translator={this} $el={el} />);
  };
 }
--- a/src/libs/utils.js
+++ b/src/libs/utils.js
@@ -233,3 +233,16 @@ export const isValidWord = (str) => {
  const regex = /^[a-zA-Z-]+$/;
  return regex.test(str);
 };
+
+/**
+ * blob转为base64
+ * @param {*} blob
+ * @returns
+ */
+export const blobToBase64 = (blob) => {
+  return new Promise((resolve) => {
+    const reader = new FileReader();
+    reader.onloadend = () => resolve(reader.result);
+    reader.readAsDataURL(blob);
+  });
+};
--- a/src/libs/webfix.js
+++ b/src/libs/webfix.js
@@ -1,61 +1,24 @@
-import { isMatch } from "./utils";
-import { getWebfix, setWebfix, getWebfixRulesWithDefault } from "./storage";
-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_NONE = "-";
+export const FIXER_BR = "br";
+export const FIXER_BN = "bn";
+export const FIXER_BR_DIV = "brToDiv";
+export const FIXER_BN_DIV = "bnToDiv";
+
 export const FIXER_ALL = [
+  FIXER_NONE,
  FIXER_BR,
  FIXER_BN,
  FIXER_BR_DIV,
  FIXER_BN_DIV,
-  FIXER_FONTSIZE,
-];
-
-/**
- * 需要修复的站点列表
- * - pattern 匹配网址
- * - selector 需要修复的选择器
- * - rootSelector 需要监听的选择器，可留空
- * - fixer 修复函数，可针对不同网址，选用不同修复函数
- */
-const DEFAULT_SITES = [
-  {
-    pattern: "www.phoronix.com",
-    selector: ".content",
-    rootSelector: "",
-    fixer: FIXER_BR,
-  },
-  {
-    pattern: "t.me/s/",
-    selector: ".tgme_widget_message_text",
-    rootSelector: ".tgme_channel_history",
-    fixer: FIXER_BR,
-  },
-  {
-    pattern: "baidu.com",
-    selector: "html",
-    rootSelector: "",
-    fixer: FIXER_FONTSIZE,
-  },
-  {
-    pattern: "chat.openai.com",
-    selector: "div[data-testid^=conversation-turn] .items-start > div",
-    rootSelector: "",
-    fixer: FIXER_BN,
-  },
 ];

 /**
 * 修复过的标记
 */
-const fixedSign = "kissfixed";
+const fixedSign = "kiss-fixed";

 /**
 * 采用 `br` 换行网站的修复函数
@@ -69,8 +32,8 @@ function brFixer(node, tag = "p") {
  }
  node.setAttribute(fixedSign, "true");

-  var gapTags = ["BR", "WBR"];
-  var newlineTags = [
+  const gapTags = ["BR", "WBR"];
+  const newlineTags = [
    "DIV",
    "UL",
    "OL",
@@ -85,9 +48,10 @@ function brFixer(node, tag = "p") {
    "HR",
    "PRE",
    "TABLE",
+    "BLOCKQUOTE",
  ];

-  var html = "";
+  let html = "";
  node.childNodes.forEach(function (child, index) {
    if (index === 0) {
      html += `<${tag} class="kiss-p">`;
@@ -99,8 +63,8 @@ function brFixer(node, tag = "p") {
      html += `</${tag}>${child.outerHTML}<${tag} class="kiss-p">`;
    } else if (child.outerHTML) {
      html += child.outerHTML;
-    } else if (child.nodeValue) {
-      html += child.nodeValue;
+    } else if (child.textContent) {
+      html += child.textContent;
    }

    if (index === node.childNodes.length - 1) {
@@ -134,25 +98,6 @@ function bnDivFixer(node) {
  return bnFixer(node, "div");
 }

-/**
- * 修复字体大小问题，如 baidu.com
- * @param {*} node
- */
-function fontSizeFixer(node) {
-  node.style.cssText += "font-size:1em;";
-}
-
-/**
- * 修复程序映射
- */
-const fixerMap = {
-  [FIXER_BR]: brFixer,
-  [FIXER_BN]: bnFixer,
-  [FIXER_BR_DIV]: brDivFixer,
-  [FIXER_BN_DIV]: bnDivFixer,
-  [FIXER_FONTSIZE]: fontSizeFixer,
-};
-
 /**
 * 查找、监听节点，并执行修复函数
 * @param {*} selector
@@ -160,7 +105,7 @@ const fixerMap = {
 * @param {*} rootSelector
 */
 function run(selector, fixer, rootSelector) {
-  var mutaObserver = new MutationObserver(function (mutations) {
+  const mutaObserver = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
      mutation.addedNodes.forEach(function (addNode) {
        if (addNode && addNode.querySelectorAll) {
@@ -172,7 +117,7 @@ function run(selector, fixer, rootSelector) {
    });
  });

-  var rootNodes = [document];
+  let rootNodes = [document];
  if (rootSelector) {
    rootNodes = document.querySelectorAll(rootSelector);
  }
@@ -189,57 +134,25 @@ function run(selector, fixer, rootSelector) {
 }

 /**
- * 同步远程数据
- * @param {*} url
- * @returns
+ * 修复程序映射
 */
-export const syncWebfix = async (url) => {
-  const sites = await apiFetch(url);
-  await setWebfix(url, sites);
-  return sites;
+const fixerMap = {
+  [FIXER_BR]: brFixer,
+  [FIXER_BN]: bnFixer,
+  [FIXER_BR_DIV]: brDivFixer,
+  [FIXER_BN_DIV]: bnDivFixer,
 };

 /**
- * 从缓存或远程加载修复站点
- * @param {*} url
- * @returns
+ * 执行fixer
+ * @param {*} param0
 */
-export const loadOrFetchWebfix = async (url) => {
+export function runFixer(selector, fixer = "-", rootSelector) {
  try {
-    let sites = await getWebfix(url);
-    if (sites?.length) {
-      return sites;
-    }
-    return syncWebfix(url);
-  } catch (err) {
-    console.log("[load webfix]", err.message);
-    return DEFAULT_SITES;
-  }
-};
-
-/**
- * 匹配站点
- */
-export async function runWebfix({ injectWebfix }) {
-  try {
-    if (!injectWebfix) {
-      return;
-    }
-
-    const href = document.location.href;
-    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 (Object.keys(fixerMap).includes(fixer)) {
+      run(selector, fixerMap[fixer], rootSelector);
    }
  } catch (err) {
-    console.error(`[kiss-webfix]: ${err.message}`);
+    console.error(`[kiss-webfix run]: ${err.message}`);
  }
 }
--- a/src/rules.js
+++ b/src/rules.js
@@ -5,7 +5,7 @@ import { BUILTIN_RULES } from "./config/rules";
 (() => {
  // rules
  try {
-    const data = JSON.stringify(BUILTIN_RULES, null, "  ");
+    const data = JSON.stringify(BUILTIN_RULES, null, 2);
    const file = path.resolve(
      __dirname,
      "../build/web/kiss-translator-rules.json"
--- a/src/userscript.js
+++ b/src/userscript.js
@@ -1,82 +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,
-  touchOperation,
-} 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);
-
-    // 触屏操作
-    touchOperation(translator);
-
-    // 同步订阅规则
-    await trySyncAllSubRules(setting);
-  } catch (err) {
-    console.error("[KISS-Translator]", err);
-    showErr(err.message);
-  }
-})();
+run(true);
--- a/src/views/Action/index.js
+++ b/src/views/Action/index.js
@@ -21,6 +21,7 @@ import {
 } from "../../config";
 import { shortcutRegister } from "../../libs/shortcut";
 import { sendIframeMsg } from "../../libs/iframe";
+import { kissLog } from "../../libs/log";

 export default function Action({ translator, fab }) {
  const fabWidth = 40;
@@ -95,40 +96,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 { contextMenuType } = translator.setting;
+      contextMenuType !== 0 &&
+        menuCommandIds.push(
+          GM.registerMenuCommand(
+            "Toggle Translate",
+            (event) => {
+              translator.toggle();
+              sendIframeMsg(MSG_TRANS_TOGGLE);
+              setShowPopup(false);
+            },
+            "Q"
+          ),
+          GM.registerMenuCommand(
+            "Toggle Style",
+            (event) => {
+              translator.toggleStyle();
+              sendIframeMsg(MSG_TRANS_TOGGLE_STYLE);
+              setShowPopup(false);
+            },
+            "C"
+          ),
+          GM.registerMenuCommand(
+            "Open Menu",
+            (event) => {
+              setShowPopup((pre) => !pre);
+            },
+            "K"
+          ),
+          GM.registerMenuCommand(
+            "Open Setting",
+            (event) => {
+              window.open(process.env.REACT_APP_OPTIONSPAGE, "_blank");
+            },
+            "O"
+          )
+        );

      return () => {
        menuCommandIds.forEach((id) => {
@@ -136,7 +139,7 @@ export default function Action({ translator, fab }) {
        });
      };
    } catch (err) {
-      console.log("[registerMenuCommand]", err);
+      kissLog(err, "registerMenuCommand");
    }
  }, [translator]);

@@ -215,7 +218,12 @@ export default function Action({ translator, fab }) {
                }
              }}
            >
-              <TranslateIcon />
+              <TranslateIcon
+                sx={{
+                  width: 24,
+                  height: 24,
+                }}
+              />
            </Fab>
          }
        />
--- a/src/views/Content/LoadingIcon.js
+++ b/src/views/Content/LoadingIcon.js
@@ -2,7 +2,7 @@ import { loadingSvg } from "../../libs/svg";

 export default function LoadingIcon() {
  return (
-    <div
+    <span
      style={{
        display: "inline-block",
        width: "1.2em",
--- a/src/views/Content/index.js
+++ b/src/views/Content/index.js
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 import LoadingIcon from "./LoadingIcon";
 import {
  OPT_STYLE_LINE,
@@ -7,98 +7,88 @@ import {
  OPT_STYLE_WAVYLINE,
  OPT_STYLE_FUZZY,
  OPT_STYLE_HIGHLIGHT,
+  OPT_STYLE_BLOCKQUOTE,
  OPT_STYLE_DIY,
  DEFAULT_COLOR,
  MSG_TRANS_CURRULE,
-  TRANS_NEWLINE_LENGTH,
 } from "../../config";
 import { useTranslate } from "../../hooks/Translate";
-import { styled } from "@mui/material/styles";
+import { styled, css } from "@mui/material/styles";
+import { APP_LCNAME } from "../../config";

-const LineSpan = styled("span")`
-  opacity: 0.6;
-  -webkit-opacity: 0.6;
-  text-decoration-line: underline;
-  text-decoration-style: ${(props) => props.$lineStyle};
-  text-decoration-color: ${(props) => props.$lineColor};
-  text-decoration-thickness: 2px;
-  text-underline-offset: 0.3em;
-  -webkit-text-decoration-line: underline;
-  -webkit-text-decoration-style: ${(props) => props.$lineStyle};
-  -webkit-text-decoration-color: ${(props) => props.$lineColor};
-  -webkit-text-decoration-thickness: 2px;
-  -webkit-text-underline-offset: 0.3em;
-  &:hover {
-    opacity: 1;
-    -webkit-opacity: 1;
-  }
+const LINE_STYLES = {
+  [OPT_STYLE_LINE]: "solid",
+  [OPT_STYLE_DOTLINE]: "dotted",
+  [OPT_STYLE_DASHLINE]: "dashed",
+  [OPT_STYLE_WAVYLINE]: "wavy",
+};
+
+const StyledSpan = styled("span")`
+  ${({ textStyle, textDiyStyle, bgColor }) => {
+    switch (textStyle) {
+      case OPT_STYLE_LINE: // 下划线
+      case OPT_STYLE_DOTLINE: // 点状线
+      case OPT_STYLE_DASHLINE: // 虚线
+      case OPT_STYLE_WAVYLINE: // 波浪线
+        return css`
+          opacity: 0.6;
+          -webkit-opacity: 0.6;
+          text-decoration-line: underline;
+          text-decoration-style: ${LINE_STYLES[textStyle]};
+          text-decoration-color: ${bgColor};
+          text-decoration-thickness: 2px;
+          text-underline-offset: 0.3em;
+          -webkit-text-decoration-line: underline;
+          -webkit-text-decoration-style: ${LINE_STYLES[textStyle]};
+          -webkit-text-decoration-color: ${bgColor};
+          -webkit-text-decoration-thickness: 2px;
+          -webkit-text-underline-offset: 0.3em;
+          &:hover {
+            opacity: 1;
+            -webkit-opacity: 1;
+          }
+        `;
+      case OPT_STYLE_FUZZY: // 模糊
+        return css`
+          filter: blur(0.2em);
+          -webkit-filter: blur(0.2em);
+          &:hover {
+            filter: none;
+            -webkit-filter: none;
+          }
+        `;
+      case OPT_STYLE_HIGHLIGHT: // 高亮
+        return css`
+          color: #fff;
+          background-color: ${bgColor || DEFAULT_COLOR};
+        `;
+      case OPT_STYLE_BLOCKQUOTE: // 引用
+        return css`
+          opacity: 0.6;
+          -webkit-opacity: 0.6;
+          display: block;
+          padding: 0 0.75em;
+          border-left: 0.25em solid ${bgColor || DEFAULT_COLOR};
+          &:hover {
+            opacity: 1;
+            -webkit-opacity: 1;
+          }
+        `;
+      case OPT_STYLE_DIY: // 自定义
+        return textDiyStyle;
+      default:
+        return ``;
+    }
+  }}
 `;

-const FuzzySpan = styled("span")`
-  filter: blur(0.2em);
-  -webkit-filter: blur(0.2em);
-  &:hover {
-    filter: none;
-    -webkit-filter: none;
-  }
-`;
-
-const HighlightSpan = styled("span")`
-  color: #fff;
-  background-color: ${(props) => props.$bgColor};
-`;
-
-const DiySpan = styled("span")`
-  ${(props) => props.$diyStyle}
-`;
-
-function StyledSpan({ textStyle, textDiyStyle, bgColor, children }) {
-  switch (textStyle) {
-    case OPT_STYLE_LINE: // 下划线
-      return (
-        <LineSpan $lineStyle="solid" $lineColor={bgColor}>
-          {children}
-        </LineSpan>
-      );
-    case OPT_STYLE_DOTLINE: // 点状线
-      return (
-        <LineSpan $lineStyle="dotted" $lineColor={bgColor}>
-          {children}
-        </LineSpan>
-      );
-    case OPT_STYLE_DASHLINE: // 虚线
-      return (
-        <LineSpan $lineStyle="dashed" $lineColor={bgColor}>
-          {children}
-        </LineSpan>
-      );
-    case OPT_STYLE_WAVYLINE: // 波浪线
-      return (
-        <LineSpan $lineStyle="wavy" $lineColor={bgColor}>
-          {children}
-        </LineSpan>
-      );
-    case OPT_STYLE_FUZZY: // 模糊
-      return <FuzzySpan>{children}</FuzzySpan>;
-    case OPT_STYLE_HIGHLIGHT: // 高亮
-      return (
-        <HighlightSpan $bgColor={bgColor || DEFAULT_COLOR}>
-          {children}
-        </HighlightSpan>
-      );
-    case OPT_STYLE_DIY: // 自定义
-      return <DiySpan $diyStyle={textDiyStyle}>{children}</DiySpan>;
-    default:
-      return <span>{children}</span>;
-  }
-}
-
-export default function Content({ q, translator }) {
+export default function Content({ q, keeps, translator, $el }) {
  const [rule, setRule] = useState(translator.rule);
  const { text, sameLang, loading } = useTranslate(q, rule, translator.setting);
-  const { textStyle, bgColor = "", textDiyStyle = "" } = rule;
+  const { transOpen, textStyle, bgColor, textDiyStyle, transOnly, transTag } =
+    rule;

-  const { newlineLength = TRANS_NEWLINE_LENGTH } = translator.setting;
+  const { newlineLength } = translator.setting;

  const handleKissEvent = (e) => {
    const { action, args } = e.detail;
@@ -117,27 +107,66 @@ export default function Content({ q, translator }) {
    };
  }, [translator.eventName]);

+  const gap = useMemo(() => {
+    if (transOnly === "true") {
+      return "";
+    }
+    return q.length >= newlineLength ? <br /> : " ";
+  }, [q, transOnly, newlineLength]);
+
+  const styles = useMemo(
+    () => ({
+      textStyle,
+      textDiyStyle,
+      bgColor,
+      as: transTag,
+    }),
+    [textStyle, textDiyStyle, bgColor, transTag]
+  );
+
  if (loading) {
    return (
      <>
-        {q.length >= newlineLength ? <br /> : " "}
+        {gap}
        <LoadingIcon />
      </>
    );
  }

-  if (text && !sameLang) {
+  if (!text || sameLang) {
+    return;
+  }
+
+  if (
+    transOnly === "true" &&
+    transOpen === "true" &&
+    $el.querySelector(APP_LCNAME)
+  ) {
+    Array.from($el.childNodes).forEach((el) => {
+      if (el.localName !== APP_LCNAME) {
+        el.remove();
+      }
+    });
+  }
+
+  if (keeps.length > 0) {
    return (
      <>
-        {q.length >= newlineLength ? <br /> : " "}
+        {gap}
        <StyledSpan
-          textStyle={textStyle}
-          textDiyStyle={textDiyStyle}
-          bgColor={bgColor}
-        >
-          {text}
-        </StyledSpan>
+          {...styles}
+          dangerouslySetInnerHTML={{
+            __html: text.replace(/\[(\d+)\]/g, (_, p) => keeps[parseInt(p)]),
+          }}
+        />
      </>
    );
  }
+
+  return (
+    <>
+      {gap}
+      <StyledSpan {...styles}>{text}</StyledSpan>
+    </>
+  );
 }
--- a/src/views/Options/Apis.js
+++ b/src/views/Options/Apis.js
@@ -5,12 +5,17 @@ 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,
+  DEFAULT_FETCH_LIMIT,
+  DEFAULT_FETCH_INTERVAL,
 } from "../../config";
 import { useState } from "react";
 import { useI18n } from "../../hooks/I18n";
@@ -25,6 +30,7 @@ import { useApi } from "../../hooks/Api";
 import { apiTranslate } from "../../apis";
 import Box from "@mui/material/Box";
 import Link from "@mui/material/Link";
+import { limitNumber } from "../../libs/utils";

 function TestButton({ translator, api }) {
  const i18n = useI18n();
@@ -47,16 +53,22 @@ function TestButton({ translator, api }) {
      alert.success(i18n("test_success"));
    } catch (err) {
      // alert.error(`${i18n("test_failed")}: ${err.message}`);
+      let msg = err.message;
+      try {
+        msg = JSON.stringify(JSON.parse(err.message), null, 2);
+      } catch (err) {
+        // skip
+      }
      alert.error(
        <>
-          <div>{`${i18n("test_failed")}: ${err.message}`}</div>
+          <div>{i18n("test_failed")}</div>
          <pre
            style={{
              maxWidth: 400,
              overflow: "auto",
            }}
          >
-            {JSON.stringify(err.cause || {}, null, 2)}
+            {msg}
          </pre>
        </>
      );
@@ -79,10 +91,26 @@ function TestButton({ translator, api }) {
 function ApiFields({ translator }) {
  const i18n = useI18n();
  const { api, updateApi, resetApi } = useApi(translator);
-  const { url = "", key = "", model = "", prompt = "" } = api;
+  const {
+    url = "",
+    key = "",
+    model = "",
+    prompt = "",
+    fetchLimit = DEFAULT_FETCH_LIMIT,
+    fetchInterval = DEFAULT_FETCH_INTERVAL,
+  } = api;

  const handleChange = (e) => {
-    const { name, value } = e.target;
+    let { name, value } = e.target;
+    switch (name) {
+      case "fetchLimit":
+        value = limitNumber(value, 1, 100);
+        break;
+      case "fetchInterval":
+        value = limitNumber(value, 0, 5000);
+        break;
+      default:
+    }
    updateApi({
      [name]: value,
    });
@@ -95,6 +123,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) && (
@@ -112,10 +147,17 @@ 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"
@@ -135,22 +177,38 @@ function ApiFields({ translator }) {
        </>
      )}

+      <TextField
+        size="small"
+        label={i18n("fetch_limit")}
+        type="number"
+        name="fetchLimit"
+        value={fetchLimit}
+        onChange={handleChange}
+      />
+
+      <TextField
+        size="small"
+        label={i18n("fetch_interval")}
+        type="number"
+        name="fetchInterval"
+        value={fetchInterval}
+        onChange={handleChange}
+      />
+
      <Stack direction="row" spacing={2}>
        <TestButton translator={translator} api={api} />
-        {!buildinTranslators.includes(translator) && (
-          <Button
-            size="small"
-            variant="outlined"
-            onClick={() => {
-              resetApi();
-            }}
-          >
-            {i18n("restore_default")}
-          </Button>
-        )}
+        <Button
+          size="small"
+          variant="outlined"
+          onClick={() => {
+            resetApi();
+          }}
+        >
+          {i18n("restore_default")}
+        </Button>
      </Stack>

-      {translator === OPT_TRANS_CUSTOMIZE && (
+      {translator.startsWith(OPT_TRANS_CUSTOMIZE) && (
        <pre>{i18n("custom_api_help")}</pre>
      )}
    </Stack>
--- a/src/views/Options/FavWords.js
+++ b/src/views/Options/FavWords.js
@@ -18,6 +18,7 @@ import UploadButton from "./UploadButton";
 import Button from "@mui/material/Button";
 import ClearAllIcon from "@mui/icons-material/ClearAll";
 import { isValidWord } from "../../libs/utils";
+import { kissLog } from "../../libs/log";

 function DictField({ word }) {
  const [dictResult, setDictResult] = useState(null);
@@ -35,7 +36,7 @@ function DictField({ word }) {
          fromLang: "en",
          toLang: "zh-CN",
        });
-        setDictResult(dictRes[2].dict_result);
+        dictRes[2].type === 1 && setDictResult(JSON.parse(dictRes[2].result));
      } catch (err) {
        setError(err.message);
      } finally {
@@ -93,7 +94,7 @@ export default function FavWords() {
        .filter(isValidWord);
      await mergeWords(newWords);
    } catch (err) {
-      console.log("[import rules]", err);
+      kissLog(err, "import rules");
    }
  };

--- 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/Navigator.js
+++ b/src/views/Options/Navigator.js
@@ -11,7 +11,6 @@ import DesignServicesIcon from "@mui/icons-material/DesignServices";
 import { useI18n } from "../../hooks/I18n";
 import SyncIcon from "@mui/icons-material/Sync";
 import ApiIcon from "@mui/icons-material/Api";
-import SendTimeExtensionIcon from "@mui/icons-material/SendTimeExtension";
 import InputIcon from "@mui/icons-material/Input";
 import SelectAllIcon from "@mui/icons-material/SelectAll";
 import EventNoteIcon from "@mui/icons-material/EventNote";
@@ -65,12 +64,6 @@ export default function Navigator(props) {
      url: "/sync",
      icon: <SyncIcon />,
    },
-    {
-      id: "webfix",
-      label: i18n("patch_setting"),
-      url: "/webfix",
-      icon: <SendTimeExtensionIcon />,
-    },
    {
      id: "words",
      label: i18n("favorite_words"),
--- a/src/views/Options/Rules.js
+++ b/src/views/Options/Rules.js
@@ -7,6 +7,7 @@ import Alert from "@mui/material/Alert";
 import {
  GLOBAL_KEY,
  DEFAULT_RULE,
+  GLOBLA_RULE,
  OPT_LANGS_FROM,
  OPT_LANGS_TO,
  OPT_TRANS_ALL,
@@ -15,6 +16,9 @@ import {
  OPT_STYLE_USE_COLOR,
  URL_KISS_RULES_NEW_ISSUE,
  OPT_SYNCTYPE_WORKER,
+  OPT_TIMING_PAGESCROLL,
+  DEFAULT_TRANS_TAG,
+  OPT_TIMING_ALL,
 } from "../../config";
 import { useState, useEffect, useMemo } from "react";
 import { useI18n } from "../../hooks/I18n";
@@ -50,11 +54,17 @@ import HelpButton from "./HelpButton";
 import { useSyncCaches } from "../../hooks/Sync";
 import DownloadButton from "./DownloadButton";
 import UploadButton from "./UploadButton";
+import { FIXER_ALL } from "../../libs/webfix";
+import AddIcon from "@mui/icons-material/Add";
+import EditIcon from "@mui/icons-material/Edit";
+import CancelIcon from "@mui/icons-material/Cancel";
+import SaveIcon from "@mui/icons-material/Save";
+import { kissLog } from "../../libs/log";

 function RuleFields({ rule, rules, setShow, setKeyword }) {
-  const initFormValues = rule || {
-    ...DEFAULT_RULE,
-    transOpen: "true",
+  const initFormValues = {
+    ...(rule?.pattern === "*" ? GLOBLA_RULE : DEFAULT_RULE),
+    ...(rule || {}),
  };
  const editMode = !!rule;

@@ -62,9 +72,16 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
  const [disabled, setDisabled] = useState(editMode);
  const [errors, setErrors] = useState({});
  const [formValues, setFormValues] = useState(initFormValues);
+  const [showMore, setShowMore] = useState(!rules);
  const {
    pattern,
    selector,
+    keepSelector = "",
+    terms = "",
+    selectStyle = "",
+    parentStyle = "",
+    injectJs = "",
+    injectCss = "",
    translator,
    fromLang,
    toLang,
@@ -72,6 +89,14 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
    transOpen,
    bgColor,
    textDiyStyle,
+    transOnly = "false",
+    transTiming = OPT_TIMING_PAGESCROLL,
+    transTag = DEFAULT_TRANS_TAG,
+    transTitle = "false",
+    detectRemote = "false",
+    skipLangs = [],
+    fixerSelector = "",
+    fixerFunc = "-",
  } = formValues;

  const hasSamePattern = (str) => {
@@ -179,6 +204,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}>
@@ -299,10 +334,206 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
            value={textDiyStyle}
            disabled={disabled}
            onChange={handleChange}
+            maxRows={10}
            multiline
          />
        )}

+        {showMore && (
+          <>
+            <Box>
+              <Grid container spacing={2} columns={12}>
+                <Grid item xs={12} sm={6} md={3} lg={2}>
+                  <TextField
+                    select
+                    size="small"
+                    fullWidth
+                    name="transOnly"
+                    value={transOnly}
+                    label={i18n("show_only_translations")}
+                    disabled={disabled}
+                    onChange={handleChange}
+                  >
+                    {GlobalItem}
+                    <MenuItem value={"false"}>{i18n("disable")}</MenuItem>
+                    <MenuItem value={"true"}>{i18n("enable")}</MenuItem>
+                  </TextField>
+                </Grid>
+                <Grid item xs={12} sm={6} md={3} lg={2}>
+                  <TextField
+                    select
+                    size="small"
+                    fullWidth
+                    name="transTiming"
+                    value={transTiming}
+                    label={i18n("translate_timing")}
+                    disabled={disabled}
+                    onChange={handleChange}
+                  >
+                    {GlobalItem}
+                    {OPT_TIMING_ALL.map((item) => (
+                      <MenuItem key={item} value={item}>
+                        {i18n(item)}
+                      </MenuItem>
+                    ))}
+                  </TextField>
+                </Grid>
+                <Grid item xs={12} sm={6} md={3} lg={2}>
+                  <TextField
+                    select
+                    size="small"
+                    fullWidth
+                    name="transTag"
+                    value={transTag}
+                    label={i18n("translation_element_tag")}
+                    disabled={disabled}
+                    onChange={handleChange}
+                  >
+                    {GlobalItem}
+                    <MenuItem value={"span"}>{`<span>`}</MenuItem>
+                    <MenuItem value={"font"}>{`<font>`}</MenuItem>
+                  </TextField>
+                </Grid>
+                <Grid item xs={12} sm={6} md={3} lg={2}>
+                  <TextField
+                    select
+                    size="small"
+                    fullWidth
+                    name="transTitle"
+                    value={transTitle}
+                    label={i18n("translate_page_title")}
+                    disabled={disabled}
+                    onChange={handleChange}
+                  >
+                    {GlobalItem}
+                    <MenuItem value={"false"}>{i18n("disable")}</MenuItem>
+                    <MenuItem value={"true"}>{i18n("enable")}</MenuItem>
+                  </TextField>
+                </Grid>
+                <Grid item xs={12} sm={6} md={3} lg={2}>
+                  <TextField
+                    select
+                    size="small"
+                    fullWidth
+                    name="detectRemote"
+                    value={detectRemote}
+                    label={i18n("detect_lang_remote")}
+                    disabled={disabled}
+                    onChange={handleChange}
+                  >
+                    {GlobalItem}
+                    <MenuItem value={"false"}>{i18n("disable")}</MenuItem>
+                    <MenuItem value={"true"}>{i18n("enable")}</MenuItem>
+                  </TextField>
+                </Grid>
+              </Grid>
+            </Box>
+
+            <TextField
+              select
+              size="small"
+              label={i18n("skip_langs")}
+              helperText={i18n("skip_langs_helper")}
+              name="skipLangs"
+              value={skipLangs}
+              disabled={disabled}
+              onChange={handleChange}
+              SelectProps={{
+                multiple: true,
+              }}
+            >
+              {OPT_LANGS_TO.map(([langKey, langName]) => (
+                <MenuItem key={langKey} value={langKey}>
+                  {langName}
+                </MenuItem>
+              ))}
+            </TextField>
+
+            <TextField
+              size="small"
+              label={i18n("terms")}
+              helperText={i18n("terms_helper")}
+              name="terms"
+              value={terms}
+              disabled={disabled}
+              onChange={handleChange}
+              multiline
+            />
+
+            <TextField
+              size="small"
+              label={i18n("fixer_selector")}
+              name="fixerSelector"
+              value={fixerSelector}
+              disabled={disabled}
+              onChange={handleChange}
+              multiline
+            />
+            <TextField
+              select
+              size="small"
+              name="fixerFunc"
+              value={fixerFunc}
+              label={i18n("fixer_function")}
+              helperText={i18n("fixer_function_helper")}
+              disabled={disabled}
+              onChange={handleChange}
+            >
+              {GlobalItem}
+              {FIXER_ALL.map((item) => (
+                <MenuItem key={item} value={item}>
+                  {item}
+                </MenuItem>
+              ))}
+            </TextField>
+
+            <TextField
+              size="small"
+              label={i18n("selector_style")}
+              helperText={i18n("selector_style_helper")}
+              name="selectStyle"
+              value={selectStyle}
+              disabled={disabled}
+              onChange={handleChange}
+              maxRows={10}
+              multiline
+            />
+            <TextField
+              size="small"
+              label={i18n("selector_parent_style")}
+              helperText={i18n("selector_style_helper")}
+              name="parentStyle"
+              value={parentStyle}
+              disabled={disabled}
+              onChange={handleChange}
+              maxRows={10}
+              multiline
+            />
+            <TextField
+              size="small"
+              label={i18n("inject_css")}
+              helperText={i18n("inject_css_helper")}
+              name="injectCss"
+              value={injectCss}
+              disabled={disabled}
+              onChange={handleChange}
+              maxRows={10}
+              multiline
+            />
+            <TextField
+              size="small"
+              label={i18n("inject_js")}
+              helperText={i18n("inject_js_helper")}
+              name="injectJs"
+              value={injectJs}
+              disabled={disabled}
+              onChange={handleChange}
+              maxRows={10}
+              multiline
+            />
+          </>
+        )}
+
        {rules &&
          (editMode ? (
            // 编辑
@@ -316,6 +547,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
                      e.preventDefault();
                      setDisabled(false);
                    }}
+                    startIcon={<EditIcon />}
                  >
                    {i18n("edit")}
                  </Button>
@@ -327,35 +559,87 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
                        e.preventDefault();
                        rules.del(rule.pattern);
                      }}
+                      startIcon={<DeleteIcon />}
                    >
                      {i18n("delete")}
                    </Button>
                  )}
+                  {!showMore && (
+                    <Button
+                      size="small"
+                      variant="text"
+                      onClick={() => {
+                        setShowMore(true);
+                      }}
+                      startIcon={<ExpandMoreIcon />}
+                    >
+                      {i18n("more")}
+                    </Button>
+                  )}
                </>
              ) : (
                <>
-                  <Button size="small" variant="contained" type="submit">
+                  <Button
+                    size="small"
+                    variant="contained"
+                    type="submit"
+                    startIcon={<SaveIcon />}
+                  >
                    {i18n("save")}
                  </Button>
                  <Button
                    size="small"
                    variant="outlined"
                    onClick={handleCancel}
+                    startIcon={<CancelIcon />}
                  >
                    {i18n("cancel")}
                  </Button>
+                  {!showMore && (
+                    <Button
+                      size="small"
+                      variant="text"
+                      onClick={() => {
+                        setShowMore(true);
+                      }}
+                      startIcon={<ExpandMoreIcon />}
+                    >
+                      {i18n("more")}
+                    </Button>
+                  )}
                </>
              )}
            </Stack>
          ) : (
            // 添加
            <Stack direction="row" spacing={2}>
-              <Button size="small" variant="contained" type="submit">
+              <Button
+                size="small"
+                variant="contained"
+                type="submit"
+                startIcon={<SaveIcon />}
+              >
                {i18n("save")}
              </Button>
-              <Button size="small" variant="outlined" onClick={handleCancel}>
+              <Button
+                size="small"
+                variant="outlined"
+                onClick={handleCancel}
+                startIcon={<CancelIcon />}
+              >
                {i18n("cancel")}
              </Button>
+              {!showMore && (
+                <Button
+                  size="small"
+                  variant="text"
+                  onClick={() => {
+                    setShowMore(true);
+                  }}
+                >
+                  {i18n("more")}
+                </Button>
+              )}
            </Stack>
          ))}
      </Stack>
@@ -418,7 +702,7 @@ function ShareButton({ rules, injectRules, selectedUrl }) {
      window.open(url, "_blank");
    } catch (err) {
      alert.warning(i18n("error_got_some_wrong"));
-      console.log("[share rules]", err);
+      kissLog(err, "share rules");
    }
  };

@@ -448,7 +732,7 @@ function UserRules({ subRules }) {
    try {
      await rules.merge(JSON.parse(data));
    } catch (err) {
-      console.log("[import rules]", err);
+      kissLog(err, "import rules");
    }
  };

@@ -485,6 +769,7 @@ function UserRules({ subRules }) {
            e.preventDefault();
            setShowAdd(true);
          }}
+          startIcon={<AddIcon />}
        >
          {i18n("add")}
        </Button>
@@ -580,7 +865,7 @@ function SubRulesItem({
      await delSubRules(url);
      await deleteDataCache(url);
    } catch (err) {
-      console.log("[del subrules]", err);
+      kissLog(err, "del subrules");
    }
  };

@@ -593,7 +878,7 @@ function SubRulesItem({
      }
      await updateDataCache(url);
    } catch (err) {
-      console.log("[sync sub rules]", err);
+      kissLog(err, "sync sub rules");
    } finally {
      setLoading(false);
    }
@@ -672,7 +957,7 @@ function SubRulesEdit({ subList, addSub, updateDataCache }) {
      setShowInput(false);
      setInputText("");
    } catch (err) {
-      console.log("[fetch rules]", err);
+      kissLog(err, "fetch rules");
      setInputError(i18n("error_fetch_url"));
    } finally {
      setLoading(false);
@@ -700,6 +985,7 @@ function SubRulesEdit({ subList, addSub, updateDataCache }) {
            e.preventDefault();
            setShowInput(true);
          }}
+          startIcon={<AddIcon />}
        >
          {i18n("add")}
        </Button>
@@ -724,10 +1010,16 @@ function SubRulesEdit({ subList, addSub, updateDataCache }) {
              variant="contained"
              onClick={handleSave}
              disabled={loading}
+              startIcon={<SaveIcon />}
            >
              {i18n("save")}
            </Button>
-            <Button size="small" variant="outlined" onClick={handleCancel}>
+            <Button
+              size="small"
+              variant="outlined"
+              onClick={handleCancel}
+              startIcon={<CancelIcon />}
+            >
              {i18n("cancel")}
            </Button>
          </Stack>
@@ -815,6 +1107,8 @@ export default function Rules() {
          {i18n("rules_warn_1")}
          <br />
          {i18n("rules_warn_2")}
+          <br />
+          {i18n("rules_warn_3")}
        </Alert>

        <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
--- a/src/views/Options/Setting.js
+++ b/src/views/Options/Setting.js
@@ -17,16 +17,20 @@ import {
  UI_LANGS,
  TRANS_NEWLINE_LENGTH,
  CACHE_NAME,
-  OPT_MOUSEKEY_ALL,
-  OPT_MOUSEKEY_DISABLE,
  OPT_SHORTCUT_TRANSLATE,
  OPT_SHORTCUT_STYLE,
  OPT_SHORTCUT_POPUP,
  OPT_SHORTCUT_SETTING,
+  DEFAULT_BLACKLIST,
+  DEFAULT_CSPLIST,
+  MSG_CONTEXT_MENUS,
+  MSG_UPDATE_CSP,
 } from "../../config";
 import { useShortcut } from "../../hooks/Shortcut";
 import ShortcutInput from "./ShortcutInput";
 import { useFab } from "../../hooks/Fab";
+import { sendBgMsg } from "../../libs/msg";
+import { kissLog } from "../../libs/log";

 function ShortcutItem({ action, label }) {
  const { shortcut, setShortcut } = useShortcut(action);
@@ -51,6 +55,9 @@ export default function Settings() {
      case "fetchInterval":
        value = limitNumber(value, 0, 5000);
        break;
+      case "transInterval":
+        value = limitNumber(value, 100, 5000);
+        break;
      case "minLength":
        value = limitNumber(value, 1, 100);
        break;
@@ -61,7 +68,13 @@ export default function Settings() {
        value = limitNumber(value, 1, 1000);
        break;
      case "touchTranslate":
-        value = limitNumber(value, 0, 3);
+        value = limitNumber(value, 0, 4);
+        break;
+      case "contextMenuType":
+        isExt && sendBgMsg(MSG_CONTEXT_MENUS, value);
+        break;
+      case "csplist":
+        isExt && sendBgMsg(MSG_UPDATE_CSP, value);
        break;
      default:
    }
@@ -75,21 +88,21 @@ export default function Settings() {
      caches.delete(CACHE_NAME);
      alert.success(i18n("clear_success"));
    } catch (err) {
-      console.log("[clear cache]", err);
+      kissLog(err, "clear cache");
    }
  };

  const {
    uiLang,
-    fetchLimit,
-    fetchInterval,
    minLength,
    maxLength,
    clearCache,
    newlineLength = TRANS_NEWLINE_LENGTH,
-    mouseKey = OPT_MOUSEKEY_DISABLE,
-    detectRemote = false,
+    contextMenuType = 1,
    touchTranslate = 2,
+    blacklist = DEFAULT_BLACKLIST.join(",\n"),
+    csplist = DEFAULT_CSPLIST.join(",\n"),
+    transInterval = 500,
  } = setting;
  const { isHide = false } = fab || {};

@@ -112,24 +125,6 @@ export default function Settings() {
          </Select>
        </FormControl>

-        <TextField
-          size="small"
-          label={i18n("fetch_limit")}
-          type="number"
-          name="fetchLimit"
-          defaultValue={fetchLimit}
-          onChange={handleChange}
-        />
-
-        <TextField
-          size="small"
-          label={i18n("fetch_interval")}
-          type="number"
-          name="fetchInterval"
-          defaultValue={fetchInterval}
-          onChange={handleChange}
-        />
-
        <TextField
          size="small"
          label={i18n("min_translate_length")}
@@ -157,21 +152,14 @@ export default function Settings() {
          onChange={handleChange}
        />

-        <FormControl size="small">
-          <InputLabel>{i18n("mouseover_translation")}</InputLabel>
-          <Select
-            name="mouseKey"
-            value={mouseKey}
-            label={i18n("mouseover_translation")}
-            onChange={handleChange}
-          >
-            {OPT_MOUSEKEY_ALL.map((item) => (
-              <MenuItem key={item} value={item}>
-                {i18n(item)}
-              </MenuItem>
-            ))}
-          </Select>
-        </FormControl>
+        <TextField
+          size="small"
+          label={i18n("translate_interval")}
+          type="number"
+          name="transInterval"
+          defaultValue={transInterval}
+          onChange={handleChange}
+        />

        <FormControl size="small">
          <InputLabel>{i18n("touch_translate_shortcut")}</InputLabel>
@@ -181,7 +169,7 @@ export default function Settings() {
            label={i18n("touch_translate_shortcut")}
            onChange={handleChange}
          >
-            {[0, 2, 3].map((item) => (
+            {[0, 2, 3, 4].map((item) => (
              <MenuItem key={item} value={item}>
                {i18n(`touch_tap_${item}`)}
              </MenuItem>
@@ -205,37 +193,51 @@ export default function Settings() {
        </FormControl>

        <FormControl size="small">
-          <InputLabel>{i18n("detect_lang_remote")}</InputLabel>
+          <InputLabel>{i18n("context_menus")}</InputLabel>
          <Select
-            name="detectRemote"
-            value={detectRemote}
-            label={i18n("detect_lang_remote")}
+            name="contextMenuType"
+            value={contextMenuType}
+            label={i18n("context_menus")}
            onChange={handleChange}
          >
-            <MenuItem value={false}>{i18n("disable")}</MenuItem>
-            <MenuItem value={true}>{i18n("enable")}</MenuItem>
+            <MenuItem value={0}>{i18n("hide_context_menus")}</MenuItem>
+            <MenuItem value={1}>{i18n("simple_context_menus")}</MenuItem>
+            <MenuItem value={2}>{i18n("secondary_context_menus")}</MenuItem>
          </Select>
-          <FormHelperText>{i18n("detect_lang_remote_help")}</FormHelperText>
        </FormControl>

        {isExt ? (
-          <FormControl size="small">
-            <InputLabel>{i18n("if_clear_cache")}</InputLabel>
-            <Select
-              name="clearCache"
-              value={clearCache}
-              label={i18n("if_clear_cache")}
+          <>
+            <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>
+
+            <TextField
+              size="small"
+              label={i18n("disabled_csplist")}
+              helperText={
+                i18n("pattern_helper") + " " + i18n("disabled_csplist_helper")
+              }
+              name="csplist"
+              defaultValue={csplist}
              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>
+              multiline
+            />
+          </>
        ) : (
          <>
            <Box>
@@ -268,6 +270,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/SyncSetting.js
+++ b/src/views/Options/SyncSetting.js
@@ -19,6 +19,7 @@ import { useAlert } from "../../hooks/Alert";
 import SyncIcon from "@mui/icons-material/Sync";
 import CircularProgress from "@mui/material/CircularProgress";
 import { useSetting } from "../../hooks/Setting";
+import { kissLog } from "../../libs/log";

 export default function SyncSetting() {
  const i18n = useI18n();
@@ -43,7 +44,7 @@ export default function SyncSetting() {
      await reloadSetting();
      alert.success(i18n("sync_success"));
    } catch (err) {
-      console.log("[sync all]", err);
+      kissLog(err, "sync all");
      alert.error(i18n("sync_failed"));
    } finally {
      setLoading(false);
--- 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();
@@ -44,9 +45,12 @@ export default function Tranbox() {
    translator,
    fromLang,
    toLang,
+    toLang2 = "en",
    tranboxShortcut,
    btnOffsetX,
    btnOffsetY,
+    hideTranBtn = false,
+    hideClickAway = false,
  } = tranboxSetting;

  return (
@@ -111,6 +115,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")}
@@ -129,11 +149,37 @@ 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>
+
+        <TextField
+          select
+          size="small"
+          name="hideClickAway"
+          value={hideClickAway}
+          label={i18n("hide_click_away")}
+          onChange={handleChange}
+        >
+          <MenuItem value={false}>{i18n("disable")}</MenuItem>
+          <MenuItem value={true}>{i18n("enable")}</MenuItem>
+        </TextField>
+
+        {!isExt && (
+          <ShortcutInput
+            value={tranboxShortcut}
+            onChange={handleShortcutInput}
+            label={i18n("trigger_tranbox_shortcut")}
+          />
+        )}
      </Stack>
    </Box>
  );
--- a/src/views/Options/Webfix.js
+++ b/src/views/Options/Webfix.js
@@ -1,357 +0,0 @@
-import Stack from "@mui/material/Stack";
-import TextField from "@mui/material/TextField";
-import { useCallback, useEffect, useState } from "react";
-import { useI18n } from "../../hooks/I18n";
-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 Alert from "@mui/material/Alert";
-import Box from "@mui/material/Box";
-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, 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);
-    }
-  };
-
-  return (
-    <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 WebfixAccordion({ rule, webfix }) {
-  const [expanded, setExpanded] = useState(false);
-
-  const handleChange = (e) => {
-    setExpanded((pre) => !pre);
-  };
-
-  return (
-    <Accordion expanded={expanded} onChange={handleChange}>
-      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-        <Typography
-          sx={{
-            opacity: webfix ? 1 : 0.5,
-            overflowWrap: "anywhere",
-          }}
-        >
-          {rule.pattern}
-        </Typography>
-      </AccordionSummary>
-      <AccordionDetails>
-        {expanded && <WebfixFields rule={rule} webfix={webfix} />}
-      </AccordionDetails>
-    </Accordion>
-  );
-}
-
-export default function Webfix() {
-  const [loading, setLoading] = useState(false);
-  const [sites, setSites] = useState([]);
-  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);
-    setSites(sites);
-  }, []);
-
-  const handleSyncTest = async (e) => {
-    e.preventDefault();
-    try {
-      setLoading(true);
-      await syncWebfix(process.env.REACT_APP_WEBFIXURL);
-      await loadSites();
-      alert.success(i18n("sync_success"));
-    } catch (err) {
-      console.log("[sync webfix]", err);
-      alert.error(i18n("sync_failed"));
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    (async () => {
-      try {
-        setLoading(true);
-        await loadSites();
-      } catch (err) {
-        console.log("[load webfix]", err.message);
-      } finally {
-        setLoading(false);
-      }
-    })();
-  }, [loadSites]);
-
-  return (
-    <Box>
-      <Stack spacing={3}>
-        <Alert severity="info">{i18n("patch_setting_help")}</Alert>
-
-        <Stack
-          direction="row"
-          alignItems="center"
-          spacing={2}
-          useFlexGap
-          flexWrap="wrap"
-        >
-          <Button
-            size="small"
-            variant="contained"
-            disabled={showAdd}
-            onClick={(e) => {
-              e.preventDefault();
-              setShowAdd(true);
-            }}
-          >
-            {i18n("add")}
-          </Button>
-
-          <Button
-            size="small"
-            variant="outlined"
-            disabled={loading}
-            onClick={handleSyncTest}
-            startIcon={<SyncIcon />}
-          >
-            {i18n("sync_now")}
-          </Button>
-          <HelpButton url={URL_KISS_RULES_NEW_ISSUE} />
-          <FormControlLabel
-            control={
-              <Switch
-                size="small"
-                checked={!!setting.injectWebfix}
-                onChange={() => {
-                  updateSetting({
-                    injectWebfix: !setting.injectWebfix,
-                  });
-                }}
-              />
-            }
-            label={i18n("inject_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 ? (
-              <center>
-                <CircularProgress size={16} />
-              </center>
-            ) : (
-              sites.map((rule) => (
-                <WebfixAccordion key={rule.pattern} rule={rule} />
-              ))
-            )}
-          </Box>
-        )}
-      </Stack>
-    </Box>
-  );
-}
--- a/src/views/Options/index.js
+++ b/src/views/Options/index.js
@@ -18,7 +18,6 @@ import Stack from "@mui/material/Stack";
 import { adaptScript } from "../../libs/gm";
 import Alert from "@mui/material/Alert";
 import Apis from "./Apis";
-import Webfix from "./Webfix";
 import InputSetting from "./InputSetting";
 import Tranbox from "./Tranbox";
 import FavWords from "./FavWords";
@@ -41,7 +40,7 @@ export default function Options() {
              setError(
                `The version of the local script(v${version}) is not the latest version(v${process.env.REACT_APP_VERSION}). 本地脚本之版本(v${version})非最新版(v${process.env.REACT_APP_VERSION})。`
              );
-              break;
+              return;
            }

            if (eventName) {
@@ -49,9 +48,6 @@ export default function Options() {
              adaptScript(eventName);
            }

-            // 同步数据
-            await trySyncSettingAndRules();
-            setReady(true);
            break;
          }

@@ -59,16 +55,16 @@ export default function Options() {
            setError(
              "Time out. Please confirm whether to install or enable KISS Translator GreaseMonkey script? 连接超时，请检查是否安装或启用简约翻译油猴脚本。"
            );
-            break;
+            return;
          }

          await sleep(1000);
        }
-      } else {
-        // 同步数据
-        await trySyncSettingAndRules();
-        setReady(true);
      }
+
+      // 同步数据
+      await trySyncSettingAndRules();
+      setReady(true);
    })();
  }, []);

@@ -125,7 +121,6 @@ export default function Options() {
                <Route path="tranbox" element={<Tranbox />} />
                <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>
--- 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
@@ -5,7 +5,7 @@ import MenuItem from "@mui/material/MenuItem";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import Switch from "@mui/material/Switch";
 import Button from "@mui/material/Button";
-import { sendBgMsg, sendTabMsg, getTabInfo } from "../../libs/msg";
+import { sendBgMsg, sendTabMsg, getCurTab } from "../../libs/msg";
 import { browser } from "../../libs/browser";
 import { isExt } from "../../libs/client";
 import { useI18n } from "../../hooks/I18n";
@@ -18,19 +18,21 @@ import {
  MSG_TRANS_PUTRULE,
  MSG_OPEN_OPTIONS,
  MSG_SAVE_RULE,
+  MSG_COMMAND_SHORTCUTS,
  OPT_TRANS_ALL,
  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";
 import { tryClearCaches } from "../../libs";
+import { kissLog } from "../../libs/log";

 export default function Popup({ setShowPopup, translator: tran }) {
  const i18n = useI18n();
  const [rule, setRule] = useState(tran?.rule);
+  const [commands, setCommands] = useState({});

  const handleOpenSetting = () => {
    if (!tran) {
@@ -54,7 +56,7 @@ export default function Popup({ setShowPopup, translator: tran }) {
        sendIframeMsg(MSG_TRANS_TOGGLE);
      }
    } catch (err) {
-      console.log("[toggle trans]", err);
+      kissLog(err, "toggle trans");
    }
  };

@@ -70,7 +72,7 @@ export default function Popup({ setShowPopup, translator: tran }) {
        sendIframeMsg(MSG_TRANS_PUTRULE, { [name]: value });
      }
    } catch (err) {
-      console.log("[update rule]", err);
+      kissLog(err, "update rule");
    }
  };

@@ -82,17 +84,17 @@ export default function Popup({ setShowPopup, translator: tran }) {
    try {
      let href = window.location.href;
      if (!tran) {
-        const tab = await getTabInfo();
+        const tab = await getCurTab();
        href = tab.url;
      }
-      const newRule = { ...rule, pattern: href };
+      const newRule = { ...rule, pattern: href.split("/")[2] };
      if (isExt && tran) {
        sendBgMsg(MSG_SAVE_RULE, newRule);
      } else {
        saveRule(newRule);
      }
    } catch (err) {
-      console.log("[save rule]", err);
+      kissLog(err, "save rule");
    }
  };

@@ -107,7 +109,31 @@ export default function Popup({ setShowPopup, translator: tran }) {
          setRule(res.data);
        }
      } catch (err) {
-        console.log("[query rule]", err);
+        kissLog(err, "query rule");
+      }
+    })();
+  }, [tran]);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const commands = {};
+        if (isExt) {
+          const res = await sendBgMsg(MSG_COMMAND_SHORTCUTS);
+          res.forEach(({ name, shortcut }) => {
+            commands[name] = shortcut;
+          });
+        } else {
+          const shortcuts = tran.setting.shortcuts;
+          if (shortcuts) {
+            Object.entries(shortcuts).forEach(([key, val]) => {
+              commands[key] = val.join("+");
+            });
+          }
+        }
+        setCommands(commands);
+      } catch (err) {
+        kissLog(err, "query cmds");
      }
    })();
  }, [tran]);
@@ -130,7 +156,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}>
@@ -154,13 +180,12 @@ export default function Popup({ setShowPopup, translator: tran }) {
                onChange={handleTransToggle}
              />
            }
-            label={i18n("translate_alt")}
+            label={
+              commands["toggleTranslate"]
+                ? `${i18n("translate_alt")}(${commands["toggleTranslate"]})`
+                : i18n("translate_alt")
+            }
          />
-          {!isExt && (
-            <Button variant="text" onClick={handleClearCache}>
-              {i18n("clear_cache")}
-            </Button>
-          )}
        </Stack>

        <TextField
@@ -217,7 +242,11 @@ export default function Popup({ setShowPopup, translator: tran }) {
          size="small"
          value={textStyle}
          name="textStyle"
-          label={i18n("text_style_alt")}
+          label={
+            commands["toggleStyle"]
+              ? `${i18n("text_style_alt")}(${commands["toggleStyle"]})`
+              : i18n("text_style_alt")
+          }
          onChange={handleChange}
        >
          {OPT_STYLE_ALL.map((item) => (
@@ -227,7 +256,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 +264,7 @@ export default function Popup({ setShowPopup, translator: tran }) {
            label={i18n("bg_color")}
            onChange={handleChange}
          />
-        )}
+        )} */}

        <Stack
          direction="row"
@@ -246,6 +275,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/AudioBtn.js
+++ b/src/views/Selection/AudioBtn.js
@@ -0,0 +1,29 @@
+import IconButton from "@mui/material/IconButton";
+import VolumeUpIcon from "@mui/icons-material/VolumeUp";
+import { useTextAudio } from "../../hooks/Audio";
+
+export default function AudioBtn({ text, lan = "uk" }) {
+  const { error, ready, playing, onPlay } = useTextAudio(text, lan);
+
+  if (error || !ready) {
+    return (
+      <IconButton disabled>
+        <VolumeUpIcon />
+      </IconButton>
+    );
+  }
+
+  if (playing) {
+    return (
+      <IconButton color="primary">
+        <VolumeUpIcon />
+      </IconButton>
+    );
+  }
+
+  return (
+    <IconButton onClick={onPlay}>
+      <VolumeUpIcon />
+    </IconButton>
+  );
+}
--- a/src/views/Selection/CopyBtn.js
+++ b/src/views/Selection/CopyBtn.js
@@ -5,9 +5,9 @@ import { useState } from "react";

 export default function CopyBtn({ text }) {
  const [copied, setCopied] = useState(false);
-  const handleClick = (e) => {
+  const handleClick = async (e) => {
    e.stopPropagation();
-    navigator.clipboard.writeText(text);
+    await navigator.clipboard.writeText(text);
    setCopied(true);
    const timer = setTimeout(() => {
      clearTimeout(timer);
--- a/src/views/Selection/DictCont.js
+++ b/src/views/Selection/DictCont.js
@@ -1,15 +1,12 @@
 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";
+import AudioBtn from "./AudioBtn";

-const exchangeMap = {
-  word_third: "第三人称单数",
-  word_ing: "现在分词",
-  word_done: "过去式",
-  word_past: "过去分词",
-  word_pl: "复数",
-  word_proto: "词源",
+const phonicMap = {
+  en_phonic: ["英", "uk"],
+  us_phonic: ["美", "en"],
 };

 export default function DictCont({ dictResult }) {
@@ -24,41 +21,33 @@ export default function DictCont({ dictResult }) {
        justifyContent="space-between"
        alignItems="flex-start"
      >
-        <div style={{ fontWeight: "bold" }}>
-          {dictResult.simple_means?.word_name}
-        </div>
-        <FavBtn word={dictResult.simple_means?.word_name} />
+        <Typography variant="subtitle1" style={{ fontWeight: "bold" }}>
+          {dictResult.src}
+        </Typography>
+        <FavBtn word={dictResult.src} />
      </Stack>

-      {dictResult.simple_means?.symbols?.map(({ ph_en, ph_am, parts }, idx) => (
-        <div key={idx}>
-          {(ph_en || ph_am) && (
-            <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>
+      <Typography component="div">
+        <Stack direction="row">
+          {dictResult.voice
+            ?.map(Object.entries)
+            .map((item) => item[0])
+            .map(([key, val]) => (
+              <span>
+                <span>{`${phonicMap[key]?.[0] || key} ${val}`}</span>
+                <AudioBtn text={dictResult.src} lan={phonicMap[key]?.[1]} />
+              </span>
            ))}
-          </ul>
-        </div>
-      ))}
-
-      <div>
-        {Object.entries(dictResult.simple_means?.exchange || {})
-          .map(([key, val]) => `${exchangeMap[key] || key}: ${val.join(", ")}`)
-          .join("; ")}
-      </div>
-
-      <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>
+        <ul style={{ margin: "0.5em 0" }}>
+          {dictResult.content[0].mean.map(({ pre, cont }, idx) => (
+            <li key={idx}>
+              {pre && `[${pre}] `}
+              {Object.keys(cont).join("; ")}
+            </li>
          ))}
-      </Stack>
+        </ul>
+      </Typography>
    </Box>
  );
 }
--- a/src/views/Selection/DictContV2.js
+++ b/src/views/Selection/DictContV2.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>
  );
@@ -137,6 +148,7 @@ export default function DraggableResizable({
  },
  onChangeSize,
  onChangePosition,
+  ...props
 }) {
  const lineWidth = 4;
  const [position, setPosition] = useState(defaultPosition);
@@ -162,6 +174,7 @@ export default function DraggableResizable({
  return (
    <Box
      style={{
+        touchAction: "none",
        position: "fixed",
        left: position.x,
        top: position.y,
@@ -170,6 +183,7 @@ export default function DraggableResizable({
        gridTemplateRows: `${lineWidth * 2}px auto ${lineWidth * 2}px`,
        zIndex: 2147483647,
      }}
+      {...props}
    >
      <Pointer
        direction="TopLeft"
--- a/src/views/Selection/FavBtn.js
+++ b/src/views/Selection/FavBtn.js
@@ -3,6 +3,7 @@ import FavoriteIcon from "@mui/icons-material/Favorite";
 import FavoriteBorderIcon from "@mui/icons-material/FavoriteBorder";
 import { useState } from "react";
 import { useFavWords } from "../../hooks/FavWords";
+import { kissLog } from "../../libs/log";

 export default function FavBtn({ word }) {
  const { favWords, toggleFav } = useFavWords();
@@ -13,7 +14,7 @@ export default function FavBtn({ word }) {
      setLoading(true);
      await toggleFav(word);
    } catch (err) {
-      console.log("[set fav]", err);
+      kissLog(err, "set fav");
    } finally {
      setLoading(false);
    }
--- a/src/views/Selection/SugCont.js
+++ b/src/views/Selection/SugCont.js
@@ -0,0 +1,17 @@
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+
+export default function SugCont({ sugs }) {
+  return (
+    <Box>
+      {sugs.map(({ k, v }) => (
+        <Typography component="div" key={k}>
+          <Typography>{k}</Typography>
+          <ul style={{ margin: "0" }}>
+            <li>{v}</li>
+          </ul>
+        </Typography>
+      ))}
+    </Box>
+  );
+}
--- a/src/views/Selection/TranBox.js
+++ b/src/views/Selection/TranBox.js
@@ -24,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 (
@@ -95,22 +96,18 @@ function TranForm({ text, setText, tranboxSetting, transApis }) {

      <Box>
        <TextField
+          size="small"
          label={i18n("original_text")}
          inputRef={inputRef}
          fullWidth
          multiline
          value={editMode ? editText : text}
-          disabled={!editMode}
          onChange={(e) => {
            setEditText(e.target.value);
          }}
-          onClick={() => {
+          onFocus={() => {
            setEditMode(true);
            setEditText(text);
-            const timer = setTimeout(() => {
-              clearTimeout(timer);
-              inputRef.current?.focus();
-            }, 100);
          }}
          onBlur={() => {
            setEditMode(false);
@@ -149,6 +146,9 @@ function TranForm({ text, setText, tranboxSetting, transApis }) {
        translator={translator}
        fromLang={fromLang}
        toLang={toLang}
+        toLang2={toLang2}
+        setToLang={setToLang}
+        setToLang2={setToLang2}
        transApis={transApis}
      />
    </Stack>
@@ -175,6 +175,7 @@ export default function TranBox({
          header={<Header setShowPopup={setShowBox} />}
          onChangeSize={setBoxSize}
          onChangePosition={setBoxPosition}
+          onClick={(e) => e.stopPropagation()}
        >
          <Divider />
          <TranForm
--- 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
@@ -6,16 +6,20 @@ 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, apiBaiduSuggest } from "../../apis";
 import { isValidWord } from "../../libs/utils";
 import CopyBtn from "./CopyBtn";
 import DictCont from "./DictCont";
+import SugCont from "./SugCont";

 export default function TranCont({
  text,
  translator,
  fromLang,
  toLang,
+  toLang2 = "en",
+  setToLang,
+  setToLang2,
  transApis,
 }) {
  const i18n = useI18n();
@@ -23,6 +27,7 @@ export default function TranCont({
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const [dictResult, setDictResult] = useState(null);
+  const [sugs, setSugs] = useState([]);

  useEffect(() => {
    (async () => {
@@ -31,7 +36,19 @@ export default function TranCont({
        setTrText("");
        setError("");
        setDictResult(null);
+        setSugs([]);

+        // 互译
+        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({
@@ -46,7 +63,8 @@ export default function TranCont({
        // 词典
        if (isValidWord(text) && toLang.startsWith("zh")) {
          if (fromLang === "en" && translator === OPT_TRANS_BAIDU) {
-            setDictResult(tranRes[2].dict_result);
+            tranRes[2].type === 1 &&
+              setDictResult(JSON.parse(tranRes[2].result));
          } else {
            const dictRes = await apiTranslate({
              text,
@@ -54,21 +72,37 @@ export default function TranCont({
              fromLang: "en",
              toLang: "zh-CN",
            });
-            setDictResult(dictRes[2].dict_result);
+            dictRes[2].type === 1 &&
+              setDictResult(JSON.parse(dictRes[2].result));
          }
        }
+
+        // 建议
+        if (text.length < 20) {
+          setSugs(await apiBaiduSuggest(text));
+        }
      } catch (err) {
        setError(err.message);
      } finally {
        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
@@ -94,6 +128,7 @@ export default function TranCont({
      {loading && <CircularProgress size={24} />}
      {error && <Alert severity="error">{error}</Alert>}
      {dictResult && <DictCont dictResult={dictResult} />}
+      {sugs.length > 0 && <SugCont sugs={sugs} />}
    </>
  );
 }
--- a/src/views/Selection/index.js
+++ b/src/views/Selection/index.js
@@ -1,64 +1,148 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import TranBtn from "./TranBtn";
 import TranBox from "./TranBox";
 import { shortcutRegister } from "../../libs/shortcut";
-import { sleep } from "../../libs/utils";
+import { 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";
+import { kissLog } from "../../libs/log";
+
+export default function Slection({
+  contextMenuType,
+  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,
  });

-  async function handleMouseup(e) {
-    await sleep(10);
+  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 = [];
+      contextMenuType !== 0 &&
+        menuCommandIds.push(
+          GM.registerMenuCommand(
+            "Translate Selected Text",
+            (event) => {
+              handleTranbox();
+            },
+            "S"
+          )
+        );
+
+      return () => {
+        menuCommandIds.forEach((id) => {
+          GM.unregisterMenuCommand(id);
+        });
+      };
+    } catch (err) {
+      kissLog(err, "registerMenuCommand");
+    }
+  }, [handleTranbox, contextMenuType]);
+
+  useEffect(() => {
+    if (tranboxSetting.hideClickAway) {
+      const handleHideBox = () => {
+        setShowBox(false);
+      };
+      window.addEventListener("click", handleHideBox);
+      return () => {
+        window.removeEventListener("click", handleHideBox);
+      };
+    }
+  }, [tranboxSetting.hideClickAway]);

  return (
    <>
Author	SHA1	Message	Date
Gabe Yuan	2f5d875c47	v1.8.5	2024-04-02 17:01:34 +08:00
Gabe Yuan	fdb2ddc5f7	fix: rules	2024-04-01 12:35:54 +08:00
Gabe Yuan	7a12c5315a	feat: close tranbox when click away	2024-04-01 12:25:59 +08:00
Gabe Yuan	60d788288d	feat: add more custom apis	2024-04-01 11:50:29 +08:00
Gabe Yuan	dc3c510d57	fix: update observer callback	2024-03-27 14:24:41 +08:00
Gabe Yuan	ec6a49f01e	fix: update readme	2024-03-26 17:50:56 +08:00
Gabe Yuan	2b9bfbc20d	feat: csp list	2024-03-26 12:42:39 +08:00
Gabe Yuan	06a51df834	feat: csp list	2024-03-26 12:05:35 +08:00
Gabe Yuan	6fa183dc56	feat: csp list	2024-03-26 12:00:09 +08:00
Gabe Yuan	b3cb4049ed	fix: tranbox input onfocus	2024-03-25 22:46:02 +08:00
Gabe Yuan	602b51b1f5	fix: dict audio	2024-03-25 21:00:39 +08:00
Gabe Yuan	a83039577c	feat: word pronunciation supported	2024-03-25 18:14:12 +08:00
Gabe Yuan	1c77a289a6	fix: upgrade dependencies	2024-03-21 23:19:15 +08:00
Gabe Yuan	6278b9124d	v1.8.4	2024-03-21 16:15:45 +08:00
Gabe Yuan	f94cafdbcc	fix: i18n text	2024-03-21 16:12:38 +08:00
Gabe Yuan	e13da2caba	fix: i18n text	2024-03-21 16:07:56 +08:00
Gabe Yuan	d833fa8dfd	fix: build cmd	2024-03-21 15:48:54 +08:00
Gabe Yuan	c921cc59b9	feat: add pack cmd	2024-03-21 15:38:28 +08:00
Gabe Yuan	7a2c594324	fix: setting ui	2024-03-21 15:21:38 +08:00
Gabe Yuan	0eeb9c2fbf	feat: move fetch setting to apis	2024-03-21 15:07:50 +08:00
Gabe Yuan	ac921cd5a0	feat: move fixer to rules	2024-03-21 11:40:47 +08:00
Gabe Yuan	3ea14c1687	fix: webfix	2024-03-21 10:15:23 +08:00
Gabe Yuan	6e927473b9	feat: add log function	2024-03-19 18:07:18 +08:00
Gabe Yuan	1d9e9c1b7d	fix: change runtime.onMessage to async fn	2024-03-19 17:28:07 +08:00
Gabe Yuan	54a6189b0c	fix: sendResponse ok	2024-03-19 15:37:23 +08:00
Gabe Yuan	85aa9f39c2	fix: add timeout for fetch	2024-03-19 14:27:26 +08:00
Gabe Yuan	bda83ce76e	fix: add timeout for fetch	2024-03-19 14:25:37 +08:00
Gabe Yuan	9ee4c20250	fix: sync rules	2024-03-19 14:08:23 +08:00
Gabe Yuan	fbc70e43e3	feat: add baidu suggest	2024-03-19 11:48:30 +08:00
Gabe Yuan	bc4b4a2171	fix: i118n text	2024-03-19 10:52:32 +08:00
Gabe Yuan	96f9bf6f6f	fix: replace default transtag to span	2024-03-19 10:00:00 +08:00
Gabe Yuan	9f0986536a	feat: wrap trems by <i> tag	2024-03-19 09:55:56 +08:00
Gabe Yuan	f668aa7acd	fix: hide transbox	2024-03-18 17:55:32 +08:00
Gabe Yuan	fc50f4784a	fix: hide transbox	2024-03-18 17:52:13 +08:00
Gabe Yuan	1fa58cad31	fix: rules	2024-03-18 11:02:33 +08:00
Gabe Yuan	469e62557c	fix: icon & text	2024-03-18 10:48:38 +08:00
Gabe Yuan	75830aaea7	feat: add translate interval setting	2024-03-17 12:09:32 +08:00
Gabe Yuan	61ef5df559	fix: rules	2024-03-17 11:35:43 +08:00
Gabe Yuan	14b5ba9c4c	feat: move settings to rule	2024-03-16 23:37:27 +08:00
Gabe Yuan	9e9c56a3b4	fix: inject js/css	2024-03-15 17:38:24 +08:00
Gabe Yuan	3a79f55614	fix: update rules	2024-03-15 16:59:53 +08:00
Gabe Yuan	af25ee5c11	fix: showMore	2024-03-15 16:19:08 +08:00
Gabe Yuan	6dd581d5e2	fix: default trans tag	2024-03-15 16:00:20 +08:00
Gabe Yuan	746ec019c4	fix: inject js/css	2024-03-15 15:47:57 +08:00
Gabe Yuan	2b70f28b0b	fix: help text	2024-03-15 10:47:35 +08:00
Gabe Yuan	45127646e8	fix: inject js/css	2024-03-15 10:35:30 +08:00
Gabe Yuan	83e9c1dd97	feat: inject user js/css	2024-03-14 18:08:02 +08:00
Gabe Yuan	2eabb7d5ac	feat: inject user js/css	2024-03-14 18:06:28 +08:00
Gabe Yuan	9d4c596b4b	fix: getCurTab	2024-03-14 16:28:32 +08:00
Gabe Yuan	cc38ab6c45	fix: styledSpan & transOnly	2024-03-14 16:26:17 +08:00
Gabe Yuan	586fa09c7b	fix: clean content.html	2024-03-14 11:54:34 +08:00
Gabe Yuan	0c45bc5ea8	fix: clean comment code	2024-03-14 11:50:31 +08:00
Gabe Yuan	9d9c0633f0	feat: transTag && transOnly	2024-03-13 16:35:40 +08:00
Gabe Yuan	47f9635b10	v1.8.3	2024-02-26 16:42:36 +08:00
Gabe Yuan	68088f5e17	fix: remove excess line breaks	2024-02-26 16:35:29 +08:00
Gabe Yuan	77a37cc6df	fix: remove excess line breaks	2024-02-26 16:34:53 +08:00
Gabe Yuan	420e59bf81	fix: translate text	2024-02-22 22:57:34 +08:00
Gabe Yuan	dbc5135301	fix: update default blacklist	2024-02-22 17:44:17 +08:00
Gabe Yuan	8c7d6bb552	fix: remove postMessage from iframe	2024-02-22 17:26:22 +08:00
Gabe Yuan	2b5c1952c0	fix: update default blacklist	2024-02-22 11:45:41 +08:00
Gabe Yuan	85a82618e5	fix: contextMenus text	2024-02-21 17:01:11 +08:00
Gabe Yuan	0280ac34c3	fix: dict voice not exist	2024-02-21 15:47:14 +08:00
Gabe Yuan	439900154b	fix: dict voice not exist	2024-02-21 15:41:27 +08:00
Gabe Yuan	4a6e902684	fix: update readme	2024-02-06 10:22:56 +08:00
Gabe Yuan	71bbd2e54a	v1.8.1	2024-02-06 10:09:33 +08:00
Gabe Yuan	3083d8e147	feat: context menu type	2024-02-05 11:28:34 +08:00
Gabe Yuan	e74883e9c2	fix: contextMenus: duplicate id err	2024-02-05 10:51:42 +08:00
Gabe Yuan	0816a9d167	fix: add BLOCKQUOTE to webfix	2024-02-05 10:02:30 +08:00
Gabe Yuan	4b3e91fa84	v1.8.1	2024-02-02 15:45:33 +08:00
Gabe Yuan	0973a0b60e	fix: some js syntax	2024-02-02 15:44:44 +08:00
Gabe Yuan	de5f61126d	fix: terms hepler text	2024-02-02 12:35:56 +08:00
Gabe Yuan	0c20ca761f	fix: update toggle_translate CN text	2024-02-02 12:22:08 +08:00
Gabe Yuan	4bce56207e	fix: optimize terms function	2024-02-02 12:10:27 +08:00
Gabe Yuan	dca54e0033	feat: setting: translate page title	2024-02-02 11:20:39 +08:00
Gabe Yuan	309646bf1d	feat: setting: translate page title	2024-02-02 11:13:41 +08:00
Gabe Yuan	18b9961b39	fix: try add context menux on startup	2024-02-02 10:49:15 +08:00
Gabe Yuan	1e51ff17f2	v1.8.0	2024-01-22 13:19:37 +08:00
Gabe Yuan	63b5f707e2	fix: update ui when shortcut changed	2024-01-22 13:11:02 +08:00
Gabe Yuan	30efb6ee7a	fix: title translate	2024-01-19 21:03:51 +08:00
Gabe Yuan	61b017618a	feat: supported translation all when page opened	2024-01-19 17:55:18 +08:00
Gabe Yuan	1e0397adc9	feat: translate page title	2024-01-19 17:18:05 +08:00
Gabe Yuan	48b34bf95f	fix: save new rule with hostname	2024-01-19 16:13:46 +08:00
Gabe Yuan	d5fc69e210	feat: support custom terms	2024-01-19 16:02:53 +08:00
Gabe Yuan	59f9dd697f	fix: update baidu translate api	2024-01-18 15:26:37 +08:00
Gabe Yuan	c9d72323f1	keep selector support for sub-element	2024-01-12 16:04:34 +08:00
Gabe Yuan	e87f7f3abe	fix: help text	2024-01-12 09:42:49 +08:00
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