v1.8.11

feat: baidu dict can be disabled
feat: lang detector can be selected
2024-05-23 20:06:48 +08:00 · 2024-05-23 00:08:10 +08:00 · 2024-05-22 23:33:30 +08:00 · 2024-05-22 10:19:04 +08:00 · 2024-05-21 23:15:46 +08:00 · 2024-05-21 20:02:53 +08:00
37 changed files with 1040 additions and 555 deletions
--- a/.env
+++ b/.env
@@ -2,7 +2,7 @@ GENERATE_SOURCEMAP=false

 REACT_APP_NAME=KISS Translator
 REACT_APP_NAME_CN=简约翻译
-REACT_APP_VERSION=1.8.7
+REACT_APP_VERSION=1.8.11

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

--- a/README.en.md
+++ b/README.en.md
@@ -1,5 +1,7 @@
 # KISS Translator

+English | [简体中文](README.md)
+
 A simple, open source [bilingual translation extension & Greasemonkey script](https://github.com/fishjar/kiss-translator).

 [kiss-translator.webm](https://github.com/fishjar/kiss-translator/assets/1157624/f7ba8a5c-e4a8-4d5a-823a-5c5c67a0a47f)
@@ -12,7 +14,7 @@ A simple, open source [bilingual translation extension & Greasemonkey script](ht
  - [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
--- a/README.md
+++ b/README.md
@@ -1,5 +1,7 @@
 # 简约翻译

+[English](README.en.md) | 简体中文
+
 一个简约、开源的 [双语对照翻译扩展 & 油猴脚本](https://github.com/fishjar/kiss-translator)。

 [kiss-translator.webm](https://github.com/fishjar/kiss-translator/assets/1157624/f7ba8a5c-e4a8-4d5a-823a-5c5c67a0a47f)
@@ -12,7 +14,7 @@
  - [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] 网页双语对照翻译
--- a/config-overrides.js
+++ b/config-overrides.js
@@ -112,6 +112,8 @@ const userscriptWebpack = (config, env) => {
 // @connect       127.0.0.1:3000
 // @connect       localhost:1188
 // @connect       127.0.0.1:1188
+// @connect       localhost:11434
+// @connect       127.0.0.1:11434
 // @run-at        document-end
 // ==/UserScript==

--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "kiss-translator",
  "description": "A minimalist bilingual translation Extension & Greasemonkey Script",
-  "version": "1.8.7",
+  "version": "1.8.11",
  "author": "Gabe<yugang2002@gmail.com>",
  "private": true,
  "dependencies": {
@@ -17,6 +17,7 @@
    "react-markdown": "^8.0.7",
    "react-router-dom": "^6.16.0",
    "react-scripts": "5.0.1",
+    "sval": "^0.5.2",
    "webdav": "^5.3.0",
    "webextension-polyfill": "^0.10.0"
  },
@@ -31,7 +32,7 @@
    "build:userscript": "rm -rf build/userscript && mkdir build/userscript && cp build/web/*.user.js build/userscript/",
    "build:rules": "babel-node src/rules.js",
    "build": "pnpm build:chrome && pnpm build:edge && pnpm build:firefox && pnpm build:web && pnpm build:userscript-ios && pnpm build:userscript && pnpm build:rules",
-    "pack": "cd build && zip -r chrome.zip chrome && zip -r edge.zip edge && cd firefox && zip -r ../firefox.zip .",
+    "zip": "cd build && zip -r chrome.zip chrome && zip -r edge.zip edge && cd firefox && zip -r ../firefox.zip .",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -41,6 +41,9 @@ dependencies:
  react-scripts:
    specifier: 5.0.1
    version: 5.0.1(@babel/plugin-syntax-flow@7.24.1)(@babel/plugin-transform-react-jsx@7.23.4)(eslint@8.57.0)(react@18.2.0)(typescript@5.4.5)
+  sval:
+    specifier: ^0.5.2
+    version: 0.5.2
  webdav:
    specifier: ^5.3.0
    version: 5.3.0
@@ -6504,7 +6507,7 @@ packages:
        optional: true
    dependencies:
      abab: 2.0.6
-      acorn: 8.10.0
+      acorn: 8.11.3
      acorn-globals: 6.0.0
      cssom: 0.4.4
      cssstyle: 2.3.0
@@ -9348,6 +9351,12 @@ packages:
    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
    engines: {node: '>= 0.4'}

+  /sval@0.5.2:
+    resolution: {integrity: sha512-cMN4SWqQ8K2DypYVZ1DVsicvXsr4gQmAYR2faKwHttJFJAqjfc4+taG9esMIP0hMP5+4Caun99n6y+4T6nCPEA==}
+    dependencies:
+      acorn: 8.11.3
+    dev: false
+
  /svg-parser@2.0.4:
    resolution: {integrity: sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==}

--- 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.7",
+  "version": "1.8.11",
  "default_locale": "en",
  "author": "Gabe<yugang2002@gmail.com>",
  "homepage_url": "https://github.com/fishjar/kiss-translator",
--- 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.7",
+  "version": "1.8.11",
  "default_locale": "en",
  "author": "Gabe<yugang2002@gmail.com>",
  "homepage_url": "https://github.com/fishjar/kiss-translator",
--- a/src/apis/baidu.js
+++ b/src/apis/baidu.js
@@ -1,243 +1,5 @@
 import queryString from "query-string";
-import { getBdauth, setBdauth } from "../libs/storage";
-import {
-  URL_BAIDU_WEB,
-  URL_BAIDU_TRANSAPI_V2,
-  URL_BAIDU_TRANSAPI,
-  DEFAULT_USER_AGENT,
-} 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 = {
--- a/src/apis/index.js
+++ b/src/apis/index.js
@@ -1,5 +1,5 @@
 import queryString from "query-string";
-import { fetchPolyfill } from "../libs/fetch";
+import { fetchData } from "../libs/fetch";
 import {
  OPT_TRANS_GOOGLE,
  OPT_TRANS_MICROSOFT,
@@ -10,8 +10,13 @@ import {
  OPT_TRANS_BAIDU,
  OPT_TRANS_TENCENT,
  OPT_TRANS_OPENAI,
+  OPT_TRANS_OPENAI_2,
+  OPT_TRANS_OPENAI_3,
  OPT_TRANS_GEMINI,
  OPT_TRANS_CLOUDFLAREAI,
+  OPT_TRANS_OLLAMA,
+  OPT_TRANS_OLLAMA_2,
+  OPT_TRANS_OLLAMA_3,
  OPT_TRANS_CUSTOMIZE,
  OPT_TRANS_CUSTOMIZE_2,
  OPT_TRANS_CUSTOMIZE_3,
@@ -19,6 +24,8 @@ import {
  OPT_TRANS_CUSTOMIZE_5,
  URL_CACHE_TRAN,
  KV_SALT_SYNC,
+  URL_GOOGLE_TRAN,
+  URL_MICROSOFT_LANGDETECT,
  URL_BAIDU_LANGDETECT,
  URL_BAIDU_SUGGEST,
  URL_BAIDU_TTS,
@@ -26,8 +33,11 @@ import {
  URL_TENCENT_TRANSMART,
  OPT_LANGS_TENCENT,
  OPT_LANGS_SPECIAL,
+  OPT_LANGS_MICROSOFT,
 } from "../config";
 import { sha256 } from "../libs/utils";
+import interpreter from "../libs/interpreter";
+import { msAuth } from "../libs/auth";

 /**
 * 同步数据
@@ -37,7 +47,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)}`,
@@ -51,7 +61,53 @@ export const apiSyncData = async (url, key, data) =>
 * @param {*} url
 * @returns
 */
-export const apiFetch = (url) => fetchPolyfill(url);
+export const apiFetch = (url) => fetchData(url);
+
+/**
+ * Google语言识别
+ * @param {*} text
+ * @returns
+ */
+export const apiGoogleLangdetect = async (text) => {
+  const params = {
+    client: "gtx",
+    dt: "t",
+    dj: 1,
+    ie: "UTF-8",
+    sl: "auto",
+    tl: "zh-CN",
+    q: text,
+  };
+  const input = `${URL_GOOGLE_TRAN}?${queryString.stringify(params)}`;
+  const res = await fetchData(input, {
+    headers: {
+      "Content-type": "application/json",
+    },
+    useCache: true,
+  });
+
+  return res.src;
+};
+
+/**
+ * Microsoft语言识别
+ * @param {*} text
+ * @returns
+ */
+export const apiMicrosoftLangdetect = async (text) => {
+  const [token] = await msAuth();
+  const res = await fetchData(URL_MICROSOFT_LANGDETECT, {
+    headers: {
+      "Content-type": "application/json",
+      Authorization: `Bearer ${token}`,
+    },
+    method: "POST",
+    body: JSON.stringify([{ Text: text }]),
+    useCache: true,
+  });
+
+  return OPT_LANGS_MICROSOFT.get(res[0].language) ?? res[0].language;
+};

 /**
 * 百度语言识别
@@ -59,7 +115,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",
    },
@@ -83,7 +139,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",
    },
@@ -110,7 +166,7 @@ export const apiBaiduSuggest = async (text) => {
 */
 export const apiBaiduTTS = (text, lan = "uk", spd = 3) => {
  const url = `${URL_BAIDU_TTS}?${queryString.stringify({ lan, text, spd })}`;
-  return fetchPolyfill(url, {
+  return fetchData(url, {
    useCache: false, // 为避免缓存过快增长，禁用缓存语音数据
  });
 };
@@ -128,7 +184,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",
    },
@@ -187,7 +243,7 @@ export const apiTranslate = async ({
    to,
  };

-  const res = await fetchPolyfill(
+  const res = await fetchData(
    `${URL_CACHE_TRAN}?${queryString.stringify(cacheOpts)}`,
    {
      useCache,
@@ -244,6 +300,8 @@ export const apiTranslate = async ({
      isSame = text === trText;
      break;
    case OPT_TRANS_OPENAI:
+    case OPT_TRANS_OPENAI_2:
+    case OPT_TRANS_OPENAI_3:
      trText = res?.choices?.map((item) => item.message.content).join(" ");
      isSame = text === trText;
      break;
@@ -257,32 +315,25 @@ export const apiTranslate = async ({
      trText = res?.result?.translated_text;
      isSame = text === trText;
      break;
+    case OPT_TRANS_OLLAMA:
+    case OPT_TRANS_OLLAMA_2:
+    case OPT_TRANS_OLLAMA_3:
+      trText = res?.response;
+      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}`);
-        }
+      const { resHook } = apiSetting;
+      if (resHook?.trim()) {
+        interpreter.run(`exports.resHook = ${resHook}`);
+        [trText, isSame] = interpreter.exports.resHook(res, text, from, to);
+      } else {
+        trText = res.text;
+        isSame = to === res.from;
      }
-
      break;
    default:
  }
--- a/src/apis/trans.js
+++ b/src/apis/trans.js
@@ -9,8 +9,13 @@ import {
  OPT_TRANS_BAIDU,
  OPT_TRANS_TENCENT,
  OPT_TRANS_OPENAI,
+  OPT_TRANS_OPENAI_2,
+  OPT_TRANS_OPENAI_3,
  OPT_TRANS_GEMINI,
  OPT_TRANS_CLOUDFLAREAI,
+  OPT_TRANS_OLLAMA,
+  OPT_TRANS_OLLAMA_2,
+  OPT_TRANS_OLLAMA_3,
  OPT_TRANS_CUSTOMIZE,
  OPT_TRANS_CUSTOMIZE_2,
  OPT_TRANS_CUSTOMIZE_3,
@@ -23,15 +28,18 @@ import {
  INPUT_PLACE_TO,
  INPUT_PLACE_TEXT,
  INPUT_PLACE_KEY,
+  INPUT_PLACE_MODEL,
 } 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";
+import interpreter from "../libs/interpreter";

 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())
@@ -41,30 +49,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",
@@ -194,7 +185,17 @@ const genTencent = ({ text, from, to }) => {
  return [URL_TENCENT_TRANSMART, init];
 };

-const genOpenAI = ({ text, from, to, url, key, prompt, model }) => {
+const genOpenAI = ({
+  text,
+  from,
+  to,
+  url,
+  key,
+  prompt,
+  model,
+  temperature,
+  maxTokens,
+}) => {
  prompt = prompt
    .replaceAll(INPUT_PLACE_FROM, from)
    .replaceAll(INPUT_PLACE_TO, to);
@@ -211,8 +212,8 @@ const genOpenAI = ({ text, from, to, url, key, prompt, model }) => {
        content: text,
      },
    ],
-    temperature: 0,
-    max_tokens: 256,
+    temperature,
+    max_tokens: maxTokens,
  };

  const init = {
@@ -229,6 +230,9 @@ const genOpenAI = ({ text, from, to, url, key, prompt, model }) => {
 };

 const genGemini = ({ text, from, to, url, key, prompt, model }) => {
+  url = url
+    .replaceAll(INPUT_PLACE_MODEL, model)
+    .replaceAll(INPUT_PLACE_KEY, key);
  prompt = prompt
    .replaceAll(INPUT_PLACE_FROM, from)
    .replaceAll(INPUT_PLACE_TO, to)
@@ -247,7 +251,6 @@ const genGemini = ({ text, from, to, url, key, prompt, model }) => {
    ],
  };

-  const input = `${url}/${model}:generateContent?key=${key}`;
  const init = {
    headers: {
      "Content-type": "application/json",
@@ -256,7 +259,33 @@ const genGemini = ({ text, from, to, url, key, prompt, model }) => {
    body: JSON.stringify(data),
  };

-  return [input, init];
+  return [url, init];
+};
+
+const genOllama = ({ text, from, to, url, key, prompt, model }) => {
+  prompt = prompt
+    .replaceAll(INPUT_PLACE_FROM, from)
+    .replaceAll(INPUT_PLACE_TO, to)
+    .replaceAll(INPUT_PLACE_TEXT, text);
+
+  const data = {
+    model,
+    prompt,
+    stream: false,
+  };
+
+  const init = {
+    headers: {
+      "Content-type": "application/json",
+    },
+    method: "POST",
+    body: JSON.stringify(data),
+  };
+  if (key) {
+    init.headers.Authorization = `Bearer ${key}`;
+  }
+
+  return [url, init];
 };

 const genCloudflareAI = ({ text, from, to, url, key }) => {
@@ -278,20 +307,27 @@ const genCloudflareAI = ({ text, from, to, url, key }) => {
  return [url, init];
 };

-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 genCustom = ({ text, from, to, url, key, reqHook }) => {
+  url = url
+    .replaceAll(INPUT_PLACE_URL, url)
+    .replaceAll(INPUT_PLACE_FROM, from)
+    .replaceAll(INPUT_PLACE_TO, to)
+    .replaceAll(INPUT_PLACE_TEXT, text)
+    .replaceAll(INPUT_PLACE_KEY, key);
+  let init = {};
+
+  if (reqHook?.trim()) {
+    interpreter.run(`exports.reqHook = ${reqHook}`);
+    [url, init] = interpreter.exports.reqHook(text, from, to, url, key);
+    return [url, init];
+  }
+
  const data = {
    text,
    from,
    to,
  };
-  const init = {
+  init = {
    headers: {
      "Content-type": "application/json",
    },
@@ -301,42 +337,33 @@ const genCustom = ({ text, from, to, url, key, customOption }) => {
  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) {
    case OPT_TRANS_DEEPL:
    case OPT_TRANS_OPENAI:
+    case OPT_TRANS_OPENAI_2:
+    case OPT_TRANS_OPENAI_3:
    case OPT_TRANS_GEMINI:
    case OPT_TRANS_CLOUDFLAREAI:
+    case OPT_TRANS_OLLAMA:
+    case OPT_TRANS_OLLAMA_2:
+    case OPT_TRANS_OLLAMA_3:
    case OPT_TRANS_NIUTRANS:
-      args.key = keyPick(translator, args.key);
+      args.key = keyPick(translator, args.key, keyMap);
+      break;
+    case OPT_TRANS_DEEPLX:
+      args.url = keyPick(translator, args.url, urlMap);
      break;
    default:
  }
@@ -359,11 +386,17 @@ export const newTransReq = ({ translator, text, from, to }, apiSetting) => {
    case OPT_TRANS_TENCENT:
      return genTencent(args);
    case OPT_TRANS_OPENAI:
+    case OPT_TRANS_OPENAI_2:
+    case OPT_TRANS_OPENAI_3:
      return genOpenAI(args);
    case OPT_TRANS_GEMINI:
      return genGemini(args);
    case OPT_TRANS_CLOUDFLAREAI:
      return genCloudflareAI(args);
+    case OPT_TRANS_OLLAMA:
+    case OPT_TRANS_OLLAMA_2:
+    case OPT_TRANS_OLLAMA_3:
+      return genOllama(args);
    case OPT_TRANS_CUSTOMIZE:
    case OPT_TRANS_CUSTOMIZE_2:
    case OPT_TRANS_CUSTOMIZE_3:
--- 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,
@@ -21,7 +20,7 @@ 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";
@@ -169,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:
--- a/src/common.js
+++ b/src/common.js
@@ -140,6 +140,8 @@ function showTransbox({
  tranboxSetting = DEFAULT_TRANBOX_SETTING,
  transApis,
  darkMode,
+  uiLang,
+  langDetector,
 }) {
  if (!tranboxSetting?.transOpen) {
    return;
@@ -170,6 +172,8 @@ function showTransbox({
          contextMenuType={contextMenuType}
          tranboxSetting={tranboxSetting}
          transApis={transApis}
+          uiLang={uiLang}
+          langDetector={langDetector}
        />
      </CacheProvider>
    </React.StrictMode>
--- a/src/config/i18n.js
+++ b/src/config/i18n.js
@@ -42,7 +42,23 @@ const customApiLangs = `["en", "English - English"],
 ["vi", "Vietnamese - Tiếng Việt"],
 `;

-const customDefaultOption = `{
+const hookExample = `// URL
+https://translate.googleapis.com/translate_a/single?client=gtx&dj=1&dt=t&ie=UTF-8&q={{text}}&sl=en&tl=zh-CN
+
+// Request Hook
+(text, from, to, url, key) => [url, {
+  headers: {
+      "Content-type": "application/json",
+  },
+  method: "GET",
+  body: null,
+}]
+
+// Response Hook
+(res, text, from, to) => [res.sentences.map((item) => item.trans).join(" "), to === res.src]`;
+
+const customApiHelpZH = `// 请求数据默认格式
+{
  "url": "{{url}}",
  "method": "POST",
  "headers": {
@@ -50,18 +66,12 @@ const customDefaultOption = `{
    "Authorization": "Bearer {{key}}"
  },
  "body": {
-    "text": "{{text}}",
-    "from": "{{from}}",
-    "to": "{{to}}"
+    "text": "{{text}}", // 待翻译文字
+    "from": "{{from}}", // 文字的语言（可能为空）
+    "to": "{{to}}",     // 目标语言
  },
-  "resPattern": {
-    "text": "text",
-    "from": "from"
-  }
-}`;
+}

-const customApiHelpZH = `// 自定义选项范例
-${customDefaultOption}

 // 返回数据默认格式
 {
@@ -70,20 +80,43 @@ ${customDefaultOption}
  to: "",   // 目标语言（可选）
 }

+
+// Hook 范例
+${hookExample}
+
+
 // 支持的语言代码如下
 ${customApiLangs}
 `;

-const customApiHelpEN = `// Example of custom options
-${customDefaultOption}
+const customApiHelpEN = `// Default request
+{
+  "url": "{{url}}",
+  "method": "POST",
+  "headers": {
+    "Content-type": "application/json",
+    "Authorization": "Bearer {{key}}"
+  },
+  "body": {
+    "text": "{{text}}", // Text to be translated
+    "from": "{{from}}", // The language of the text (may be empty)
+    "to": "{{to}}",     // Target language
+  },
+}

-// Return data default format
+
+// Default response
 {
  text: "", // translated text
  from: "", // Recognized source language
  to: "",   // Target language (optional)
 }

+
+/// Hook Example
+${hookExample}
+
+
 // The supported language codes are as follows
 ${customApiLangs}
 `;
@@ -623,7 +656,7 @@ export const I18N = {
  },
  use_simple_style: {
    zh: `使用简洁界面`,
-    en: `Click outside to close the pop-up window`,
+    en: `Use a simple interface`,
  },
  show: {
    zh: `显示`,
@@ -710,12 +743,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: `译文`,
@@ -790,8 +831,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: `译文元素标签`,
@@ -818,8 +859,8 @@ export const I18N = {
    en: `Fixer Selector`,
  },
  reg_niutrans: {
-    zh: `获取小牛翻译密钥`,
-    en: `Get NiuTrans APIKey`,
+    zh: `获取小牛翻译密钥【简约翻译专属新用户注册赠送300万字符】`,
+    en: `Get NiuTrans APIKey [KISS Translator Exclusive New User Registration Free 3 Million Characters]`,
  },
  trigger_mode: {
    zh: `触发方式`,
@@ -845,4 +886,52 @@ export const I18N = {
    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`,
+  },
+  translate_start_hook: {
+    zh: `翻译开始钩子函数`,
+    en: `Translate Start Hook`,
+  },
+  translate_start_hook_helper: {
+    zh: `翻译开始时运行，入参为： 翻译节点，原文文本。`,
+    en: `Run when translation starts, the input parameters are: translation node, original text.`,
+  },
+  translate_end_hook: {
+    zh: `翻译完成钩子函数`,
+    en: `Translate End Hook`,
+  },
+  translate_end_hook_helper: {
+    zh: `翻译完成时运行，入参为： 翻译节点，原文文本，译文文本，保留元素。`,
+    en: `Run when the translation is completed, the input parameters are: translation node, original text, translation text, retained elements.`,
+  },
+  translate_remove_hook: {
+    zh: `翻译移除钩子函数`,
+    en: `Translate Removed Hook`,
+  },
+  translate_remove_hook_helper: {
+    zh: `翻译移除时运行，入参为： 翻译节点。`,
+    en: `Run when translation is removed, the input parameters are: translation node.`,
+  },
+  english_dict: {
+    zh: `英文词典`,
+    en: `English Dictionary`,
+  },
 };
--- 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";
@@ -79,9 +78,16 @@ export const URL_RAW_PREFIX =
  "https://raw.githubusercontent.com/fishjar/kiss-translator/master";

 export const URL_CACHE_TRAN = `https://${APP_LCNAME}/translate`;
+
+// api.cognitive.microsofttranslator.com
 export const URL_MICROSOFT_TRAN =
  "https://api-edge.cognitive.microsofttranslator.com/translate";
 export const URL_MICROSOFT_AUTH = "https://edge.microsoft.com/translate/auth";
+export const URL_MICROSOFT_LANGDETECT =
+  "https://api-edge.cognitive.microsofttranslator.com/detect?api-version=3.0";
+
+export const URL_GOOGLE_TRAN =
+  "https://translate.googleapis.com/translate_a/single";
 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";
@@ -96,6 +102,8 @@ export const URL_NIUTRANS_REG =
 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_DICT_BAIDU = "Baidu";
+
 export const OPT_TRANS_GOOGLE = "Google";
 export const OPT_TRANS_MICROSOFT = "Microsoft";
 export const OPT_TRANS_DEEPL = "DeepL";
@@ -105,8 +113,13 @@ 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_OPENAI_2 = "OpenAI2";
+export const OPT_TRANS_OPENAI_3 = "OpenAI3";
 export const OPT_TRANS_GEMINI = "Gemini";
 export const OPT_TRANS_CLOUDFLAREAI = "CloudflareAI";
+export const OPT_TRANS_OLLAMA = "Ollama";
+export const OPT_TRANS_OLLAMA_2 = "Ollama2";
+export const OPT_TRANS_OLLAMA_3 = "Ollama3";
 export const OPT_TRANS_CUSTOMIZE = "Custom";
 export const OPT_TRANS_CUSTOMIZE_2 = "Custom2";
 export const OPT_TRANS_CUSTOMIZE_3 = "Custom3";
@@ -122,8 +135,13 @@ export const OPT_TRANS_ALL = [
  OPT_TRANS_DEEPLX,
  OPT_TRANS_NIUTRANS,
  OPT_TRANS_OPENAI,
+  OPT_TRANS_OPENAI_2,
+  OPT_TRANS_OPENAI_3,
  OPT_TRANS_GEMINI,
  OPT_TRANS_CLOUDFLAREAI,
+  OPT_TRANS_OLLAMA,
+  OPT_TRANS_OLLAMA_2,
+  OPT_TRANS_OLLAMA_3,
  OPT_TRANS_CUSTOMIZE,
  OPT_TRANS_CUSTOMIZE_2,
  OPT_TRANS_CUSTOMIZE_3,
@@ -131,6 +149,13 @@ export const OPT_TRANS_ALL = [
  OPT_TRANS_CUSTOMIZE_5,
 ];

+export const OPT_LANGDETECTOR_ALL = [
+  OPT_TRANS_GOOGLE,
+  OPT_TRANS_MICROSOFT,
+  OPT_TRANS_BAIDU,
+  OPT_TRANS_TENCENT,
+];
+
 export const OPT_LANGS_TO = [
  ["en", "English - English"],
  ["zh-CN", "Simplified Chinese - 简体中文"],
@@ -193,7 +218,7 @@ export const OPT_LANGS_SPECIAL = {
  ]),
  [OPT_TRANS_DEEPLX]: new Map([
    ...OPT_LANGS_FROM.map(([key]) => [key, key.toUpperCase()]),
-    ["auto", ""],
+    ["auto", "auto"],
    ["zh-CN", "ZH"],
    ["zh-TW", "ZH"],
  ]),
@@ -255,9 +280,24 @@ export const OPT_LANGS_SPECIAL = {
  [OPT_TRANS_OPENAI]: new Map(
    OPT_LANGS_FROM.map(([key, val]) => [key, val.split(" - ")[0]])
  ),
+  [OPT_TRANS_OPENAI_2]: new Map(
+    OPT_LANGS_FROM.map(([key, val]) => [key, val.split(" - ")[0]])
+  ),
+  [OPT_TRANS_OPENAI_3]: new Map(
+    OPT_LANGS_FROM.map(([key, val]) => [key, val.split(" - ")[0]])
+  ),
  [OPT_TRANS_GEMINI]: new Map(
    OPT_LANGS_FROM.map(([key, val]) => [key, val.split(" - ")[0]])
  ),
+  [OPT_TRANS_OLLAMA]: new Map(
+    OPT_LANGS_FROM.map(([key, val]) => [key, val.split(" - ")[0]])
+  ),
+  [OPT_TRANS_OLLAMA_2]: new Map(
+    OPT_LANGS_FROM.map(([key, val]) => [key, val.split(" - ")[0]])
+  ),
+  [OPT_TRANS_OLLAMA_3]: new Map(
+    OPT_LANGS_FROM.map(([key, val]) => [key, val.split(" - ")[0]])
+  ),
  [OPT_TRANS_CLOUDFLAREAI]: new Map([
    ["auto", ""],
    ["zh-CN", "chinese"],
@@ -294,6 +334,12 @@ export const OPT_LANGS_SPECIAL = {
  ]),
 };
 export const OPT_LANGS_LIST = OPT_LANGS_TO.map(([lang]) => lang);
+export const OPT_LANGS_MICROSOFT = new Map(
+  Array.from(OPT_LANGS_SPECIAL[OPT_TRANS_MICROSOFT].entries()).map(([k, v]) => [
+    v,
+    k,
+  ])
+);
 export const OPT_LANGS_BAIDU = new Map(
  Array.from(OPT_LANGS_SPECIAL[OPT_TRANS_BAIDU].entries()).map(([k, v]) => [
    v,
@@ -360,6 +406,7 @@ 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 INPUT_PLACE_MODEL = "{{model}}"; // 占位符

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

@@ -392,6 +439,9 @@ export const GLOBLA_RULE = {
  skipLangs: [], // 不翻译的语言
  fixerSelector: "", // 修复函数选择器
  fixerFunc: "-", // 修复函数
+  transStartHook: "", // 钩子函数
+  transEndHook: "", // 钩子函数
+  transRemoveHook: "", // 钩子函数
 };

 // 输入框翻译
@@ -431,11 +481,15 @@ export const DEFAULT_TRANBOX_SETTING = {
  tranboxShortcut: DEFAULT_TRANBOX_SHORTCUT,
  btnOffsetX: 10,
  btnOffsetY: 10,
+  boxOffsetX: 0,
+  boxOffsetY: 10,
  hideTranBtn: false, // 是否隐藏翻译按钮
  hideClickAway: false, // 是否点击外部关闭弹窗
  simpleStyle: false, // 是否简洁界面
+  followSelection: false, // 翻译框是否跟随选中文本
  triggerMode: OPT_TRANBOX_TRIGGER_CLICK, // 触发翻译方式
  extStyles: "", // 附加样式
+  enDict: OPT_DICT_BAIDU, // 英文词典
 };

 // 订阅列表
@@ -458,13 +512,33 @@ export const DEFAULT_SUBRULES_LIST = [
 const defaultCustomApi = {
  url: "",
  key: "",
-  customOption: "",
+  customOption: "", // (作废)
+  reqHook: "", // request 钩子函数
+  resHook: "", // response 钩子函数
  fetchLimit: DEFAULT_FETCH_LIMIT,
  fetchInterval: DEFAULT_FETCH_INTERVAL,
 };
+const defaultOpenaiApi = {
+  url: "https://api.openai.com/v1/chat/completions",
+  key: "",
+  model: "gpt-4",
+  prompt: `You will be provided with a sentence in ${INPUT_PLACE_FROM}, and your task is to translate it into ${INPUT_PLACE_TO}.`,
+  temperature: 0,
+  maxTokens: 256,
+  fetchLimit: 1,
+  fetchInterval: 500,
+};
+const defaultOllamaApi = {
+  url: "http://localhost:11434/api/generate",
+  key: "",
+  model: "llama3",
+  prompt: `Translate the following text from ${INPUT_PLACE_FROM} to ${INPUT_PLACE_TO}:\n\n${INPUT_PLACE_TEXT}`,
+  fetchLimit: 1,
+  fetchInterval: 500,
+};
 export const DEFAULT_TRANS_APIS = {
  [OPT_TRANS_GOOGLE]: {
-    url: "https://translate.googleapis.com/translate_a/single",
+    url: URL_GOOGLE_TRAN,
    key: "",
    fetchLimit: DEFAULT_FETCH_LIMIT, // 最大任务数量
    fetchInterval: DEFAULT_FETCH_INTERVAL, // 任务间隔时间
@@ -505,16 +579,11 @@ export const DEFAULT_TRANS_APIS = {
    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 ${INPUT_PLACE_FROM}, and your task is to translate it into ${INPUT_PLACE_TO}.`,
-    fetchLimit: 1,
-    fetchInterval: 500,
-  },
+  [OPT_TRANS_OPENAI]: defaultOpenaiApi,
+  [OPT_TRANS_OPENAI_2]: defaultOpenaiApi,
+  [OPT_TRANS_OPENAI_3]: defaultOpenaiApi,
  [OPT_TRANS_GEMINI]: {
-    url: "https://generativelanguage.googleapis.com/v1/models",
+    url: `https://generativelanguage.googleapis.com/v1/models/${INPUT_PLACE_MODEL}:generateContent?key=${INPUT_PLACE_KEY}`,
    key: "",
    model: "gemini-pro",
    prompt: `Translate the following text from ${INPUT_PLACE_FROM} to ${INPUT_PLACE_TO}:\n\n${INPUT_PLACE_TEXT}`,
@@ -522,11 +591,14 @@ export const DEFAULT_TRANS_APIS = {
    fetchInterval: 500,
  },
  [OPT_TRANS_CLOUDFLAREAI]: {
-    url: "https://api.cloudflare.com/client/v4/accounts/{ACCOUNT_ID}/ai/run/@cf/meta/m2m100-1.2b",
+    url: "https://api.cloudflare.com/client/v4/accounts/{{ACCOUNT_ID}}/ai/run/@cf/meta/m2m100-1.2b",
    key: "",
    fetchLimit: 1,
    fetchInterval: 500,
  },
+  [OPT_TRANS_OLLAMA]: defaultOllamaApi,
+  [OPT_TRANS_OLLAMA_2]: defaultOllamaApi,
+  [OPT_TRANS_OLLAMA_3]: defaultOllamaApi,
  [OPT_TRANS_CUSTOMIZE]: defaultCustomApi,
  [OPT_TRANS_CUSTOMIZE_2]: defaultCustomApi,
  [OPT_TRANS_CUSTOMIZE_3]: defaultCustomApi,
@@ -587,6 +659,7 @@ export const DEFAULT_SETTING = {
  csplist: DEFAULT_CSPLIST.join(",\n"), // 禁用CSP名单
  // disableLangs: [], // 不翻译的语言(移至rule，作废)
  transInterval: 500, // 翻译间隔时间
+  langDetector: OPT_TRANS_MICROSOFT, // 远程语言识别服务
 };

 export const DEFAULT_RULES = [GLOBLA_RULE];
--- a/src/config/rules.js
+++ b/src/config/rules.js
@@ -30,6 +30,9 @@ export const DEFAULT_RULE = {
  skipLangs: [], // 不翻译的语言
  fixerSelector: "", // 修复函数选择器
  fixerFunc: GLOBAL_KEY, // 修复函数
+  transStartHook: "", // 钩子函数
+  transEndHook: "", // 钩子函数
+  transRemoveHook: "", // 钩子函数
 };

 const DEFAULT_DIY_STYLE = `color: #666;
--- 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/Translate.js
+++ b/src/hooks/Translate.js
@@ -30,7 +30,11 @@ export function useTranslate(q, rule, setting) {
          return;
        }

-        const deLang = await tryDetectLang(q, detectRemote === "true");
+        const deLang = await tryDetectLang(
+          q,
+          detectRemote === "true",
+          setting.langDetector
+        );
        if (deLang && (toLang.includes(deLang) || skipLangs.includes(deLang))) {
          setSamelang(true);
        } else {
--- 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,19 +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
@@ -31,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());
@@ -55,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) {
@@ -99,68 +116,13 @@ export const fetchApi = async ({ input, init, transOpts, apiSetting }) => {
 };

 /**
- * 请求池实例
- */
-export const fetchPool = taskPool(
-  fetchApi,
-  null,
-  DEFAULT_FETCH_INTERVAL,
-  DEFAULT_FETCH_LIMIT
-);
-
-/**
- * 请求数据统一接口
- * @param {*} input
- * @param {*} opts
+ * 解析 response
+ * @param {*} res
 * @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");
-    }
-  }
-
+const parseResponse = async (res) => {
  if (!res) {
-    // 发送请求
-    if (usePool) {
-      res = await fetchPool.push({ input, init, transOpts, apiSetting });
-    } else {
-      res = await fetchApi({ 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) {
-      try {
-        const cache = await caches.open(CACHE_NAME);
-        await cache.put(cacheReq, res.clone());
-      } catch (err) {
-        kissLog(err, "cache put");
-      }
-    }
+    return null;
  }

  const contentType = res.headers.get("Content-Type");
@@ -174,23 +136,141 @@ export const fetchData = async (
 };

 /**
- * fetch 兼容性封装
+ * 查询 caches
 * @param {*} input
- * @param {*} opts
+ * @param {*} param1
 * @returns
 */
-export const fetchPolyfill = async (input, opts) => {
+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(
+  fetchPolyfill,
+  null,
+  DEFAULT_FETCH_INTERVAL,
+  DEFAULT_FETCH_LIMIT
+);
+
+/**
+ * 数据请求
+ * @param {*} input
+ * @param {*} param1
+ * @returns
+ */
+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 });
 };

 /**
@@ -198,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/index.js
+++ b/src/libs/index.js
@@ -1,8 +1,26 @@
-import { CACHE_NAME } from "../config";
+import {
+  CACHE_NAME,
+  OPT_TRANS_GOOGLE,
+  OPT_TRANS_MICROSOFT,
+  OPT_TRANS_BAIDU,
+  OPT_TRANS_TENCENT,
+} from "../config";
 import { browser } from "./browser";
-import { apiBaiduLangdetect } from "../apis";
+import {
+  apiGoogleLangdetect,
+  apiMicrosoftLangdetect,
+  apiBaiduLangdetect,
+  apiTencentLangdetect,
+} from "../apis";
 import { kissLog } from "./log";

+const langdetectMap = {
+  [OPT_TRANS_GOOGLE]: apiGoogleLangdetect,
+  [OPT_TRANS_MICROSOFT]: apiMicrosoftLangdetect,
+  [OPT_TRANS_BAIDU]: apiBaiduLangdetect,
+  [OPT_TRANS_TENCENT]: apiTencentLangdetect,
+};
+
 /**
 * 清除缓存数据
 */
@@ -19,12 +37,16 @@ export const tryClearCaches = async () => {
 * @param {*} q
 * @returns
 */
-export const tryDetectLang = async (q, useRemote = false) => {
+export const tryDetectLang = async (
+  q,
+  useRemote = false,
+  langDetector = OPT_TRANS_MICROSOFT
+) => {
  let lang = "";

  if (useRemote) {
    try {
-      lang = await apiBaiduLangdetect(q);
+      lang = await langdetectMap[langDetector](q);
    } catch (err) {
      kissLog(err, "detect lang remote");
    }
--- a/src/libs/interpreter.js
+++ b/src/libs/interpreter.js
@@ -0,0 +1,16 @@
+import Sval from "sval";
+
+const interpreter = new Sval({
+  // ECMA Version of the code
+  // 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15
+  // or 2015 | 2016 | 2017 | 2018 | 2019 | 2020 | 2021 | 2022 | 2023 | 2024
+  // or "latest"
+  ecmaVer: "latest",
+  // Code source type
+  // "script" or "module"
+  sourceType: "script",
+  // Whether the code runs in a sandbox
+  sandBox: true,
+});
+
+export default interpreter;
--- a/src/libs/rules.js
+++ b/src/libs/rules.js
@@ -74,6 +74,9 @@ export const matchRule = async (
    "injectJs",
    "injectCss",
    "fixerSelector",
+    "transStartHook",
+    "transEndHook",
+    "transRemoveHook",
  ].forEach((key) => {
    if (!rule[key]?.trim()) {
      rule[key] = globalRule[key];
@@ -162,6 +165,9 @@ export const checkRules = (rules) => {
        skipLangs,
        fixerSelector,
        fixerFunc,
+        transStartHook,
+        transEndHook,
+        transRemoveHook,
      }) => ({
        pattern: pattern.trim(),
        selector: type(selector) === "string" ? selector : "",
@@ -185,6 +191,10 @@ export const checkRules = (rules) => {
        detectRemote: matchValue([GLOBAL_KEY, "true", "false"], detectRemote),
        skipLangs: type(skipLangs) === "array" ? skipLangs : [],
        fixerSelector: type(fixerSelector) === "string" ? fixerSelector : "",
+        transStartHook: type(transStartHook) === "string" ? transStartHook : "",
+        transEndHook: type(transEndHook) === "string" ? transEndHook : "",
+        transRemoveHook:
+          type(transRemoveHook) === "string" ? transRemoveHook : "",
        fixerFunc: matchValue([GLOBAL_KEY, ...FIXER_ALL], fixerFunc),
      })
    );
--- 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
@@ -25,6 +25,7 @@ import { sendBgMsg } from "./msg";
 import { isExt } from "./client";
 import { injectInlineJs, injectInternalCss } from "./injector";
 import { kissLog } from "./log";
+import interpreter from "./interpreter";

 /**
 * 翻译类
@@ -405,6 +406,7 @@ export class Translator {
    // 移除键盘监听
    window.removeEventListener("keydown", this._handleKeydown);

+    const { transRemoveHook } = this._rule;
    this._tranNodes.forEach((innerHTML, node) => {
      if (
        !this._rule.transTiming ||
@@ -420,10 +422,17 @@ export class Translator {
      }

      // 移除/恢复元素
-      if (innerHTML && this._rule.transOnly === "true") {
-        node.innerHTML = innerHTML;
-      } else {
-        node.querySelector(APP_LCNAME)?.remove();
+      if (innerHTML) {
+        if (this._rule.transOnly === "true") {
+          node.innerHTML = innerHTML;
+        } else {
+          node.querySelector(APP_LCNAME)?.remove();
+        }
+        // 钩子函数
+        if (transRemoveHook?.trim()) {
+          interpreter.run(`exports.transRemoveHook = ${transRemoveHook}`);
+          interpreter.exports.transRemoveHook(node);
+        }
      }
    });

@@ -490,6 +499,13 @@ export class Translator {
    }
    const keeps = [];

+    // 翻译开始钩子函数
+    const { transStartHook } = this._rule;
+    if (transStartHook?.trim()) {
+      interpreter.run(`exports.transStartHook = ${transStartHook}`);
+      interpreter.exports.transStartHook(el, q);
+    }
+
    // 保留元素
    const [matchSelector, subSelector] = this._keepSelector;
    if (matchSelector || subSelector) {
@@ -538,18 +554,22 @@ export class Translator {
      }
    }

-    traEl = document.createElement(APP_LCNAME);
-    traEl.style.visibility = "visible";
-    // if (this._rule.transOnly === "true") {
-    //   el.innerHTML = "";
-    // }
+    // 附加样式
    const { selectStyle, parentStyle } = this._rule;
-    el.appendChild(traEl);
    el.style.cssText += selectStyle;
    if (el.parentElement) {
      el.parentElement.style.cssText += parentStyle;
    }

+    // 插入译文节点
+    traEl = document.createElement(APP_LCNAME);
+    traEl.style.visibility = "visible";
+    // if (this._rule.transOnly === "true") {
+    //   el.innerHTML = "";
+    // }
+    el.appendChild(traEl);
+
+    // 渲染译文节点
    const root = createRoot(traEl);
    root.render(<Content q={q} keeps={keeps} translator={this} $el={el} />);
  };
--- a/src/libs/utils.js
+++ b/src/libs/utils.js
@@ -15,6 +15,16 @@ export const limitNumber = (num, min = 0, max = 100) => {
  return number;
 };

+export const limitFloat = (num, min = 0, max = 100) => {
+  const number = parseFloat(num);
+  if (Number.isNaN(number) || number < min) {
+    return min;
+  } else if (number > max) {
+    return max;
+  }
+  return number;
+};
+
 /**
 * 匹配是否为数组中的值
 * @param {*} arr
--- 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/Content/index.js
+++ b/src/views/Content/index.js
@@ -15,6 +15,7 @@ import {
 import { useTranslate } from "../../hooks/Translate";
 import { styled, css } from "@mui/material/styles";
 import { APP_LCNAME } from "../../config";
+import interpreter from "../../libs/interpreter";

 const LINE_STYLES = {
  [OPT_STYLE_LINE]: "solid",
@@ -85,8 +86,15 @@ const StyledSpan = styled("span")`
 export default function Content({ q, keeps, translator, $el }) {
  const [rule, setRule] = useState(translator.rule);
  const { text, sameLang, loading } = useTranslate(q, rule, translator.setting);
-  const { transOpen, textStyle, bgColor, textDiyStyle, transOnly, transTag } =
-    rule;
+  const {
+    transOpen,
+    textStyle,
+    bgColor,
+    textDiyStyle,
+    transOnly,
+    transTag,
+    transEndHook,
+  } = rule;

  const { newlineLength } = translator.setting;

@@ -107,6 +115,14 @@ export default function Content({ q, keeps, translator, $el }) {
    };
  }, [translator.eventName]);

+  useEffect(() => {
+    // 运行钩子函数
+    if (text && transEndHook?.trim()) {
+      interpreter.run(`exports.transEndHook = ${transEndHook}`);
+      interpreter.exports.transEndHook($el, q, text, keeps);
+    }
+  }, [$el, q, text, keeps, transEndHook]);
+
  const gap = useMemo(() => {
    if (transOnly === "true") {
      return "";
--- a/src/views/Options/Apis.js
+++ b/src/views/Options/Apis.js
@@ -6,12 +6,18 @@ import {
  OPT_TRANS_ALL,
  OPT_TRANS_MICROSOFT,
  OPT_TRANS_DEEPL,
+  OPT_TRANS_DEEPLX,
  OPT_TRANS_DEEPLFREE,
  OPT_TRANS_BAIDU,
  OPT_TRANS_TENCENT,
  OPT_TRANS_OPENAI,
+  OPT_TRANS_OPENAI_2,
+  OPT_TRANS_OPENAI_3,
  OPT_TRANS_GEMINI,
  OPT_TRANS_CLOUDFLAREAI,
+  OPT_TRANS_OLLAMA,
+  OPT_TRANS_OLLAMA_2,
+  OPT_TRANS_OLLAMA_3,
  OPT_TRANS_CUSTOMIZE,
  OPT_TRANS_NIUTRANS,
  URL_KISS_PROXY,
@@ -32,7 +38,7 @@ import { useApi } from "../../hooks/Api";
 import { apiTranslate } from "../../apis";
 import Box from "@mui/material/Box";
 import Link from "@mui/material/Link";
-import { limitNumber } from "../../libs/utils";
+import { limitNumber, limitFloat } from "../../libs/utils";

 function TestButton({ translator, api }) {
  const i18n = useI18n();
@@ -113,7 +119,10 @@ function ApiFields({ translator }) {
    fetchInterval = DEFAULT_FETCH_INTERVAL,
    dictNo = "",
    memoryNo = "",
-    customOption = "",
+    reqHook = "",
+    resHook = "",
+    temperature = 0,
+    maxTokens = 256,
  } = api;

  const handleChange = (e) => {
@@ -125,6 +134,12 @@ function ApiFields({ translator }) {
      case "fetchInterval":
        value = limitNumber(value, 0, 5000);
        break;
+      case "temperature":
+        value = limitFloat(value, 0, 2);
+        break;
+      case "maxTokens":
+        value = limitNumber(value, 0, 2 ** 15);
+        break;
      default:
    }
    updateApi({
@@ -132,7 +147,7 @@ function ApiFields({ translator }) {
    });
  };

-  const buildinTranslators = [
+  const builtinTranslators = [
    OPT_TRANS_MICROSOFT,
    OPT_TRANS_DEEPLFREE,
    OPT_TRANS_BAIDU,
@@ -142,8 +157,13 @@ function ApiFields({ translator }) {
  const mulkeysTranslators = [
    OPT_TRANS_DEEPL,
    OPT_TRANS_OPENAI,
+    OPT_TRANS_OPENAI_2,
+    OPT_TRANS_OPENAI_3,
    OPT_TRANS_GEMINI,
    OPT_TRANS_CLOUDFLAREAI,
+    OPT_TRANS_OLLAMA,
+    OPT_TRANS_OLLAMA_2,
+    OPT_TRANS_OLLAMA_3,
    OPT_TRANS_NIUTRANS,
  ];

@@ -163,7 +183,7 @@ function ApiFields({ translator }) {

  return (
    <Stack spacing={3}>
-      {!buildinTranslators.includes(translator) && (
+      {!builtinTranslators.includes(translator) && (
        <>
          <TextField
            size="small"
@@ -171,6 +191,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"
@@ -179,12 +204,15 @@ function ApiFields({ translator }) {
            value={key}
            onChange={handleChange}
            multiline={mulkeysTranslators.includes(translator)}
+            maxRows={10}
            helperText={keyHelper}
          />
        </>
      )}

-      {(translator === OPT_TRANS_OPENAI || translator === OPT_TRANS_GEMINI) && (
+      {(translator.startsWith(OPT_TRANS_OPENAI) ||
+        translator.startsWith(OPT_TRANS_OLLAMA) ||
+        translator === OPT_TRANS_GEMINI) && (
        <>
          <TextField
            size="small"
@@ -200,6 +228,28 @@ function ApiFields({ translator }) {
            value={prompt}
            onChange={handleChange}
            multiline
+            maxRows={10}
+          />
+        </>
+      )}
+
+      {translator.startsWith(OPT_TRANS_OPENAI) && (
+        <>
+          <TextField
+            size="small"
+            label={"Temperature"}
+            type="number"
+            name="temperature"
+            value={temperature}
+            onChange={handleChange}
+          />
+          <TextField
+            size="small"
+            label={"Max Tokens"}
+            type="number"
+            name="maxTokens"
+            value={maxTokens}
+            onChange={handleChange}
          />
        </>
      )}
@@ -224,14 +274,26 @@ function ApiFields({ translator }) {
      )}

      {translator.startsWith(OPT_TRANS_CUSTOMIZE) && (
-        <TextField
-          size="small"
-          label={i18n("custom_option")}
-          name="customOption"
-          value={customOption}
-          onChange={handleChange}
-          multiline
-        />
+        <>
+          <TextField
+            size="small"
+            label={"Request Hook"}
+            name="reqHook"
+            value={reqHook}
+            onChange={handleChange}
+            multiline
+            maxRows={10}
+          />
+          <TextField
+            size="small"
+            label={"Response Hook"}
+            name="resHook"
+            value={resHook}
+            onChange={handleChange}
+            multiline
+            maxRows={10}
+          />
+        </>
      )}

      <TextField
--- a/src/views/Options/Rules.js
+++ b/src/views/Options/Rules.js
@@ -97,6 +97,9 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
    skipLangs = [],
    fixerSelector = "",
    fixerFunc = "-",
+    transStartHook = "",
+    transEndHook = "",
+    transRemoveHook = "",
  } = formValues;

  const hasSamePattern = (str) => {
@@ -458,6 +461,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
              disabled={disabled}
              onChange={handleChange}
              multiline
+              maxRows={10}
            />

            <TextField
@@ -468,6 +472,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
              disabled={disabled}
              onChange={handleChange}
              multiline
+              maxRows={10}
            />
            <TextField
              select
@@ -487,6 +492,40 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
              ))}
            </TextField>

+            <TextField
+              size="small"
+              label={i18n("translate_start_hook")}
+              helperText={i18n("translate_start_hook_helper")}
+              name="transStartHook"
+              value={transStartHook}
+              disabled={disabled}
+              onChange={handleChange}
+              multiline
+              maxRows={10}
+            />
+            <TextField
+              size="small"
+              label={i18n("translate_end_hook")}
+              helperText={i18n("translate_end_hook_helper")}
+              name="transEndHook"
+              value={transEndHook}
+              disabled={disabled}
+              onChange={handleChange}
+              multiline
+              maxRows={10}
+            />
+            <TextField
+              size="small"
+              label={i18n("translate_remove_hook")}
+              helperText={i18n("translate_remove_hook_helper")}
+              name="transRemoveHook"
+              value={transRemoveHook}
+              disabled={disabled}
+              onChange={handleChange}
+              multiline
+              maxRows={10}
+            />
+
            <TextField
              size="small"
              label={i18n("selector_style")}
--- a/src/views/Options/Setting.js
+++ b/src/views/Options/Setting.js
@@ -17,6 +17,8 @@ import {
  UI_LANGS,
  TRANS_NEWLINE_LENGTH,
  CACHE_NAME,
+  OPT_TRANS_MICROSOFT,
+  OPT_LANGDETECTOR_ALL,
  OPT_SHORTCUT_TRANSLATE,
  OPT_SHORTCUT_STYLE,
  OPT_SHORTCUT_POPUP,
@@ -31,6 +33,8 @@ import ShortcutInput from "./ShortcutInput";
 import { useFab } from "../../hooks/Fab";
 import { sendBgMsg } from "../../libs/msg";
 import { kissLog } from "../../libs/log";
+import UploadButton from "./UploadButton";
+import DownloadButton from "./DownloadButton";

 function ShortcutItem({ action, label }) {
  const { shortcut, setShortcut } = useShortcut(action);
@@ -92,6 +96,14 @@ export default function Settings() {
    }
  };

+  const handleImport = async (data) => {
+    try {
+      await updateSetting(JSON.parse(data));
+    } catch (err) {
+      kissLog(err, "import setting");
+    }
+  };
+
  const {
    uiLang,
    minLength,
@@ -103,12 +115,28 @@ export default function Settings() {
    blacklist = DEFAULT_BLACKLIST.join(",\n"),
    csplist = DEFAULT_CSPLIST.join(",\n"),
    transInterval = 500,
+    langDetector = OPT_TRANS_MICROSOFT,
  } = setting;
  const { isHide = false } = fab || {};

  return (
    <Box>
      <Stack spacing={3}>
+        <Stack
+          direction="row"
+          alignItems="center"
+          spacing={2}
+          useFlexGap
+          flexWrap="wrap"
+        >
+          <UploadButton text={i18n("import")} handleImport={handleImport} />
+          <DownloadButton
+            handleData={() => JSON.stringify(setting, null, 2)}
+            text={i18n("export")}
+            fileName={`kiss-setting_${Date.now()}.json`}
+          />
+        </Stack>
+
        <FormControl size="small">
          <InputLabel>{i18n("ui_lang")}</InputLabel>
          <Select
@@ -206,6 +234,22 @@ export default function Settings() {
          </Select>
        </FormControl>

+        <FormControl size="small">
+          <InputLabel>{i18n("detect_lang_remote")}</InputLabel>
+          <Select
+            name="langDetector"
+            value={langDetector}
+            label={i18n("detect_lang_remote")}
+            onChange={handleChange}
+          >
+            {OPT_LANGDETECTOR_ALL.map((item) => (
+              <MenuItem value={item} key={item}>
+                {item}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+
        {isExt ? (
          <>
            <FormControl size="small">
--- a/src/views/Options/Tranbox.js
+++ b/src/views/Options/Tranbox.js
@@ -9,6 +9,7 @@ import {
  OPT_LANGS_TO,
  OPT_TRANBOX_TRIGGER_CLICK,
  OPT_TRANBOX_TRIGGER_ALL,
+  OPT_DICT_BAIDU,
 } from "../../config";
 import ShortcutInput from "./ShortcutInput";
 import FormControlLabel from "@mui/material/FormControlLabel";
@@ -27,10 +28,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:
    }
@@ -55,11 +56,15 @@ 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 = "",
+    enDict = OPT_DICT_BAIDU,
  } = tranboxSetting;

  return (
@@ -140,6 +145,18 @@ export default function Tranbox() {
          ))}
        </TextField>

+        <TextField
+          select
+          size="small"
+          name="enDict"
+          value={enDict}
+          label={i18n("english_dict")}
+          onChange={handleChange}
+        >
+          <MenuItem value={"-"}>{i18n("disable")}</MenuItem>
+          <MenuItem value={OPT_DICT_BAIDU}>{OPT_DICT_BAIDU}</MenuItem>
+        </TextField>
+
        <TextField
          size="small"
          label={i18n("tranbtn_offset_x")}
@@ -158,6 +175,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"
@@ -194,6 +229,18 @@ export default function Tranbox() {
          <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"
--- 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,14 +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,
@@ -163,14 +162,6 @@ export default function DraggableResizable({
    maxSize,
  };

-  useEffect(() => {
-    onChangeSize && onChangeSize(size);
-  }, [size, onChangeSize]);
-
-  useEffect(() => {
-    onChangePosition && onChangePosition(position);
-  }, [position, onChangePosition]);
-
  return (
    <Box
      className="KT-draggable"
--- a/src/views/Selection/TranBox.js
+++ b/src/views/Selection/TranBox.js
@@ -14,6 +14,8 @@ 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";
@@ -23,6 +25,7 @@ import DictCont from "./DictCont";
 import SugCont from "./SugCont";
 import CopyBtn from "./CopyBtn";
 import { isValidWord } from "../../libs/utils";
+import { isMobile } from "../../libs/mobile";

 function Header({
  setShowPopup,
@@ -30,9 +33,20 @@ function Header({
  setSimpleStyle,
  hideClickAway,
  setHideClickAway,
+  followSelection,
+  setFollowSelection,
+  mouseHover,
 }) {
+  if (!isMobile && simpleStyle && !mouseHover) {
+    return;
+  }
+
  return (
-    <Box className="KT-transbox-header">
+    <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">
@@ -43,6 +57,18 @@ function Header({
            }}
          >
            {hideClickAway ? (
+              <LockOpenIcon fontSize="small" />
+            ) : (
+              <LockIcon fontSize="small" />
+            )}
+          </IconButton>
+          <IconButton
+            size="small"
+            onClick={() => {
+              setFollowSelection((pre) => !pre);
+            }}
+          >
+            {followSelection ? (
              <PushPinOutlinedIcon fontSize="small" />
            ) : (
              <PushPinIcon fontSize="small" />
@@ -75,7 +101,15 @@ function Header({
  );
 }

-function TranForm({ text, setText, tranboxSetting, transApis, simpleStyle }) {
+function TranForm({
+  text,
+  setText,
+  tranboxSetting,
+  transApis,
+  simpleStyle,
+  langDetector,
+  enDict,
+}) {
  const i18n = useI18n();

  const [editMode, setEditMode] = useState(false);
@@ -207,7 +241,10 @@ function TranForm({ text, setText, tranboxSetting, transApis, simpleStyle }) {
        </>
      )}

-      {(!simpleStyle || !isValidWord(text) || !toLang.startsWith("zh")) && (
+      {(!simpleStyle ||
+        !isValidWord(text) ||
+        !toLang.startsWith("zh") ||
+        enDict === "-") && (
        <TranCont
          text={text}
          translator={translator}
@@ -216,11 +253,16 @@ function TranForm({ text, setText, tranboxSetting, transApis, simpleStyle }) {
          toLang2={tranboxSetting.toLang2}
          transApis={transApis}
          simpleStyle={simpleStyle}
+          langDetector={langDetector}
        />
      )}

-      <DictCont text={text} />
-      <SugCont text={text} />
+      {enDict !== "-" && (
+        <>
+          <DictCont text={text} />
+          <SugCont text={text} />
+        </>
+      )}
    </Stack>
  );
 }
@@ -239,14 +281,21 @@ export default function TranBox({
  setSimpleStyle,
  hideClickAway,
  setHideClickAway,
+  followSelection,
+  setFollowSelection,
  extStyles,
+  langDetector,
+  enDict,
 }) {
+  const [mouseHover, setMouseHover] = useState(false);
  return (
    <SettingProvider>
      <ThemeProvider styles={extStyles}>
        <DraggableResizable
-          defaultPosition={boxPosition}
-          defaultSize={boxSize}
+          position={boxPosition}
+          size={boxSize}
+          setSize={setBoxSize}
+          setPosition={setBoxPosition}
          header={
            <Header
              setShowPopup={setShowBox}
@@ -254,11 +303,14 @@ export default function TranBox({
              setSimpleStyle={setSimpleStyle}
              hideClickAway={hideClickAway}
              setHideClickAway={setHideClickAway}
+              followSelection={followSelection}
+              setFollowSelection={setFollowSelection}
+              mouseHover={mouseHover}
            />
          }
-          onChangeSize={setBoxSize}
-          onChangePosition={setBoxPosition}
          onClick={(e) => e.stopPropagation()}
+          onMouseEnter={() => setMouseHover(true)}
+          onMouseLeave={() => setMouseHover(false)}
        >
          <TranForm
            text={text}
@@ -266,6 +318,8 @@ export default function TranBox({
            tranboxSetting={tranboxSetting}
            transApis={transApis}
            simpleStyle={simpleStyle}
+            langDetector={langDetector}
+            enDict={enDict}
          />
        </DraggableResizable>
      </ThemeProvider>
--- a/src/views/Selection/TranBtn.js
+++ b/src/views/Selection/TranBtn.js
@@ -5,18 +5,11 @@ export default function TranBtn({
  onTrigger,
  btnEvent,
  position,
-  tranboxSetting,
+  btnOffsetX,
+  btnOffsetY,
 }) {
-  const left = limitNumber(
-    position.x + tranboxSetting.btnOffsetX,
-    0,
-    window.innerWidth - 32
-  );
-  const top = limitNumber(
-    position.y + tranboxSetting.btnOffsetY,
-    0,
-    window.innerHeight - 32
-  );
+  const left = limitNumber(position.x + btnOffsetX, 0, window.innerWidth - 32);
+  const top = limitNumber(position.y + btnOffsetY, 0, window.innerHeight - 32);

  return (
    <div
--- a/src/views/Selection/TranCont.js
+++ b/src/views/Selection/TranCont.js
@@ -5,10 +5,11 @@ import Stack from "@mui/material/Stack";
 import { useI18n } from "../../hooks/I18n";
 import { DEFAULT_TRANS_APIS } from "../../config";
 import { useEffect, useState } from "react";
-import { apiTranslate, apiBaiduLangdetect } from "../../apis";
+import { apiTranslate } from "../../apis";
 import CopyBtn from "./CopyBtn";
 import Typography from "@mui/material/Typography";
 import Alert from "@mui/material/Alert";
+import { tryDetectLang } from "../../libs";

 export default function TranCont({
  text,
@@ -18,6 +19,7 @@ export default function TranCont({
  toLang2 = "en",
  transApis,
  simpleStyle,
+  langDetector,
 }) {
  const i18n = useI18n();
  const [trText, setTrText] = useState("");
@@ -33,7 +35,7 @@ export default function TranCont({

        let to = toLang;
        if (toLang !== toLang2 && toLang2 !== "none") {
-          const detectLang = await apiBaiduLangdetect(text);
+          const detectLang = await tryDetectLang(text, true, langDetector);
          if (detectLang === toLang) {
            to = toLang2;
          }
@@ -55,7 +57,7 @@ export default function TranCont({
        setLoading(false);
      }
    })();
-  }, [text, translator, fromLang, toLang, toLang2, transApis]);
+  }, [text, translator, fromLang, toLang, toLang2, transApis, langDetector]);

  if (simpleStyle) {
    return (
--- a/src/views/Selection/index.js
+++ b/src/views/Selection/index.js
@@ -10,22 +10,32 @@ import {
  OPT_TRANBOX_TRIGGER_CLICK,
  OPT_TRANBOX_TRIGGER_HOVER,
  OPT_TRANBOX_TRIGGER_SELECT,
+  OPT_DICT_BAIDU,
 } 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,
+  langDetector,
 }) {
  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,
+    enDict = OPT_DICT_BAIDU,
  } = tranboxSetting;

  const boxWidth =
@@ -37,6 +47,7 @@ export default function Slection({
      ? 200
      : limitNumber(window.innerHeight, 200, 400);

+  const langMap = useLangMap(uiLang);
  const [showBox, setShowBox] = useState(false);
  const [showBtn, setShowBtn] = useState(false);
  const [selectedText, setSelText] = useState("");
@@ -52,6 +63,7 @@ export default function Slection({
  });
  const [simpleStyle, setSimpleStyle] = useState(initSimpleStyle);
  const [hideClickAway, setHideClickAway] = useState(initHideClickAway);
+  const [followSelection, setFollowSelection] = useState(initFollowMouse);

  const handleTrigger = useCallback(
    (text) => {
@@ -65,16 +77,27 @@ export default function Slection({
  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) {
@@ -90,13 +113,24 @@ export default function Slection({
      e.stopPropagation();
      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 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;
@@ -116,7 +150,14 @@ export default function Slection({
        handleMouseup
      );
    };
-  }, [hideTranBtn, triggerMode, handleTrigger]);
+  }, [
+    hideTranBtn,
+    triggerMode,
+    followSelection,
+    boxOffsetX,
+    boxOffsetY,
+    handleTrigger,
+  ]);

  useEffect(() => {
    if (isExt) {
@@ -146,7 +187,7 @@ export default function Slection({
      contextMenuType !== 0 &&
        menuCommandIds.push(
          GM.registerMenuCommand(
-            "Translate Selected Text",
+            langMap("translate_selected_text"),
            (event) => {
              handleTranbox();
            },
@@ -162,7 +203,7 @@ export default function Slection({
    } catch (err) {
      kissLog(err, "registerMenuCommand");
    }
-  }, [handleTranbox, contextMenuType]);
+  }, [handleTranbox, contextMenuType, langMap]);

  useEffect(() => {
    if (hideClickAway) {
@@ -193,14 +234,19 @@ export default function Slection({
          setSimpleStyle={setSimpleStyle}
          hideClickAway={hideClickAway}
          setHideClickAway={setHideClickAway}
+          followSelection={followSelection}
+          setFollowSelection={setFollowSelection}
          extStyles={extStyles}
+          langDetector={langDetector}
+          enDict={enDict}
        />
      )}

      {showBtn && (
        <TranBtn
          position={position}
-          tranboxSetting={tranboxSetting}
+          btnOffsetX={btnOffsetX}
+          btnOffsetY={btnOffsetY}
          btnEvent={btnEvent}
          onTrigger={(e) => {
            e.stopPropagation();
Author	SHA1	Message	Date
Gabe Yuan	72ccfc8aec	v1.8.11	2024-05-23 20:06:48 +08:00
Gabe Yuan	d117c5dc10	feat: baidu dict can be disabled	2024-05-23 00:08:10 +08:00
Gabe Yuan	9312783f44	feat: lang detector can be selected	2024-05-22 23:33:30 +08:00
Gabe Yuan	e5b16ebfd3	Merge remote-tracking branch 'origin/master' into dev	2024-05-22 10:19:04 +08:00
Gabe Yuan	5d1d65c2d3	feat: the temperature and maxTokens of the openai can be configured	2024-05-21 23:15:46 +08:00
Gabe	9ca1309cec	Merge pull request #126 from kebyn/master fix: option translation	2024-05-21 20:02:53 +08:00
kebyn	a03afc05f5	fix: option translation	2024-05-21 08:56:09 +00:00
Gabe Yuan	0198963584	fix: deeplx: replace auto to blank string	2024-05-21 11:55:17 +08:00
Gabe Yuan	58e745d967	v1.8.10	2024-05-17 10:38:11 +08:00
Gabe Yuan	377e347d68	feat: support translate hooks	2024-05-15 11:07:13 +08:00
Gabe Yuan	bac0704d3d	feat: download and upload settings	2024-05-12 20:24:40 +08:00
Gabe Yuan	d2ff46edf6	fix: show full gemini url	2024-05-12 16:25:20 +08:00
Gabe Yuan	f908372b4e	feat: support hook for custom api	2024-05-12 16:10:11 +08:00
Gabe Yuan	5d44ff4913	v1.8.9	2024-04-28 22:23:53 +08:00
Gabe Yuan	4c9aa66048	feat: support ollama api	2024-04-28 21:45:20 +08:00
Gabe Yuan	b6a09b99ab	feat: support ollama api	2024-04-28 21:43:20 +08:00
Gabe Yuan	3a0dcb1a52	feat: add more openai translator	2024-04-28 16:58:09 +08:00
Gabe Yuan	5015503b4c	feat: hide transbox header when mouseleave	2024-04-28 14:56:49 +08:00
Gabe Yuan	16423feea4	fix: update readme	2024-04-21 22:21:29 +08:00
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