v1.8.8

feat: tranbox offset
fix: move taskpool from background to content
2024-04-21 19:25:00 +08:00 · 2024-04-21 19:19:06 +08:00 · 2024-04-21 13:16:44 +08:00 · 2024-04-20 18:07:16 +08:00 · 2024-04-20 15:54:41 +08:00 · 2024-04-20 15:12:25 +08:00
44 changed files with 2001 additions and 1246 deletions
--- a/.env
+++ b/.env
@@ -2,26 +2,18 @@ GENERATE_SOURCEMAP=false

 REACT_APP_NAME=KISS Translator
 REACT_APP_NAME_CN=简约翻译
-REACT_APP_VERSION=1.8.4
+REACT_APP_VERSION=1.8.8

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

 REACT_APP_OPTIONSPAGE=https://fishjar.github.io/kiss-translator/options.html
-REACT_APP_OPTIONSPAGE2=https://kiss-translator.rayjar.com/options
 REACT_APP_OPTIONSPAGE_DEV=http://localhost:3000/options.html

 REACT_APP_LOGOURL=https://fishjar.github.io/kiss-translator/images/logo192.png
-REACT_APP_LOGOURL2=https://kiss-translator.rayjar.com/images/logo192.png

 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_VERSIONFILE=https://fishjar.github.io/kiss-translator/version.txt
-REACT_APP_VERSIONFILE2=https://kiss-translator.rayjar.com/version.txt
-
 REACT_APP_USERSCRIPT_DOWNLOADURL=https://fishjar.github.io/kiss-translator/kiss-translator.user.js
-REACT_APP_USERSCRIPT_DOWNLOADURL2=https://kiss-translator.rayjar.com/kiss-translator.user.js
-
 REACT_APP_USERSCRIPT_IOS_DOWNLOADURL=https://fishjar.github.io/kiss-translator/kiss-translator-ios-safari.user.js
-REACT_APP_USERSCRIPT_IOS_DOWNLOADURL2=https://kiss-translator.rayjar.com/kiss-translator-ios-safari.user.js
--- a/README.en.md
+++ b/README.en.md
@@ -9,10 +9,10 @@ A simple, open source [bilingual translation extension & Greasemonkey script](ht
 - [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/Gemini/CloudflareAI/Baidu/Tencent
+  - [x] Google/Microsoft/DeepL/NiuTrans/OpenAI/Gemini/CloudflareAI/Baidu/Tencent
  - [x] Custom translation interface
 - [x] Covers common translation scenarios
  - [x] Web bilingual translation
@@ -44,13 +44,15 @@ A simple, open source [bilingual translation extension & Greasemonkey script](ht
 > - Grease Monkey script will encounter more usage problems (cross domain issues, script conflicts, etc.)

 - [x] Browser extension
-  - [x] Chrome/Kiwi [Installation address](https://chrome.google.com/webstore/detail/kiss-translator/bdiifdefkgmcblbcghdlonllpjhhjgof?hl=zh-CN)
+  - [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
--- a/README.md
+++ b/README.md
@@ -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/Gemini/CloudflareAI/Baidu/Tencent
+  - [x] Google/Microsoft/DeepL/NiuTrans/OpenAI/Gemini/CloudflareAI/Baidu/Tencent
  - [x] 自定义翻译接口
 - [x] 覆盖常见翻译场景
  - [x] 网页双语对照翻译
@@ -44,13 +44,15 @@
 > - 油猴脚本会遇到更多使用上的问题（跨域问题、脚本冲突等）

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

 ## 关联项目
--- a/package.json
+++ b/package.json
@@ -1,20 +1,21 @@
 {
  "name": "kiss-translator",
  "description": "A minimalist bilingual translation Extension & Greasemonkey Script",
-  "version": "1.8.4",
+  "version": "1.8.8",
  "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.15.15",
+    "@mui/lab": "5.0.0-alpha.170",
+    "@mui/material": "^5.15.15",
    "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"
@@ -58,10 +59,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/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.8.4",
+  "version": "1.8.8",
  "default_locale": "en",
  "author": "Gabe<yugang2002@gmail.com>",
  "homepage_url": "https://github.com/fishjar/kiss-translator",
@@ -44,7 +44,13 @@
      "description": "__MSG_open_options__"
    }
  },
-  "permissions": ["<all_urls>", "storage", "contextMenus", "scripting"],
+  "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.8.4",
+  "version": "1.8.8",
  "default_locale": "en",
  "author": "Gabe<yugang2002@gmail.com>",
  "homepage_url": "https://github.com/fishjar/kiss-translator",
@@ -45,7 +45,12 @@
      "description": "__MSG_open_options__"
    }
  },
-  "permissions": ["storage", "contextMenus", "scripting"],
+  "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,242 +1,5 @@
 import queryString from "query-string";
-import { getBdauth, setBdauth } from "../libs/storage";
-import {
-  URL_BAIDU_WEB,
-  URL_BAIDU_TRANSAPI_V2,
-  URL_BAIDU_TRANSAPI,
-} from "../config";
-import { fetchApi } from "../libs/fetch";
-
-/* eslint-disable */
-function n(t, e) {
-  for (var n = 0; n < e.length - 2; n += 3) {
-    var r = e.charAt(n + 2);
-    (r = "a" <= r ? r.charCodeAt(0) - 87 : Number(r)),
-      (r = "+" === e.charAt(n + 1) ? t >>> r : t << r),
-      (t = "+" === e.charAt(n) ? (t + r) & 4294967295 : t ^ r);
-  }
-  return t;
-}
-
-function e(t, e) {
-  (null == e || e > t.length) && (e = t.length);
-  for (var n = 0, r = new Array(e); n < e; n++) r[n] = t[n];
-  return r;
-}
-
-/* eslint-disable */
-function getSign(t, gtk, r = null) {
-  var o,
-    i = t.match(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g);
-  if (null === i) {
-    var a = t.length;
-    a > 30 &&
-      (t = ""
-        .concat(t.substr(0, 10))
-        .concat(t.substr(Math.floor(a / 2) - 5, 10))
-        .concat(t.substr(-10, 10)));
-  } else {
-    for (
-      var s = t.split(/[\uD800-\uDBFF][\uDC00-\uDFFF]/),
-        c = 0,
-        u = s.length,
-        l = [];
-      c < u;
-      c++
-    )
-      "" !== s[c] &&
-        l.push.apply(
-          l,
-          (function (t) {
-            if (Array.isArray(t)) return e(t);
-          })((o = s[c].split(""))) ||
-            (function (t) {
-              if (
-                ("undefined" != typeof Symbol && null != t[Symbol.iterator]) ||
-                null != t["@@iterator"]
-              )
-                return Array.from(t);
-            })(o) ||
-            (function (t, n) {
-              if (t) {
-                if ("string" == typeof t) return e(t, n);
-                var r = Object.prototype.toString.call(t).slice(8, -1);
-                return (
-                  "Object" === r && t.constructor && (r = t.constructor.name),
-                  "Map" === r || "Set" === r
-                    ? Array.from(t)
-                    : "Arguments" === r ||
-                      /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)
-                    ? e(t, n)
-                    : void 0
-                );
-              }
-            })(o) ||
-            (function () {
-              throw new TypeError(
-                "Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."
-              );
-            })()
-        ),
-        c !== u - 1 && l.push(i[c]);
-    var p = l.length;
-    p > 30 &&
-      (t =
-        l.slice(0, 10).join("") +
-        l.slice(Math.floor(p / 2) - 5, Math.floor(p / 2) + 5).join("") +
-        l.slice(-10).join(""));
-  }
-  for (
-    var d = ""
-        .concat(String.fromCharCode(103))
-        .concat(String.fromCharCode(116))
-        .concat(String.fromCharCode(107)),
-      h = (null !== r ? r : (r = gtk || "") || "").split("."),
-      f = Number(h[0]) || 0,
-      m = Number(h[1]) || 0,
-      g = [],
-      y = 0,
-      v = 0;
-    v < t.length;
-    v++
-  ) {
-    var _ = t.charCodeAt(v);
-    _ < 128
-      ? (g[y++] = _)
-      : (_ < 2048
-          ? (g[y++] = (_ >> 6) | 192)
-          : (55296 == (64512 & _) &&
-            v + 1 < t.length &&
-            56320 == (64512 & t.charCodeAt(v + 1))
-              ? ((_ = 65536 + ((1023 & _) << 10) + (1023 & t.charCodeAt(++v))),
-                (g[y++] = (_ >> 18) | 240),
-                (g[y++] = ((_ >> 12) & 63) | 128))
-              : (g[y++] = (_ >> 12) | 224),
-            (g[y++] = ((_ >> 6) & 63) | 128)),
-        (g[y++] = (63 & _) | 128));
-  }
-  for (
-    var b = f,
-      w =
-        ""
-          .concat(String.fromCharCode(43))
-          .concat(String.fromCharCode(45))
-          .concat(String.fromCharCode(97)) +
-        ""
-          .concat(String.fromCharCode(94))
-          .concat(String.fromCharCode(43))
-          .concat(String.fromCharCode(54)),
-      k =
-        ""
-          .concat(String.fromCharCode(43))
-          .concat(String.fromCharCode(45))
-          .concat(String.fromCharCode(51)) +
-        ""
-          .concat(String.fromCharCode(94))
-          .concat(String.fromCharCode(43))
-          .concat(String.fromCharCode(98)) +
-        ""
-          .concat(String.fromCharCode(43))
-          .concat(String.fromCharCode(45))
-          .concat(String.fromCharCode(102)),
-      x = 0;
-    x < g.length;
-    x++
-  )
-    b = n((b += g[x]), w);
-  return (
-    (b = n(b, k)),
-    (b ^= m) < 0 && (b = 2147483648 + (2147483647 & b)),
-    "".concat((b %= 1e6).toString(), ".").concat(b ^ f)
-  );
-}
-
-const getToken = async () => {
-  const res = await fetchApi({
-    input: URL_BAIDU_WEB,
-    init: {
-      headers: {
-        "Content-type": "text/html; charset=utf-8",
-      },
-    },
-  });
-
-  if (!res.ok) {
-    throw new Error(res.statusText);
-  }
-
-  const text = await res.text();
-  const token = text.match(/token: '(.*)',/)[1];
-  const gtk = text.match(/gtk = "(.*)";/)[1];
-  const exp = Date.now() + 8 * 60 * 60 * 1000;
-
-  if (!token || !gtk) {
-    throw new Error("[baidu] get token error");
-  }
-
-  return { token, gtk, exp };
-};
-
-/**
- * 闭包缓存token，减少对storage查询
- * @returns
- */
-const _bdAuth = () => {
-  let store;
-
-  return async () => {
-    const now = Date.now();
-
-    // 查询内存缓存
-    if (store && store.exp > now) {
-      return store;
-    }
-
-    // 查询storage缓存
-    store = await getBdauth();
-    if (store && store.exp > now) {
-      return store;
-    }
-
-    // 缓存没有或失效，查询接口
-    store = await getToken();
-    await setBdauth(store);
-    return store;
-  };
-};
-
-const bdAuth = _bdAuth();
-
-/**
- * 失效作废
- * @param {*} param0
- * @returns
- */
-export const genBaiduV2 = async ({ text, from, to }) => {
-  const { token, gtk } = await bdAuth();
-  const sign = getSign(text, gtk);
-  const data = {
-    from,
-    to,
-    query: text,
-    simple_means_flag: 3,
-    sign,
-    token,
-    domain: "common",
-    ts: Date.now(),
-  };
-
-  const input = `${URL_BAIDU_TRANSAPI_V2}?from=${from}&to=${to}`;
-  const init = {
-    headers: {
-      "content-type": "application/x-www-form-urlencoded; charset=UTF-8",
-    },
-    method: "POST",
-    body: queryString.stringify(data),
-  };
-
-  return [input, init];
-};
+import { URL_BAIDU_TRANSAPI, DEFAULT_USER_AGENT } from "../config";

 export const genBaidu = async ({ text, from, to }) => {
  const data = {
@@ -248,7 +11,9 @@ export const genBaidu = async ({ text, from, to }) => {

  const init = {
    headers: {
+      // Origin: "https://fanyi.baidu.com",
      "content-type": "application/x-www-form-urlencoded; charset=UTF-8",
+      "User-Agent": DEFAULT_USER_AGENT,
    },
    method: "POST",
    body: queryString.stringify(data),
--- a/src/apis/index.js
+++ b/src/apis/index.js
@@ -1,21 +1,27 @@
 import queryString from "query-string";
-import { fetchPolyfill } from "../libs/fetch";
+import { fetchData } from "../libs/fetch";
 import {
  OPT_TRANS_GOOGLE,
  OPT_TRANS_MICROSOFT,
  OPT_TRANS_DEEPL,
  OPT_TRANS_DEEPLFREE,
  OPT_TRANS_DEEPLX,
+  OPT_TRANS_NIUTRANS,
  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,
  URL_CACHE_TRAN,
  KV_SALT_SYNC,
  URL_BAIDU_LANGDETECT,
  URL_BAIDU_SUGGEST,
+  URL_BAIDU_TTS,
  OPT_LANGS_BAIDU,
  URL_TENCENT_TRANSMART,
  OPT_LANGS_TENCENT,
@@ -31,7 +37,7 @@ import { sha256 } from "../libs/utils";
 * @returns
 */
 export const apiSyncData = async (url, key, data) =>
-  fetchPolyfill(url, {
+  fetchData(url, {
    headers: {
      "Content-type": "application/json",
      Authorization: `Bearer ${await sha256(key, KV_SALT_SYNC)}`,
@@ -45,7 +51,7 @@ export const apiSyncData = async (url, key, data) =>
 * @param {*} url
 * @returns
 */
-export const apiFetch = (url) => fetchPolyfill(url);
+export const apiFetch = (url) => fetchData(url);

 /**
 * 百度语言识别
@@ -53,7 +59,7 @@ export const apiFetch = (url) => fetchPolyfill(url);
 * @returns
 */
 export const apiBaiduLangdetect = async (text) => {
-  const res = await fetchPolyfill(URL_BAIDU_LANGDETECT, {
+  const res = await fetchData(URL_BAIDU_LANGDETECT, {
    headers: {
      "Content-type": "application/json",
    },
@@ -77,7 +83,7 @@ export const apiBaiduLangdetect = async (text) => {
 * @returns
 */
 export const apiBaiduSuggest = async (text) => {
-  const res = await fetchPolyfill(URL_BAIDU_SUGGEST, {
+  const res = await fetchData(URL_BAIDU_SUGGEST, {
    headers: {
      "Content-type": "application/json",
    },
@@ -95,6 +101,20 @@ export const apiBaiduSuggest = async (text) => {
  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 fetchData(url, {
+    useCache: false, // 为避免缓存过快增长，禁用缓存语音数据
+  });
+};
+
 /**
 * 腾讯语言识别
 * @param {*} text
@@ -108,7 +128,7 @@ export const apiTencentLangdetect = async (text) => {
    text,
  });

-  const res = await fetchPolyfill(URL_TENCENT_TRANSMART, {
+  const res = await fetchData(URL_TENCENT_TRANSMART, {
    headers: {
      "Content-type": "application/json",
    },
@@ -167,7 +187,7 @@ export const apiTranslate = async ({
    to,
  };

-  const res = await fetchPolyfill(
+  const res = await fetchData(
    `${URL_CACHE_TRAN}?${queryString.stringify(cacheOpts)}`,
    {
      useCache,
@@ -200,6 +220,14 @@ export const apiTranslate = async ({
      trText = res.data;
      isSame = to === res.source_lang;
      break;
+    case OPT_TRANS_NIUTRANS:
+      const json = JSON.parse(res);
+      if (json.error_msg) {
+        throw new Error(json.error_msg);
+      }
+      trText = json.tgt_text;
+      isSame = to === json.from;
+      break;
    case OPT_TRANS_BAIDU:
      // trText = res.trans_result?.data.map((item) => item.dst).join(" ");
      // isSame = res.trans_result?.to === res.trans_result?.from;
@@ -230,8 +258,31 @@ export const apiTranslate = async ({
      isSame = text === trText;
      break;
    case OPT_TRANS_CUSTOMIZE:
+    case OPT_TRANS_CUSTOMIZE_2:
+    case OPT_TRANS_CUSTOMIZE_3:
+    case OPT_TRANS_CUSTOMIZE_4:
+    case OPT_TRANS_CUSTOMIZE_5:
      trText = res.text;
      isSame = to === res.from;
+
+      const { customOption } = apiSetting;
+      if (customOption?.trim()) {
+        try {
+          const opt = JSON.parse(customOption);
+          const textPattern = opt.resPattern?.text;
+          const fromPattern = opt.resPattern?.from;
+          if (textPattern) {
+            trText = textPattern.split(".").reduce((pre, cur) => pre[cur], res);
+          }
+          if (fromPattern) {
+            isSame =
+              to === fromPattern.split(".").reduce((pre, cur) => pre[cur], res);
+          }
+        } catch (err) {
+          throw new Error(`custom option parse err: ${err}`);
+        }
+      }
+
      break;
    default:
  }
--- a/src/apis/trans.js
+++ b/src/apis/trans.js
@@ -5,26 +5,34 @@ import {
  OPT_TRANS_DEEPL,
  OPT_TRANS_DEEPLFREE,
  OPT_TRANS_DEEPLX,
+  OPT_TRANS_NIUTRANS,
  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,
  URL_MICROSOFT_TRAN,
  URL_TENCENT_TRANSMART,
-  PROMPT_PLACE_FROM,
-  PROMPT_PLACE_TO,
-  PROMPT_PLACE_TEXT,
+  INPUT_PLACE_URL,
+  INPUT_PLACE_FROM,
+  INPUT_PLACE_TO,
+  INPUT_PLACE_TEXT,
+  INPUT_PLACE_KEY,
 } from "../config";
-import { msAuth } from "./auth";
-import { genDeeplFree } from "../apis/deepl";
-import { genBaidu } from "../apis/baidu";
+import { msAuth } from "../libs/auth";
+import { genDeeplFree } from "./deepl";
+import { genBaidu } from "./baidu";

 const keyMap = new Map();
+const urlMap = new Map();

-// 轮询key
-const keyPick = (translator, key = "") => {
+// 轮询key/url
+const keyPick = (translator, key = "", cacheMap) => {
  const keys = key
    .split(/\n|,/)
    .map((item) => item.trim())
@@ -34,30 +42,13 @@ const keyPick = (translator, key = "") => {
    return "";
  }

-  const preIndex = keyMap.get(translator) ?? -1;
+  const preIndex = cacheMap.get(translator) ?? -1;
  const curIndex = (preIndex + 1) % keys.length;
-  keyMap.set(translator, curIndex);
+  cacheMap.set(translator, curIndex);

  return keys[curIndex];
 };

-/**
- * 构造缓存 request
- * @param {*} request
- * @returns
- */
-export const newCacheReq = async (input, init) => {
-  let request = new Request(input, init);
-  if (request.method !== "GET") {
-    const body = await request.text();
-    const cacheUrl = new URL(request.url);
-    cacheUrl.pathname += body;
-    request = new Request(cacheUrl.toString(), { method: "GET" });
-  }
-
-  return request;
-};
-
 const genGoogle = ({ text, from, to, url, key }) => {
  const params = {
    client: "gtx",
@@ -141,6 +132,27 @@ const genDeeplX = ({ text, from, to, url, key }) => {
  return [url, init];
 };

+const genNiuTrans = ({ text, from, to, url, key, dictNo, memoryNo }) => {
+  const data = {
+    from,
+    to,
+    apikey: key,
+    src_text: text,
+    dictNo,
+    memoryNo,
+  };
+
+  const init = {
+    headers: {
+      "Content-type": "application/json",
+    },
+    method: "POST",
+    body: JSON.stringify(data),
+  };
+
+  return [url, init];
+};
+
 const genTencent = ({ text, from, to }) => {
  const data = {
    header: {
@@ -168,8 +180,8 @@ const genTencent = ({ text, from, to }) => {

 const genOpenAI = ({ text, from, to, url, key, prompt, model }) => {
  prompt = prompt
-    .replaceAll(PROMPT_PLACE_FROM, from)
-    .replaceAll(PROMPT_PLACE_TO, to);
+    .replaceAll(INPUT_PLACE_FROM, from)
+    .replaceAll(INPUT_PLACE_TO, to);

  const data = {
    model,
@@ -202,9 +214,9 @@ const genOpenAI = ({ text, from, to, url, key, prompt, model }) => {

 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);
+    .replaceAll(INPUT_PLACE_FROM, from)
+    .replaceAll(INPUT_PLACE_TO, to)
+    .replaceAll(INPUT_PLACE_TEXT, text);

  const data = {
    contents: [
@@ -250,7 +262,14 @@ const genCloudflareAI = ({ text, from, to, url, key }) => {
  return [url, init];
 };

-const genCustom = ({ text, from, to, url, key }) => {
+const genCustom = ({ text, from, to, url, key, customOption }) => {
+  const replaceInput = (str) =>
+    str
+      .replaceAll(INPUT_PLACE_URL, url)
+      .replaceAll(INPUT_PLACE_FROM, from)
+      .replaceAll(INPUT_PLACE_TO, to)
+      .replaceAll(INPUT_PLACE_TEXT, text.replaceAll(`"`, `\n`))
+      .replaceAll(INPUT_PLACE_KEY, key);
  const data = {
    text,
    from,
@@ -266,16 +285,33 @@ const genCustom = ({ text, from, to, url, key }) => {
  if (key) {
    init.headers.Authorization = `Bearer ${key}`;
  }
+  url = replaceInput(url);
+
+  if (customOption?.trim()) {
+    try {
+      const opt = JSON.parse(replaceInput(customOption));
+      opt.url && (url = opt.url);
+      opt.headers && (init.headers = opt.headers);
+      opt.method && (init.method = opt.method);
+      if (init.method === "GET") {
+        delete init.body;
+      } else {
+        opt.body && (init.body = JSON.stringify(opt.body));
+      }
+    } catch (err) {
+      throw new Error(`custom option parse err: ${err}`);
+    }
+  }

  return [url, init];
 };

 /**
- * 构造翻译接口 request
+ * 构造翻译接口请求参数
 * @param {*}
 * @returns
 */
-export const newTransReq = ({ translator, text, from, to }, apiSetting) => {
+export const genTransReq = ({ translator, text, from, to }, apiSetting) => {
  const args = { text, from, to, ...apiSetting };

  switch (translator) {
@@ -283,7 +319,11 @@ export const newTransReq = ({ translator, text, from, to }, apiSetting) => {
    case OPT_TRANS_OPENAI:
    case OPT_TRANS_GEMINI:
    case OPT_TRANS_CLOUDFLAREAI:
-      args.key = keyPick(translator, args.key);
+    case OPT_TRANS_NIUTRANS:
+      args.key = keyPick(translator, args.key, keyMap);
+      break;
+    case OPT_TRANS_DEEPLX:
+      args.url = keyPick(translator, args.url, urlMap);
      break;
    default:
  }
@@ -299,6 +339,8 @@ export const newTransReq = ({ translator, text, from, to }, apiSetting) => {
      return genDeeplFree(args);
    case OPT_TRANS_DEEPLX:
      return genDeeplX(args);
+    case OPT_TRANS_NIUTRANS:
+      return genNiuTrans(args);
    case OPT_TRANS_BAIDU:
      return genBaidu(args);
    case OPT_TRANS_TENCENT:
@@ -310,6 +352,10 @@ export const newTransReq = ({ translator, text, from, to }, apiSetting) => {
    case OPT_TRANS_CLOUDFLAREAI:
      return genCloudflareAI(args);
    case OPT_TRANS_CUSTOMIZE:
+    case OPT_TRANS_CUSTOMIZE_2:
+    case OPT_TRANS_CUSTOMIZE_3:
+    case OPT_TRANS_CUSTOMIZE_4:
+    case OPT_TRANS_CUSTOMIZE_5:
      return genCustom(args);
    default:
      throw new Error(`[trans] translator: ${translator} not support`);
--- a/src/background.js
+++ b/src/background.js
@@ -1,8 +1,7 @@
 import browser from "webextension-polyfill";
 import {
  MSG_FETCH,
-  MSG_FETCH_LIMIT,
-  MSG_FETCH_CLEAR,
+  MSG_GET_HTTPCACHE,
  MSG_TRANS_TOGGLE,
  MSG_OPEN_OPTIONS,
  MSG_SAVE_RULE,
@@ -12,6 +11,8 @@ import {
  MSG_COMMAND_SHORTCUTS,
  MSG_INJECT_JS,
  MSG_INJECT_CSS,
+  MSG_UPDATE_CSP,
+  DEFAULT_CSPLIST,
  CMD_TOGGLE_TRANSLATE,
  CMD_TOGGLE_STYLE,
  CMD_OPEN_OPTIONS,
@@ -19,16 +20,24 @@ import {
 } from "./config";
 import { getSettingWithDefault, tryInitDefaultData } from "./libs/storage";
 import { trySyncSettingAndRules } from "./libs/sync";
-import { fetchData, fetchPool } from "./libs/fetch";
+import { fetchHandle, getHttpCache } from "./libs/fetch";
 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`,
+];
+
 /**
 * 添加右键菜单
 */
@@ -79,6 +88,41 @@ async function addContextMenus(contextMenuType = 1) {
  }
 }

+/**
+ * 更新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");
+  }
+}
+
 /**
 * 插件安装
 */
@@ -87,6 +131,9 @@ browser.runtime.onInstalled.addListener(() => {

  // 右键菜单
  addContextMenus();
+
+  // 禁用CSP
+  updateCspRules();
 });

 /**
@@ -96,7 +143,7 @@ browser.runtime.onStartup.addListener(async () => {
  // 同步数据
  await trySyncSettingAndRules();

-  const { clearCache, contextMenuType, subrulesList } =
+  const { clearCache, contextMenuType, subrulesList, csplist } =
    await getSettingWithDefault();

  // 清除缓存
@@ -108,6 +155,9 @@ browser.runtime.onStartup.addListener(async () => {
  // firefox重启后菜单会消失,故重复添加
  addContextMenus(contextMenuType);

+  // 禁用CSP
+  updateCspRules(csplist);
+
  // 同步订阅规则
  trySyncAllSubRules({ subrulesList });
 });
@@ -118,13 +168,10 @@ browser.runtime.onStartup.addListener(async () => {
 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();
+      return await fetchHandle(args);
+    case MSG_GET_HTTPCACHE:
+      const { input, init } = args;
+      return await getHttpCache(input, init);
    case MSG_OPEN_OPTIONS:
      return await browser.runtime.openOptionsPage();
    case MSG_SAVE_RULE:
@@ -143,8 +190,10 @@ browser.runtime.onMessage.addListener(async ({ action, args }) => {
        args: [args],
        world: "MAIN",
      });
+    case MSG_UPDATE_CSP:
+      return await updateCspRules(args);
    case MSG_CONTEXT_MENUS:
-      return await addContextMenus(args.contextMenuType);
+      return await addContextMenus(args);
    case MSG_COMMAND_SHORTCUTS:
      return await browser.commands.getAll();
    default:
--- a/src/common.js
+++ b/src/common.js
@@ -139,6 +139,8 @@ function showTransbox({
  contextMenuType,
  tranboxSetting = DEFAULT_TRANBOX_SETTING,
  transApis,
+  darkMode,
+  uiLang,
 }) {
  if (!tranboxSetting?.transOpen) {
    return;
@@ -153,6 +155,8 @@ function showTransbox({
  const shadowContainer = $tranbox.attachShadow({ mode: "closed" });
  const emotionRoot = document.createElement("style");
  const shadowRootElement = document.createElement("div");
+  shadowRootElement.classList.add(`KT-transbox`);
+  shadowRootElement.classList.add(`KT-transbox_${darkMode ? "dark" : "light"}`);
  shadowContainer.appendChild(emotionRoot);
  shadowContainer.appendChild(shadowRootElement);
  const cache = createCache({
@@ -167,6 +171,7 @@ function showTransbox({
          contextMenuType={contextMenuType}
          tranboxSetting={tranboxSetting}
          transApis={transApis}
+          uiLang={uiLang}
        />
      </CacheProvider>
    </React.StrictMode>
@@ -213,8 +218,7 @@ export async function run(isUserscript = false) {
    if (
      isUserscript &&
      (href.includes(process.env.REACT_APP_OPTIONSPAGE_DEV) ||
-        href.includes(process.env.REACT_APP_OPTIONSPAGE) ||
-        href.includes(process.env.REACT_APP_OPTIONSPAGE2))
+        href.includes(process.env.REACT_APP_OPTIONSPAGE))
    ) {
      runSettingPage();
      return;
--- a/src/config/i18n.js
+++ b/src/config/i18n.js
@@ -42,24 +42,28 @@ const customApiLangs = `["en", "English - English"],
 ["vi", "Vietnamese - Tiếng Việt"],
 `;

-const customApiHelpZH = `/// 自定义翻译源接口说明
-
-// 请求（Request）数据将按下面规范发送
-{
-  url: {{YOUR_URL}},
-  method: "POST",
-  headers: {
+const customDefaultOption = `{
+  "url": "{{url}}",
+  "method": "POST",
+  "headers": {
    "Content-type": "application/json",
-    "Authorization": "Bearer {{YOUR_KEY}}",
+    "Authorization": "Bearer {{key}}"
  },
-  body: {
-    text: "", // 需要翻译的文字
-    from: "", // 源语言，可能为空，表示需要接口自动识别语言
-    to: "",   // 目标语言
+  "body": {
+    "text": "{{text}}",
+    "from": "{{from}}",
+    "to": "{{to}}"
+  },
+  "resPattern": {
+    "text": "text",
+    "from": "from"
  }
-}
+}`;

-// 返回（Response）数据需符合下面的JSON规范
+const customApiHelpZH = `// 自定义选项范例
+${customDefaultOption}
+
+// 返回数据默认格式
 {
  text: "", // 翻译后的文字
  from: "", // 识别的源语言
@@ -70,24 +74,10 @@ const customApiHelpZH = `/// 自定义翻译源接口说明
 ${customApiLangs}
 `;

-const customApiHelpEN = `/// Custom translation source interface description
+const customApiHelpEN = `// Example of custom options
+${customDefaultOption}

-// Request data will be sent according to the following specifications
-{
-  url: {{YOUR_URL}},
-  method: "POST",
-  headers: {
-    "Content-type": "application/json",
-    "Authorization": "Bearer {{YOUR_KEY}}",
-  },
-  body: {
-    text: "", // text to be translated
-    from: "", // Source language, may be empty
-    to: "",   // Target language
-  }
-}
-
-// The returned data must conform to the following JSON specification
+// Return data default format
 {
  text: "", // translated text
  from: "", // Recognized source language
@@ -463,6 +453,10 @@ export const I18N = {
    zh: `导出`,
    en: `Export`,
  },
+  export_translation: {
+    zh: `导出释义`,
+    en: `Export Translation`,
+  },
  error_cant_be_blank: {
    zh: `不能为空`,
    en: `Can not be blank`,
@@ -623,6 +617,14 @@ export const I18N = {
    zh: `隐藏翻译按钮`,
    en: `Hide Translate Button`,
  },
+  hide_click_away: {
+    zh: `点击外部关闭弹窗`,
+    en: `Click outside to close the pop-up window`,
+  },
+  use_simple_style: {
+    zh: `使用简洁界面`,
+    en: `Click outside to close the pop-up window`,
+  },
  show: {
    zh: `显示`,
    en: `Show`,
@@ -708,12 +710,20 @@ export const I18N = {
    en: `Open Translate Popup/Translate Selected Shortcut`,
  },
  tranbtn_offset_x: {
-    zh: `翻译按钮偏移X（0-100）`,
-    en: `Translate Button Offset X (0-100)`,
+    zh: `翻译按钮偏移X（±200）`,
+    en: `Translate Button Offset X (±200)`,
  },
  tranbtn_offset_y: {
-    zh: `翻译按钮偏移Y（0-100）`,
-    en: `Translate Button Offset Y (0-100)`,
+    zh: `翻译按钮偏移Y（±200）`,
+    en: `Translate Button Offset Y (±200)`,
+  },
+  tranbox_offset_x: {
+    zh: `翻译框偏移X（±200）`,
+    en: `Translate Box Offset X (±200)`,
+  },
+  tranbox_offset_y: {
+    zh: `翻译框偏移Y（±200）`,
+    en: `Translate Box Offset Y (±200)`,
  },
  translated_text: {
    zh: `译文`,
@@ -755,6 +765,14 @@ export const I18N = {
    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`,
@@ -780,8 +798,8 @@ export const I18N = {
    en: `Secondary Context Menus`,
  },
  mulkeys_help: {
-    zh: `支持用换行或英文逗号“,”分隔多个KEY轮询调用。`,
-    en: `Supports multiple KEY polling calls separated by newlines or English commas ",".`,
+    zh: `支持用换行或英文逗号“,”分隔，轮询调用。`,
+    en: `Supports polling calls separated by newlines or English commas ",".`,
  },
  translation_element_tag: {
    zh: `译文元素标签`,
@@ -807,4 +825,52 @@ export const I18N = {
    zh: `网页修复选择器`,
    en: `Fixer Selector`,
  },
+  reg_niutrans: {
+    zh: `获取小牛翻译密钥【简约翻译专属新用户注册赠送300万字符】`,
+    en: `Get NiuTrans APIKey [KISS Translator Exclusive New User Registration Free 3 Million Characters]`,
+  },
+  trigger_mode: {
+    zh: `触发方式`,
+    en: `Trigger Mode`,
+  },
+  trigger_click: {
+    zh: `点击触发`,
+    en: `Click Trigger`,
+  },
+  trigger_hover: {
+    zh: `鼠标悬停触发`,
+    en: `Hover Trigger`,
+  },
+  trigger_select: {
+    zh: `选中触发`,
+    en: `Select Trigger`,
+  },
+  extend_styles: {
+    zh: `附加样式`,
+    en: `Extend Styles`,
+  },
+  custom_option: {
+    zh: `自定义选项`,
+    en: `Custom Option`,
+  },
+  translate_selected_text: {
+    zh: `翻译选中文字`,
+    en: `Translate Selected Text`,
+  },
+  toggle_style: {
+    zh: `切换样式`,
+    en: `Toggle Style`,
+  },
+  open_menu: {
+    zh: `打开弹窗菜单`,
+    en: `Open Popup Menu`,
+  },
+  open_setting: {
+    zh: `打开设置`,
+    en: `Open Setting`,
+  },
+  follow_selection: {
+    zh: `翻译框跟随选中文本`,
+    en: `Transbox Follow Selection`,
+  },
 };
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -51,8 +51,7 @@ export const KV_SALT_SHARE = "KISS-Translator-SHARE";
 export const CACHE_NAME = `${APP_NAME}_cache`;

 export const MSG_FETCH = "fetch";
-export const MSG_FETCH_LIMIT = "fetch_limit";
-export const MSG_FETCH_CLEAR = "fetch_clear";
+export const MSG_GET_HTTPCACHE = "get_httpcache";
 export const MSG_OPEN_OPTIONS = "open_options";
 export const MSG_SAVE_RULE = "save_rule";
 export const MSG_TRANS_TOGGLE = "trans_toggle";
@@ -65,6 +64,7 @@ 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";
@@ -83,23 +83,34 @@ export const URL_MICROSOFT_TRAN =
 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_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";
+export const URL_NIUTRANS_REG =
+  "https://niutrans.com/login?active=3&userSource=kiss-translator";
+
+export const DEFAULT_USER_AGENT =
+  "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36";

 export const OPT_TRANS_GOOGLE = "Google";
 export const OPT_TRANS_MICROSOFT = "Microsoft";
 export const OPT_TRANS_DEEPL = "DeepL";
 export const OPT_TRANS_DEEPLX = "DeepLX";
 export const OPT_TRANS_DEEPLFREE = "DeepLFree";
+export const OPT_TRANS_NIUTRANS = "NiuTrans";
 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,
@@ -108,10 +119,15 @@ export const OPT_TRANS_ALL = [
  OPT_TRANS_DEEPL,
  OPT_TRANS_DEEPLFREE,
  OPT_TRANS_DEEPLX,
+  OPT_TRANS_NIUTRANS,
  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 = [
@@ -180,6 +196,12 @@ export const OPT_LANGS_SPECIAL = {
    ["zh-CN", "ZH"],
    ["zh-TW", "ZH"],
  ]),
+  [OPT_TRANS_NIUTRANS]: new Map([
+    ...OPT_LANGS_FROM.map(([key]) => [key, key]),
+    ["auto", "auto"],
+    ["zh-CN", "zh"],
+    ["zh-TW", "cht"],
+  ]),
  [OPT_TRANS_BAIDU]: new Map([
    ...OPT_LANGS_FROM.map(([key]) => [key, key]),
    ["zh-CN", "zh"],
@@ -253,6 +275,22 @@ export const OPT_LANGS_SPECIAL = {
    ...OPT_LANGS_FROM.map(([key]) => [key, key]),
    ["auto", ""],
  ]),
+  [OPT_TRANS_CUSTOMIZE_2]: new Map([
+    ...OPT_LANGS_FROM.map(([key]) => [key, key]),
+    ["auto", ""],
+  ]),
+  [OPT_TRANS_CUSTOMIZE_3]: new Map([
+    ...OPT_LANGS_FROM.map(([key]) => [key, key]),
+    ["auto", ""],
+  ]),
+  [OPT_TRANS_CUSTOMIZE_4]: new Map([
+    ...OPT_LANGS_FROM.map(([key]) => [key, key]),
+    ["auto", ""],
+  ]),
+  [OPT_TRANS_CUSTOMIZE_5]: new Map([
+    ...OPT_LANGS_FROM.map(([key]) => [key, key]),
+    ["auto", ""],
+  ]),
 };
 export const OPT_LANGS_LIST = OPT_LANGS_TO.map(([lang]) => lang);
 export const OPT_LANGS_BAIDU = new Map(
@@ -316,9 +354,11 @@ export const OPT_TIMING_ALL = [
 export const DEFAULT_FETCH_LIMIT = 10; // 默认最大任务数量
 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 INPUT_PLACE_URL = "{{url}}"; // 占位符
+export const INPUT_PLACE_FROM = "{{from}}"; // 占位符
+export const INPUT_PLACE_TO = "{{to}}"; // 占位符
+export const INPUT_PLACE_TEXT = "{{text}}"; // 占位符
+export const INPUT_PLACE_KEY = "{{key}}"; // 占位符

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

@@ -368,6 +408,18 @@ export const DEFAULT_INPUT_RULE = {
 };

 // 划词翻译
+export const PHONIC_MAP = {
+  en_phonic: ["英", "uk"],
+  us_phonic: ["美", "en"],
+};
+export const OPT_TRANBOX_TRIGGER_CLICK = "click";
+export const OPT_TRANBOX_TRIGGER_HOVER = "hover";
+export const OPT_TRANBOX_TRIGGER_SELECT = "select";
+export const OPT_TRANBOX_TRIGGER_ALL = [
+  OPT_TRANBOX_TRIGGER_CLICK,
+  OPT_TRANBOX_TRIGGER_HOVER,
+  OPT_TRANBOX_TRIGGER_SELECT,
+];
 export const DEFAULT_TRANBOX_SHORTCUT = ["AltLeft", "KeyS"];
 export const DEFAULT_TRANBOX_SETTING = {
  transOpen: true,
@@ -378,7 +430,14 @@ export const DEFAULT_TRANBOX_SETTING = {
  tranboxShortcut: DEFAULT_TRANBOX_SHORTCUT,
  btnOffsetX: 10,
  btnOffsetY: 10,
-  hideTranBtn: false,
+  boxOffsetX: 0,
+  boxOffsetY: 10,
+  hideTranBtn: false, // 是否隐藏翻译按钮
+  hideClickAway: false, // 是否点击外部关闭弹窗
+  simpleStyle: false, // 是否简洁界面
+  followSelection: false, // 翻译框是否跟随选中文本
+  triggerMode: OPT_TRANBOX_TRIGGER_CLICK, // 触发翻译方式
+  extStyles: "", // 附加样式
 };

 // 订阅列表
@@ -398,6 +457,13 @@ export const DEFAULT_SUBRULES_LIST = [
 ];

 // 翻译接口
+const defaultCustomApi = {
+  url: "",
+  key: "",
+  customOption: "",
+  fetchLimit: DEFAULT_FETCH_LIMIT,
+  fetchInterval: DEFAULT_FETCH_INTERVAL,
+};
 export const DEFAULT_TRANS_APIS = {
  [OPT_TRANS_GOOGLE]: {
    url: "https://translate.googleapis.com/translate_a/single",
@@ -433,11 +499,19 @@ export const DEFAULT_TRANS_APIS = {
    fetchLimit: 1,
    fetchInterval: 500,
  },
+  [OPT_TRANS_NIUTRANS]: {
+    url: "https://api.niutrans.com/NiuTransServer/translation",
+    key: "",
+    dictNo: "",
+    memoryNo: "",
+    fetchLimit: DEFAULT_FETCH_LIMIT,
+    fetchInterval: DEFAULT_FETCH_INTERVAL,
+  },
  [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}.`,
+    prompt: `You will be provided with a sentence in ${INPUT_PLACE_FROM}, and your task is to translate it into ${INPUT_PLACE_TO}.`,
    fetchLimit: 1,
    fetchInterval: 500,
  },
@@ -445,7 +519,7 @@ export const DEFAULT_TRANS_APIS = {
    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}`,
+    prompt: `Translate the following text from ${INPUT_PLACE_FROM} to ${INPUT_PLACE_TO}:\n\n${INPUT_PLACE_TEXT}`,
    fetchLimit: 1,
    fetchInterval: 500,
  },
@@ -455,12 +529,11 @@ export const DEFAULT_TRANS_APIS = {
    fetchLimit: 1,
    fetchInterval: 500,
  },
-  [OPT_TRANS_CUSTOMIZE]: {
-    url: "",
-    key: "",
-    fetchLimit: DEFAULT_FETCH_LIMIT,
-    fetchInterval: DEFAULT_FETCH_INTERVAL,
-  },
+  [OPT_TRANS_CUSTOMIZE]: defaultCustomApi,
+  [OPT_TRANS_CUSTOMIZE_2]: defaultCustomApi,
+  [OPT_TRANS_CUSTOMIZE_3]: defaultCustomApi,
+  [OPT_TRANS_CUSTOMIZE_4]: defaultCustomApi,
+  [OPT_TRANS_CUSTOMIZE_5]: defaultCustomApi,
 };

 // 默认快捷键
@@ -485,6 +558,7 @@ export const DEFAULT_BLACKLIST = [
  "oapi.dingtalk.com",
  "login.dingtalk.com",
 ]; // 禁用翻译名单
+export const DEFAULT_CSPLIST = ["https://github.com"]; // 禁用CSP名单

 export const DEFAULT_SETTING = {
  darkMode: false, // 深色模式
@@ -512,6 +586,7 @@ export const DEFAULT_SETTING = {
  tranboxSetting: DEFAULT_TRANBOX_SETTING, // 划词翻译设置
  touchTranslate: 2, // 触屏翻译
  blacklist: DEFAULT_BLACKLIST.join(",\n"), // 禁用翻译名单
+  csplist: DEFAULT_CSPLIST.join(",\n"), // 禁用CSP名单
  // disableLangs: [], // 不翻译的语言(移至rule，作废)
  transInterval: 500, // 翻译间隔时间
 };
--- a/src/config/rules.js
+++ b/src/config/rules.js
@@ -4,8 +4,8 @@ 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)`;
-export const DEFAULT_KEEP_SELECTOR = `code, img, svg`;
+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: "", // 选择器
--- a/src/hooks/Api.js
+++ b/src/hooks/Api.js
@@ -8,7 +8,10 @@ export function useApi(translator) {

  const updateApi = useCallback(
    async (obj) => {
-      const api = transApis[translator] || {};
+      const api = {
+        ...DEFAULT_TRANS_APIS[translator],
+        ...(transApis[translator] || {}),
+      };
      Object.assign(transApis, { [translator]: { ...api, ...obj } });
      await updateSetting({ transApis });
    },
@@ -20,5 +23,12 @@ export function useApi(translator) {
    await updateSetting({ transApis });
  }, [translator, transApis, updateSetting]);

-  return { api: transApis[translator] || {}, updateApi, resetApi };
+  return {
+    api: {
+      ...DEFAULT_TRANS_APIS[translator],
+      ...(transApis[translator] || {}),
+    },
+    updateApi,
+    resetApi,
+  };
 }
--- 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/I18n.js
+++ b/src/hooks/I18n.js
@@ -2,6 +2,14 @@ import { useSetting } from "./Setting";
 import { I18N, URL_RAW_PREFIX } from "../config";
 import { useFetch } from "./Fetch";

+export const getI18n = (uiLang, key, defaultText = "") => {
+  return I18N?.[key]?.[uiLang] ?? defaultText;
+};
+
+export const useLangMap = (uiLang) => {
+  return (key, defaultText = "") => getI18n(uiLang, key, defaultText);
+};
+
 /**
 * 多语言 hook
 * @returns
@@ -10,7 +18,7 @@ export const useI18n = () => {
  const {
    setting: { uiLang },
  } = useSetting();
-  return (key, defaultText = "") => I18N?.[key]?.[uiLang] ?? defaultText;
+  return useLangMap(uiLang);
 };

 export const useI18nMd = (key) => {
--- a/src/hooks/Theme.js
+++ b/src/hooks/Theme.js
@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
-import CssBaseline from "@mui/material/CssBaseline";
+import { CssBaseline, GlobalStyles } from "@mui/material";
 import { useDarkMode } from "./ColorMode";
 import { THEME_DARK, THEME_LIGHT } from "../config";

@@ -9,7 +9,7 @@ import { THEME_DARK, THEME_LIGHT } from "../config";
 * @param {*} param0
 * @returns
 */
-export default function Theme({ children, options }) {
+export default function Theme({ children, options, styles }) {
  const { darkMode } = useDarkMode();
  const theme = useMemo(() => {
    let htmlFontSize = 16;
@@ -38,6 +38,7 @@ export default function Theme({ children, options }) {
    <ThemeProvider theme={theme}>
      {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
      <CssBaseline />
+      <GlobalStyles styles={styles} />
      {children}
    </ThemeProvider>
  );
--- a/src/hooks/Translate.js
+++ b/src/hooks/Translate.js
@@ -39,8 +39,10 @@ export function useTranslate(q, rule, setting) {
            text: q,
            fromLang,
            toLang,
-            apiSetting:
-              setting.transApis?.[translator] || DEFAULT_TRANS_APIS[translator],
+            apiSetting: {
+              ...DEFAULT_TRANS_APIS[translator],
+              ...(setting.transApis[translator] || {}),
+            },
          });
          setText(trText);
          setSamelang(isSame);
--- a/src/index.js
+++ b/src/index.js
@@ -36,19 +36,10 @@ function App() {
        <Link href={process.env.REACT_APP_USERSCRIPT_DOWNLOADURL}>
          Install/Update Userscript for Tampermonkey/Violentmonkey
        </Link>
-        {/* <Link href={process.env.REACT_APP_USERSCRIPT_DOWNLOADURL2}>
-          Install/Update Userscript for Tampermonkey/Violentmonkey 2
-        </Link> */}
        <Link href={process.env.REACT_APP_USERSCRIPT_IOS_DOWNLOADURL}>
          Install/Update Userscript for iOS Safari
        </Link>
-        {/* <Link href={process.env.REACT_APP_USERSCRIPT_IOS_DOWNLOADURL2}>
-          Install/Update Userscript for iOS Safari 2
-        </Link> */}
        <Link href={process.env.REACT_APP_OPTIONSPAGE}>Open Options Page</Link>
-        {/* <Link href={process.env.REACT_APP_OPTIONSPAGE2}>
-          Open Options Page 2
-        </Link> */}
      </Stack>

      {loading ? (
--- a/src/libs/auth.js
+++ b/src/libs/auth.js
@@ -1,6 +1,6 @@
 import { getMsauth, setMsauth } from "./storage";
 import { URL_MICROSOFT_AUTH } from "../config";
-import { fetchData } from "./fetch";
+import { fetchHandle } from "./fetch";
 import { kissLog } from "./log";

 const parseMSToken = (token) => {
@@ -35,7 +35,7 @@ const _msAuth = () => {
    }

    // 缓存没有或失效，查询接口
-    token = await fetchData(URL_MICROSOFT_AUTH);
+    token = await fetchHandle({ input: URL_MICROSOFT_AUTH });
    exp = parseMSToken(token);
    await setMsauth({ token, exp });
    return [token, exp];
--- a/src/libs/fetch.js
+++ b/src/libs/fetch.js
@@ -3,18 +3,36 @@ import { sendBgMsg } from "./msg";
 import { taskPool } from "./pool";
 import {
  MSG_FETCH,
-  MSG_FETCH_LIMIT,
-  MSG_FETCH_CLEAR,
+  MSG_GET_HTTPCACHE,
  CACHE_NAME,
  DEFAULT_FETCH_INTERVAL,
  DEFAULT_FETCH_LIMIT,
 } from "../config";
 import { isBg } from "./browser";
-import { newCacheReq, newTransReq } from "./req";
+import { genTransReq } from "../apis/trans";
 import { kissLog } from "./log";
+import { blobToBase64 } from "./utils";

 const TIMEOUT = 5000;

+/**
+ * 构造缓存 request
+ * @param {*} input
+ * @param {*} init
+ * @returns
+ */
+const newCacheReq = async (input, init) => {
+  let request = new Request(input, init);
+  if (request.method !== "GET") {
+    const body = await request.text();
+    const cacheUrl = new URL(request.url);
+    cacheUrl.pathname += body;
+    request = new Request(cacheUrl.toString(), { method: "GET" });
+  }
+
+  return request;
+};
+
 /**
 * 油猴脚本的请求封装
 * @param {*} input
@@ -30,7 +48,7 @@ export const fetchGM = async (input, { method = "GET", headers, body } = {}) =>
      data: body,
      // withCredentials: true,
      timeout: TIMEOUT,
-      onload: ({ response, responseHeaders, status, statusText, ...opts }) => {
+      onload: ({ response, responseHeaders, status, statusText }) => {
        const headers = {};
        responseHeaders.split("\n").forEach((line) => {
          const [name, value] = line.split(":").map((item) => item.trim());
@@ -54,9 +72,9 @@ export const fetchGM = async (input, { method = "GET", headers, body } = {}) =>
 * @param {*} param0
 * @returns
 */
-export const fetchApi = async ({ input, init, transOpts, apiSetting }) => {
+export const fetchPatcher = async (input, init, transOpts, apiSetting) => {
  if (transOpts?.translator) {
-    [input, init] = await newTransReq(transOpts, apiSetting);
+    [input, init] = await genTransReq(transOpts, apiSetting);
  }

  if (!input) {
@@ -97,94 +115,162 @@ export const fetchApi = async ({ input, init, transOpts, apiSetting }) => {
  return fetch(input, init);
 };

+/**
+ * 解析 response
+ * @param {*} res
+ * @returns
+ */
+const parseResponse = async (res) => {
+  if (!res) {
+    return null;
+  }
+
+  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();
+};
+
+/**
+ * 查询 caches
+ * @param {*} input
+ * @param {*} param1
+ * @returns
+ */
+export const getHttpCache = async (input, { method, headers, body }) => {
+  try {
+    const req = await newCacheReq(input, { method, headers, body });
+    const cache = await caches.open(CACHE_NAME);
+    const res = await cache.match(req);
+    return parseResponse(res);
+  } catch (err) {
+    kissLog(err, "get cache");
+  }
+  return null;
+};
+
+/**
+ * 插入 caches
+ * @param {*} input
+ * @param {*} param1
+ * @param {*} res
+ */
+export const putHttpCache = async (input, { method, headers, body }, res) => {
+  try {
+    const req = await newCacheReq(input, { method, headers, body });
+    const cache = await caches.open(CACHE_NAME);
+    await cache.put(req, res);
+  } catch (err) {
+    kissLog(err, "put cache");
+  }
+};
+
+/**
+ * 处理请求
+ * @param {*} param0
+ * @returns
+ */
+export const fetchHandle = async ({
+  input,
+  useCache,
+  transOpts,
+  apiSetting,
+  ...init
+}) => {
+  // 发送请求
+  const res = await fetchPatcher(input, init, transOpts, apiSetting);
+  if (!res) {
+    throw new Error("Unknow error");
+  } else if (!res.ok) {
+    const msg = {
+      url: res.url,
+      status: res.status,
+    };
+    if (res.headers.get("Content-Type")?.includes("json")) {
+      msg.response = await res.json();
+    }
+    throw new Error(JSON.stringify(msg));
+  }
+
+  // 插入缓存
+  if (useCache) {
+    await putHttpCache(input, init, res.clone());
+  }
+
+  return parseResponse(res);
+};
+
+/**
+ * fetch 兼容性封装
+ * @param {*} args
+ * @returns
+ */
+export const fetchPolyfill = (args) => {
+  // 插件
+  if (isExt && !isBg()) {
+    return sendBgMsg(MSG_FETCH, args);
+  }
+
+  // 油猴/网页/BackgroundPage
+  return fetchHandle(args);
+};
+
+/**
+ * getHttpCache 兼容性封装
+ * @param {*} input
+ * @param {*} init
+ * @returns
+ */
+export const getHttpCachePolyfill = (input, init) => {
+  // 插件
+  if (isExt && !isBg()) {
+    return sendBgMsg(MSG_GET_HTTPCACHE, { input, init });
+  }
+
+  // 油猴/网页/BackgroundPage
+  return getHttpCache(input, init);
+};
+
 /**
 * 请求池实例
 */
 export const fetchPool = taskPool(
-  fetchApi,
+  fetchPolyfill,
  null,
  DEFAULT_FETCH_INTERVAL,
  DEFAULT_FETCH_LIMIT
 );

 /**
- * 请求数据统一接口
+ * 数据请求
 * @param {*} input
- * @param {*} opts
+ * @param {*} param1
 * @returns
 */
-export const fetchData = async (
-  input,
-  { useCache, usePool, transOpts, apiSetting, ...init } = {}
-) => {
-  const cacheReq = await newCacheReq(input, init);
-  let res;
-
-  // 查询缓存
-  if (useCache) {
-    try {
-      const cache = await caches.open(CACHE_NAME);
-      res = await cache.match(cacheReq);
-    } catch (err) {
-      kissLog(err, "cache match");
-    }
-  }
-
-  if (!res) {
-    // 发送请求
-    if (usePool) {
-      res = await fetchPool.push({ input, init, transOpts, apiSetting });
-    } else {
-      res = await fetchApi({ input, init, transOpts, apiSetting });
-    }
-
-    if (!res?.ok) {
-      const msg = {
-        url: input,
-        status: res.status,
-      };
-      if (res.headers.get("Content-Type")?.includes("json")) {
-        msg.response = await res.json();
-      }
-      throw new Error(JSON.stringify(msg));
-    }
-
-    // 插入缓存
-    if (useCache) {
-      try {
-        const cache = await caches.open(CACHE_NAME);
-        await cache.put(cacheReq, res.clone());
-      } catch (err) {
-        kissLog(err, "cache put");
-      }
-    }
-  }
-
-  const contentType = res.headers.get("Content-Type");
-  if (contentType?.includes("json")) {
-    return await res.json();
-  }
-  return await res.text();
-};
-
-/**
- * fetch 兼容性封装
- * @param {*} input
- * @param {*} opts
- * @returns
- */
-export const fetchPolyfill = async (input, opts) => {
+export const fetchData = async (input, { useCache, usePool, ...args } = {}) => {
  if (!input?.trim()) {
    throw new Error("URL is empty");
  }

-  // 插件
-  if (isExt && !isBg()) {
-    return await sendBgMsg(MSG_FETCH, { input, opts });
+  // 查询缓存
+  if (useCache) {
+    const cache = await getHttpCachePolyfill(input, args);
+    if (cache) {
+      return cache;
+    }
  }

-  // 油猴/网页/BackgroundPage
-  return await fetchData(input, opts);
+  // 通过任务池发送请求
+  if (usePool) {
+    return fetchPool.push({ input, useCache, ...args });
+  }
+
+  // 直接请求
+  return fetchPolyfill({ input, useCache, ...args });
 };

 /**
@@ -192,21 +278,13 @@ export const fetchPolyfill = async (input, opts) => {
 * @param {*} interval
 * @param {*} limit
 */
-export const updateFetchPool = async (interval, limit) => {
-  if (isExt) {
-    await sendBgMsg(MSG_FETCH_LIMIT, { interval, limit });
-  } else {
-    fetchPool.update(interval, limit);
-  }
+export const updateFetchPool = (interval, limit) => {
+  fetchPool.update(interval, limit);
 };

 /**
 * 清空任务池
 */
-export const clearFetchPool = async () => {
-  if (isExt) {
-    await sendBgMsg(MSG_FETCH_CLEAR);
-  } else {
-    fetchPool.clear();
-  }
+export const clearFetchPool = () => {
+  fetchPool.clear();
 };
--- a/src/libs/sync.js
+++ b/src/libs/sync.js
@@ -20,13 +20,14 @@ import {
 import { apiSyncData } from "../apis";
 import { sha256, removeEndchar } from "./utils";
 import { createClient, getPatcher } from "webdav";
-import { fetchApi } from "./fetch";
+import { fetchPatcher } from "./fetch";
 import { kissLog } from "./log";

 getPatcher().patch("request", (opts) => {
-  return fetchApi({
-    input: opts.url,
-    init: { method: opts.method, headers: opts.headers, body: opts.data },
+  return fetchPatcher(opts.url, {
+    method: opts.method,
+    headers: opts.headers,
+    body: opts.data,
  });
 });

--- a/src/libs/translator.js
+++ b/src/libs/translator.js
@@ -58,11 +58,11 @@ export class Translator {

  // 显示
  _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);
        }
      });
    },
--- a/src/libs/utils.js
+++ b/src/libs/utils.js
@@ -202,26 +202,20 @@ export const removeEndchar = (s, c, count = 1) => {
 * @returns
 */
 export const matchInputStr = (str, sign) => {
-  let reg = /\/([\w-]+)\s+([^]+)/;
  switch (sign) {
    case "//":
-      reg = /\/\/([\w-]+)\s+([^]+)/;
-      break;
+      return str.match(/\/\/([\w-]+)\s+([^]+)/);
    case "\\":
-      reg = /\\([\w-]+)\s+([^]+)/;
-      break;
+      return str.match(/\\([\w-]+)\s+([^]+)/);
    case "\\\\":
-      reg = /\\\\([\w-]+)\s+([^]+)/;
-      break;
+      return str.match(/\\\\([\w-]+)\s+([^]+)/);
    case ">":
-      reg = />([\w-]+)\s+([^]+)/;
-      break;
+      return str.match(/>([\w-]+)\s+([^]+)/);
    case ">>":
-      reg = />>([\w-]+)\s+([^]+)/;
-      break;
+      return str.match(/>>([\w-]+)\s+([^]+)/);
    default:
  }
-  return str.match(reg);
+  return str.match(/\/([\w-]+)\s+([^]+)/);
 };

 /**
@@ -233,3 +227,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/views/Action/index.js
+++ b/src/views/Action/index.js
@@ -22,6 +22,7 @@ import {
 import { shortcutRegister } from "../../libs/shortcut";
 import { sendIframeMsg } from "../../libs/iframe";
 import { kissLog } from "../../libs/log";
+import { getI18n } from "../../hooks/I18n";

 export default function Action({ translator, fab }) {
  const fabWidth = 40;
@@ -96,11 +97,11 @@ export default function Action({ translator, fab }) {
    // 注册菜单
    try {
      const menuCommandIds = [];
-      const { contextMenuType } = translator.setting;
+      const { contextMenuType, uiLang } = translator.setting;
      contextMenuType !== 0 &&
        menuCommandIds.push(
          GM.registerMenuCommand(
-            "Toggle Translate",
+            getI18n(uiLang, "translate_switch"),
            (event) => {
              translator.toggle();
              sendIframeMsg(MSG_TRANS_TOGGLE);
@@ -109,7 +110,7 @@ export default function Action({ translator, fab }) {
            "Q"
          ),
          GM.registerMenuCommand(
-            "Toggle Style",
+            getI18n(uiLang, "toggle_style"),
            (event) => {
              translator.toggleStyle();
              sendIframeMsg(MSG_TRANS_TOGGLE_STYLE);
@@ -118,14 +119,14 @@ export default function Action({ translator, fab }) {
            "C"
          ),
          GM.registerMenuCommand(
-            "Open Menu",
+            getI18n(uiLang, "open_menu"),
            (event) => {
              setShowPopup((pre) => !pre);
            },
            "K"
          ),
          GM.registerMenuCommand(
-            "Open Setting",
+            getI18n(uiLang, "open_setting"),
            (event) => {
              window.open(process.env.REACT_APP_OPTIONSPAGE, "_blank");
            },
--- a/src/views/Options/Apis.js
+++ b/src/views/Options/Apis.js
@@ -1,11 +1,12 @@
 import Stack from "@mui/material/Stack";
 import TextField from "@mui/material/TextField";
 import Button from "@mui/material/Button";
-import CircularProgress from "@mui/material/CircularProgress";
+import LoadingButton from "@mui/lab/LoadingButton";
 import {
  OPT_TRANS_ALL,
  OPT_TRANS_MICROSOFT,
  OPT_TRANS_DEEPL,
+  OPT_TRANS_DEEPLX,
  OPT_TRANS_DEEPLFREE,
  OPT_TRANS_BAIDU,
  OPT_TRANS_TENCENT,
@@ -13,7 +14,9 @@ import {
  OPT_TRANS_GEMINI,
  OPT_TRANS_CLOUDFLAREAI,
  OPT_TRANS_CUSTOMIZE,
+  OPT_TRANS_NIUTRANS,
  URL_KISS_PROXY,
+  URL_NIUTRANS_REG,
  DEFAULT_FETCH_LIMIT,
  DEFAULT_FETCH_INTERVAL,
 } from "../../config";
@@ -62,14 +65,24 @@ function TestButton({ translator, api }) {
      alert.error(
        <>
          <div>{i18n("test_failed")}</div>
-          <pre
-            style={{
-              maxWidth: 400,
-              overflow: "auto",
-            }}
-          >
-            {msg}
-          </pre>
+          {msg === err.message ? (
+            <div
+              style={{
+                maxWidth: 400,
+              }}
+            >
+              {msg}
+            </div>
+          ) : (
+            <pre
+              style={{
+                maxWidth: 400,
+                overflow: "auto",
+              }}
+            >
+              {msg}
+            </pre>
+          )}
        </>
      );
    } finally {
@@ -77,14 +90,15 @@ function TestButton({ translator, api }) {
    }
  };

-  if (loading) {
-    return <CircularProgress size={16} />;
-  }
-
  return (
-    <Button size="small" variant="contained" onClick={handleApiTest}>
+    <LoadingButton
+      size="small"
+      variant="contained"
+      onClick={handleApiTest}
+      loading={loading}
+    >
      {i18n("click_test")}
-    </Button>
+    </LoadingButton>
  );
 }

@@ -98,6 +112,9 @@ function ApiFields({ translator }) {
    prompt = "",
    fetchLimit = DEFAULT_FETCH_LIMIT,
    fetchInterval = DEFAULT_FETCH_INTERVAL,
+    dictNo = "",
+    memoryNo = "",
+    customOption = "",
  } = api;

  const handleChange = (e) => {
@@ -128,8 +145,23 @@ function ApiFields({ translator }) {
    OPT_TRANS_OPENAI,
    OPT_TRANS_GEMINI,
    OPT_TRANS_CLOUDFLAREAI,
+    OPT_TRANS_NIUTRANS,
  ];

+  const keyHelper =
+    translator === OPT_TRANS_NIUTRANS ? (
+      <>
+        {i18n("mulkeys_help")}
+        <Link href={URL_NIUTRANS_REG} target="_blank">
+          {i18n("reg_niutrans")}
+        </Link>
+      </>
+    ) : mulkeysTranslators.includes(translator) ? (
+      i18n("mulkeys_help")
+    ) : (
+      ""
+    );
+
  return (
    <Stack spacing={3}>
      {!buildinTranslators.includes(translator) && (
@@ -140,6 +172,11 @@ function ApiFields({ translator }) {
            name="url"
            value={url}
            onChange={handleChange}
+            multiline={translator === OPT_TRANS_DEEPLX}
+            maxRows={10}
+            helperText={
+              translator === OPT_TRANS_DEEPLX ? i18n("mulkeys_help") : ""
+            }
          />
          <TextField
            size="small"
@@ -148,11 +185,8 @@ function ApiFields({ translator }) {
            value={key}
            onChange={handleChange}
            multiline={mulkeysTranslators.includes(translator)}
-            helperText={
-              mulkeysTranslators.includes(translator)
-                ? i18n("mulkeys_help")
-                : ""
-            }
+            maxRows={10}
+            helperText={keyHelper}
          />
        </>
      )}
@@ -173,10 +207,42 @@ function ApiFields({ translator }) {
            value={prompt}
            onChange={handleChange}
            multiline
+            maxRows={10}
          />
        </>
      )}

+      {translator === OPT_TRANS_NIUTRANS && (
+        <>
+          <TextField
+            size="small"
+            label={"DictNo"}
+            name="dictNo"
+            value={dictNo}
+            onChange={handleChange}
+          />
+          <TextField
+            size="small"
+            label={"MemoryNo"}
+            name="memoryNo"
+            value={memoryNo}
+            onChange={handleChange}
+          />
+        </>
+      )}
+
+      {translator.startsWith(OPT_TRANS_CUSTOMIZE) && (
+        <TextField
+          size="small"
+          label={i18n("custom_option")}
+          name="customOption"
+          value={customOption}
+          onChange={handleChange}
+          multiline
+          maxRows={10}
+        />
+      )}
+
      <TextField
        size="small"
        label={i18n("fetch_limit")}
@@ -208,7 +274,7 @@ function ApiFields({ translator }) {
        </Button>
      </Stack>

-      {translator === OPT_TRANS_CUSTOMIZE && (
+      {translator.startsWith(OPT_TRANS_CUSTOMIZE) && (
        <pre>{i18n("custom_api_help")}</pre>
      )}
    </Stack>
--- a/src/views/Options/DownloadButton.js
+++ b/src/views/Options/DownloadButton.js
@@ -1,10 +1,15 @@
 import FileDownloadIcon from "@mui/icons-material/FileDownload";
-import Button from "@mui/material/Button";
+import LoadingButton from "@mui/lab/LoadingButton";
+import { useState } from "react";
+import { kissLog } from "../../libs/log";

-export default function DownloadButton({ data, text, fileName }) {
-  const handleClick = (e) => {
+export default function DownloadButton({ handleData, text, fileName }) {
+  const [loading, setLoading] = useState(false);
+  const handleClick = async (e) => {
    e.preventDefault();
-    if (data) {
+    try {
+      setLoading(true);
+      const data = await handleData();
      const url = window.URL.createObjectURL(new Blob([data]));
      const link = document.createElement("a");
      link.href = url;
@@ -12,16 +17,21 @@ export default function DownloadButton({ data, text, fileName }) {
      document.body.appendChild(link);
      link.click();
      link.remove();
+    } catch (err) {
+      kissLog(err, "download");
+    } finally {
+      setLoading(false);
    }
  };
  return (
-    <Button
+    <LoadingButton
      size="small"
      variant="outlined"
      onClick={handleClick}
+      loading={loading}
      startIcon={<FileDownloadIcon />}
    >
      {text}
-    </Button>
+    </LoadingButton>
  );
 }
--- a/src/views/Options/FavWords.js
+++ b/src/views/Options/FavWords.js
@@ -1,6 +1,5 @@
 import Stack from "@mui/material/Stack";
-import { OPT_TRANS_BAIDU } from "../../config";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import Typography from "@mui/material/Typography";
 import Accordion from "@mui/material/Accordion";
 import AccordionSummary from "@mui/material/AccordionSummary";
@@ -8,53 +7,18 @@ import AccordionDetails from "@mui/material/AccordionDetails";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import CircularProgress from "@mui/material/CircularProgress";
 import { useI18n } from "../../hooks/I18n";
-import Alert from "@mui/material/Alert";
-import { apiTranslate } from "../../apis";
 import Box from "@mui/material/Box";
 import { useFavWords } from "../../hooks/FavWords";
 import DictCont from "../Selection/DictCont";
+import SugCont from "../Selection/SugCont";
 import DownloadButton from "./DownloadButton";
 import UploadButton from "./UploadButton";
 import Button from "@mui/material/Button";
 import ClearAllIcon from "@mui/icons-material/ClearAll";
 import { isValidWord } from "../../libs/utils";
 import { kissLog } from "../../libs/log";
-
-function DictField({ word }) {
-  const [dictResult, setDictResult] = useState(null);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState("");
-
-  useEffect(() => {
-    (async () => {
-      try {
-        setLoading(true);
-        setError("");
-        const dictRes = await apiTranslate({
-          text: word,
-          translator: OPT_TRANS_BAIDU,
-          fromLang: "en",
-          toLang: "zh-CN",
-        });
-        dictRes[2].type === 1 && setDictResult(JSON.parse(dictRes[2].result));
-      } catch (err) {
-        setError(err.message);
-      } finally {
-        setLoading(false);
-      }
-    })();
-  }, [word]);
-
-  if (loading) {
-    return <CircularProgress size={24} />;
-  }
-
-  if (error) {
-    return <Alert severity="error">{error}</Alert>;
-  }
-
-  return <DictCont dictResult={dictResult} />;
-}
+import { apiTranslate } from "../../apis";
+import { OPT_TRANS_BAIDU, PHONIC_MAP } from "../../config";

 function FavAccordion({ word, index }) {
  const [expanded, setExpanded] = useState(false);
@@ -72,7 +36,12 @@ function FavAccordion({ word, index }) {
        <Typography>{`${index + 1}. ${word}`}</Typography>
      </AccordionSummary>
      <AccordionDetails>
-        {expanded && <DictField word={word} />}
+        {expanded && (
+          <Stack spacing={2}>
+            <DictCont text={word} />
+            <SugCont text={word} />
+          </Stack>
+        )}
      </AccordionDetails>
    </Accordion>
  );
@@ -98,6 +67,45 @@ export default function FavWords() {
    }
  };

+  const handleTranslation = async () => {
+    const tranList = [];
+    for (const text of downloadList) {
+      try {
+        const dictRes = await apiTranslate({
+          text,
+          translator: OPT_TRANS_BAIDU,
+          fromLang: "en",
+          toLang: "zh-CN",
+        });
+        if (dictRes[2]?.type === 1) {
+          tranList.push(JSON.parse(dictRes[2].result));
+        }
+      } catch (err) {
+        // skip
+      }
+    }
+
+    return tranList
+      .map((dictResult) =>
+        [
+          `## ${dictResult.src}`,
+          dictResult.voice
+            ?.map(Object.entries)
+            .map((item) => item[0])
+            .map(([key, val]) => `${PHONIC_MAP[key]?.[0] || key} ${val}`)
+            .join(" "),
+          dictResult.content[0].mean
+            .map(({ pre, cont }) => {
+              return `  - ${pre ? `[${pre}] ` : ""}${Object.keys(cont).join(
+                "; "
+              )}`;
+            })
+            .join("\n"),
+        ].join("\n\n")
+      )
+      .join("\n\n");
+  };
+
  return (
    <Box>
      <Stack spacing={3}>
@@ -115,10 +123,15 @@ export default function FavWords() {
            fileExts={[".txt", ".csv"]}
          />
          <DownloadButton
-            data={downloadList.join("\n")}
+            handleData={() => downloadList.join("\n")}
            text={i18n("export")}
            fileName={`kiss-words_${Date.now()}.txt`}
          />
+          <DownloadButton
+            handleData={handleTranslation}
+            text={i18n("export_translation")}
+            fileName={`kiss-words_${Date.now()}.md`}
+          />
          <Button
            size="small"
            variant="outlined"
--- a/src/views/Options/Rules.js
+++ b/src/views/Options/Rules.js
@@ -366,7 +366,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
                    fullWidth
                    name="transTiming"
                    value={transTiming}
-                    label={i18n("translate_timing")}
+                    label={i18n("trigger_mode")}
                    disabled={disabled}
                    onChange={handleChange}
                  >
@@ -776,7 +776,7 @@ function UserRules({ subRules }) {

        <UploadButton text={i18n("import")} handleImport={handleImport} />
        <DownloadButton
-          data={JSON.stringify([...rules.list].reverse(), null, 2)}
+          handleData={() => JSON.stringify([...rules.list].reverse(), null, 2)}
          text={i18n("export")}
          fileName={`kiss-rules_${Date.now()}.json`}
        />
--- a/src/views/Options/Setting.js
+++ b/src/views/Options/Setting.js
@@ -22,7 +22,9 @@ import {
  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";
@@ -69,7 +71,10 @@ export default function Settings() {
        value = limitNumber(value, 0, 4);
        break;
      case "contextMenuType":
-        isExt && sendBgMsg(MSG_CONTEXT_MENUS, { contextMenuType: value });
+        isExt && sendBgMsg(MSG_CONTEXT_MENUS, value);
+        break;
+      case "csplist":
+        isExt && sendBgMsg(MSG_UPDATE_CSP, value);
        break;
      default:
    }
@@ -96,6 +101,7 @@ export default function Settings() {
    contextMenuType = 1,
    touchTranslate = 2,
    blacklist = DEFAULT_BLACKLIST.join(",\n"),
+    csplist = DEFAULT_CSPLIST.join(",\n"),
    transInterval = 500,
  } = setting;
  const { isHide = false } = fab || {};
@@ -219,6 +225,18 @@ export default function Settings() {
                </Link>
              </FormHelperText>
            </FormControl>
+
+            <TextField
+              size="small"
+              label={i18n("disabled_csplist")}
+              helperText={
+                i18n("pattern_helper") + " " + i18n("disabled_csplist_helper")
+              }
+              name="csplist"
+              defaultValue={csplist}
+              onChange={handleChange}
+              multiline
+            />
          </>
        ) : (
          <>
@@ -260,6 +278,7 @@ export default function Settings() {
          name="blacklist"
          defaultValue={blacklist}
          onChange={handleChange}
+          maxRows={10}
          multiline
        />
      </Stack>
--- a/src/views/Options/SyncSetting.js
+++ b/src/views/Options/SyncSetting.js
@@ -6,6 +6,7 @@ import { useSync } from "../../hooks/Sync";
 import Alert from "@mui/material/Alert";
 import Link from "@mui/material/Link";
 import MenuItem from "@mui/material/MenuItem";
+import LoadingButton from "@mui/lab/LoadingButton";
 import {
  URL_KISS_WORKER,
  OPT_SYNCTYPE_ALL,
@@ -14,10 +15,8 @@ import {
 } from "../../config";
 import { useState } from "react";
 import { syncSettingAndRules } from "../../libs/sync";
-import Button from "@mui/material/Button";
 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";

@@ -123,16 +122,16 @@ export default function SyncSetting() {
          useFlexGap
          flexWrap="wrap"
        >
-          <Button
+          <LoadingButton
            size="small"
            variant="contained"
            disabled={!syncUrl || !syncKey || loading}
            onClick={handleSyncTest}
            startIcon={<SyncIcon />}
+            loading={loading}
          >
            {i18n("sync_now")}
-          </Button>
-          {loading && <CircularProgress size={16} />}
+          </LoadingButton>
        </Stack>
      </Stack>
    </Box>
--- a/src/views/Options/Tranbox.js
+++ b/src/views/Options/Tranbox.js
@@ -3,7 +3,13 @@ import Stack from "@mui/material/Stack";
 import TextField from "@mui/material/TextField";
 import MenuItem from "@mui/material/MenuItem";
 import { useI18n } from "../../hooks/I18n";
-import { OPT_TRANS_ALL, OPT_LANGS_FROM, OPT_LANGS_TO } from "../../config";
+import {
+  OPT_TRANS_ALL,
+  OPT_LANGS_FROM,
+  OPT_LANGS_TO,
+  OPT_TRANBOX_TRIGGER_CLICK,
+  OPT_TRANBOX_TRIGGER_ALL,
+} from "../../config";
 import ShortcutInput from "./ShortcutInput";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import Switch from "@mui/material/Switch";
@@ -21,10 +27,10 @@ export default function Tranbox() {
    let { name, value } = e.target;
    switch (name) {
      case "btnOffsetX":
-        value = limitNumber(value, 0, 100);
-        break;
      case "btnOffsetY":
-        value = limitNumber(value, 0, 100);
+      case "boxOffsetX":
+      case "boxOffsetY":
+        value = limitNumber(value, -200, 200);
        break;
      default:
    }
@@ -49,7 +55,14 @@ export default function Tranbox() {
    tranboxShortcut,
    btnOffsetX,
    btnOffsetY,
+    boxOffsetX = 0,
+    boxOffsetY = 10,
    hideTranBtn = false,
+    hideClickAway = false,
+    simpleStyle = false,
+    followSelection = false,
+    triggerMode = OPT_TRANBOX_TRIGGER_CLICK,
+    extStyles = "",
  } = tranboxSetting;

  return (
@@ -148,6 +161,24 @@ export default function Tranbox() {
          onChange={handleChange}
        />

+        <TextField
+          size="small"
+          label={i18n("tranbox_offset_x")}
+          type="number"
+          name="boxOffsetX"
+          defaultValue={boxOffsetX}
+          onChange={handleChange}
+        />
+
+        <TextField
+          size="small"
+          label={i18n("tranbox_offset_y")}
+          type="number"
+          name="boxOffsetY"
+          defaultValue={boxOffsetY}
+          onChange={handleChange}
+        />
+
        <TextField
          select
          size="small"
@@ -160,6 +191,67 @@ export default function Tranbox() {
          <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>
+
+        <TextField
+          select
+          size="small"
+          name="simpleStyle"
+          value={simpleStyle}
+          label={i18n("use_simple_style")}
+          onChange={handleChange}
+        >
+          <MenuItem value={false}>{i18n("disable")}</MenuItem>
+          <MenuItem value={true}>{i18n("enable")}</MenuItem>
+        </TextField>
+
+        <TextField
+          select
+          size="small"
+          name="followSelection"
+          value={followSelection}
+          label={i18n("follow_selection")}
+          onChange={handleChange}
+        >
+          <MenuItem value={false}>{i18n("disable")}</MenuItem>
+          <MenuItem value={true}>{i18n("enable")}</MenuItem>
+        </TextField>
+
+        <TextField
+          select
+          size="small"
+          name="triggerMode"
+          value={triggerMode}
+          label={i18n("trigger_mode")}
+          onChange={handleChange}
+        >
+          {OPT_TRANBOX_TRIGGER_ALL.map((item) => (
+            <MenuItem key={item} value={item}>
+              {i18n(`trigger_${item}`)}
+            </MenuItem>
+          ))}
+        </TextField>
+
+        <TextField
+          size="small"
+          label={i18n("extend_styles")}
+          name="extStyles"
+          defaultValue={extStyles}
+          onChange={handleChange}
+          maxRows={10}
+          multiline
+        />
+
        {!isExt && (
          <ShortcutInput
            value={tranboxShortcut}
--- a/src/views/Options/index.js
+++ b/src/views/Options/index.js
@@ -81,15 +81,9 @@ export default function Options() {
          <Link href={process.env.REACT_APP_USERSCRIPT_DOWNLOADURL}>
            Install/Update Userscript for Tampermonkey/Violentmonkey
          </Link>
-          {/* <Link href={process.env.REACT_APP_USERSCRIPT_DOWNLOADURL2}>
-            Install/Update Userscript for Tampermonkey/Violentmonkey 2
-          </Link> */}
          <Link href={process.env.REACT_APP_USERSCRIPT_IOS_DOWNLOADURL}>
            Install/Update Userscript for iOS Safari
          </Link>
-          {/* <Link href={process.env.REACT_APP_USERSCRIPT_IOS_DOWNLOADURL2}>
-            Install/Update Userscript for iOS Safari 2
-          </Link> */}
        </Stack>
      </center>
    );
--- 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 size="small">
+        <VolumeUpIcon fontSize="inherit" />
+      </IconButton>
+    );
+  }
+
+  if (playing) {
+    return (
+      <IconButton color="primary" size="small">
+        <VolumeUpIcon fontSize="inherit" />
+      </IconButton>
+    );
+  }
+
+  return (
+    <IconButton onClick={onPlay} size="small">
+      <VolumeUpIcon fontSize="inherit" />
+    </IconButton>
+  );
+}
--- a/src/views/Selection/DictCont.js
+++ b/src/views/Selection/DictCont.js
@@ -1,48 +1,115 @@
-import Box from "@mui/material/Box";
+import { useState, useEffect } from "react";
 import Stack from "@mui/material/Stack";
 import FavBtn from "./FavBtn";
 import Typography from "@mui/material/Typography";
+import AudioBtn from "./AudioBtn";
+import CircularProgress from "@mui/material/CircularProgress";
+import Alert from "@mui/material/Alert";
+import { OPT_TRANS_BAIDU, PHONIC_MAP } from "../../config";
+import { apiTranslate } from "../../apis";
+import { isValidWord } from "../../libs/utils";
+import CopyBtn from "./CopyBtn";

-const phonicMap = {
-  en_phonic: "英",
-  us_phonic: "美",
-};
+export default function DictCont({ text }) {
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+  const [dictResult, setDictResult] = useState(null);

-export default function DictCont({ dictResult }) {
-  if (!dictResult) {
+  useEffect(() => {
+    (async () => {
+      try {
+        setLoading(true);
+        setError("");
+        setDictResult(null);
+
+        if (!isValidWord(text)) {
+          return;
+        }
+
+        const dictRes = await apiTranslate({
+          text,
+          translator: OPT_TRANS_BAIDU,
+          fromLang: "en",
+          toLang: "zh-CN",
+        });
+
+        if (dictRes[2]?.type === 1) {
+          setDictResult(JSON.parse(dictRes[2].result));
+        }
+      } catch (err) {
+        setError(err.message);
+      } finally {
+        setLoading(false);
+      }
+    })();
+  }, [text]);
+
+  if (error) {
+    return <Alert severity="error">{error}</Alert>;
+  }
+
+  if (loading) {
+    return <CircularProgress size={16} />;
+  }
+
+  if (!text || !dictResult) {
    return;
  }

+  const copyText = [
+    dictResult.src,
+    dictResult.voice
+      ?.map(Object.entries)
+      .map((item) => item[0])
+      .map(([key, val]) => `${PHONIC_MAP[key]?.[0] || key} ${val}`)
+      .join(" "),
+    dictResult.content[0].mean
+      .map(({ pre, cont }) => {
+        return `${pre ? `[${pre}] ` : ""}${Object.keys(cont).join("; ")}`;
+      })
+      .join("\n"),
+  ].join("\n");
+
  return (
-    <Box>
-      <Stack
-        direction="row"
-        justifyContent="space-between"
-        alignItems="flex-start"
-      >
+    <Stack className="KT-transbox-dict" spacing={1}>
+      <Stack direction="row" justifyContent="space-between">
        <Typography variant="subtitle1" style={{ fontWeight: "bold" }}>
          {dictResult.src}
        </Typography>
-        <FavBtn word={dictResult.src} />
+        <Stack direction="row" justifyContent="space-between">
+          <CopyBtn text={copyText} />
+          <FavBtn word={dictResult.src} />
+        </Stack>
      </Stack>

      <Typography component="div">
-        <Typography>
+        <Typography component="div">
          {dictResult.voice
            ?.map(Object.entries)
            .map((item) => item[0])
-            .map(([key, val]) => `${phonicMap[key] || key} ${val}`)
-            .join(" ")}
+            .map(([key, val]) => (
+              <Typography
+                component="div"
+                key={key}
+                style={{ display: "inline-block" }}
+              >
+                <Typography component="span">{`${
+                  PHONIC_MAP[key]?.[0] || key
+                } ${val}`}</Typography>
+                <AudioBtn text={dictResult.src} lan={PHONIC_MAP[key]?.[1]} />
+              </Typography>
+            ))}
        </Typography>
-        <ul style={{ margin: "0.5em 0" }}>
+
+        <Typography component="ul">
          {dictResult.content[0].mean.map(({ pre, cont }, idx) => (
-            <li key={idx}>
+            <Typography component="li" key={idx}>
              {pre && `[${pre}] `}
              {Object.keys(cont).join("; ")}
-            </li>
+            </Typography>
          ))}
-        </ul>
+        </Typography>
      </Typography>
-    </Box>
+    </Stack>
  );
 }
--- a/src/views/Selection/DictContV2.js
+++ b/src/views/Selection/DictContV2.js
@@ -1,65 +0,0 @@
-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,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import Paper from "@mui/material/Paper";
 import Box from "@mui/material/Box";
 import { isMobile } from "../../libs/mobile";
@@ -130,11 +130,11 @@ function Pointer({
 export default function DraggableResizable({
  header,
  children,
-  defaultPosition = {
+  position = {
    x: 0,
    y: 0,
  },
-  defaultSize = {
+  size = {
    w: 600,
    h: 400,
  },
@@ -146,13 +146,13 @@ export default function DraggableResizable({
    w: 1200,
    h: 1200,
  },
+  setSize,
+  setPosition,
  onChangeSize,
  onChangePosition,
+  ...props
 }) {
  const lineWidth = 4;
-  const [position, setPosition] = useState(defaultPosition);
-  const [size, setSize] = useState(defaultSize);
-
  const opts = {
    size,
    setSize,
@@ -162,16 +162,9 @@ export default function DraggableResizable({
    maxSize,
  };

-  useEffect(() => {
-    onChangeSize && onChangeSize(size);
-  }, [size, onChangeSize]);
-
-  useEffect(() => {
-    onChangePosition && onChangePosition(position);
-  }, [position, onChangePosition]);
-
  return (
    <Box
+      className="KT-draggable"
      style={{
        touchAction: "none",
        position: "fixed",
@@ -182,6 +175,7 @@ export default function DraggableResizable({
        gridTemplateRows: `${lineWidth * 2}px auto ${lineWidth * 2}px`,
        zIndex: 2147483647,
      }}
+      {...props}
    >
      <Pointer
        direction="TopLeft"
@@ -217,11 +211,17 @@ export default function DraggableResizable({
        }}
        {...opts}
      />
-      <Paper elevation={4}>
-        <Pointer direction="Header" style={{ cursor: "move" }} {...opts}>
+      <Paper className="KT-draggable-body" elevation={4}>
+        <Pointer
+          className="KT-draggable-header"
+          direction="Header"
+          style={{ cursor: "move" }}
+          {...opts}
+        >
          {header}
        </Pointer>
-        <div
+        <Box
+          className="KT-draggable-container"
          style={{
            width: size.w,
            height: size.h,
@@ -229,7 +229,7 @@ export default function DraggableResizable({
          }}
        >
          {children}
-        </div>
+        </Box>
      </Paper>
      <Pointer
        direction="Right"
--- a/src/views/Selection/SugCont.js
+++ b/src/views/Selection/SugCont.js
@@ -1,17 +1,35 @@
-import Box from "@mui/material/Box";
+import { useState, useEffect } from "react";
 import Typography from "@mui/material/Typography";
+import { apiBaiduSuggest } from "../../apis";
+import Stack from "@mui/material/Stack";
+
+export default function SugCont({ text }) {
+  const [sugs, setSugs] = useState([]);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        setSugs(await apiBaiduSuggest(text));
+      } catch (err) {
+        // skip
+      }
+    })();
+  }, [text]);
+
+  if (sugs.length === 0) {
+    return;
+  }

-export default function SugCont({ sugs }) {
  return (
-    <Box>
+    <Stack className="KT-transbox-sug" spacing={1}>
      {sugs.map(({ k, v }) => (
        <Typography component="div" key={k}>
          <Typography>{k}</Typography>
-          <ul style={{ margin: "0" }}>
-            <li>{v}</li>
-          </ul>
+          <Typography component="ul" style={{ margin: "0" }}>
+            <Typography component="li">{v}</Typography>
+          </Typography>
        </Typography>
      ))}
-    </Box>
+    </Stack>
  );
 }
--- a/src/views/Selection/TranBox.js
+++ b/src/views/Selection/TranBox.js
@@ -1,7 +1,6 @@
 import { SettingProvider } from "../../hooks/Setting";
 import ThemeProvider from "../../hooks/Theme";
 import DraggableResizable from "./DraggableResizable";
-import Header from "../Popup/Header";
 import Stack from "@mui/material/Stack";
 import TextField from "@mui/material/TextField";
 import MenuItem from "@mui/material/MenuItem";
@@ -10,13 +9,93 @@ import Box from "@mui/material/Box";
 import Divider from "@mui/material/Divider";
 import IconButton from "@mui/material/IconButton";
 import DoneIcon from "@mui/icons-material/Done";
+import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
+import UnfoldLessIcon from "@mui/icons-material/UnfoldLess";
+import UnfoldMoreIcon from "@mui/icons-material/UnfoldMore";
+import PushPinIcon from "@mui/icons-material/PushPin";
+import PushPinOutlinedIcon from "@mui/icons-material/PushPinOutlined";
+import LockIcon from "@mui/icons-material/Lock";
+import LockOpenIcon from "@mui/icons-material/LockOpen";
+import CloseIcon from "@mui/icons-material/Close";
 import { useI18n } from "../../hooks/I18n";
 import { OPT_TRANS_ALL, OPT_LANGS_FROM, OPT_LANGS_TO } from "../../config";
 import { useState, useRef } from "react";
 import TranCont from "./TranCont";
+import DictCont from "./DictCont";
+import SugCont from "./SugCont";
 import CopyBtn from "./CopyBtn";
+import { isValidWord } from "../../libs/utils";

-function TranForm({ text, setText, tranboxSetting, transApis }) {
+function Header({
+  setShowPopup,
+  simpleStyle,
+  setSimpleStyle,
+  hideClickAway,
+  setHideClickAway,
+  followSelection,
+  setFollowSelection,
+}) {
+  return (
+    <Box
+      className="KT-transbox-header"
+      onMouseUp={(e) => e.stopPropagation()}
+      onTouchEnd={(e) => e.stopPropagation()}
+    >
+      <Stack direction="row" justifyContent="space-between" alignItems="center">
+        <DragIndicatorIcon fontSize="small" />
+        <Stack direction="row" alignItems="center">
+          <IconButton
+            size="small"
+            onClick={() => {
+              setHideClickAway((pre) => !pre);
+            }}
+          >
+            {hideClickAway ? (
+              <LockOpenIcon fontSize="small" />
+            ) : (
+              <LockIcon fontSize="small" />
+            )}
+          </IconButton>
+          <IconButton
+            size="small"
+            onClick={() => {
+              setFollowSelection((pre) => !pre);
+            }}
+          >
+            {followSelection ? (
+              <PushPinOutlinedIcon fontSize="small" />
+            ) : (
+              <PushPinIcon fontSize="small" />
+            )}
+          </IconButton>
+          <IconButton
+            size="small"
+            onClick={() => {
+              setSimpleStyle((pre) => !pre);
+            }}
+          >
+            {simpleStyle ? (
+              <UnfoldMoreIcon fontSize="small" />
+            ) : (
+              <UnfoldLessIcon fontSize="small" />
+            )}
+          </IconButton>
+          <IconButton
+            size="small"
+            onClick={() => {
+              setShowPopup(false);
+            }}
+          >
+            <CloseIcon fontSize="small" />
+          </IconButton>
+        </Stack>
+      </Stack>
+      <Divider />
+    </Box>
+  );
+}
+
+function TranForm({ text, setText, tranboxSetting, transApis, simpleStyle }) {
  const i18n = useI18n();

  const [editMode, setEditMode] = useState(false);
@@ -24,138 +103,144 @@ 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 (
-    <Stack sx={{ p: 2 }} spacing={2}>
-      <Box>
-        <Grid container spacing={2} columns={12}>
-          <Grid item xs={4} sm={4} md={4} lg={4}>
-            <TextField
-              select
-              SelectProps={{ MenuProps: { disablePortal: true } }}
-              fullWidth
-              size="small"
-              name="fromLang"
-              value={fromLang}
-              label={i18n("from_lang")}
-              onChange={(e) => {
-                setFromLang(e.target.value);
-              }}
-            >
-              {OPT_LANGS_FROM.map(([lang, name]) => (
-                <MenuItem key={lang} value={lang}>
-                  {name}
-                </MenuItem>
-              ))}
-            </TextField>
-          </Grid>
-          <Grid item xs={4} sm={4} md={4} lg={4}>
-            <TextField
-              select
-              SelectProps={{ MenuProps: { disablePortal: true } }}
-              fullWidth
-              size="small"
-              name="toLang"
-              value={toLang}
-              label={i18n("to_lang")}
-              onChange={(e) => {
-                setToLang(e.target.value);
-              }}
-            >
-              {OPT_LANGS_TO.map(([lang, name]) => (
-                <MenuItem key={lang} value={lang}>
-                  {name}
-                </MenuItem>
-              ))}
-            </TextField>
-          </Grid>
-          <Grid item xs={4} sm={4} md={4} lg={4}>
-            <TextField
-              select
-              SelectProps={{ MenuProps: { disablePortal: true } }}
-              fullWidth
-              size="small"
-              value={translator}
-              name="translator"
-              label={i18n("translate_service")}
-              onChange={(e) => {
-                setTranslator(e.target.value);
-              }}
-            >
-              {OPT_TRANS_ALL.map((item) => (
-                <MenuItem key={item} value={item}>
-                  {item}
-                </MenuItem>
-              ))}
-            </TextField>
-          </Grid>
-        </Grid>
-      </Box>
+    <Stack
+      className="KT-transbox-container"
+      sx={{ p: simpleStyle ? 1 : 2 }}
+      spacing={simpleStyle ? 1 : 2}
+    >
+      {!simpleStyle && (
+        <>
+          <Box className="KT-transbox-select">
+            <Grid container spacing={simpleStyle ? 1 : 2} columns={12}>
+              <Grid item xs={4} sm={4} md={4} lg={4}>
+                <TextField
+                  select
+                  SelectProps={{ MenuProps: { disablePortal: true } }}
+                  fullWidth
+                  size="small"
+                  name="fromLang"
+                  value={fromLang}
+                  label={i18n("from_lang")}
+                  onChange={(e) => {
+                    setFromLang(e.target.value);
+                  }}
+                >
+                  {OPT_LANGS_FROM.map(([lang, name]) => (
+                    <MenuItem key={lang} value={lang}>
+                      {name}
+                    </MenuItem>
+                  ))}
+                </TextField>
+              </Grid>
+              <Grid item xs={4} sm={4} md={4} lg={4}>
+                <TextField
+                  select
+                  SelectProps={{ MenuProps: { disablePortal: true } }}
+                  fullWidth
+                  size="small"
+                  name="toLang"
+                  value={toLang}
+                  label={i18n("to_lang")}
+                  onChange={(e) => {
+                    setToLang(e.target.value);
+                  }}
+                >
+                  {OPT_LANGS_TO.map(([lang, name]) => (
+                    <MenuItem key={lang} value={lang}>
+                      {name}
+                    </MenuItem>
+                  ))}
+                </TextField>
+              </Grid>
+              <Grid item xs={4} sm={4} md={4} lg={4}>
+                <TextField
+                  select
+                  SelectProps={{ MenuProps: { disablePortal: true } }}
+                  fullWidth
+                  size="small"
+                  value={translator}
+                  name="translator"
+                  label={i18n("translate_service")}
+                  onChange={(e) => {
+                    setTranslator(e.target.value);
+                  }}
+                >
+                  {OPT_TRANS_ALL.map((item) => (
+                    <MenuItem key={item} value={item}>
+                      {item}
+                    </MenuItem>
+                  ))}
+                </TextField>
+              </Grid>
+            </Grid>
+          </Box>

-      <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={() => {
-            setEditMode(true);
-            setEditText(text);
-            const timer = setTimeout(() => {
-              clearTimeout(timer);
-              inputRef.current?.focus();
-            }, 100);
-          }}
-          onBlur={() => {
-            setEditMode(false);
-            setText(editText.trim());
-          }}
-          InputProps={{
-            endAdornment: (
-              <Stack
-                direction="row"
-                sx={{
-                  position: "absolute",
-                  right: 0,
-                  top: 0,
-                }}
-              >
-                {editMode ? (
-                  <IconButton
-                    size="small"
-                    onClick={(e) => {
-                      e.stopPropagation();
+          <Box className="KT-transbox-origin">
+            <TextField
+              size="small"
+              label={i18n("original_text")}
+              inputRef={inputRef}
+              fullWidth
+              multiline
+              value={editMode ? editText : text}
+              onChange={(e) => {
+                setEditText(e.target.value);
+              }}
+              onFocus={() => {
+                setEditMode(true);
+                setEditText(text);
+              }}
+              onBlur={() => {
+                setEditMode(false);
+                setText(editText.trim());
+              }}
+              InputProps={{
+                endAdornment: (
+                  <Stack
+                    direction="row"
+                    sx={{
+                      position: "absolute",
+                      right: 0,
+                      top: 0,
                    }}
                  >
-                    <DoneIcon fontSize="inherit" />
-                  </IconButton>
-                ) : (
-                  <CopyBtn text={text} />
-                )}
-              </Stack>
-            ),
-          }}
-        />
-      </Box>
+                    {editMode ? (
+                      <IconButton
+                        size="small"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                        }}
+                      >
+                        <DoneIcon fontSize="inherit" />
+                      </IconButton>
+                    ) : (
+                      <CopyBtn text={text} />
+                    )}
+                  </Stack>
+                ),
+              }}
+            />
+          </Box>
+        </>
+      )}

-      <TranCont
-        text={text}
-        translator={translator}
-        fromLang={fromLang}
-        toLang={toLang}
-        toLang2={toLang2}
-        setToLang={setToLang}
-        setToLang2={setToLang2}
-        transApis={transApis}
-      />
+      {(!simpleStyle || !isValidWord(text) || !toLang.startsWith("zh")) && (
+        <TranCont
+          text={text}
+          translator={translator}
+          fromLang={fromLang}
+          toLang={toLang}
+          toLang2={tranboxSetting.toLang2}
+          transApis={transApis}
+          simpleStyle={simpleStyle}
+        />
+      )}
+
+      <DictCont text={text} />
+      <SugCont text={text} />
    </Stack>
  );
 }
@@ -170,23 +255,41 @@ export default function TranBox({
  setBoxSize,
  boxPosition,
  setBoxPosition,
+  simpleStyle,
+  setSimpleStyle,
+  hideClickAway,
+  setHideClickAway,
+  followSelection,
+  setFollowSelection,
+  extStyles,
 }) {
  return (
    <SettingProvider>
-      <ThemeProvider>
+      <ThemeProvider styles={extStyles}>
        <DraggableResizable
-          defaultPosition={boxPosition}
-          defaultSize={boxSize}
-          header={<Header setShowPopup={setShowBox} />}
-          onChangeSize={setBoxSize}
-          onChangePosition={setBoxPosition}
+          position={boxPosition}
+          size={boxSize}
+          setSize={setBoxSize}
+          setPosition={setBoxPosition}
+          header={
+            <Header
+              setShowPopup={setShowBox}
+              simpleStyle={simpleStyle}
+              setSimpleStyle={setSimpleStyle}
+              hideClickAway={hideClickAway}
+              setHideClickAway={setHideClickAway}
+              followSelection={followSelection}
+              setFollowSelection={setFollowSelection}
+            />
+          }
+          onClick={(e) => e.stopPropagation()}
        >
-          <Divider />
          <TranForm
            text={text}
            setText={setText}
            tranboxSetting={tranboxSetting}
            transApis={transApis}
+            simpleStyle={simpleStyle}
          />
        </DraggableResizable>
      </ThemeProvider>
--- a/src/views/Selection/TranBtn.js
+++ b/src/views/Selection/TranBtn.js
@@ -1,32 +1,33 @@
 import { isMobile } from "../../libs/mobile";
+import { limitNumber } from "../../libs/utils";

-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,
-      };
+export default function TranBtn({
+  onTrigger,
+  btnEvent,
+  position,
+  btnOffsetX,
+  btnOffsetY,
+}) {
+  const left = limitNumber(position.x + btnOffsetX, 0, window.innerWidth - 32);
+  const top = limitNumber(position.y + btnOffsetY, 0, window.innerHeight - 32);

  return (
    <div
+      className="KT-tranbtn"
      style={{
        cursor: "pointer",
-        position: "absolute",
+        // position: "absolute",
+        position: "fixed",
        left,
        top,
        zIndex: 2147483647,
      }}
-      {...touchProps}
+      {...{ [btnEvent]: onTrigger }}
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
-        width="20"
-        height="20"
+        width={isMobile ? "32" : "20"}
+        height={isMobile ? "32" : "20"}
        viewBox="0 0 32 32"
        version="1.1"
      >
--- a/src/views/Selection/TranCont.js
+++ b/src/views/Selection/TranCont.js
@@ -1,16 +1,14 @@
 import TextField from "@mui/material/TextField";
 import Box from "@mui/material/Box";
-import Alert from "@mui/material/Alert";
 import CircularProgress from "@mui/material/CircularProgress";
 import Stack from "@mui/material/Stack";
 import { useI18n } from "../../hooks/I18n";
-import { DEFAULT_TRANS_APIS, OPT_TRANS_BAIDU } from "../../config";
+import { DEFAULT_TRANS_APIS } from "../../config";
 import { useEffect, useState } from "react";
-import { apiTranslate, apiBaiduLangdetect, apiBaiduSuggest } from "../../apis";
-import { isValidWord } from "../../libs/utils";
+import { apiTranslate, apiBaiduLangdetect } from "../../apis";
 import CopyBtn from "./CopyBtn";
-import DictCont from "./DictCont";
-import SugCont from "./SugCont";
+import Typography from "@mui/material/Typography";
+import Alert from "@mui/material/Alert";

 export default function TranCont({
  text,
@@ -18,16 +16,13 @@ export default function TranCont({
  fromLang,
  toLang,
  toLang2 = "en",
-  setToLang,
-  setToLang2,
  transApis,
+  simpleStyle,
 }) {
  const i18n = useI18n();
  const [trText, setTrText] = useState("");
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
-  const [dictResult, setDictResult] = useState(null);
-  const [sugs, setSugs] = useState([]);

  useEffect(() => {
    (async () => {
@@ -35,100 +30,73 @@ export default function TranCont({
        setLoading(true);
        setTrText("");
        setError("");
-        setDictResult(null);
-        setSugs([]);

-        // 互译
+        let to = toLang;
        if (toLang !== toLang2 && toLang2 !== "none") {
          const detectLang = await apiBaiduLangdetect(text);
          if (detectLang === toLang) {
-            setToLang(toLang2);
-            setToLang2(toLang);
-            return;
+            to = toLang2;
          }
        }

-        // 翻译
        const apiSetting =
          transApis[translator] || DEFAULT_TRANS_APIS[translator];
        const tranRes = await apiTranslate({
          text,
          translator,
          fromLang,
-          toLang,
+          toLang: to,
          apiSetting,
        });
        setTrText(tranRes[0]);
-
-        // 词典
-        if (isValidWord(text) && toLang.startsWith("zh")) {
-          if (fromLang === "en" && translator === OPT_TRANS_BAIDU) {
-            tranRes[2].type === 1 &&
-              setDictResult(JSON.parse(tranRes[2].result));
-          } else {
-            const dictRes = await apiTranslate({
-              text,
-              translator: OPT_TRANS_BAIDU,
-              fromLang: "en",
-              toLang: "zh-CN",
-            });
-            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,
-    toLang2,
-    setToLang,
-    setToLang2,
-    transApis,
-  ]);
+  }, [text, translator, fromLang, toLang, toLang2, transApis]);
+
+  if (simpleStyle) {
+    return (
+      <Box className="KT-transbox-target KT-transbox-target_simple">
+        {error ? (
+          <Alert severity="error">{error}</Alert>
+        ) : loading ? (
+          <CircularProgress size={16} />
+        ) : (
+          <Typography style={{ whiteSpace: "pre-line" }}>{trText}</Typography>
+        )}
+      </Box>
+    );
+  }

  return (
-    <>
-      <Box>
-        <TextField
-          size="small"
-          label={i18n("translated_text")}
-          // disabled
-          fullWidth
-          multiline
-          value={trText}
-          InputProps={{
-            endAdornment: (
-              <Stack
-                direction="row"
-                sx={{
-                  position: "absolute",
-                  right: 0,
-                  top: 0,
-                }}
-              >
-                <CopyBtn text={trText} />
-              </Stack>
-            ),
-          }}
-        />
-      </Box>
-
-      {loading && <CircularProgress size={24} />}
-      {error && <Alert severity="error">{error}</Alert>}
-      {dictResult && <DictCont dictResult={dictResult} />}
-      {sugs.length > 0 && <SugCont sugs={sugs} />}
-    </>
+    <Box className="KT-transbox-target KT-transbox-target_default">
+      <TextField
+        size="small"
+        label={i18n("translated_text")}
+        // disabled
+        fullWidth
+        multiline
+        value={trText}
+        helperText={error}
+        InputProps={{
+          startAdornment: loading ? <CircularProgress size={16} /> : null,
+          endAdornment: (
+            <Stack
+              direction="row"
+              sx={{
+                position: "absolute",
+                right: 0,
+                top: 0,
+              }}
+            >
+              <CopyBtn text={trText} />
+            </Stack>
+          ),
+        }}
+      />
+    </Box>
  );
 }
--- a/src/views/Selection/index.js
+++ b/src/views/Selection/index.js
@@ -1,21 +1,50 @@
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback, useMemo } from "react";
 import TranBtn from "./TranBtn";
 import TranBox from "./TranBox";
 import { shortcutRegister } from "../../libs/shortcut";
 import { sleep, limitNumber } from "../../libs/utils";
 import { isGm, isExt } from "../../libs/client";
-import { MSG_OPEN_TRANBOX, DEFAULT_TRANBOX_SHORTCUT } from "../../config";
+import {
+  MSG_OPEN_TRANBOX,
+  DEFAULT_TRANBOX_SHORTCUT,
+  OPT_TRANBOX_TRIGGER_CLICK,
+  OPT_TRANBOX_TRIGGER_HOVER,
+  OPT_TRANBOX_TRIGGER_SELECT,
+} from "../../config";
 import { isMobile } from "../../libs/mobile";
 import { kissLog } from "../../libs/log";
+import { useLangMap } from "../../hooks/I18n";

 export default function Slection({
  contextMenuType,
  tranboxSetting,
  transApis,
+  uiLang,
 }) {
-  const boxWidth = limitNumber(window.innerWidth, 300, 600);
-  const boxHeight = limitNumber(window.innerHeight, 200, 400);
+  const {
+    hideTranBtn = false,
+    simpleStyle: initSimpleStyle = false,
+    hideClickAway: initHideClickAway = false,
+    followSelection: initFollowMouse = false,
+    tranboxShortcut = DEFAULT_TRANBOX_SHORTCUT,
+    triggerMode = OPT_TRANBOX_TRIGGER_CLICK,
+    extStyles,
+    btnOffsetX,
+    btnOffsetY,
+    boxOffsetX = 0,
+    boxOffsetY = 10,
+  } = tranboxSetting;

+  const boxWidth =
+    isMobile || initSimpleStyle
+      ? 300
+      : limitNumber(window.innerWidth, 300, 600);
+  const boxHeight =
+    isMobile || initSimpleStyle
+      ? 200
+      : limitNumber(window.innerHeight, 200, 400);
+
+  const langMap = useLangMap(uiLang);
  const [showBox, setShowBox] = useState(false);
  const [showBtn, setShowBtn] = useState(false);
  const [selectedText, setSelText] = useState("");
@@ -29,72 +58,113 @@ export default function Slection({
    x: (window.innerWidth - boxWidth) / 2,
    y: (window.innerHeight - boxHeight) / 2,
  });
+  const [simpleStyle, setSimpleStyle] = useState(initSimpleStyle);
+  const [hideClickAway, setHideClickAway] = useState(initHideClickAway);
+  const [followSelection, setFollowSelection] = useState(initFollowMouse);

-  const handleClick = (e) => {
-    e.stopPropagation();
-
-    setShowBtn(false);
-    setText(selectedText);
-    setShowBox(true);
-  };
+  const handleTrigger = useCallback(
+    (text) => {
+      setShowBtn(false);
+      setText(text || selectedText);
+      setShowBox(true);
+    },
+    [selectedText]
+  );

  const handleTranbox = useCallback(() => {
    setShowBtn(false);

-    const selectedText = window.getSelection()?.toString()?.trim() || "";
+    const selection = window.getSelection();
+    const selectedText = selection?.toString()?.trim() || "";
    if (!selectedText) {
      setShowBox((pre) => !pre);
      return;
    }

+    const rect = selection?.getRangeAt(0)?.getBoundingClientRect();
+    if (rect && followSelection) {
+      const x = (rect.left + rect.right) / 2 + boxOffsetX;
+      const y = rect.bottom + boxOffsetY;
+      setBoxPosition({
+        x: limitNumber(x, 0, window.innerWidth - 300),
+        y: limitNumber(y, 0, window.innerHeight - 200),
+      });
+    }
+
    setSelText(selectedText);
    setText(selectedText);
    setShowBox(true);
-  }, []);
+  }, [followSelection, boxOffsetX, boxOffsetY]);
+
+  const btnEvent = useMemo(() => {
+    if (isMobile) {
+      return "onTouchEnd";
+    } else if (triggerMode === OPT_TRANBOX_TRIGGER_HOVER) {
+      return "onMouseOver";
+    }
+    return "onMouseUp";
+  }, [triggerMode]);

  useEffect(() => {
    async function handleMouseup(e) {
      e.stopPropagation();
-      await sleep(10);
+      await sleep(200);

-      const selectedText = window.getSelection()?.toString()?.trim() || "";
+      const selection = window.getSelection();
+      const selectedText = selection?.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 });
+      const rect = selection?.getRangeAt(0)?.getBoundingClientRect();
+      if (rect && followSelection) {
+        const x = (rect.left + rect.right) / 2 + boxOffsetX;
+        const y = rect.bottom + boxOffsetY;
+        setBoxPosition({
+          x: limitNumber(x, 0, window.innerWidth - 300),
+          y: limitNumber(y, 0, window.innerHeight - 200),
+        });
+      }
+
+      if (triggerMode === OPT_TRANBOX_TRIGGER_SELECT) {
+        handleTrigger(selectedText);
+        return;
+      }
+
+      const { clientX, clientY } = isMobile ? e.changedTouches[0] : e;
+      setShowBtn(!hideTranBtn);
+      setPosition({ x: clientX, y: clientY });
    }

    // todo: mobile support
-    window.addEventListener("mouseup", handleMouseup);
-    // window.addEventListener(isMobile ? "touchend" : "mouseup", handleMouseup);
+    // window.addEventListener("mouseup", handleMouseup);
+    window.addEventListener(isMobile ? "touchend" : "mouseup", handleMouseup);
    return () => {
      window.removeEventListener(
        isMobile ? "touchend" : "mouseup",
        handleMouseup
      );
    };
-  }, [tranboxSetting.hideTranBtn]);
+  }, [
+    hideTranBtn,
+    triggerMode,
+    followSelection,
+    boxOffsetX,
+    boxOffsetY,
+    handleTrigger,
+  ]);

  useEffect(() => {
    if (isExt) {
      return;
    }
-
-    const clearShortcut = shortcutRegister(
-      tranboxSetting.tranboxShortcut || DEFAULT_TRANBOX_SHORTCUT,
-      handleTranbox
-    );
-
+    const clearShortcut = shortcutRegister(tranboxShortcut, handleTranbox);
    return () => {
      clearShortcut();
    };
-  }, [tranboxSetting.tranboxShortcut, handleTranbox]);
+  }, [tranboxShortcut, handleTranbox]);

  useEffect(() => {
    window.addEventListener(MSG_OPEN_TRANBOX, handleTranbox);
@@ -114,7 +184,7 @@ export default function Slection({
      contextMenuType !== 0 &&
        menuCommandIds.push(
          GM.registerMenuCommand(
-            "Translate Selected Text",
+            langMap("translate_selected_text"),
            (event) => {
              handleTranbox();
            },
@@ -130,7 +200,19 @@ export default function Slection({
    } catch (err) {
      kissLog(err, "registerMenuCommand");
    }
-  }, [handleTranbox, contextMenuType]);
+  }, [handleTranbox, contextMenuType, langMap]);
+
+  useEffect(() => {
+    if (hideClickAway) {
+      const handleHideBox = () => {
+        setShowBox(false);
+      };
+      window.addEventListener("click", handleHideBox);
+      return () => {
+        window.removeEventListener("click", handleHideBox);
+      };
+    }
+  }, [hideClickAway]);

  return (
    <>
@@ -145,14 +227,26 @@ export default function Slection({
          tranboxSetting={tranboxSetting}
          transApis={transApis}
          setShowBox={setShowBox}
+          simpleStyle={simpleStyle}
+          setSimpleStyle={setSimpleStyle}
+          hideClickAway={hideClickAway}
+          setHideClickAway={setHideClickAway}
+          followSelection={followSelection}
+          setFollowSelection={setFollowSelection}
+          extStyles={extStyles}
        />
      )}

      {showBtn && (
        <TranBtn
          position={position}
-          tranboxSetting={tranboxSetting}
-          onClick={handleClick}
+          btnOffsetX={btnOffsetX}
+          btnOffsetY={btnOffsetY}
+          btnEvent={btnEvent}
+          onTrigger={(e) => {
+            e.stopPropagation();
+            handleTrigger();
+          }}
        />
      )}
    </>
Author	SHA1	Message	Date
Gabe Yuan	9703514698	v1.8.8	2024-04-21 19:25:00 +08:00
Gabe Yuan	de7a97fb76	feat: tranbox offset	2024-04-21 19:19:06 +08:00
Gabe Yuan	319aaf8132	fix: move taskpool from background to content	2024-04-21 13:16:44 +08:00
Gabe Yuan	74bc58ba91	feat: transbox follow selection	2024-04-20 18:07:16 +08:00
Gabe Yuan	d622db0d7c	fix: i18n menu command for userscript	2024-04-20 15:54:41 +08:00
Gabe Yuan	de1ddf2362	fix: stopPropagation when close tranbox	2024-04-20 15:12:25 +08:00
Gabe Yuan	32c0fc860b	fix: update readme	2024-04-20 14:11:32 +08:00
Gabe Yuan	1938f432dd	feat: support multi url for DEEPLX	2024-04-20 14:01:34 +08:00
Gabe Yuan	a5cfb0ca1d	fix: fetch pool retry	2024-04-20 11:52:16 +08:00
Gabe Yuan	a172234fb0	fix: niutrans i18n text	2024-04-18 12:31:16 +08:00
Gabe Yuan	63f989b31a	v1.8.7	2024-04-18 10:07:53 +08:00
Gabe Yuan	2ae5d01d5c	fix: custom option	2024-04-18 09:48:07 +08:00
Gabe Yuan	130f1deed1	fix: remove encodeURIComponent	2024-04-18 00:31:36 +08:00
Gabe Yuan	5880d85b48	fix: encodeURIComponent text	2024-04-17 23:44:53 +08:00
Gabe Yuan	9455670e80	feat: custom request	2024-04-17 22:35:12 +08:00
Gabe Yuan	e369321c66	feat: custom request	2024-04-17 17:38:54 +08:00
Gabe Yuan	efc51b0d46	feat: extend styles for transbox	2024-04-17 15:35:44 +08:00
Gabe Yuan	d6f3b23b88	fix: tranbox ui	2024-04-17 10:31:37 +08:00
Gabe Yuan	0a4fa7b9f8	fix: tranbox ui	2024-04-17 10:03:56 +08:00
Gabe Yuan	2b3e4a8d25	fix: reaplce loading button	2024-04-16 16:39:11 +08:00
Gabe Yuan	bf3a16f96d	feat: export word & translation	2024-04-16 16:29:59 +08:00
Gabe Yuan	b416e72820	fix: transbox ui	2024-04-16 15:22:27 +08:00
Gabe Yuan	ca84bdb227	feat: tranbox hover trigger	2024-04-16 12:47:55 +08:00
Gabe Yuan	148a4e97a6	fix: tranbox ui	2024-04-16 11:25:04 +08:00
Gabe Yuan	a13493ebc2	feat: simple style tranbox	2024-04-16 00:54:37 +08:00
Gabe Yuan	ce4ac79e5f	fix: optimization tranbox	2024-04-15 18:04:35 +08:00
Gabe Yuan	8f76ea49e7	fix: loading icon	2024-04-13 21:23:58 +08:00
Gabe Yuan	923d3293cd	fix: limit selection btn in window & click to hide	2024-04-12 22:28:40 +08:00
Gabe Yuan	7379ff8d15	v1.8.6	2024-04-12 14:39:17 +08:00
Gabe Yuan	18ebec350d	fix: clean env	2024-04-12 14:33:29 +08:00
Gabe Yuan	3b0cbc53aa	fix: response err data: url	2024-04-12 11:47:22 +08:00
Gabe Yuan	f00e8ffa4d	feat: add niutrans api	2024-04-12 11:31:01 +08:00
Gabe Yuan	d6f7aad1c3	fix: utils func	2024-04-11 10:44:25 +08:00
Gabe Yuan	092ea6e836	fix: custom api	2024-04-10 13:37:16 +08:00
Gabe Yuan	d565e2464a	feat: tranbox: mobile support	2024-04-07 16:55:54 +08:00
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