release: v1.9.2

doc: update readme

.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.9.2
 
 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

.github/workflows/release.yml

@@ -7,28 +7,28 @@ on:
 
 jobs:
   build:
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: pnpm/action-setup@v2
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
         with:
-          version: 8.7.6
-      - uses: actions/setup-node@v3
+          version: latest
+      - uses: actions/setup-node@v4
         with:
-          node-version: "18.17.0"
+          node-version: latest
           cache: "pnpm"
       - run: pnpm install
-      - run: pnpm build
-      - uses: actions/upload-artifact@v3
+      - run: pnpm build+zip
+      - uses: actions/upload-artifact@v4
         with:
           name: build-artifacts
           path: build
   deploy-web:
     needs: build
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/download-artifact@v3
+      - uses: actions/checkout@v4
+      - uses: actions/download-artifact@v4
         with:
           name: build-artifacts
           path: build
@@ -37,7 +37,8 @@ jobs:
         with:
           folder: build/web
   create-release:
-    runs-on: ubuntu-22.04
+    needs: build
+    runs-on: ubuntu-latest
     outputs:
       upload_url: ${{ steps.create-release.outputs.upload_url }}
     steps:
@@ -54,18 +55,14 @@ jobs:
     needs: [build, create-release]
     strategy:
       matrix:
-        client: ["chrome", "edge", "firefox", "userscript"]
-    runs-on: ubuntu-22.04
+        client: ["chrome", "edge", "firefox", "userscript", "thunderbird"]
+    runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/download-artifact@v3
+      - uses: actions/checkout@v4
+      - uses: actions/download-artifact@v4
         with:
           name: build-artifacts
           path: build
-      - name: Zip Release
-        run: |
-          cd build
-          zip -r ${{ matrix.client }}.zip ${{ matrix.client }}
       - uses: actions/upload-release-asset@v1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.prettierignore

@@ -0,0 +1,4 @@
+node_modules
+build
+public
+package.json

.prettierrc

@@ -0,0 +1,24 @@
+{
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "endOfLine": "lf",
+  "htmlWhitespaceSensitivity": "css",
+  "insertPragma": false,
+  "singleAttributePerLine": false,
+  "bracketSameLine": false,
+  "jsxBracketSameLine": false,
+  "jsxSingleQuote": false,
+  "printWidth": 80,
+  "proseWrap": "preserve",
+  "quoteProps": "as-needed",
+  "requirePragma": false,
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": false,
+  "embeddedLanguageFormatting": "auto",
+  "vueIndentScriptAndStyle": false,
+  "experimentalTernaries": false,
+  "parser": "babel"
+}

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)
@@ -9,10 +11,18 @@ 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
+  - [x] Firefox
+  - [x] Kiwi (Android)
+  - [x] Orion (iOS)
   - [ ] Safari
+    - [x] Safari (Mac)
+  - [x] Thunderbird
 - [x] Supports multiple translation services
-  - [x] Google/Microsoft/DeepL/OpenAI/Gemini/CloudflareAI/Baidu/Tencent
+  - [x] Google/Microsoft
+  - [x] Baidu/Tencent/Volcengine
+  - [x] OpenAI/Gemini/Claude/Ollama/DeepSeek/CloudflareAI
+  - [x] DeepL/DeepLX/NiuTrans
   - [x] Custom translation interface
 - [x] Covers common translation scenarios
   - [x] Web bilingual translation
@@ -44,13 +54,17 @@ 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] Safari (Mac) Compiled by a third party, not verified, obtained by yourself: https://www.nodeloc.com/t/topic/54245
+  - [x] Thunderbird [Download address](https://github.com/fishjar/kiss-translator/releases)
 - [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
@@ -65,16 +79,112 @@ A simple, open source [bilingual translation extension & Greasemonkey script](ht
 - Translation interface agent: [https://github.com/fishjar/kiss-proxy](https://github.com/fishjar/kiss-proxy)
   - If you encounter network problems when accessing a certain translation interface, this proxy service may help you.
   - Deploy and manage by yourself.
-- Minimalistic Dictionary Plugin: [https://github.com/fishjar/kiss-dictionary](https://github.com/fishjar/kiss-dictionary)
-  - A word-marking translation plug-in used with this project.
-  - Supports query of English words, sentences and Chinese characters.
-  - Supports history records and word collections.
+
+## Frequently Asked Questions
+
+### How to Turn Off Automatic Translation
+
+You can achieve this through `Rules Setting` with the following methods:
+
+- Personal Rules: RULES-> Global Rule -> Translate Switch -> Disaabled
+- Subscription Rules: SUBSCRIBE -> Select the third option `kiss-rules-off.json`
+- Override Subscription Rules: OVERWRITE -> Translate Switch -> Disaabled
+- Add a Personal Rule for a Specific Website: Translate Switch -> Disaabled
+
+### How to Set Keyboard Shortcuts
+
+Set this in the extension management page, for example:
+
+- chrome [chrome://extensions/shortcuts](chrome://extensions/shortcuts)
+- firefox [about:addons](about:addons)
+
+### How to Turn Off Selection Translation
+
+Set this in the `Rules Setting`: RULES -> Global Rule -> If translate selected -> Disable
+
+### How to Set it to Show Only the Translation
+
+Set this in the `Rules Setting`: RULES -> Global Rule -> Show Only Translations -> Enable
+
+### How to Set Mouse Hover Translation
+
+Set this in the `Rules Setting`: RULES -> Global Rule -> TTrigger Mode
+
+### Why are some web pages not fully translated?
+
+This extension's webpage translation is based on CSS selectors. Generic rules cannot adapt to all websites, and sometimes you need to manually add site-specific rules. If you don't know how to write rules, you can seek help here:  
+https://github.com/fishjar/kiss-rules/issues
+
+### What is the priority order of rule settings?
+
+Personal Rules > Override Subscription Rules > Subscription Rules > Global Rules
+
+Among these, Global Rules have the lowest priority but are very important as they serve as the default rules.
+
+### Why are YouTube subtitles translated in broken sentences?
+
+This extension has no special development for video content. Support for YouTube is also treated as regular webpage translation. Auto-generated subtitles are streamed and output progressively, resulting in poorer support.
+
+To disable this extension's subtitle translation, add a rule. Reference: https://github.com/fishjar/kiss-translator/issues/62
+
+### Local Ollama interface cannot be used
+
+If encountering a 403 error, refer to: https://github.com/fishjar/kiss-translator/issues/174
+
+### Custom API doesn't work in Tampermonkey scripts
+
+Tampermonkey scripts require adding domains to the whitelist; otherwise, requests cannot be sent.
+
+### How to Set Up Hook Functions for Custom Interfaces
+
+The custom interface feature is highly flexible and can theoretically integrate with any translation interface.
+
+Example of a Request Hook function:
+
+```js
+/**
+ * Request Hook
+ * @param {string} text Text to be translated
+ * @param {string} from Source language
+ * @param {string} to   Target language
+ * @param {string} url  Translation interface URL
+ * @param {string} key  Translation interface API key
+ * @returns {Array[string, object]} [Interface URL, request object]
+ */
+(text, from, to, url, key) => [url, {
+  headers: {
+    "Content-type": "application/json",
+    "Authorization": `Bearer ${key}`
+  },
+  method: "POST",
+  body: { text, to },
+}]
+```
+
+Example of a Response Hook function:
+
+```js
+ * Response Hook
+ * @param {string} res  JSON data returned by the interface
+ * @param {string} text Text to be translated
+ * @param {string} from Source language
+ * @param {string} to   Target language
+ * @returns {Array[string, boolean]} [Translated text, whether target language is same as source]
+ * Note: If the second return value is true (target language same as source), 
+ *       the translation will not be displayed on the page,
+ *       If the parameters are incomplete, it is recommended to return false directly
+ */
+(res, text, from, to) => [res.text, to === res.src]
+```
+
+For more custom interface examples, refer to: [custom-api.md](https://github.com/fishjar/kiss-translator/blob/master/custom-api.md)
 
 ## Development Guidelines
 
 ```sh
 git clone https://github.com/fishjar/kiss-translator.git
 cd kiss-translator
+git checkout dev # Submit a PR suggestion to push to the dev branch
 pnpm install
 pnpm build
 ```

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)
@@ -9,10 +11,18 @@
 - [x] 保持简约
 - [x] 开放源代码
 - [x] 适配常见浏览器
-  - [x] Chrome/Edge/Firefox/Kiwi
+  - [x] Chrome/Edge
+  - [x] Firefox
+  - [x] Kiwi (Android)
+  - [x] Orion (iOS)
   - [ ] Safari
+    - [x] Safari (Mac)
+  - [x] Thunderbird
 - [x] 支持多种翻译服务
-  - [x] Google/Microsoft/DeepL/OpenAI/Gemini/CloudflareAI/Baidu/Tencent
+  - [x] Google/Microsoft
+  - [x] Baidu/Tencent/Volcengine
+  - [x] OpenAI/Gemini/Claude/Ollama/DeepSeek/CloudflareAI
+  - [x] DeepL/DeepLX/NiuTrans
   - [x] 自定义翻译接口
 - [x] 覆盖常见翻译场景
   - [x] 网页双语对照翻译
@@ -44,13 +54,17 @@
 > - 油猴脚本会遇到更多使用上的问题（跨域问题、脚本冲突等）
 
 - [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] Safari (Mac) 第三方编译，未作验证，自行获取： https://www.nodeloc.com/t/topic/54245
+  - [x] Thunderbird [下载地址](https://github.com/fishjar/kiss-translator/releases)
 - [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)
 
 ## 关联项目
@@ -65,16 +79,111 @@
 - 翻译接口代理: [https://github.com/fishjar/kiss-proxy](https://github.com/fishjar/kiss-proxy)
   - 如果访问某个翻译接口遇到网络问题，这个代理服务也许可以帮到你。
   - 自己部署，自己管理。
-- 简约词典插件: [https://github.com/fishjar/kiss-dictionary](https://github.com/fishjar/kiss-dictionary)
-  - 搭配本项目一起使用的划词翻译插件。
-  - 支持英文单词、句子、汉字的查询。
-  - 支持历史记录、单词收藏。
+
+## 常见问题
+
+### 如何关闭自动翻译
+
+通过规则设置，以下方法均可实现：
+
+- 个人规则：全局规则 -> 开启翻译 -> 默认关闭
+- 订阅规则：选择第三个 `kiss-rules-off.json`
+- 覆写订阅规则：开启翻译 -> 默认关闭
+- 添加一条针对某个网站的个人规则：开启翻译 -> 默认关闭
+
+### 如何设置快捷键
+
+在插件管理那里设置，例如： 
+
+- chrome [chrome://extensions/shortcuts](chrome://extensions/shortcuts)
+- firefox [about:addons](about:addons)
+
+### 如何关闭划词翻译
+
+通过规则设置：个人规则 -> 全局规则 -> 是否启用划词翻译 -> 禁用
+
+### 如何设置仅显示译文
+
+通过规则设置：个人规则 -> 全局规则 -> 仅显示译文 -> 启用
+
+### 如何设置鼠标悬停翻译
+
+通过规则设置：个人规则 -> 全局规则 -> 触发方式
+
+### 为什么有些网页翻译不全
+
+本插件的网页翻译是基于CSS选择器的，通用规则不能适配所有网页，有时需要自行添加相应网站的单独规则。如果不会写规则，可以到这里求助： https://github.com/fishjar/kiss-rules/issues
+
+### 规则设置的优先级是如何的
+
+个人规则 > 覆写订阅规则 > 订阅规则 > 全局规则
+
+其中全局规则优先级最低，但非常重要，相当于默认规则。
+
+### 为什么油管字幕一句话会断开翻译
+
+本插件目前没有针对视频做特殊开发，对油管的支持也是当做网页翻译看待，自动生成字幕是流式生成并输出的，所以支持较差。
+
+如果需要关闭本插件的字幕翻译，增加一条规则即可，参考：https://github.com/fishjar/kiss-translator/issues/62
+
+### 本地的Ollama接口不能使用
+
+如果出现403的情况，参考：https://github.com/fishjar/kiss-translator/issues/174
+
+### 填写的接口在油猴脚本不能使用
+
+油猴脚本需要增加域名白名单，否则不能发出请求。
+
+### 如何设置自定义接口的hook函数
+
+自定义接口功能非常灵活，理论可以接入任何翻译接口。
+
+Request Hook 函数示例如下：
+
+```js
+/**
+ * Request Hook
+ * @param {string} text 需要翻译的原文
+ * @param {string} from 原文语言
+ * @param {string} to   译文语言
+ * @param {string} url  翻译接口地址
+ * @param {string} key  翻译接口密钥
+ * @returns {Array[string, object]} [接口地址, 请求参数对象]
+ */
+(text, from, to, url, key) => [url, {
+  headers: {
+    "Content-type": "application/json",
+    "Authorization": `Bearer ${key}`
+  },
+  method: "POST",
+  body: { text, to },
+}]
+```
+
+Response Hook 函数示例如下：
+
+```js
+/**
+ * Request Hook
+ * @param {string} res  接口返回的json数据
+ * @param {string} text 需要翻译的原文
+ * @param {string} from 原文语言
+ * @param {string} to   译文语言
+ * @returns {Array[string, boolean]} [译文, 译文语言与原文语言是否相同]
+ * 注：如果返回值第二个值为true（译文语言与原文语言相同）则译文不会在页面显示，
+ *     参数不全的情况建议直接返回false
+ */
+(res, text, from, to) => [res.text, to === res.src]
+```
+
+更多的自定义接口示例，请参考： [custom-api.md](https://github.com/fishjar/kiss-translator/blob/master/custom-api.md)
 
 ## 开发指引
 
 ```sh
 git clone https://github.com/fishjar/kiss-translator.git
 cd kiss-translator
+git checkout dev # 提交PR建议推送到dev分支
 pnpm install
 pnpm build
 ```

config-overrides.js

@@ -92,6 +92,7 @@ const userscriptWebpack = (config, env) => {
 // @grant         GM.info
 // @grant         unsafeWindow
 // @connect       translate.googleapis.com
+// @connect       translate-pa.googleapis.com
 // @connect       api-edge.cognitive.microsofttranslator.com
 // @connect       edge.microsoft.com
 // @connect       api-free.deepl.com
@@ -108,10 +109,10 @@ const userscriptWebpack = (config, env) => {
 // @connect       dav.jianguoyun.com
 // @connect       fanyi.baidu.com
 // @connect       transmart.qq.com
-// @connect       localhost:3000
-// @connect       127.0.0.1:3000
-// @connect       localhost:1188
-// @connect       127.0.0.1:1188
+// @connect       niutrans.com
+// @connect       translate.volcengine.com
+// @connect       localhost
+// @connect       127.0.0.1
 // @run-at        document-end
 // ==/UserScript==
 

custom-api.md

@@ -0,0 +1,346 @@
+# 自定义接口示例
+
+以下示例为网友提供，仅供学习参考。
+
+## 本地运行 Seed-X-PPO-7B 量化模型
+
+> 由网友 emptyghost6 提供，来源：https://linux.do/t/topic/828257
+
+URL
+
+```sh
+http://localhost:8000/v1/completions
+```
+
+Request Hook
+
+```js
+(text, from, to, url, key) => {
+  // 模型支持的语言代码到完整名称的映射
+  const langFullNameMap = {
+    ar: 'Arabic', fr: 'French', ms: 'Malay', ru: 'Russian',
+    cs: 'Czech', hr: 'Croatian', nb: 'Norwegian Bokmal', sv: 'Swedish',
+    da: 'Danish', hu: 'Hungarian', nl: 'Dutch', th: 'Thai',
+    de: 'German', id: 'Indonesian', no: 'Norwegian', tr: 'Turkish',
+    en: 'English', it: 'Italian', pl: 'Polish', uk: 'Ukrainian',
+    es: 'Spanish', ja: 'Japanese', pt: 'Portuguese', vi: 'Vietnamese',
+    fi: 'Finnish', ko: 'Korean', ro: 'Romanian', zh: 'Chinese'
+  };
+
+  // 将 Hook 系统的语言代码转换为模型 API 支持的代码
+  const getModelLangCode = (lang) => {
+    if (lang === 'zh-CN' || lang === 'zh-TW') return 'zh';
+    return lang;
+  };
+
+  const sourceLangCode = getModelLangCode(from);
+  const targetLangCode = getModelLangCode(to);
+
+  const sourceLangName = langFullNameMap[sourceLangCode] || from;
+  const targetLangName = langFullNameMap[targetLangCode] || to;
+
+  const prompt = `Translate it to ${targetLangName}:\n${text} <${targetLangCode}>`;
+
+  // 构建请求体对象
+  const bodyObject = {
+    model: "./ByteDance-Seed/Seed-X-PPO-7B-AWQ-Int4",
+    prompt: prompt,
+    max_tokens: 2048,
+    temperature: 0.0,
+  };
+
+  // 返回最终的请求配置
+  return [url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    // 关键改动：将 JavaScript 对象转换为 JSON 字符串
+    body: JSON.stringify(bodyObject),
+  }];
+}
+```
+
+Response Hook
+
+```js
+(res, text, from, to) => {
+  // 检查返回是否有效
+  if (res && res.choices && res.choices.length > 0 && res.choices[0].text) {
+
+    // 提取译文并去除可能存在的前后空格
+    const translatedText = res.choices[0].text.trim();
+
+    // 比较原文与译文，相同为 true，否则为 false。
+    const areTextsIdentical = text.trim() === translatedText;
+
+    // 返回数组：[翻译后的文本, 是否与原文相同]
+    return [translatedText, areTextsIdentical];
+  }
+  // 如果响应格式不正确或没有结果，则抛出错误
+  throw new Error("Invalid API response format or no translation found.");
+}
+```
+
+## 接入 openrouter
+
+> 由网友 Rick Sanchez 提供
+
+URL
+
+```sh
+https://openrouter.ai/api/v1/chat/completions
+```
+
+Request Hook
+
+```js
+(text, from, to, url, key) => [url, {
+  method: "POST",
+  headers: {
+      "Authorization": `Bearer ${key}`,
+      "Content-type": "application/json",
+  },
+  body: JSON.stringify({
+    "model": "deepseek/deepseek-chat-v3-0324:free", //可自定义你的模型
+    "messages": [
+      {
+        "role": "user",
+        "content":  //可自定义你的提示词
+`You are a professional ${to} native translator. Your task is to produce a fluent, natural, and culturally appropriate translation of the following text from ${from} to ${to}, fully conveying the meaning, tone, and nuance of the original.
+
+## Translation Rules
+1. Output only the final polished translation — no explanations, intermediate drafts, or notes.
+2. Translate in a way that reads naturally to a native ${to} audience, adapting idioms, cultural references, and tone when necessary.
+3. Preserve proper nouns, technical terms, brand names, and URLs exactly as in the original text unless a widely accepted ${to} equivalent exists.
+4. Keep any formatting (Markdown, HTML tags, bullet points, numbering) intact and positioned naturally within the translation.
+5. Adapt humor, metaphors, and figurative language to culturally relevant forms in ${to} while keeping the original intent.
+6. Maintain the same level of formality or informality as the original.
+
+Source Text: ${text}
+
+Translated Text:`
+      }
+    ]
+  })
+}]
+```
+
+Response Hook
+
+```js
+(res, text, from, to) => [
+  res.choices?.[0]?.message?.content ?? "", 
+  false
+]
+```
+
+## 接入 gemini-2.5-flash, 关闭思考模式, 去审查
+
+> 由网友 Rick Sanchez 提供
+
+URL
+
+```sh
+https://generativelanguage.googleapis.com/v1beta/models
+```
+
+Request Hook
+
+```js
+(text, from, to, url, key) => [`${url}/gemini-2.5-flash:generateContent?key=${key}`, {
+    headers: {
+        "Content-Type": "application/json",
+    },
+    method: "POST",
+    body: JSON.stringify({
+        "generationConfig": {
+            "temperature": 0.8,
+            "thinkingConfig": {
+                "thinkingBudget": 0, //gemini-2.5-flash设为0关闭思考模式
+            },
+        },
+        "safetySettings": [
+            {
+                "category": "HARM_CATEGORY_HARASSMENT",
+                "threshold": "BLOCK_NONE",
+            },
+            {
+                "category": "HARM_CATEGORY_HATE_SPEECH",
+                "threshold": "BLOCK_NONE",
+            },
+            {
+                "category": "HARM_CATEGORY_SEXUALLY_EXPLICIT",
+                "threshold": "BLOCK_NONE",
+            },
+            {
+                "category": "HARM_CATEGORY_DANGEROUS_CONTENT",
+                "threshold": "BLOCK_NONE",
+            }
+        ],
+        "contents": [{
+            "parts": [{
+                "text": `自定义提示词`
+            }]
+        }],
+    }),
+}]
+```
+
+Response Hook
+
+```js
+(res, text, from, to) => [
+  res.candidates?.[0]?.content?.parts?.[0]?.text ?? "",
+  false
+]
+```
+
+## 接入 Qwen-MT
+
+> 由网友 atom 提供
+
+URL
+
+```sh
+https://dashscope.aliyuncs.com/compatible-mode/v1/chat/completions
+```
+
+Request Hook
+
+```js
+(text, from, to, url, key) => {
+  const mapLanguageCode = (lang) => ({
+    'zh-CN': 'zh',
+    'zh-TW': 'zh_tw',
+  })[lang] || lang;
+
+  const targetLang = mapLanguageCode(to);
+
+  return [
+    url,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "Authorization": `Bearer ${key}`
+      },
+      body: JSON.stringify({
+        "model": "qwen-mt-turbo",
+        "messages": [
+          {
+            "role": "user",
+            "content": text
+          }
+        ],
+        "translation_options": {
+          "source_lang": "auto",
+          "target_lang": targetLang
+        }
+      })
+    }
+  ];
+}
+```
+
+Response Hook
+
+```js
+(res, text, from, to) => [res.choices?.[0]?.message?.content ?? "", false]
+```
+
+
+## 接入 deepl 接口
+
+> 来源： https://github.com/fishjar/kiss-translator/issues/101#issuecomment-2123786236
+
+Request Hook
+
+```js
+(text, from, to, url, key) => [
+  url,
+  {
+    headers: {
+      "Content-type": "application/json",
+    },
+    method: "POST",
+    body: JSON.stringify({
+      text,
+      target_lang: "ZH",
+      source_lang: "auto",
+    }),
+  },
+]
+```
+
+Response Hook
+
+```js
+(res, text, from, to) => [res.data, "ZH" === res.source_lang]
+```
+
+## 接入智谱AI大模型
+
+> 来源： https://github.com/fishjar/kiss-translator/issues/205#issuecomment-2642422679
+
+Request Hook
+
+```js
+(text, from, to, url, key) => [url, {
+  "method": "POST",
+  "headers": {
+    "Content-type": "application/json",
+    "Authorization": key
+  },
+  "body": JSON.stringify({
+  	"model": "glm-4-flash",
+  	"messages": [
+  		{
+  			"role":"system",
+  			"content": "You are a professional, authentic machine translation engine. You only return the translated text, without any explanations."
+  		},
+  		{
+  			"role": "user",
+  			"content": `Translate the following text into ${to}. If translation is unnecessary (e.g. proper nouns, codes, etc.), return the original text. NO explanations. NO notes:\n\n ${text} `
+  		}
+  	]
+  })
+}]
+```
+
+## 接入谷歌新接口
+
+> 由网友 Bush2021 提供，来源：https://github.com/fishjar/kiss-translator/issues/225#issuecomment-2810950717
+
+URL
+
+```sh
+https://translate-pa.googleapis.com/v1/translateHtml
+```
+
+KEY
+
+```sh
+AIzaSyATBXajvzQLTDHEQbcpq0Ihe0vWDHmO520
+```
+
+Request Hook
+
+```js
+(text, from, to, url, key) => [url, {
+    method: "POST", 
+    headers: { 
+        "Content-Type": "application/json+protobuf", 
+        "X-Goog-API-Key": key
+    }, 
+    body: JSON.stringify([[[text], from || "auto", to], "wt_lib"])
+}]
+```
+
+Response Hook
+
+```js
+(res, text, from, to) => [res?.[0]?.join(" ") || "Translation unavailable", to === res?.[1]?.[0]]
+```
+
+

package.json

@@ -1,21 +1,23 @@
 {
   "name": "kiss-translator",
   "description": "A minimalist bilingual translation Extension & Greasemonkey Script",
-  "version": "1.8.4",
+  "version": "1.9.2",
   "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",
+    "sval": "^0.5.2",
     "webdav": "^5.3.0",
     "webextension-polyfill": "^0.10.0"
   },
@@ -24,13 +26,16 @@
     "start:userscript": "REACT_APP_CLIENT=userscript react-app-rewired start",
     "build:chrome": "rm -rf build/chrome && BUILD_PATH=./build/chrome REACT_APP_CLIENT=chrome react-app-rewired build && rm build/chrome/content.html",
     "build:edge": "rm -rf build/edge && cp -r build/chrome build/edge",
+    "build:thunderbird": "rm -rf build/thunderbird && BUILD_PATH=./build/thunderbird REACT_APP_CLIENT=thunderbird react-app-rewired build && rm build/thunderbird/content.html && cp ./build/thunderbird/manifest.thunderbird.json ./build/thunderbird/manifest.json && rm build/*/manifest.thunderbird.json",
     "build:firefox": "rm -rf build/firefox && cp -r build/chrome build/firefox && cat ./build/firefox/manifest.firefox.json > ./build/firefox/manifest.json && rm build/*/manifest.firefox.json",
     "build:web": "rm -rf build/web && BUILD_PATH=./build/web REACT_APP_CLIENT=userscript react-app-rewired build",
     "build:userscript-ios": "file1=build/web/kiss-translator.user.js file2=build/web/kiss-translator-ios-safari.user.js && cp $file1 $file2 && sed -i 's|// @grant         unsafeWindow|// @inject-into   content|g' $file2",
     "build:userscript": "rm -rf build/userscript && mkdir build/userscript && cp build/web/*.user.js build/userscript/",
     "build:rules": "babel-node src/rules.js",
-    "build": "pnpm build:chrome && pnpm build:edge && pnpm build:firefox && pnpm build:web && pnpm build:userscript-ios && pnpm build:userscript && pnpm build:rules",
-    "pack": "cd build && zip -r chrome.zip chrome && zip -r edge.zip edge && cd firefox && zip -r ../firefox.zip .",
+    "build": "pnpm format && pnpm build:chrome && pnpm build:edge && pnpm build:thunderbird && pnpm build:firefox && pnpm build:web && pnpm build:userscript-ios && pnpm build:userscript && pnpm build:rules",
+    "zip": "cd build && rm -f *.zip && zip -r chrome.zip chrome && zip -r edge.zip edge && zip -r userscript.zip userscript && (cd firefox && zip -r ../firefox.zip .) && (cd thunderbird && zip -r ../thunderbird.zip .)",
+    "build+zip": "pnpm build && pnpm zip",
+    "format": "prettier --write \"**/*.{js,json,html}\"",
     "test": "react-app-rewired test",
     "eject": "react-scripts eject"
   },
@@ -42,7 +47,8 @@
     "globals": {
       "GM": true,
       "unsafeWindow": true,
-      "globalThis": true
+      "globalThis": true,
+      "messenger": true
     }
   },
   "browserslist": {
@@ -58,10 +64,11 @@
     ]
   },
   "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",
+    "prettier": "3.6.2",
     "react-app-rewired": "^2.2.1"
   }
 }

public/content.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -16,7 +16,7 @@
       }
     </style>
     <script>
-      document.addEventListener("DOMContentLoaded", function () {
+      document.addEventListener('DOMContentLoaded', function () {
         // (() => {
         //   var shadow = document.querySelector("#shadow1");
         //   var root = shadow.attachShadow({ mode: "open" });
@@ -54,8 +54,8 @@
         // }, 1000);
 
         setTimeout(function () {
-          var el = document.querySelector("h2>p>span");
-          el.innerText = "hello world";
+          var el = document.querySelector('h2>p>span');
+          el.innerText = 'hello world';
         }, 1000);
       });
     </script>
@@ -105,28 +105,26 @@
       <br />
       <div id="content">
         <p>You need to enable JavaScript to run <span>this app.</span></p>
-        The <span>embargo</span> has just lifted to confirm that AmpereOne is
-        coming to Google Cloud with the C3A instances.
+        The <span>embargo</span> has just lifted to confirm that AmpereOne is coming to
+        Google Cloud with the C3A instances.
         <br />
         But these upcoming instances for now are only in private preview form.
         <br />
         <br />
         Needless to say I also haven't had any AmpereOne access to check out the
-        performance and power efficiency of these new Arm server processors from
-        Ampere Computing.
+        performance and power efficiency of these new Arm server processors from Ampere
+        Computing.
         <br />
       </div>
       <h2>
         <p>
-          <span
-            >React is a JavaScript library for building user interfaces.</span
-          >
+          <span>React is a JavaScript library for building user interfaces.</span>
         </p>
       </h2>
       <hr />
-      <input id="input1" style="width: 80%;" />
+      <input id="input1" style="width: 80%" />
       <hr />
-      <textarea id="textarea1" style="width: 80%;">test</textarea>
+      <textarea id="textarea1" style="width: 80%">test</textarea>
       <hr />
       <div id="addtitle"></div>
       <h2>Shadow 1</h2>
@@ -166,15 +164,47 @@
       <br />
       <br />
       <h2>
-        React Server Components (or RSC) is a new application architecture
-        designed by the React team.
+        React Server Components (or RSC) is a new application architecture designed by the
+        React team.
       </h2>
       <iframe
         id="iframe1"
         width="800px"
         height="600px"
-        src="http://localhost:3000/index.html"
-      ></iframe>
+        src="http://localhost:3000/index.html"></iframe>
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <h2>We’ve first shared our research on RSC in an introductory talk and an RFC.</h2>
       <br />
       <br />
       <br />
@@ -208,52 +238,10 @@
       <br />
       <br />
       <h2>
-        We’ve first shared our research on RSC in an introductory talk and an
-        RFC.
+        To recap them, we are introducing a new kind of component—Server Components—that
+        run ahead of time and are excluded from your JavaScript bundle.
       </h2>
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <h2>
-        To recap them, we are introducing a new kind of component—Server
-        Components—that run ahead of time and are excluded from your JavaScript
-        bundle.
-      </h2>
-      <iframe
-        id="iframe2"
-        width="800px"
-        height="600px"
-        src="https://react.dev/"
-      ></iframe>
+      <iframe id="iframe2" width="800px" height="600px" src="https://react.dev/"></iframe>
       <br />
       <br />
       <br />
@@ -288,15 +276,14 @@
       <br />
       <div class="cont cont1">
         <h2>
-          Server Components can run during the build, letting you read from the
-          filesystem or fetch static content.
+          Server Components can run during the build, letting you read from the filesystem
+          or fetch static content.
         </h2>
         <ul>
           <li>
-            They can also run on the server, letting you access your data layer
-            without having to build an API. You can pass data by props from
-            Server Components to the interactive Client Components in the
-            browser.
+            They can also run on the server, letting you access your data layer without
+            having to build an API. You can pass data by props from Server Components to
+            the interactive Client Components in the browser.
           </li>
           <li>以声明式编写 UI，可以让你的代码更加可靠，且方便调试。</li>
         </ul>
@@ -315,14 +302,14 @@
       <br />
       <div class="cont cont2">
         <h2>
-          Since our last update, we have merged the React Server Components RFC
-          to ratify the proposal.
+          Since our last update, we have merged the React Server Components RFC to ratify
+          the proposal.
         </h2>
         <ul>
           <li>
-            RSC combines the simple “request/response” mental model of
-            server-centric Multi-Page Apps with the seamless interactivity of
-            client-centric Single-Page Apps, giving you the best of both worlds.
+            RSC combines the simple “request/response” mental model of server-centric
+            Multi-Page Apps with the seamless interactivity of client-centric Single-Page
+            Apps, giving you the best of both worlds.
           </li>
           <li>
             React 使创建交互式 UI

public/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

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.9.2",
   "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",

public/manifest.json

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

public/manifest.thunderbird.json

@@ -0,0 +1,78 @@
+{
+  "manifest_version": 2,
+  "name": "__MSG_app_name__",
+  "description": "__MSG_app_description__",
+  "version": "1.9.2",
+  "default_locale": "en",
+  "author": "Gabe<yugang2002@gmail.com>",
+  "homepage_url": "https://github.com/fishjar/kiss-translator",
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "yugang2002@gmail.com",
+      "strict_min_version": "78.0"
+    }
+  },
+  "background": {
+    "scripts": ["background.js"]
+  },
+  "content_scripts": [
+    {
+      "js": ["content.js"],
+      "matches": ["<all_urls>"],
+      "all_frames": true
+    }
+  ],
+  "commands": {
+    "_execute_browser_action": {
+      "suggested_key": {
+        "default": "Alt+K"
+      }
+    },
+    "toggleTranslate": {
+      "suggested_key": {
+        "default": "Alt+Q"
+      },
+      "description": "__MSG_toggle_translate__"
+    },
+    "openTranbox": {
+      "suggested_key": {
+        "default": "Alt+S"
+      },
+      "description": "__MSG_open_tranbox__"
+    },
+    "toggleStyle": {
+      "suggested_key": {
+        "default": "Alt+C"
+      },
+      "description": "__MSG_toggle_style__"
+    },
+    "openOptions": {
+      "description": "__MSG_open_options__"
+    }
+  },
+  "permissions": [
+    "<all_urls>",
+    "storage",
+    "menus",
+    "messagesModify",
+    "scripting",
+    "declarativeNetRequest"
+  ],
+  "icons": {
+    "16": "images/logo16.png",
+    "32": "images/logo32.png",
+    "48": "images/logo48.png",
+    "128": "images/logo128.png"
+  },
+  "browser_action": {
+    "default_icon": {
+      "128": "images/logo128.png"
+    },
+    "default_title": "__MSG_app_name__",
+    "default_popup": "popup.html"
+  },
+  "options_ui": {
+    "page": "options.html",
+    "open_in_tab": true
+  }
+}

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

src/apis/index.js

@@ -1,27 +1,48 @@
 import queryString from "query-string";
-import { fetchPolyfill } from "../libs/fetch";
+import { fetchData } from "../libs/fetch";
 import {
   OPT_TRANS_GOOGLE,
+  OPT_TRANS_GOOGLE_2,
   OPT_TRANS_MICROSOFT,
   OPT_TRANS_DEEPL,
   OPT_TRANS_DEEPLFREE,
   OPT_TRANS_DEEPLX,
+  OPT_TRANS_NIUTRANS,
   OPT_TRANS_BAIDU,
   OPT_TRANS_TENCENT,
+  OPT_TRANS_VOLCENGINE,
   OPT_TRANS_OPENAI,
+  OPT_TRANS_OPENAI_2,
+  OPT_TRANS_OPENAI_3,
   OPT_TRANS_GEMINI,
+  OPT_TRANS_GEMINI_2,
+  OPT_TRANS_CLAUDE,
   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,
+  OPT_TRANS_CUSTOMIZE_4,
+  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,
   OPT_LANGS_BAIDU,
   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";
+import { kissLog } from "../libs/log";
 
 /**
  * 同步数据
@@ -31,7 +52,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 +66,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;
+};
 
 /**
  * 百度语言识别
@@ -53,7 +120,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 +144,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 +162,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 +189,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",
     },
@@ -146,7 +227,7 @@ export const apiTranslate = async ({
     OPT_LANGS_SPECIAL[translator].get("auto");
   const to = OPT_LANGS_SPECIAL[translator].get(toLang);
   if (!to) {
-    console.log(`[trans] target lang: ${toLang} not support`);
+    kissLog(`target lang: ${toLang} not support`, "translate");
     return [trText, isSame];
   }
 
@@ -167,7 +248,7 @@ export const apiTranslate = async ({
     to,
   };
 
-  const res = await fetchPolyfill(
+  const res = await fetchData(
     `${URL_CACHE_TRAN}?${queryString.stringify(cacheOpts)}`,
     {
       useCache,
@@ -182,6 +263,10 @@ export const apiTranslate = async ({
       trText = res.sentences.map((item) => item.trans).join(" ");
       isSame = to === res.src;
       break;
+    case OPT_TRANS_GOOGLE_2:
+      trText = res?.[0]?.[0] || "";
+      isSame = to === res.src;
+      break;
     case OPT_TRANS_MICROSOFT:
       trText = res
         .map((item) => item.translations.map((item) => item.text).join(" "))
@@ -200,6 +285,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;
@@ -212,10 +305,17 @@ export const apiTranslate = async ({
       }
       break;
     case OPT_TRANS_TENCENT:
-      trText = res.auto_translation;
+      trText = res?.auto_translation?.[0];
       isSame = text === trText;
       break;
+    case OPT_TRANS_VOLCENGINE:
+      trText = res?.translation || "";
+      isSame = to === res?.detected_language;
+      break;
     case OPT_TRANS_OPENAI:
+    case OPT_TRANS_OPENAI_2:
+    case OPT_TRANS_OPENAI_3:
+    case OPT_TRANS_GEMINI_2:
       trText = res?.choices?.map((item) => item.message.content).join(" ");
       isSame = text === trText;
       break;
@@ -225,13 +325,39 @@ export const apiTranslate = async ({
         .join(" ");
       isSame = text === trText;
       break;
+    case OPT_TRANS_CLAUDE:
+      trText = res?.content?.map((item) => item.text).join(" ");
+      isSame = text === trText;
+      break;
     case OPT_TRANS_CLOUDFLAREAI:
       trText = res?.result?.translated_text;
       isSame = text === trText;
       break;
+    case OPT_TRANS_OLLAMA:
+    case OPT_TRANS_OLLAMA_2:
+    case OPT_TRANS_OLLAMA_3:
+      const { thinkIgnore = "" } = apiSetting;
+      const deepModels = thinkIgnore.split(",").filter((model) => model.trim());
+      if (deepModels.some((model) => res?.model?.startsWith(model))) {
+        trText = res?.response.replace(/<think>[\s\S]*<\/think>/i, "");
+      } else {
+        trText = res?.response;
+      }
+      isSame = text === trText;
+      break;
     case OPT_TRANS_CUSTOMIZE:
-      trText = res.text;
-      isSame = to === res.from;
+    case OPT_TRANS_CUSTOMIZE_2:
+    case OPT_TRANS_CUSTOMIZE_3:
+    case OPT_TRANS_CUSTOMIZE_4:
+    case OPT_TRANS_CUSTOMIZE_5:
+      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:
   }

src/apis/trans.js

@@ -0,0 +1,612 @@
+import queryString from "query-string";
+import {
+  OPT_TRANS_GOOGLE,
+  OPT_TRANS_GOOGLE_2,
+  OPT_TRANS_MICROSOFT,
+  OPT_TRANS_DEEPL,
+  OPT_TRANS_DEEPLFREE,
+  OPT_TRANS_DEEPLX,
+  OPT_TRANS_NIUTRANS,
+  OPT_TRANS_BAIDU,
+  OPT_TRANS_TENCENT,
+  OPT_TRANS_VOLCENGINE,
+  OPT_TRANS_OPENAI,
+  OPT_TRANS_OPENAI_2,
+  OPT_TRANS_OPENAI_3,
+  OPT_TRANS_GEMINI,
+  OPT_TRANS_GEMINI_2,
+  OPT_TRANS_CLAUDE,
+  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,
+  OPT_TRANS_CUSTOMIZE_4,
+  OPT_TRANS_CUSTOMIZE_5,
+  URL_MICROSOFT_TRAN,
+  URL_TENCENT_TRANSMART,
+  URL_VOLCENGINE_TRAN,
+  INPUT_PLACE_URL,
+  INPUT_PLACE_FROM,
+  INPUT_PLACE_TO,
+  INPUT_PLACE_TEXT,
+  INPUT_PLACE_KEY,
+  INPUT_PLACE_MODEL,
+} from "../config";
+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/url
+const keyPick = (translator, key = "", cacheMap) => {
+  const keys = key
+    .split(/\n|,/)
+    .map((item) => item.trim())
+    .filter(Boolean);
+
+  if (keys.length === 0) {
+    return "";
+  }
+
+  const preIndex = cacheMap.get(translator) ?? -1;
+  const curIndex = (preIndex + 1) % keys.length;
+  cacheMap.set(translator, curIndex);
+
+  return keys[curIndex];
+};
+
+const genGoogle = ({ text, from, to, url, key }) => {
+  const params = {
+    client: "gtx",
+    dt: "t",
+    dj: 1,
+    ie: "UTF-8",
+    sl: from,
+    tl: to,
+    q: text,
+  };
+  const input = `${url}?${queryString.stringify(params)}`;
+  const init = {
+    headers: {
+      "Content-type": "application/json",
+    },
+  };
+  if (key) {
+    init.headers.Authorization = `Bearer ${key}`;
+  }
+
+  return [input, init];
+};
+
+const genGoogle2 = ({ text, from, to, url, key }) => {
+  const body = JSON.stringify([[[text], from, to], "wt_lib"]);
+  const init = {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json+protobuf",
+      "X-Goog-API-Key": key,
+    },
+    body,
+  };
+
+  return [url, init];
+};
+
+const genMicrosoft = async ({ text, from, to }) => {
+  const [token] = await msAuth();
+  const params = {
+    from,
+    to,
+    "api-version": "3.0",
+  };
+  const input = `${URL_MICROSOFT_TRAN}?${queryString.stringify(params)}`;
+  const init = {
+    headers: {
+      "Content-type": "application/json",
+      Authorization: `Bearer ${token}`,
+    },
+    method: "POST",
+    body: JSON.stringify([{ Text: text }]),
+  };
+
+  return [input, init];
+};
+
+const genDeepl = ({ text, from, to, url, key }) => {
+  const data = {
+    text: [text],
+    target_lang: to,
+    source_lang: from,
+    // split_sentences: "0",
+  };
+  const init = {
+    headers: {
+      "Content-type": "application/json",
+      Authorization: `DeepL-Auth-Key ${key}`,
+    },
+    method: "POST",
+    body: JSON.stringify(data),
+  };
+
+  return [url, init];
+};
+
+const genDeeplX = ({ text, from, to, url, key }) => {
+  const data = {
+    text,
+    target_lang: to,
+    source_lang: from,
+  };
+
+  const init = {
+    headers: {
+      "Content-type": "application/json",
+    },
+    method: "POST",
+    body: JSON.stringify(data),
+  };
+  if (key) {
+    init.headers.Authorization = `Bearer ${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: {
+      fn: "auto_translation",
+      client_key:
+        "browser-chrome-110.0.0-Mac OS-df4bd4c5-a65d-44b2-a40f-42f34f3535f2-1677486696487",
+    },
+    type: "plain",
+    model_category: "normal",
+    source: {
+      text_list: [text],
+      lang: from,
+    },
+    target: {
+      lang: to,
+    },
+  };
+
+  const init = {
+    headers: {
+      "Content-Type": "application/json",
+      "user-agent":
+        "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36",
+      referer: "https://transmart.qq.com/zh-CN/index",
+    },
+    method: "POST",
+    body: JSON.stringify(data),
+  };
+
+  return [URL_TENCENT_TRANSMART, init];
+};
+
+const genVolcengine = ({ text, from, to }) => {
+  const data = {
+    source_language: from,
+    target_language: to,
+    text: text,
+  };
+
+  const init = {
+    headers: {
+      "Content-type": "application/json",
+    },
+    method: "POST",
+    body: JSON.stringify(data),
+  };
+
+  return [URL_VOLCENGINE_TRAN, init];
+};
+
+const genOpenAI = ({
+  text,
+  from,
+  to,
+  url,
+  key,
+  systemPrompt,
+  userPrompt,
+  model,
+  temperature,
+  maxTokens,
+}) => {
+  // 兼容历史上作为systemPrompt的prompt，如果prompt中不包含带翻译文本，则添加文本到prompt末尾
+  // if (!prompt.includes(INPUT_PLACE_TEXT)) {
+  //   prompt += `\nSource Text: ${INPUT_PLACE_TEXT}`;
+  // }
+  systemPrompt = systemPrompt
+    .replaceAll(INPUT_PLACE_FROM, from)
+    .replaceAll(INPUT_PLACE_TO, to)
+    .replaceAll(INPUT_PLACE_TEXT, text);
+  userPrompt = userPrompt
+    .replaceAll(INPUT_PLACE_FROM, from)
+    .replaceAll(INPUT_PLACE_TO, to)
+    .replaceAll(INPUT_PLACE_TEXT, text);
+
+  const data = {
+    model,
+    messages: [
+      {
+        role: "system",
+        content: systemPrompt,
+      },
+      {
+        role: "user",
+        content: userPrompt,
+      },
+    ],
+    temperature,
+    max_completion_tokens: maxTokens,
+  };
+
+  const init = {
+    headers: {
+      "Content-type": "application/json",
+      Authorization: `Bearer ${key}`, // OpenAI
+      "api-key": key, // Azure OpenAI
+    },
+    method: "POST",
+    body: JSON.stringify(data),
+  };
+
+  return [url, init];
+};
+
+const genGemini = ({
+  text,
+  from,
+  to,
+  url,
+  key,
+  systemPrompt,
+  userPrompt,
+  model,
+  temperature,
+  maxTokens,
+}) => {
+  url = url
+    .replaceAll(INPUT_PLACE_MODEL, model)
+    .replaceAll(INPUT_PLACE_KEY, key);
+  systemPrompt = systemPrompt
+    .replaceAll(INPUT_PLACE_FROM, from)
+    .replaceAll(INPUT_PLACE_TO, to)
+    .replaceAll(INPUT_PLACE_TEXT, text);
+  userPrompt = userPrompt
+    .replaceAll(INPUT_PLACE_FROM, from)
+    .replaceAll(INPUT_PLACE_TO, to)
+    .replaceAll(INPUT_PLACE_TEXT, text);
+
+  const data = {
+    system_instruction: {
+      parts: {
+        text: systemPrompt,
+      },
+    },
+    contents: {
+      role: "user",
+      parts: {
+        text: userPrompt,
+      },
+    },
+    generationConfig: {
+      maxOutputTokens: maxTokens,
+      temperature,
+      // topP: 0.8,
+      // topK: 10,
+    },
+  };
+
+  const init = {
+    headers: {
+      "Content-type": "application/json",
+    },
+    method: "POST",
+    body: JSON.stringify(data),
+  };
+
+  return [url, init];
+};
+
+const genGemini2 = ({
+  text,
+  from,
+  to,
+  url,
+  key,
+  systemPrompt,
+  userPrompt,
+  model,
+  temperature,
+  maxTokens,
+}) => {
+  systemPrompt = systemPrompt
+    .replaceAll(INPUT_PLACE_FROM, from)
+    .replaceAll(INPUT_PLACE_TO, to)
+    .replaceAll(INPUT_PLACE_TEXT, text);
+  userPrompt = userPrompt
+    .replaceAll(INPUT_PLACE_FROM, from)
+    .replaceAll(INPUT_PLACE_TO, to)
+    .replaceAll(INPUT_PLACE_TEXT, text);
+
+  const data = {
+    model,
+    messages: [
+      {
+        role: "system",
+        content: systemPrompt,
+      },
+      {
+        role: "user",
+        content: userPrompt,
+      },
+    ],
+    temperature,
+    max_tokens: maxTokens,
+  };
+
+  const init = {
+    headers: {
+      "Content-type": "application/json",
+      Authorization: `Bearer ${key}`,
+    },
+    method: "POST",
+    body: JSON.stringify(data),
+  };
+
+  return [url, init];
+};
+
+const genClaude = ({
+  text,
+  from,
+  to,
+  url,
+  key,
+  systemPrompt,
+  userPrompt,
+  model,
+  temperature,
+  maxTokens,
+}) => {
+  systemPrompt = systemPrompt
+    .replaceAll(INPUT_PLACE_FROM, from)
+    .replaceAll(INPUT_PLACE_TO, to)
+    .replaceAll(INPUT_PLACE_TEXT, text);
+  userPrompt = userPrompt
+    .replaceAll(INPUT_PLACE_FROM, from)
+    .replaceAll(INPUT_PLACE_TO, to)
+    .replaceAll(INPUT_PLACE_TEXT, text);
+
+  const data = {
+    model,
+    system: systemPrompt,
+    messages: [
+      {
+        role: "user",
+        content: userPrompt,
+      },
+    ],
+    temperature,
+    max_tokens: maxTokens,
+  };
+
+  const init = {
+    headers: {
+      "Content-type": "application/json",
+      "anthropic-version": "2023-06-01",
+      "x-api-key": key,
+    },
+    method: "POST",
+    body: JSON.stringify(data),
+  };
+
+  return [url, init];
+};
+
+const genOllama = ({
+  text,
+  from,
+  to,
+  think,
+  url,
+  key,
+  systemPrompt,
+  userPrompt,
+  model,
+}) => {
+  systemPrompt = systemPrompt
+    .replaceAll(INPUT_PLACE_FROM, from)
+    .replaceAll(INPUT_PLACE_TO, to)
+    .replaceAll(INPUT_PLACE_TEXT, text);
+  userPrompt = userPrompt
+    .replaceAll(INPUT_PLACE_FROM, from)
+    .replaceAll(INPUT_PLACE_TO, to)
+    .replaceAll(INPUT_PLACE_TEXT, text);
+
+  const data = {
+    model,
+    system: systemPrompt,
+    prompt: userPrompt,
+    think: think,
+    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 }) => {
+  const data = {
+    text,
+    source_lang: from,
+    target_lang: to,
+  };
+
+  const init = {
+    headers: {
+      "Content-type": "application/json",
+      Authorization: `Bearer ${key}`,
+    },
+    method: "POST",
+    body: JSON.stringify(data),
+  };
+
+  return [url, init];
+};
+
+const genCustom = ({ text, from, to, url, key, 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,
+  };
+  init = {
+    headers: {
+      "Content-type": "application/json",
+    },
+    method: "POST",
+    body: JSON.stringify(data),
+  };
+  if (key) {
+    init.headers.Authorization = `Bearer ${key}`;
+  }
+
+  return [url, init];
+};
+
+/**
+ * 构造翻译接口请求参数
+ * @param {*}
+ * @returns
+ */
+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_GEMINI_2:
+    case OPT_TRANS_CLAUDE:
+    case OPT_TRANS_CLOUDFLAREAI:
+    case OPT_TRANS_OLLAMA:
+    case OPT_TRANS_OLLAMA_2:
+    case OPT_TRANS_OLLAMA_3:
+    case OPT_TRANS_NIUTRANS:
+    case OPT_TRANS_CUSTOMIZE:
+    case OPT_TRANS_CUSTOMIZE_2:
+    case OPT_TRANS_CUSTOMIZE_3:
+    case OPT_TRANS_CUSTOMIZE_4:
+    case OPT_TRANS_CUSTOMIZE_5:
+      args.key = keyPick(translator, args.key, keyMap);
+      break;
+    case OPT_TRANS_DEEPLX:
+      args.url = keyPick(translator, args.url, urlMap);
+      break;
+    default:
+  }
+
+  switch (translator) {
+    case OPT_TRANS_GOOGLE:
+      return genGoogle(args);
+    case OPT_TRANS_GOOGLE_2:
+      return genGoogle2(args);
+    case OPT_TRANS_MICROSOFT:
+      return genMicrosoft(args);
+    case OPT_TRANS_DEEPL:
+      return genDeepl(args);
+    case OPT_TRANS_DEEPLFREE:
+      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:
+      return genTencent(args);
+    case OPT_TRANS_VOLCENGINE:
+      return genVolcengine(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_GEMINI_2:
+      return genGemini2(args);
+    case OPT_TRANS_CLAUDE:
+      return genClaude(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:
+    case OPT_TRANS_CUSTOMIZE_4:
+    case OPT_TRANS_CUSTOMIZE_5:
+      return genCustom(args);
+    default:
+      throw new Error(`[trans] translator: ${translator} not support`);
+  }
+};

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,23 +11,34 @@ import {
   MSG_COMMAND_SHORTCUTS,
   MSG_INJECT_JS,
   MSG_INJECT_CSS,
+  MSG_UPDATE_CSP,
+  DEFAULT_CSPLIST,
   CMD_TOGGLE_TRANSLATE,
   CMD_TOGGLE_STYLE,
   CMD_OPEN_OPTIONS,
   CMD_OPEN_TRANBOX,
+  CLIENT_THUNDERBIRD,
 } 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`,
+];
+
 /**
  * 添加右键菜单
  */
@@ -37,7 +47,7 @@ async function addContextMenus(contextMenuType = 1) {
   try {
     await browser.contextMenus.removeAll();
   } catch (err) {
-    //
+    kissLog(err, "remove contextMenus");
   }
 
   switch (contextMenuType) {
@@ -79,14 +89,66 @@ 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");
+  }
+}
+
+/**
+ * 注册邮件显示脚本
+ */
+async function registerMsgDisplayScript() {
+  await messenger.messageDisplayScripts.register({
+    js: [{ file: "/content.js" }],
+  });
+}
+
 /**
  * 插件安装
  */
 browser.runtime.onInstalled.addListener(() => {
   tryInitDefaultData();
 
+  //在thunderbird中注册脚本
+  if (process.env.REACT_APP_CLIENT === CLIENT_THUNDERBIRD) {
+    registerMsgDisplayScript();
+  }
+
   // 右键菜单
   addContextMenus();
+
+  // 禁用CSP
+  updateCspRules();
 });
 
 /**
@@ -96,7 +158,7 @@ browser.runtime.onStartup.addListener(async () => {
   // 同步数据
   await trySyncSettingAndRules();
 
-  const { clearCache, contextMenuType, subrulesList } =
+  const { clearCache, contextMenuType, subrulesList, csplist } =
     await getSettingWithDefault();
 
   // 清除缓存
@@ -104,10 +166,18 @@ browser.runtime.onStartup.addListener(async () => {
     tryClearCaches();
   }
 
+  //在thunderbird中注册脚本
+  if (process.env.REACT_APP_CLIENT === CLIENT_THUNDERBIRD) {
+    registerMsgDisplayScript();
+  }
+
   // 右键菜单
   // firefox重启后菜单会消失,故重复添加
   addContextMenus(contextMenuType);
 
+  // 禁用CSP
+  updateCspRules(csplist);
+
   // 同步订阅规则
   trySyncAllSubRules({ subrulesList });
 });
@@ -118,13 +188,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 +210,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:

src/common.js

@@ -72,7 +72,7 @@ function runtimeListener(translator) {
       default:
         return { error: `message action is unavailable: ${action}` };
     }
-    return { data: translator.rule };
+    return { rule: translator.rule, setting: translator.setting };
   });
 }
 
@@ -135,12 +135,18 @@ async function showFab(translator) {
  * @param {*} param0
  * @returns
  */
-function showTransbox({
-  contextMenuType,
-  tranboxSetting = DEFAULT_TRANBOX_SETTING,
-  transApis,
-}) {
-  if (!tranboxSetting?.transOpen) {
+function showTransbox(
+  {
+    contextMenuType,
+    tranboxSetting = DEFAULT_TRANBOX_SETTING,
+    transApis,
+    darkMode,
+    uiLang,
+    langDetector,
+  },
+  { transSelected }
+) {
+  if (transSelected === "false") {
     return;
   }
 
@@ -153,6 +159,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 +175,8 @@ function showTransbox({
           contextMenuType={contextMenuType}
           tranboxSetting={tranboxSetting}
           transApis={transApis}
+          uiLang={uiLang}
+          langDetector={langDetector}
         />
       </CacheProvider>
     </React.StrictMode>
@@ -213,8 +223,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;
@@ -245,7 +254,7 @@ export async function run(isUserscript = false) {
     inputTranslate(setting);
 
     // 划词翻译
-    showTransbox(setting);
+    showTransbox(setting, rule);
 
     // 浮球按钮
     await showFab(translator);

src/config/i18n.js

@@ -42,58 +42,95 @@ const customApiLangs = `["en", "English - English"],
 ["vi", "Vietnamese - Tiếng Việt"],
 `;
 
-const customApiHelpZH = `/// 自定义翻译源接口说明
-
-// 请求（Request）数据将按下面规范发送
+const customApiHelpZH = `// 请求数据默认格式
 {
-  url: {{YOUR_URL}},
-  method: "POST",
-  headers: {
+  "url": "{{url}}",
+  "method": "POST",
+  "headers": {
     "Content-type": "application/json",
-    "Authorization": "Bearer {{YOUR_KEY}}",
+    "Authorization": "Bearer {{key}}"
+  },
+  "body": {
+    "text": "{{text}}", // 待翻译文字
+    "from": "{{from}}", // 文字的语言（可能为空）
+    "to": "{{to}}",     // 目标语言
   },
-  body: {
-    text: "", // 需要翻译的文字
-    from: "", // 源语言，可能为空，表示需要接口自动识别语言
-    to: "",   // 目标语言
-  }
 }
 
-// 返回（Response）数据需符合下面的JSON规范
+
+// 返回数据默认格式
 {
   text: "", // 翻译后的文字
   from: "", // 识别的源语言
   to: "",   // 目标语言（可选）
 }
 
+
+// Hook 范例
+// 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]
+
+
 // 支持的语言代码如下
 ${customApiLangs}
 `;
 
-const customApiHelpEN = `/// Custom translation source interface description
-
-// Request data will be sent according to the following specifications
+const customApiHelpEN = `// Default request
 {
-  url: {{YOUR_URL}},
-  method: "POST",
-  headers: {
+  "url": "{{url}}",
+  "method": "POST",
+  "headers": {
     "Content-type": "application/json",
-    "Authorization": "Bearer {{YOUR_KEY}}",
+    "Authorization": "Bearer {{key}}"
+  },
+  "body": {
+    "text": "{{text}}", // Text to be translated
+    "from": "{{from}}", // The language of the text (may be empty)
+    "to": "{{to}}",     // Target language
   },
-  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
+
+// Default response
 {
   text: "", // translated text
   from: "", // Recognized source language
   to: "",   // Target language (optional)
 }
 
+
+/// Hook Example
+// 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
+// In the returned array, the first value is the translated string, while the second value is a boolean
+// that indicates whether the source language is the same as the target language.
+(res, text, from, to) => [res.sentences.map((item) => item.trans).join(" "), to === res.src]
+
+
 // The supported language codes are as follows
 ${customApiLangs}
 `;
@@ -163,6 +200,22 @@ export const I18N = {
     zh: `最大并发请求数量 (1-100)`,
     en: `Maximum Number Of Concurrent Requests (1-100)`,
   },
+  if_think: {
+    zh: `启用或禁用模型的深度思考能力`,
+    en: `Enable or disable the model’s thinking behavior `,
+  },
+  think: {
+    zh: `启用深度思考`,
+    en: `enable thinking`,
+  },
+  nothink: {
+    zh: `禁用深度思考`,
+    en: `disable thinking`,
+  },
+  think_ignore: {
+    zh: `忽略以下模型的<think>输出,逗号(,)分割,当模型支持思考但ollama不支持时需要填写本参数`,
+    en: `Ignore the <think> block for the following models, comma (,) separated`,
+  },
   fetch_interval: {
     zh: `每次请求间隔时间 (0-5000ms)`,
     en: `Time Between Requests (0-5000ms)`,
@@ -171,6 +224,10 @@ export const I18N = {
     zh: `重新翻译间隔时间 (100-5000ms)`,
     en: `Retranslation Interval (100-5000ms)`,
   },
+  http_timeout: {
+    zh: `请求超时时间 (5000-30000ms)`,
+    en: `Request Timeout Time (5000-30000ms)`,
+  },
   min_translate_length: {
     zh: `最小翻译字符数 (1-100)`,
     en: `Minimum number Of Translated Characters (1-100)`,
@@ -316,12 +373,20 @@ export const I18N = {
     en: `3. Regarding filling in the rules: Leave the input box blank or select "*" in the drop-down box to use global rule.`,
   },
   sync_warn: {
+    zh: `涉及隐私数据的同步请谨慎选择第三方同步服务，建议自行搭建 kiss-worker 或 WebDAV 服务。`,
+    en: `When synchronizing data that involves privacy, please be cautious about choosing third-party sync services. It is recommended to set up your own sync service using kiss-worker or WebDAV.`,
+  },
+  sync_warn_2: {
     zh: `如果服务器存在其他客户端同步的数据，第一次同步将直接覆盖本地配置，后面则根据修改时间，新的覆盖旧的。`,
     en: `If the server has data synchronized by other clients, the first synchronization will directly overwrite the local configuration, and later, according to the modification time, the new one will overwrite the old one.`,
   },
   about_sync_api: {
-    zh: `查看关于数据同步接口部署`,
-    en: `View About Data Synchronization Interface Deployment`,
+    zh: `自建kiss-wroker数据同步服务`,
+    en: `Self-hosting a Kiss-worker data sync service`,
+  },
+  about_api: {
+    zh: `暂未列出的接口，理论上都可以通过自定义接口的形式支持。`,
+    en: `Interfaces that have not yet been launched can theoretically be supported through custom interfaces.`,
   },
   about_api_proxy: {
     zh: `查看自建一个翻译接口代理`,
@@ -404,8 +469,8 @@ export const I18N = {
     en: `Keep unchanged selector`,
   },
   keep_selector_helper: {
-    zh: `1、遵循CSS选择器语法。2、子元素选择器用“>>>”隔开。`,
-    en: `1. Follow CSS selector syntax. 2. Sub-element selectors are separated by ">>>".`,
+    zh: `1、遵循CSS选择器语法。`,
+    en: `1. Follow CSS selector syntax.`,
   },
   terms: {
     zh: `专业术语`,
@@ -463,6 +528,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 +692,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: `Use a simple interface`,
+  },
   show: {
     zh: `显示`,
     en: `Show`,
@@ -708,12 +785,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 +840,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 +873,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: `译文元素标签`,
@@ -803,8 +896,100 @@ export const I18N = {
     zh: `更多`,
     en: `More`,
   },
+  less: {
+    zh: `更少`,
+    en: `Less`,
+  },
   fixer_selector: {
     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`,
+  },
+  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`,
+  },
+  api_name: {
+    zh: `接口名称`,
+    en: `API Name`,
+  },
+  is_disabled: {
+    zh: `是否禁用`,
+    en: `Is Disabled`,
+  },
+  translate_selected: {
+    zh: `是否启用划词翻译`,
+    en: `If translate selected`,
+  },
 };

src/config/index.js

@@ -39,7 +39,13 @@ export const CLIENT_CHROME = "chrome";
 export const CLIENT_EDGE = "edge";
 export const CLIENT_FIREFOX = "firefox";
 export const CLIENT_USERSCRIPT = "userscript";
-export const CLIENT_EXTS = [CLIENT_CHROME, CLIENT_EDGE, CLIENT_FIREFOX];
+export const CLIENT_THUNDERBIRD = "thunderbird";
+export const CLIENT_EXTS = [
+  CLIENT_CHROME,
+  CLIENT_EDGE,
+  CLIENT_FIREFOX,
+  CLIENT_THUNDERBIRD,
+];
 
 export const KV_RULES_KEY = "kiss-rules.json";
 export const KV_WORDS_KEY = "kiss-words.json";
@@ -51,8 +57,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 +70,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";
@@ -78,40 +84,96 @@ 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_GOOGLE_TRAN2 =
+  "https://translate-pa.googleapis.com/v1/translateHtml";
+export const DEFAULT_GOOGLE_API_KEY = "AIzaSyATBXajvzQLTDHEQbcpq0Ihe0vWDHmO520";
+
 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_VOLCENGINE_TRAN =
+  "https://translate.volcengine.com/crx/translate/v1";
+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_DICT_BAIDU = "Baidu";
 
 export const OPT_TRANS_GOOGLE = "Google";
+export const OPT_TRANS_GOOGLE_2 = "Google2";
 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_VOLCENGINE = "Volcengine";
 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_GEMINI_2 = "Gemini2";
+export const OPT_TRANS_CLAUDE = "Claude";
 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";
+export const OPT_TRANS_CUSTOMIZE_4 = "Custom4";
+export const OPT_TRANS_CUSTOMIZE_5 = "Custom5";
 export const OPT_TRANS_ALL = [
+  OPT_TRANS_GOOGLE,
+  OPT_TRANS_GOOGLE_2,
+  OPT_TRANS_MICROSOFT,
+  OPT_TRANS_BAIDU,
+  OPT_TRANS_TENCENT,
+  OPT_TRANS_VOLCENGINE,
+  OPT_TRANS_DEEPL,
+  OPT_TRANS_DEEPLFREE,
+  OPT_TRANS_DEEPLX,
+  OPT_TRANS_NIUTRANS,
+  OPT_TRANS_OPENAI,
+  OPT_TRANS_OPENAI_2,
+  OPT_TRANS_OPENAI_3,
+  OPT_TRANS_GEMINI,
+  OPT_TRANS_GEMINI_2,
+  OPT_TRANS_CLAUDE,
+  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,
+  OPT_TRANS_CUSTOMIZE_4,
+  OPT_TRANS_CUSTOMIZE_5,
+];
+
+export const OPT_LANGDETECTOR_ALL = [
   OPT_TRANS_GOOGLE,
   OPT_TRANS_MICROSOFT,
   OPT_TRANS_BAIDU,
   OPT_TRANS_TENCENT,
-  OPT_TRANS_DEEPL,
-  OPT_TRANS_DEEPLFREE,
-  OPT_TRANS_DEEPLX,
-  OPT_TRANS_OPENAI,
-  OPT_TRANS_GEMINI,
-  OPT_TRANS_CLOUDFLAREAI,
-  OPT_TRANS_CUSTOMIZE,
 ];
 
 export const OPT_LANGS_TO = [
@@ -156,6 +218,7 @@ export const OPT_LANGS_TO = [
 export const OPT_LANGS_FROM = [["auto", "Auto-detect"], ...OPT_LANGS_TO];
 export const OPT_LANGS_SPECIAL = {
   [OPT_TRANS_GOOGLE]: new Map(OPT_LANGS_FROM.map(([key]) => [key, key])),
+  [OPT_TRANS_GOOGLE_2]: new Map(OPT_LANGS_FROM.map(([key]) => [key, key])),
   [OPT_TRANS_MICROSOFT]: new Map([
     ...OPT_LANGS_FROM.map(([key]) => [key, key]),
     ["auto", ""],
@@ -176,10 +239,22 @@ 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"],
   ]),
+  [OPT_TRANS_NIUTRANS]: new Map([
+    ...OPT_LANGS_FROM.map(([key]) => [key, key]),
+    ["auto", "auto"],
+    ["zh-CN", "zh"],
+    ["zh-TW", "cht"],
+  ]),
+  [OPT_TRANS_VOLCENGINE]: new Map([
+    ...OPT_LANGS_FROM.map(([key]) => [key, key]),
+    ["auto", "auto"],
+    ["zh-CN", "zh"],
+    ["zh-TW", "zh-Hant"],
+  ]),
   [OPT_TRANS_BAIDU]: new Map([
     ...OPT_LANGS_FROM.map(([key]) => [key, key]),
     ["zh-CN", "zh"],
@@ -232,9 +307,30 @@ 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_GEMINI_2]: new Map(
+    OPT_LANGS_FROM.map(([key, val]) => [key, val.split(" - ")[0]])
+  ),
+  [OPT_TRANS_CLAUDE]: 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"],
@@ -253,8 +349,30 @@ 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_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,
@@ -316,13 +434,16 @@ 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 INPUT_PLACE_MODEL = "{{model}}"; // 占位符
 
 export const DEFAULT_COLOR = "#209CEE"; // 默认高亮背景色/线条颜色
 
-export const DEFAULT_TRANS_TAG = "span";
+export const DEFAULT_TRANS_TAG = "font";
 export const DEFAULT_SELECT_STYLE =
   "-webkit-line-clamp: unset; max-height: none; height: auto;";
 
@@ -347,10 +468,14 @@ export const GLOBLA_RULE = {
   transTiming: OPT_TIMING_PAGESCROLL, // 翻译时机/鼠标悬停翻译
   transTag: DEFAULT_TRANS_TAG, // 译文元素标签
   transTitle: "false", // 是否同时翻译页面标题
+  transSelected: "true", // 是否启用划词翻译
   detectRemote: "false", // 是否使用远程语言检测
   skipLangs: [], // 不翻译的语言
   fixerSelector: "", // 修复函数选择器
   fixerFunc: "-", // 修复函数
+  transStartHook: "", // 钩子函数
+  transEndHook: "", // 钩子函数
+  transRemoveHook: "", // 钩子函数
 };
 
 // 输入框翻译
@@ -368,9 +493,21 @@ 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,
+  // transOpen: true, // 是否启用划词翻译（作废，移至rule）
   translator: OPT_TRANS_MICROSOFT,
   fromLang: "auto",
   toLang: "zh-CN",
@@ -378,7 +515,15 @@ 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: "", // 附加样式
+  enDict: OPT_DICT_BAIDU, // 英文词典
 };
 
 // 订阅列表
@@ -397,70 +542,194 @@ export const DEFAULT_SUBRULES_LIST = [
   },
 ];
 
+export const DEFAULT_HTTP_TIMEOUT = 5000; // 调用超时时间
+
 // 翻译接口
+const defaultCustomApi = {
+  url: "",
+  key: "",
+  customOption: "", // (作废)
+  reqHook: "", // request 钩子函数
+  resHook: "", // response 钩子函数
+  fetchLimit: DEFAULT_FETCH_LIMIT,
+  fetchInterval: DEFAULT_FETCH_INTERVAL,
+  apiName: "",
+  isDisabled: false,
+  httpTimeout: DEFAULT_HTTP_TIMEOUT,
+};
+const defaultOpenaiApi = {
+  url: "https://api.openai.com/v1/chat/completions",
+  key: "",
+  model: "gpt-4",
+  systemPrompt: `You are a professional, authentic machine translation engine.`,
+  userPrompt: `Translate the following source text from ${INPUT_PLACE_FROM} to ${INPUT_PLACE_TO}. Output translation directly without any additional text.\n\nSource Text: ${INPUT_PLACE_TEXT}\n\nTranslated Text:`,
+  temperature: 0,
+  maxTokens: 256,
+  fetchLimit: 1,
+  fetchInterval: 500,
+  apiName: "",
+  isDisabled: false,
+  httpTimeout: DEFAULT_HTTP_TIMEOUT * 2,
+};
+const defaultOllamaApi = {
+  url: "http://localhost:11434/api/generate",
+  key: "",
+  model: "llama3.1",
+  systemPrompt: `You are a professional, authentic machine translation engine.`,
+  userPrompt: `Translate the following source text from ${INPUT_PLACE_FROM} to ${INPUT_PLACE_TO}. Output translation directly without any additional text.\n\nSource Text: ${INPUT_PLACE_TEXT}\n\nTranslated Text:`,
+  think: false,
+  thinkIgnore: `qwen3,deepseek-r1`,
+  fetchLimit: 1,
+  fetchInterval: 500,
+  apiName: "",
+  isDisabled: false,
+  httpTimeout: DEFAULT_HTTP_TIMEOUT * 2,
+};
 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, // 任务间隔时间
+    apiName: OPT_TRANS_GOOGLE, // 接口自定义名称
+    isDisabled: false, // 是否禁用
+    httpTimeout: DEFAULT_HTTP_TIMEOUT, // 超时时间
+  },
+  [OPT_TRANS_GOOGLE_2]: {
+    url: URL_GOOGLE_TRAN2,
+    key: DEFAULT_GOOGLE_API_KEY,
+    fetchLimit: DEFAULT_FETCH_LIMIT,
+    fetchInterval: DEFAULT_FETCH_INTERVAL,
+    apiName: OPT_TRANS_GOOGLE_2,
+    isDisabled: false,
+    httpTimeout: DEFAULT_HTTP_TIMEOUT,
   },
   [OPT_TRANS_MICROSOFT]: {
     fetchLimit: DEFAULT_FETCH_LIMIT,
     fetchInterval: DEFAULT_FETCH_INTERVAL,
+    apiName: OPT_TRANS_MICROSOFT,
+    isDisabled: false,
+    httpTimeout: DEFAULT_HTTP_TIMEOUT,
   },
   [OPT_TRANS_BAIDU]: {
     fetchLimit: DEFAULT_FETCH_LIMIT,
     fetchInterval: DEFAULT_FETCH_INTERVAL,
+    apiName: OPT_TRANS_BAIDU,
+    isDisabled: false,
+    httpTimeout: DEFAULT_HTTP_TIMEOUT,
   },
   [OPT_TRANS_TENCENT]: {
     fetchLimit: DEFAULT_FETCH_LIMIT,
     fetchInterval: DEFAULT_FETCH_INTERVAL,
+    apiName: OPT_TRANS_TENCENT,
+    isDisabled: false,
+    httpTimeout: DEFAULT_HTTP_TIMEOUT,
+  },
+  [OPT_TRANS_VOLCENGINE]: {
+    fetchLimit: DEFAULT_FETCH_LIMIT,
+    fetchInterval: DEFAULT_FETCH_INTERVAL,
+    apiName: OPT_TRANS_VOLCENGINE,
+    isDisabled: false,
+    httpTimeout: DEFAULT_HTTP_TIMEOUT,
   },
   [OPT_TRANS_DEEPL]: {
     url: "https://api-free.deepl.com/v2/translate",
     key: "",
     fetchLimit: 1,
     fetchInterval: 500,
+    apiName: OPT_TRANS_DEEPL,
+    isDisabled: false,
+    httpTimeout: DEFAULT_HTTP_TIMEOUT,
   },
   [OPT_TRANS_DEEPLFREE]: {
     fetchLimit: 1,
     fetchInterval: 500,
+    apiName: OPT_TRANS_DEEPLFREE,
+    isDisabled: false,
+    httpTimeout: DEFAULT_HTTP_TIMEOUT,
   },
   [OPT_TRANS_DEEPLX]: {
     url: "http://localhost:1188/translate",
     key: "",
     fetchLimit: 1,
     fetchInterval: 500,
+    apiName: OPT_TRANS_DEEPLX,
+    isDisabled: false,
+    httpTimeout: DEFAULT_HTTP_TIMEOUT,
   },
-  [OPT_TRANS_OPENAI]: {
-    url: "https://api.openai.com/v1/chat/completions",
-    key: "",
-    model: "gpt-4",
-    prompt: `You will be provided with a sentence in ${PROMPT_PLACE_FROM}, and your task is to translate it into ${PROMPT_PLACE_TO}.`,
-    fetchLimit: 1,
-    fetchInterval: 500,
-  },
-  [OPT_TRANS_GEMINI]: {
-    url: "https://generativelanguage.googleapis.com/v1/models",
-    key: "",
-    model: "gemini-pro",
-    prompt: `Translate the following text from ${PROMPT_PLACE_FROM} to ${PROMPT_PLACE_TO}:\n\n${PROMPT_PLACE_TEXT}`,
-    fetchLimit: 1,
-    fetchInterval: 500,
-  },
-  [OPT_TRANS_CLOUDFLAREAI]: {
-    url: "https://api.cloudflare.com/client/v4/accounts/{ACCOUNT_ID}/ai/run/@cf/meta/m2m100-1.2b",
-    key: "",
-    fetchLimit: 1,
-    fetchInterval: 500,
-  },
-  [OPT_TRANS_CUSTOMIZE]: {
-    url: "",
+  [OPT_TRANS_NIUTRANS]: {
+    url: "https://api.niutrans.com/NiuTransServer/translation",
     key: "",
+    dictNo: "",
+    memoryNo: "",
     fetchLimit: DEFAULT_FETCH_LIMIT,
     fetchInterval: DEFAULT_FETCH_INTERVAL,
+    apiName: OPT_TRANS_NIUTRANS,
+    isDisabled: false,
+    httpTimeout: DEFAULT_HTTP_TIMEOUT,
   },
+  [OPT_TRANS_OPENAI]: defaultOpenaiApi,
+  [OPT_TRANS_OPENAI_2]: defaultOpenaiApi,
+  [OPT_TRANS_OPENAI_3]: defaultOpenaiApi,
+  [OPT_TRANS_GEMINI]: {
+    url: `https://generativelanguage.googleapis.com/v1/models/${INPUT_PLACE_MODEL}:generateContent?key=${INPUT_PLACE_KEY}`,
+    key: "",
+    model: "gemini-2.5-flash",
+    systemPrompt: `You are a professional, authentic machine translation engine.`,
+    userPrompt: `Translate the following source text from ${INPUT_PLACE_FROM} to ${INPUT_PLACE_TO}. Output translation directly without any additional text.\n\nSource Text: ${INPUT_PLACE_TEXT}\n\nTranslated Text:`,
+    temperature: 0,
+    maxTokens: 2048,
+    fetchLimit: 1,
+    fetchInterval: 500,
+    apiName: OPT_TRANS_GEMINI,
+    isDisabled: false,
+    httpTimeout: DEFAULT_HTTP_TIMEOUT * 2,
+  },
+  [OPT_TRANS_GEMINI_2]: {
+    url: `https://generativelanguage.googleapis.com/v1beta/openai/chat/completions`,
+    key: "",
+    model: "gemini-2.0-flash",
+    systemPrompt: `You are a professional, authentic machine translation engine.`,
+    userPrompt: `Translate the following source text from ${INPUT_PLACE_FROM} to ${INPUT_PLACE_TO}. Output translation directly without any additional text.\n\nSource Text: ${INPUT_PLACE_TEXT}\n\nTranslated Text:`,
+    temperature: 0,
+    maxTokens: 2048,
+    fetchLimit: 1,
+    fetchInterval: 500,
+    apiName: OPT_TRANS_GEMINI_2,
+    isDisabled: false,
+    httpTimeout: DEFAULT_HTTP_TIMEOUT * 2,
+  },
+  [OPT_TRANS_CLAUDE]: {
+    url: "https://api.anthropic.com/v1/messages",
+    key: "",
+    model: "claude-3-haiku-20240307",
+    systemPrompt: `You are a professional, authentic machine translation engine.`,
+    userPrompt: `Translate the following source text from ${INPUT_PLACE_FROM} to ${INPUT_PLACE_TO}. Output translation directly without any additional text.\n\nSource Text: ${INPUT_PLACE_TEXT}\n\nTranslated Text:`,
+    temperature: 0,
+    maxTokens: 1024,
+    fetchLimit: 1,
+    fetchInterval: 500,
+    apiName: OPT_TRANS_CLAUDE,
+    isDisabled: false,
+    httpTimeout: DEFAULT_HTTP_TIMEOUT * 2,
+  },
+  [OPT_TRANS_CLOUDFLAREAI]: {
+    url: "https://api.cloudflare.com/client/v4/accounts/{{ACCOUNT_ID}}/ai/run/@cf/meta/m2m100-1.2b",
+    key: "",
+    fetchLimit: 1,
+    fetchInterval: 500,
+    apiName: OPT_TRANS_CLOUDFLAREAI,
+    isDisabled: false,
+    httpTimeout: DEFAULT_HTTP_TIMEOUT * 2,
+  },
+  [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,
+  [OPT_TRANS_CUSTOMIZE_4]: defaultCustomApi,
+  [OPT_TRANS_CUSTOMIZE_5]: defaultCustomApi,
 };
 
 // 默认快捷键
@@ -485,6 +754,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, // 深色模式
@@ -494,6 +764,7 @@ export const DEFAULT_SETTING = {
   minLength: TRANS_MIN_LENGTH,
   maxLength: TRANS_MAX_LENGTH,
   newlineLength: TRANS_NEWLINE_LENGTH,
+  httpTimeout: DEFAULT_HTTP_TIMEOUT,
   clearCache: false, // 是否在浏览器下次启动时清除缓存
   injectRules: true, // 是否注入订阅规则
   // injectWebfix: true, // 是否注入修复补丁(作废)
@@ -512,8 +783,10 @@ 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, // 翻译间隔时间
+  langDetector: OPT_TRANS_MICROSOFT, // 远程语言识别服务
 };
 
 export const DEFAULT_RULES = [GLOBLA_RULE];

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: "", // 选择器
@@ -26,10 +26,14 @@ export const DEFAULT_RULE = {
   transTiming: GLOBAL_KEY, // 翻译时机/鼠标悬停翻译
   transTag: GLOBAL_KEY, // 译文元素标签
   transTitle: GLOBAL_KEY, // 是否同时翻译页面标题
+  transSelected: GLOBAL_KEY, // 是否启用划词翻译
   detectRemote: GLOBAL_KEY, // 是否使用远程语言检测
   skipLangs: [], // 不翻译的语言
   fixerSelector: "", // 修复函数选择器
   fixerFunc: GLOBAL_KEY, // 修复函数
+  transStartHook: "", // 钩子函数
+  transEndHook: "", // 钩子函数
+  transRemoveHook: "", // 钩子函数
 };
 
 const DEFAULT_DIY_STYLE = `color: #666;

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,
+  };
 }

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);
+}

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

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

src/hooks/Translate.js

@@ -30,7 +30,14 @@ export function useTranslate(q, rule, setting) {
           return;
         }
 
-        const deLang = await tryDetectLang(q, detectRemote === "true");
+        let deLang = "";
+        if (fromLang === "auto") {
+          deLang = await tryDetectLang(
+            q,
+            detectRemote === "true",
+            setting.langDetector
+          );
+        }
         if (deLang && (toLang.includes(deLang) || skipLangs.includes(deLang))) {
           setSamelang(true);
         } else {
@@ -39,8 +46,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);

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 ? (

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];

src/libs/fetch.js

@@ -1,19 +1,38 @@
 import { isExt, isGm } from "./client";
 import { sendBgMsg } from "./msg";
 import { taskPool } from "./pool";
+import { getSettingWithDefault } from "./storage";
+
 import {
   MSG_FETCH,
-  MSG_FETCH_LIMIT,
-  MSG_FETCH_CLEAR,
+  MSG_GET_HTTPCACHE,
   CACHE_NAME,
   DEFAULT_FETCH_INTERVAL,
   DEFAULT_FETCH_LIMIT,
+  DEFAULT_HTTP_TIMEOUT,
 } 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;
+};
 
 /**
  * 油猴脚本的请求封装
@@ -21,7 +40,10 @@ const TIMEOUT = 5000;
  * @param {*} init
  * @returns
  */
-export const fetchGM = async (input, { method = "GET", headers, body } = {}) =>
+export const fetchGM = async (
+  input,
+  { method = "GET", headers, body, timeout } = {}
+) =>
   new Promise((resolve, reject) => {
     GM.xmlHttpRequest({
       method,
@@ -29,8 +51,8 @@ export const fetchGM = async (input, { method = "GET", headers, body } = {}) =>
       headers,
       data: body,
       // withCredentials: true,
-      timeout: TIMEOUT,
-      onload: ({ response, responseHeaders, status, statusText, ...opts }) => {
+      timeout,
+      onload: ({ response, responseHeaders, status, statusText }) => {
         const headers = {};
         responseHeaders.split("\n").forEach((line) => {
           const [name, value] = line.split(":").map((item) => item.trim());
@@ -54,137 +76,230 @@ 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) {
     throw new Error("url is empty");
   }
 
-  if (isGm) {
-    let info;
-    if (window.KISS_GM) {
-      info = await window.KISS_GM.getInfo();
-    } else {
-      info = GM.info;
-    }
-
-    // Tampermonkey --> .connects
-    // Violentmonkey --> .connect
-    const connects = info?.script?.connects || info?.script?.connect || [];
-    const url = new URL(input);
-    const isSafe = connects.find((item) => url.hostname.endsWith(item));
-
-    if (isSafe) {
-      const { body, headers, status, statusText } = window.KISS_GM
-        ? await window.KISS_GM.fetch(input, init)
-        : await fetchGM(input, init);
-
-      return new Response(body, {
-        headers: new Headers(headers),
-        status,
-        statusText,
-      });
+  let timeout = apiSetting?.httpTimeout || DEFAULT_HTTP_TIMEOUT;
+  if (!apiSetting) {
+    try {
+      timeout = (await getSettingWithDefault()).httpTimeout;
+    } catch (err) {
+      //
     }
   }
 
-  if (AbortSignal?.timeout) {
-    Object.assign(init, { signal: AbortSignal.timeout(TIMEOUT) });
+  if (isGm) {
+    // let info;
+    // if (window.KISS_GM) {
+    //   info = await window.KISS_GM.getInfo();
+    // } else {
+    //   info = GM.info;
+    // }
+
+    // Tampermonkey --> .connects
+    // Violentmonkey --> .connect
+    // const connects = info?.script?.connects || info?.script?.connect || [];
+    // const url = new URL(input);
+    // const isSafe = connects.find((item) => url.hostname.endsWith(item));
+
+    // if (isSafe) {
+    //   // todo: 自定义接口 init 可能包含了 signal
+    //   Object.assign(init, { timeout });
+
+    //   const { body, headers, status, statusText } = window.KISS_GM
+    //     ? await window.KISS_GM.fetch(input, init)
+    //     : await fetchGM(input, init);
+
+    //   return new Response(body, {
+    //     headers: new Headers(headers),
+    //     status,
+    //     statusText,
+    //   });
+    // }
+
+    // todo: 自定义接口 init 可能包含了 signal
+    Object.assign(init, { timeout });
+
+    const { body, headers, status, statusText } = window.KISS_GM
+      ? await window.KISS_GM.fetch(input, init)
+      : await fetchGM(input, init);
+
+    return new Response(body, {
+      headers: new Headers(headers),
+      status,
+      statusText,
+    });
+  }
+
+  if (AbortSignal?.timeout && !init.signal) {
+    Object.assign(init, { signal: AbortSignal.timeout(timeout) });
   }
 
   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 +307,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();
 };

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");
     }

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;

src/libs/req.js

@@ -1,317 +0,0 @@
-import queryString from "query-string";
-import {
-  OPT_TRANS_GOOGLE,
-  OPT_TRANS_MICROSOFT,
-  OPT_TRANS_DEEPL,
-  OPT_TRANS_DEEPLFREE,
-  OPT_TRANS_DEEPLX,
-  OPT_TRANS_BAIDU,
-  OPT_TRANS_TENCENT,
-  OPT_TRANS_OPENAI,
-  OPT_TRANS_GEMINI,
-  OPT_TRANS_CLOUDFLAREAI,
-  OPT_TRANS_CUSTOMIZE,
-  URL_MICROSOFT_TRAN,
-  URL_TENCENT_TRANSMART,
-  PROMPT_PLACE_FROM,
-  PROMPT_PLACE_TO,
-  PROMPT_PLACE_TEXT,
-} from "../config";
-import { msAuth } from "./auth";
-import { genDeeplFree } from "../apis/deepl";
-import { genBaidu } from "../apis/baidu";
-
-const keyMap = new Map();
-
-// 轮询key
-const keyPick = (translator, key = "") => {
-  const keys = key
-    .split(/\n|,/)
-    .map((item) => item.trim())
-    .filter(Boolean);
-
-  if (keys.length === 0) {
-    return "";
-  }
-
-  const preIndex = keyMap.get(translator) ?? -1;
-  const curIndex = (preIndex + 1) % keys.length;
-  keyMap.set(translator, curIndex);
-
-  return keys[curIndex];
-};
-
-/**
- * 构造缓存 request
- * @param {*} request
- * @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",
-    dt: "t",
-    dj: 1,
-    ie: "UTF-8",
-    sl: from,
-    tl: to,
-    q: text,
-  };
-  const input = `${url}?${queryString.stringify(params)}`;
-  const init = {
-    headers: {
-      "Content-type": "application/json",
-    },
-  };
-  if (key) {
-    init.headers.Authorization = `Bearer ${key}`;
-  }
-
-  return [input, init];
-};
-
-const genMicrosoft = async ({ text, from, to }) => {
-  const [token] = await msAuth();
-  const params = {
-    from,
-    to,
-    "api-version": "3.0",
-  };
-  const input = `${URL_MICROSOFT_TRAN}?${queryString.stringify(params)}`;
-  const init = {
-    headers: {
-      "Content-type": "application/json",
-      Authorization: `Bearer ${token}`,
-    },
-    method: "POST",
-    body: JSON.stringify([{ Text: text }]),
-  };
-
-  return [input, init];
-};
-
-const genDeepl = ({ text, from, to, url, key }) => {
-  const data = {
-    text: [text],
-    target_lang: to,
-    source_lang: from,
-    // split_sentences: "0",
-  };
-  const init = {
-    headers: {
-      "Content-type": "application/json",
-      Authorization: `DeepL-Auth-Key ${key}`,
-    },
-    method: "POST",
-    body: JSON.stringify(data),
-  };
-
-  return [url, init];
-};
-
-const genDeeplX = ({ text, from, to, url, key }) => {
-  const data = {
-    text,
-    target_lang: to,
-    source_lang: from,
-  };
-
-  const init = {
-    headers: {
-      "Content-type": "application/json",
-    },
-    method: "POST",
-    body: JSON.stringify(data),
-  };
-  if (key) {
-    init.headers.Authorization = `Bearer ${key}`;
-  }
-
-  return [url, init];
-};
-
-const genTencent = ({ text, from, to }) => {
-  const data = {
-    header: {
-      fn: "auto_translation_block",
-    },
-    source: {
-      text_block: text,
-      lang: from,
-    },
-    target: {
-      lang: to,
-    },
-  };
-
-  const init = {
-    headers: {
-      "Content-Type": "application/json",
-    },
-    method: "POST",
-    body: JSON.stringify(data),
-  };
-
-  return [URL_TENCENT_TRANSMART, init];
-};
-
-const genOpenAI = ({ text, from, to, url, key, prompt, model }) => {
-  prompt = prompt
-    .replaceAll(PROMPT_PLACE_FROM, from)
-    .replaceAll(PROMPT_PLACE_TO, to);
-
-  const data = {
-    model,
-    messages: [
-      {
-        role: "system",
-        content: prompt,
-      },
-      {
-        role: "user",
-        content: text,
-      },
-    ],
-    temperature: 0,
-    max_tokens: 256,
-  };
-
-  const init = {
-    headers: {
-      "Content-type": "application/json",
-      Authorization: `Bearer ${key}`, // OpenAI
-      "api-key": key, // Azure OpenAI
-    },
-    method: "POST",
-    body: JSON.stringify(data),
-  };
-
-  return [url, init];
-};
-
-const genGemini = ({ text, from, to, url, key, prompt, model }) => {
-  prompt = prompt
-    .replaceAll(PROMPT_PLACE_FROM, from)
-    .replaceAll(PROMPT_PLACE_TO, to)
-    .replaceAll(PROMPT_PLACE_TEXT, text);
-
-  const data = {
-    contents: [
-      {
-        // role: "user",
-        parts: [
-          {
-            text: prompt,
-          },
-        ],
-      },
-    ],
-  };
-
-  const input = `${url}/${model}:generateContent?key=${key}`;
-  const init = {
-    headers: {
-      "Content-type": "application/json",
-    },
-    method: "POST",
-    body: JSON.stringify(data),
-  };
-
-  return [input, init];
-};
-
-const genCloudflareAI = ({ text, from, to, url, key }) => {
-  const data = {
-    text,
-    source_lang: from,
-    target_lang: to,
-  };
-
-  const init = {
-    headers: {
-      "Content-type": "application/json",
-      Authorization: `Bearer ${key}`,
-    },
-    method: "POST",
-    body: JSON.stringify(data),
-  };
-
-  return [url, init];
-};
-
-const genCustom = ({ text, from, to, url, key }) => {
-  const data = {
-    text,
-    from,
-    to,
-  };
-  const init = {
-    headers: {
-      "Content-type": "application/json",
-    },
-    method: "POST",
-    body: JSON.stringify(data),
-  };
-  if (key) {
-    init.headers.Authorization = `Bearer ${key}`;
-  }
-
-  return [url, init];
-};
-
-/**
- * 构造翻译接口 request
- * @param {*}
- * @returns
- */
-export const newTransReq = ({ translator, text, from, to }, apiSetting) => {
-  const args = { text, from, to, ...apiSetting };
-
-  switch (translator) {
-    case OPT_TRANS_DEEPL:
-    case OPT_TRANS_OPENAI:
-    case OPT_TRANS_GEMINI:
-    case OPT_TRANS_CLOUDFLAREAI:
-      args.key = keyPick(translator, args.key);
-      break;
-    default:
-  }
-
-  switch (translator) {
-    case OPT_TRANS_GOOGLE:
-      return genGoogle(args);
-    case OPT_TRANS_MICROSOFT:
-      return genMicrosoft(args);
-    case OPT_TRANS_DEEPL:
-      return genDeepl(args);
-    case OPT_TRANS_DEEPLFREE:
-      return genDeeplFree(args);
-    case OPT_TRANS_DEEPLX:
-      return genDeeplX(args);
-    case OPT_TRANS_BAIDU:
-      return genBaidu(args);
-    case OPT_TRANS_TENCENT:
-      return genTencent(args);
-    case OPT_TRANS_OPENAI:
-      return genOpenAI(args);
-    case OPT_TRANS_GEMINI:
-      return genGemini(args);
-    case OPT_TRANS_CLOUDFLAREAI:
-      return genCloudflareAI(args);
-    case OPT_TRANS_CUSTOMIZE:
-      return genCustom(args);
-    default:
-      throw new Error(`[trans] translator: ${translator} not support`);
-  }
-};

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];
@@ -89,6 +92,7 @@ export const matchRule = async (
     "transTiming",
     "transTag",
     "transTitle",
+    "transSelected",
     "detectRemote",
     "fixerFunc",
   ].forEach((key) => {
@@ -158,10 +162,14 @@ export const checkRules = (rules) => {
         transTiming,
         transTag,
         transTitle,
+        transSelected,
         detectRemote,
         skipLangs,
         fixerSelector,
         fixerFunc,
+        transStartHook,
+        transEndHook,
+        transRemoveHook,
       }) => ({
         pattern: pattern.trim(),
         selector: type(selector) === "string" ? selector : "",
@@ -182,9 +190,14 @@ export const checkRules = (rules) => {
         transTiming: matchValue([GLOBAL_KEY, ...OPT_TIMING_ALL], transTiming),
         transTag: matchValue([GLOBAL_KEY, "span", "font"], transTag),
         transTitle: matchValue([GLOBAL_KEY, "true", "false"], transTitle),
+        transSelected: matchValue([GLOBAL_KEY, "true", "false"], transSelected),
         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),
       })
     );

src/libs/svg.js

@@ -1,5 +1,5 @@
 export const loadingSvg = `
-<svg viewBox="0 0 100 100" style="display:inline-block; width:100%; height: 100%;">
+<svg viewBox="0 0 100 100" style="display:inline-block; width:100%; height: 100%; max-width: 24; max-height: 24;">
     <circle fill="#209CEE" stroke="none" cx="6" cy="50" r="6">
     <animateTransform
         attributeName="transform"

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,
   });
 });
 

src/libs/translator.js

@@ -18,13 +18,14 @@ import {
 } from "../config";
 import Content from "../views/Content";
 import { updateFetchPool, clearFetchPool } from "./fetch";
-import { debounce, genEventName } from "./utils";
+import { debounce, genEventName, getHtmlText } from "./utils";
 import { runFixer } from "./webfix";
 import { apiTranslate } from "../apis";
 import { sendBgMsg } from "./msg";
 import { isExt } from "./client";
 import { injectInlineJs, injectInternalCss } from "./injector";
 import { kissLog } from "./log";
+import interpreter from "./interpreter";
 
 /**
  * 翻译类
@@ -52,17 +53,17 @@ export class Translator {
   ];
   _eventName = genEventName();
   _mouseoverNode = null;
-  _keepSelector = [null, null];
+  _keepSelector = "";
   _terms = [];
   _docTitle = "";
 
   // 显示
   _interseObserver = new IntersectionObserver(
-    (intersections) => {
-      intersections.forEach((intersection) => {
-        if (intersection.isIntersecting) {
-          this._render(intersection.target);
-          this._interseObserver.unobserve(intersection.target);
+    (entries, observer) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          observer.unobserve(entry.target);
+          this._render(entry.target);
         }
       });
     },
@@ -124,9 +125,7 @@ export class Translator {
     this._setting = setting;
     this._rule = rule;
 
-    this._keepSelector = (rule.keepSelector || "")
-      .split(SHADOW_KEY)
-      .map((item) => item.trim());
+    this._keepSelector = rule.keepSelector || "";
     this._terms = (rule.terms || "")
       .split(/\n|;/)
       .map((item) => item.split(",").map((item) => item.trim()))
@@ -405,6 +404,7 @@ export class Translator {
     // 移除键盘监听
     window.removeEventListener("keydown", this._handleKeydown);
 
+    const { transRemoveHook } = this._rule;
     this._tranNodes.forEach((innerHTML, node) => {
       if (
         !this._rule.transTiming ||
@@ -420,10 +420,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);
+        }
       }
     });
 
@@ -468,45 +475,41 @@ export class Translator {
         return;
       }
 
-      const preText = this._tranNodes.get(el);
-      const curText = el.innerText.trim();
-      // const traText = traEl.innerText.trim();
-
-      // todo
-      // 1. traText when loading
-      // 2. replace startsWith
-      if (curText.startsWith(preText)) {
+      const preText = getHtmlText(this._tranNodes.get(el));
+      const curText = getHtmlText(el.innerHTML, APP_LCNAME);
+      if (preText === curText) {
         return;
       }
 
       traEl.remove();
     }
 
+    // 缓存已翻译元素
+    this._tranNodes.set(el, el.innerHTML);
+
     let q = el.innerText.trim();
-    if (this._rule.transOnly === "true") {
-      this._tranNodes.set(el, el.innerHTML);
-    } else {
-      this._tranNodes.set(el, q);
-    }
     const keeps = [];
 
+    // 翻译开始钩子函数
+    const { transStartHook } = this._rule;
+    if (transStartHook?.trim()) {
+      interpreter.run(`exports.transStartHook = ${transStartHook}`);
+      interpreter.exports.transStartHook(el, q);
+    }
+
     // 保留元素
-    const [matchSelector, subSelector] = this._keepSelector;
-    if (matchSelector || subSelector) {
+    const keepSelector = this._keepSelector.trim();
+    if (keepSelector) {
       let text = "";
       el.childNodes.forEach((child) => {
-        if (
-          child.nodeType === 1 &&
-          ((matchSelector && child.matches(matchSelector)) ||
-            (subSelector && child.querySelector(subSelector)))
-        ) {
+        if (child.nodeType === 1 && child.matches(keepSelector)) {
           if (child.nodeName === "IMG") {
             child.style.cssText += `width: ${child.width}px;`;
             child.style.cssText += `height: ${child.height}px;`;
           }
           text += `[${keeps.length}]`;
           keeps.push(child.outerHTML);
-        } else {
+        } else if (child.nodeType === 1 || child.nodeType === 3) {
           text += child.textContent;
         }
       });
@@ -538,18 +541,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} />);
   };

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
@@ -202,26 +212,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 +237,33 @@ 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);
+  });
+};
+
+/**
+ * 获取html内的文本
+ * @param {*} htmlStr
+ * @param {*} skipTag
+ * @returns
+ */
+export const getHtmlText = (htmlStr, skipTag = "") => {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(htmlStr, "text/html");
+
+  if (skipTag) {
+    doc.querySelectorAll(skipTag).forEach((el) => el.remove());
+  }
+
+  return doc.body.innerText.trim();
+};

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");
             },

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 "";

src/views/Options/Apis.js

@@ -1,21 +1,39 @@
 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 MenuItem from "@mui/material/MenuItem";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Switch from "@mui/material/Switch";
 import {
   OPT_TRANS_ALL,
   OPT_TRANS_MICROSOFT,
   OPT_TRANS_DEEPL,
+  OPT_TRANS_DEEPLX,
   OPT_TRANS_DEEPLFREE,
   OPT_TRANS_BAIDU,
   OPT_TRANS_TENCENT,
+  OPT_TRANS_VOLCENGINE,
   OPT_TRANS_OPENAI,
+  OPT_TRANS_OPENAI_2,
+  OPT_TRANS_OPENAI_3,
   OPT_TRANS_GEMINI,
+  OPT_TRANS_GEMINI_2,
+  OPT_TRANS_CLAUDE,
   OPT_TRANS_CLOUDFLAREAI,
+  OPT_TRANS_OLLAMA,
+  OPT_TRANS_OLLAMA_2,
+  OPT_TRANS_OLLAMA_3,
   OPT_TRANS_CUSTOMIZE,
-  URL_KISS_PROXY,
+  OPT_TRANS_CUSTOMIZE_2,
+  OPT_TRANS_CUSTOMIZE_3,
+  OPT_TRANS_CUSTOMIZE_4,
+  OPT_TRANS_CUSTOMIZE_5,
+  OPT_TRANS_NIUTRANS,
+  URL_NIUTRANS_REG,
   DEFAULT_FETCH_LIMIT,
   DEFAULT_FETCH_INTERVAL,
+  DEFAULT_HTTP_TIMEOUT,
 } from "../../config";
 import { useState } from "react";
 import { useI18n } from "../../hooks/I18n";
@@ -30,7 +48,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();
@@ -48,7 +66,7 @@ function TestButton({ translator, api }) {
         useCache: false,
       });
       if (!text) {
-        throw new Error("empty reault");
+        throw new Error("empty result");
       }
       alert.success(i18n("test_success"));
     } catch (err) {
@@ -62,14 +80,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,27 +105,39 @@ 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>
   );
 }
 
-function ApiFields({ translator }) {
+function ApiFields({ translator, api, updateApi, resetApi }) {
   const i18n = useI18n();
-  const { api, updateApi, resetApi } = useApi(translator);
   const {
     url = "",
     key = "",
     model = "",
-    prompt = "",
+    systemPrompt = "",
+    userPrompt = "",
+    think = false,
+    thinkIgnore = "",
     fetchLimit = DEFAULT_FETCH_LIMIT,
     fetchInterval = DEFAULT_FETCH_INTERVAL,
+    httpTimeout = DEFAULT_HTTP_TIMEOUT,
+    dictNo = "",
+    memoryNo = "",
+    reqHook = "",
+    resHook = "",
+    temperature = 0,
+    maxTokens = 256,
+    apiName = "",
+    isDisabled = false,
   } = api;
 
   const handleChange = (e) => {
@@ -109,6 +149,15 @@ function ApiFields({ translator }) {
       case "fetchInterval":
         value = limitNumber(value, 0, 5000);
         break;
+      case "httpTimeout":
+        value = limitNumber(value, 5000, 30000);
+        break;
+      case "temperature":
+        value = limitFloat(value, 0, 2);
+        break;
+      case "maxTokens":
+        value = limitNumber(value, 0, 2 ** 15);
+        break;
       default:
     }
     updateApi({
@@ -116,23 +165,59 @@ function ApiFields({ translator }) {
     });
   };
 
-  const buildinTranslators = [
+  const builtinTranslators = [
     OPT_TRANS_MICROSOFT,
     OPT_TRANS_DEEPLFREE,
     OPT_TRANS_BAIDU,
     OPT_TRANS_TENCENT,
+    OPT_TRANS_VOLCENGINE,
   ];
 
   const mulkeysTranslators = [
     OPT_TRANS_DEEPL,
     OPT_TRANS_OPENAI,
+    OPT_TRANS_OPENAI_2,
+    OPT_TRANS_OPENAI_3,
     OPT_TRANS_GEMINI,
+    OPT_TRANS_GEMINI_2,
+    OPT_TRANS_CLAUDE,
     OPT_TRANS_CLOUDFLAREAI,
+    OPT_TRANS_OLLAMA,
+    OPT_TRANS_OLLAMA_2,
+    OPT_TRANS_OLLAMA_3,
+    OPT_TRANS_NIUTRANS,
+    OPT_TRANS_CUSTOMIZE,
+    OPT_TRANS_CUSTOMIZE_2,
+    OPT_TRANS_CUSTOMIZE_3,
+    OPT_TRANS_CUSTOMIZE_4,
+    OPT_TRANS_CUSTOMIZE_5,
   ];
 
+  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) && (
+      <TextField
+        size="small"
+        label={i18n("api_name")}
+        name="apiName"
+        value={apiName}
+        onChange={handleChange}
+      />
+
+      {!builtinTranslators.includes(translator) && (
         <>
           <TextField
             size="small"
@@ -140,6 +225,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,16 +238,16 @@ function ApiFields({ translator }) {
             value={key}
             onChange={handleChange}
             multiline={mulkeysTranslators.includes(translator)}
-            helperText={
-              mulkeysTranslators.includes(translator)
-                ? i18n("mulkeys_help")
-                : ""
-            }
+            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_CLAUDE ||
+        translator.startsWith(OPT_TRANS_GEMINI)) && (
         <>
           <TextField
             size="small"
@@ -168,11 +258,110 @@ function ApiFields({ translator }) {
           />
           <TextField
             size="small"
-            label={"PROMPT"}
-            name="prompt"
-            value={prompt}
+            label={"SYSTEM PROMPT"}
+            name="systemPrompt"
+            value={systemPrompt}
             onChange={handleChange}
             multiline
+            maxRows={10}
+          />
+          <TextField
+            size="small"
+            label={"USER PROMPT"}
+            name="userPrompt"
+            value={userPrompt}
+            onChange={handleChange}
+            multiline
+            maxRows={10}
+          />
+        </>
+      )}
+
+      {translator.startsWith(OPT_TRANS_OLLAMA) && (
+        <>
+          <TextField
+            select
+            size="small"
+            name="think"
+            value={think}
+            label={i18n("if_think")}
+            onChange={handleChange}
+          >
+            <MenuItem value={false}>{i18n("nothink")}</MenuItem>
+            <MenuItem value={true}>{i18n("think")}</MenuItem>
+          </TextField>
+          <TextField
+            size="small"
+            label={i18n("think_ignore")}
+            name="thinkIgnore"
+            value={thinkIgnore}
+            onChange={handleChange}
+          />
+        </>
+      )}
+
+      {(translator.startsWith(OPT_TRANS_OPENAI) ||
+        translator === OPT_TRANS_CLAUDE ||
+        translator === OPT_TRANS_GEMINI ||
+        translator === OPT_TRANS_GEMINI_2) && (
+        <>
+          <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}
+          />
+        </>
+      )}
+
+      {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={"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}
           />
         </>
       )}
@@ -195,6 +384,29 @@ function ApiFields({ translator }) {
         onChange={handleChange}
       />
 
+      <TextField
+        size="small"
+        label={i18n("http_timeout")}
+        type="number"
+        name="httpTimeout"
+        defaultValue={httpTimeout}
+        onChange={handleChange}
+      />
+
+      <FormControlLabel
+        control={
+          <Switch
+            size="small"
+            name="isDisabled"
+            checked={isDisabled}
+            onChange={() => {
+              updateApi({ isDisabled: !isDisabled });
+            }}
+          />
+        }
+        label={i18n("is_disabled")}
+      />
+
       <Stack direction="row" spacing={2}>
         <TestButton translator={translator} api={api} />
         <Button
@@ -208,7 +420,7 @@ function ApiFields({ translator }) {
         </Button>
       </Stack>
 
-      {translator === OPT_TRANS_CUSTOMIZE && (
+      {translator.startsWith(OPT_TRANS_CUSTOMIZE) && (
         <pre>{i18n("custom_api_help")}</pre>
       )}
     </Stack>
@@ -217,6 +429,7 @@ function ApiFields({ translator }) {
 
 function ApiAccordion({ translator }) {
   const [expanded, setExpanded] = useState(false);
+  const { api, updateApi, resetApi } = useApi(translator);
 
   const handleChange = (e) => {
     setExpanded((pre) => !pre);
@@ -225,10 +438,19 @@ function ApiAccordion({ translator }) {
   return (
     <Accordion expanded={expanded} onChange={handleChange}>
       <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-        <Typography>{translator}</Typography>
+        <Typography>
+          {api.apiName ? `${translator} (${api.apiName})` : translator}
+        </Typography>
       </AccordionSummary>
       <AccordionDetails>
-        {expanded && <ApiFields translator={translator} />}
+        {expanded && (
+          <ApiFields
+            translator={translator}
+            api={api}
+            updateApi={updateApi}
+            resetApi={resetApi}
+          />
+        )}
       </AccordionDetails>
     </Accordion>
   );
@@ -239,11 +461,7 @@ export default function Apis() {
   return (
     <Box>
       <Stack spacing={3}>
-        <Alert severity="info">
-          <Link href={URL_KISS_PROXY} target="_blank">
-            {i18n("about_api_proxy")}
-          </Link>
-        </Alert>
+        <Alert severity="info">{i18n("about_api")}</Alert>
 
         <Box>
           {OPT_TRANS_ALL.map((translator) => (

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

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,43 @@ 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 +121,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"

src/views/Options/Rules.js

@@ -27,6 +27,7 @@ import Accordion from "@mui/material/Accordion";
 import AccordionSummary from "@mui/material/AccordionSummary";
 import AccordionDetails from "@mui/material/AccordionDetails";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import ExpandLessIcon from "@mui/icons-material/ExpandLess";
 import { useRules } from "../../hooks/Rules";
 import MenuItem from "@mui/material/MenuItem";
 import Grid from "@mui/material/Grid";
@@ -93,10 +94,14 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
     transTiming = OPT_TIMING_PAGESCROLL,
     transTag = DEFAULT_TRANS_TAG,
     transTitle = "false",
+    transSelected = "true",
     detectRemote = "false",
     skipLangs = [],
     fixerSelector = "",
     fixerFunc = "-",
+    transStartHook = "",
+    transEndHook = "",
+    transRemoveHook = "",
   } = formValues;
 
   const hasSamePattern = (str) => {
@@ -177,6 +182,30 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
     </MenuItem>
   );
 
+  const ShowMoreButton = showMore ? (
+    <Button
+      size="small"
+      variant="text"
+      onClick={() => {
+        setShowMore(false);
+      }}
+      startIcon={<ExpandLessIcon />}
+    >
+      {i18n("less")}
+    </Button>
+  ) : (
+    <Button
+      size="small"
+      variant="text"
+      onClick={() => {
+        setShowMore(true);
+      }}
+      startIcon={<ExpandMoreIcon />}
+    >
+      {i18n("more")}
+    </Button>
+  );
+
   return (
     <form onSubmit={handleSubmit}>
       <Stack spacing={2}>
@@ -339,95 +368,139 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
           />
         )}
 
+        <Box>
+          <Grid container spacing={2} columns={12}>
+            <Grid item xs={12} sm={6} md={3} lg={2}>
+              <TextField
+                select
+                size="small"
+                fullWidth
+                name="transOnly"
+                value={transOnly}
+                label={i18n("show_only_translations")}
+                disabled={disabled}
+                onChange={handleChange}
+              >
+                {GlobalItem}
+                <MenuItem value={"false"}>{i18n("disable")}</MenuItem>
+                <MenuItem value={"true"}>{i18n("enable")}</MenuItem>
+              </TextField>
+            </Grid>
+            <Grid item xs={12} sm={6} md={3} lg={2}>
+              <TextField
+                select
+                size="small"
+                fullWidth
+                name="transTiming"
+                value={transTiming}
+                label={i18n("trigger_mode")}
+                disabled={disabled}
+                onChange={handleChange}
+              >
+                {GlobalItem}
+                {OPT_TIMING_ALL.map((item) => (
+                  <MenuItem key={item} value={item}>
+                    {i18n(item)}
+                  </MenuItem>
+                ))}
+              </TextField>
+            </Grid>
+            <Grid item xs={12} sm={6} md={3} lg={2}>
+              <TextField
+                select
+                size="small"
+                fullWidth
+                name="transTag"
+                value={transTag}
+                label={i18n("translation_element_tag")}
+                disabled={disabled}
+                onChange={handleChange}
+              >
+                {GlobalItem}
+                <MenuItem value={"span"}>{`<span>`}</MenuItem>
+                <MenuItem value={"font"}>{`<font>`}</MenuItem>
+              </TextField>
+            </Grid>
+            <Grid item xs={12} sm={6} md={3} lg={2}>
+              <TextField
+                select
+                size="small"
+                fullWidth
+                name="transTitle"
+                value={transTitle}
+                label={i18n("translate_page_title")}
+                disabled={disabled}
+                onChange={handleChange}
+              >
+                {GlobalItem}
+                <MenuItem value={"false"}>{i18n("disable")}</MenuItem>
+                <MenuItem value={"true"}>{i18n("enable")}</MenuItem>
+              </TextField>
+            </Grid>
+            <Grid item xs={12} sm={6} md={3} lg={2}>
+              <TextField
+                select
+                size="small"
+                fullWidth
+                name="transSelected"
+                value={transSelected}
+                label={i18n("translate_selected")}
+                disabled={disabled}
+                onChange={handleChange}
+              >
+                {GlobalItem}
+                <MenuItem value={"false"}>{i18n("disable")}</MenuItem>
+                <MenuItem value={"true"}>{i18n("enable")}</MenuItem>
+              </TextField>
+            </Grid>
+            <Grid item xs={12} sm={6} md={3} lg={2}>
+              <TextField
+                select
+                size="small"
+                fullWidth
+                name="detectRemote"
+                value={detectRemote}
+                label={i18n("detect_lang_remote")}
+                disabled={disabled}
+                onChange={handleChange}
+              >
+                {GlobalItem}
+                <MenuItem value={"false"}>{i18n("disable")}</MenuItem>
+                <MenuItem value={"true"}>{i18n("enable")}</MenuItem>
+              </TextField>
+            </Grid>
+          </Grid>
+        </Box>
+
         {showMore && (
           <>
-            <Box>
-              <Grid container spacing={2} columns={12}>
-                <Grid item xs={12} sm={6} md={3} lg={2}>
-                  <TextField
-                    select
-                    size="small"
-                    fullWidth
-                    name="transOnly"
-                    value={transOnly}
-                    label={i18n("show_only_translations")}
-                    disabled={disabled}
-                    onChange={handleChange}
-                  >
-                    {GlobalItem}
-                    <MenuItem value={"false"}>{i18n("disable")}</MenuItem>
-                    <MenuItem value={"true"}>{i18n("enable")}</MenuItem>
-                  </TextField>
-                </Grid>
-                <Grid item xs={12} sm={6} md={3} lg={2}>
-                  <TextField
-                    select
-                    size="small"
-                    fullWidth
-                    name="transTiming"
-                    value={transTiming}
-                    label={i18n("translate_timing")}
-                    disabled={disabled}
-                    onChange={handleChange}
-                  >
-                    {GlobalItem}
-                    {OPT_TIMING_ALL.map((item) => (
-                      <MenuItem key={item} value={item}>
-                        {i18n(item)}
-                      </MenuItem>
-                    ))}
-                  </TextField>
-                </Grid>
-                <Grid item xs={12} sm={6} md={3} lg={2}>
-                  <TextField
-                    select
-                    size="small"
-                    fullWidth
-                    name="transTag"
-                    value={transTag}
-                    label={i18n("translation_element_tag")}
-                    disabled={disabled}
-                    onChange={handleChange}
-                  >
-                    {GlobalItem}
-                    <MenuItem value={"span"}>{`<span>`}</MenuItem>
-                    <MenuItem value={"font"}>{`<font>`}</MenuItem>
-                  </TextField>
-                </Grid>
-                <Grid item xs={12} sm={6} md={3} lg={2}>
-                  <TextField
-                    select
-                    size="small"
-                    fullWidth
-                    name="transTitle"
-                    value={transTitle}
-                    label={i18n("translate_page_title")}
-                    disabled={disabled}
-                    onChange={handleChange}
-                  >
-                    {GlobalItem}
-                    <MenuItem value={"false"}>{i18n("disable")}</MenuItem>
-                    <MenuItem value={"true"}>{i18n("enable")}</MenuItem>
-                  </TextField>
-                </Grid>
-                <Grid item xs={12} sm={6} md={3} lg={2}>
-                  <TextField
-                    select
-                    size="small"
-                    fullWidth
-                    name="detectRemote"
-                    value={detectRemote}
-                    label={i18n("detect_lang_remote")}
-                    disabled={disabled}
-                    onChange={handleChange}
-                  >
-                    {GlobalItem}
-                    <MenuItem value={"false"}>{i18n("disable")}</MenuItem>
-                    <MenuItem value={"true"}>{i18n("enable")}</MenuItem>
-                  </TextField>
-                </Grid>
-              </Grid>
-            </Box>
+            <TextField
+              size="small"
+              label={i18n("fixer_selector")}
+              name="fixerSelector"
+              value={fixerSelector}
+              disabled={disabled}
+              onChange={handleChange}
+              multiline
+              maxRows={10}
+            />
+            <TextField
+              select
+              size="small"
+              name="fixerFunc"
+              value={fixerFunc}
+              label={i18n("fixer_function")}
+              helperText={i18n("fixer_function_helper")}
+              disabled={disabled}
+              onChange={handleChange}
+            >
+              {GlobalItem}
+              {FIXER_ALL.map((item) => (
+                <MenuItem key={item} value={item}>
+                  {item}
+                </MenuItem>
+              ))}
+            </TextField>
 
             <TextField
               select
@@ -458,34 +531,42 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
               disabled={disabled}
               onChange={handleChange}
               multiline
+              maxRows={10}
             />
 
             <TextField
               size="small"
-              label={i18n("fixer_selector")}
-              name="fixerSelector"
-              value={fixerSelector}
+              label={i18n("translate_start_hook")}
+              helperText={i18n("translate_start_hook_helper")}
+              name="transStartHook"
+              value={transStartHook}
               disabled={disabled}
               onChange={handleChange}
               multiline
+              maxRows={10}
             />
             <TextField
-              select
               size="small"
-              name="fixerFunc"
-              value={fixerFunc}
-              label={i18n("fixer_function")}
-              helperText={i18n("fixer_function_helper")}
+              label={i18n("translate_end_hook")}
+              helperText={i18n("translate_end_hook_helper")}
+              name="transEndHook"
+              value={transEndHook}
               disabled={disabled}
               onChange={handleChange}
-            >
-              {GlobalItem}
-              {FIXER_ALL.map((item) => (
-                <MenuItem key={item} value={item}>
-                  {item}
-                </MenuItem>
-              ))}
-            </TextField>
+              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"
@@ -564,18 +645,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
                       {i18n("delete")}
                     </Button>
                   )}
-                  {!showMore && (
-                    <Button
-                      size="small"
-                      variant="text"
-                      onClick={() => {
-                        setShowMore(true);
-                      }}
-                      startIcon={<ExpandMoreIcon />}
-                    >
-                      {i18n("more")}
-                    </Button>
-                  )}
+                  {ShowMoreButton}
                 </>
               ) : (
                 <>
@@ -595,18 +665,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
                   >
                     {i18n("cancel")}
                   </Button>
-                  {!showMore && (
-                    <Button
-                      size="small"
-                      variant="text"
-                      onClick={() => {
-                        setShowMore(true);
-                      }}
-                      startIcon={<ExpandMoreIcon />}
-                    >
-                      {i18n("more")}
-                    </Button>
-                  )}
+                  {ShowMoreButton}
                 </>
               )}
             </Stack>
@@ -629,17 +688,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
               >
                 {i18n("cancel")}
               </Button>
-              {!showMore && (
-                <Button
-                  size="small"
-                  variant="text"
-                  onClick={() => {
-                    setShowMore(true);
-                  }}
-                >
-                  {i18n("more")}
-                </Button>
-              )}
+              {ShowMoreButton}
             </Stack>
           ))}
       </Stack>
@@ -776,7 +825,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`}
         />

src/views/Options/Setting.js

@@ -17,18 +17,25 @@ import {
   UI_LANGS,
   TRANS_NEWLINE_LENGTH,
   CACHE_NAME,
+  OPT_TRANS_MICROSOFT,
+  OPT_LANGDETECTOR_ALL,
   OPT_SHORTCUT_TRANSLATE,
   OPT_SHORTCUT_STYLE,
   OPT_SHORTCUT_POPUP,
   OPT_SHORTCUT_SETTING,
   DEFAULT_BLACKLIST,
+  DEFAULT_CSPLIST,
   MSG_CONTEXT_MENUS,
+  MSG_UPDATE_CSP,
+  DEFAULT_HTTP_TIMEOUT,
 } from "../../config";
 import { useShortcut } from "../../hooks/Shortcut";
 import ShortcutInput from "./ShortcutInput";
 import { useFab } from "../../hooks/Fab";
 import { sendBgMsg } from "../../libs/msg";
 import { kissLog } from "../../libs/log";
+import UploadButton from "./UploadButton";
+import DownloadButton from "./DownloadButton";
 
 function ShortcutItem({ action, label }) {
   const { shortcut, setShortcut } = useShortcut(action);
@@ -65,11 +72,17 @@ export default function Settings() {
       case "newlineLength":
         value = limitNumber(value, 1, 1000);
         break;
+      case "httpTimeout":
+        value = limitNumber(value, 5000, 30000);
+        break;
       case "touchTranslate":
         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:
     }
@@ -87,22 +100,48 @@ export default function Settings() {
     }
   };
 
+  const handleImport = async (data) => {
+    try {
+      await updateSetting(JSON.parse(data));
+    } catch (err) {
+      kissLog(err, "import setting");
+    }
+  };
+
   const {
     uiLang,
     minLength,
     maxLength,
     clearCache,
     newlineLength = TRANS_NEWLINE_LENGTH,
+    httpTimeout = DEFAULT_HTTP_TIMEOUT,
     contextMenuType = 1,
     touchTranslate = 2,
     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
@@ -154,7 +193,14 @@ export default function Settings() {
           defaultValue={transInterval}
           onChange={handleChange}
         />
-
+        <TextField
+          size="small"
+          label={i18n("http_timeout")}
+          type="number"
+          name="httpTimeout"
+          defaultValue={httpTimeout}
+          onChange={handleChange}
+        />
         <FormControl size="small">
           <InputLabel>{i18n("touch_translate_shortcut")}</InputLabel>
           <Select
@@ -200,6 +246,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">
@@ -219,6 +281,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 +334,7 @@ export default function Settings() {
           name="blacklist"
           defaultValue={blacklist}
           onChange={handleChange}
+          maxRows={10}
           multiline
         />
       </Stack>

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";
 
@@ -66,6 +65,7 @@ export default function SyncSetting() {
     <Box>
       <Stack spacing={3}>
         <Alert severity="warning">{i18n("sync_warn")}</Alert>
+        <Alert severity="warning">{i18n("sync_warn_2")}</Alert>
 
         <TextField
           select
@@ -123,16 +123,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>

src/views/Options/Tranbox.js

@@ -3,10 +3,15 @@ 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,
+  OPT_DICT_BAIDU,
+} from "../../config";
 import ShortcutInput from "./ShortcutInput";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import Switch from "@mui/material/Switch";
 import { useCallback } from "react";
 import { limitNumber } from "../../libs/utils";
 import { useTranbox } from "../../hooks/Tranbox";
@@ -21,10 +26,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:
     }
@@ -41,7 +46,6 @@ export default function Tranbox() {
   );
 
   const {
-    transOpen,
     translator,
     fromLang,
     toLang,
@@ -49,26 +53,20 @@ 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 (
     <Box>
       <Stack spacing={3}>
-        <FormControlLabel
-          control={
-            <Switch
-              size="small"
-              name="transOpen"
-              checked={transOpen}
-              onChange={() => {
-                updateTranbox({ transOpen: !transOpen });
-              }}
-            />
-          }
-          label={i18n("toggle_selection_translate")}
-        />
-
         <TextField
           select
           size="small"
@@ -130,6 +128,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")}
@@ -148,6 +158,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 +188,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}

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

src/views/Popup/index.js

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 import Box from "@mui/material/Box";
 import Stack from "@mui/material/Stack";
 import MenuItem from "@mui/material/MenuItem";
@@ -23,6 +23,7 @@ import {
   OPT_LANGS_FROM,
   OPT_LANGS_TO,
   OPT_STYLE_ALL,
+  DEFAULT_TRANS_APIS,
 } from "../../config";
 import { sendIframeMsg } from "../../libs/iframe";
 import { saveRule } from "../../libs/rules";
@@ -32,6 +33,7 @@ import { kissLog } from "../../libs/log";
 export default function Popup({ setShowPopup, translator: tran }) {
   const i18n = useI18n();
   const [rule, setRule] = useState(tran?.rule);
+  const [transApis, setTransApis] = useState(tran?.setting?.transApis || []);
   const [commands, setCommands] = useState({});
 
   const handleOpenSetting = () => {
@@ -106,7 +108,8 @@ export default function Popup({ setShowPopup, translator: tran }) {
       try {
         const res = await sendTabMsg(MSG_TRANS_GETRULE);
         if (!res.error) {
-          setRule(res.data);
+          setRule(res.rule);
+          setTransApis(res.setting.transApis);
         }
       } catch (err) {
         kissLog(err, "query rule");
@@ -138,6 +141,20 @@ export default function Popup({ setShowPopup, translator: tran }) {
     })();
   }, [tran]);
 
+  const optApis = useMemo(
+    () =>
+      OPT_TRANS_ALL.map((key) => ({
+        ...(transApis[key] || DEFAULT_TRANS_APIS[key]),
+        apiKey: key,
+      }))
+        .filter((item) => !item.isDisabled)
+        .map(({ apiKey, apiName }) => ({
+          key: apiKey,
+          name: apiName?.trim() || apiKey,
+        })),
+    [transApis]
+  );
+
   if (!rule) {
     return (
       <Box minWidth={300}>
@@ -197,9 +214,9 @@ export default function Popup({ setShowPopup, translator: tran }) {
           label={i18n("translate_service")}
           onChange={handleChange}
         >
-          {OPT_TRANS_ALL.map((item) => (
-            <MenuItem key={item} value={item}>
-              {item}
+          {optApis.map(({ key, name }) => (
+            <MenuItem key={key} value={key}>
+              {name}
             </MenuItem>
           ))}
         </TextField>

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>
+  );
+}

src/views/Selection/DictCont.js

@@ -1,48 +1,113 @@
-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>
   );
 }

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

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"

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

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,112 @@ 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 {
+  OPT_TRANS_ALL,
+  OPT_LANGS_FROM,
+  OPT_LANGS_TO,
+  DEFAULT_TRANS_APIS,
+} from "../../config";
+import { useState, useRef, useMemo } from "react";
 import TranCont from "./TranCont";
+import DictCont from "./DictCont";
+import SugCont from "./SugCont";
 import CopyBtn from "./CopyBtn";
+import { isValidWord } from "../../libs/utils";
+import { isMobile } from "../../libs/mobile";
 
-function TranForm({ text, setText, tranboxSetting, transApis }) {
+function Header({
+  setShowPopup,
+  simpleStyle,
+  setSimpleStyle,
+  hideClickAway,
+  setHideClickAway,
+  followSelection,
+  setFollowSelection,
+  mouseHover,
+}) {
+  if (!isMobile && simpleStyle && !mouseHover) {
+    return;
+  }
+
+  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,
+  langDetector,
+  enDict,
+}) {
   const i18n = useI18n();
 
   const [editMode, setEditMode] = useState(false);
@@ -24,138 +122,166 @@ 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>
+  const optApis = useMemo(
+    () =>
+      OPT_TRANS_ALL.map((key) => ({
+        ...(transApis[key] || DEFAULT_TRANS_APIS[key]),
+        apiKey: key,
+      }))
+        .filter((item) => !item.isDisabled)
+        .map(({ apiKey, apiName }) => ({
+          key: apiKey,
+          name: apiName?.trim() || apiKey,
+        })),
+    [transApis]
+  );
 
-      <Box>
-        <TextField
-          size="small"
-          label={i18n("original_text")}
-          inputRef={inputRef}
-          fullWidth
-          multiline
-          value={editMode ? editText : text}
-          disabled={!editMode}
-          onChange={(e) => {
-            setEditText(e.target.value);
-          }}
-          onClick={() => {
-            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();
+  return (
+    <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);
+                  }}
+                >
+                  {optApis.map(({ key, name }) => (
+                    <MenuItem key={key} value={key}>
+                      {name}
+                    </MenuItem>
+                  ))}
+                </TextField>
+              </Grid>
+            </Grid>
+          </Box>
+
+          <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") ||
+        enDict === "-") && (
+        <TranCont
+          text={text}
+          translator={translator}
+          fromLang={fromLang}
+          toLang={toLang}
+          toLang2={tranboxSetting.toLang2}
+          transApis={transApis}
+          simpleStyle={simpleStyle}
+          langDetector={langDetector}
+        />
+      )}
+
+      {enDict !== "-" && (
+        <>
+          <DictCont text={text} />
+          <SugCont text={text} />
+        </>
+      )}
     </Stack>
   );
 }
@@ -170,23 +296,49 @@ export default function TranBox({
   setBoxSize,
   boxPosition,
   setBoxPosition,
+  simpleStyle,
+  setSimpleStyle,
+  hideClickAway,
+  setHideClickAway,
+  followSelection,
+  setFollowSelection,
+  extStyles,
+  langDetector,
+  enDict,
 }) {
+  const [mouseHover, setMouseHover] = useState(false);
   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}
+              mouseHover={mouseHover}
+            />
+          }
+          onClick={(e) => e.stopPropagation()}
+          onMouseEnter={() => setMouseHover(true)}
+          onMouseLeave={() => setMouseHover(false)}
         >
-          <Divider />
           <TranForm
             text={text}
             setText={setText}
             tranboxSetting={tranboxSetting}
             transApis={transApis}
+            simpleStyle={simpleStyle}
+            langDetector={langDetector}
+            enDict={enDict}
           />
         </DraggableResizable>
       </ThemeProvider>

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

src/views/Selection/TranCont.js

@@ -1,16 +1,15 @@
 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 } 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";
+import { tryDetectLang } from "../../libs";
 
 export default function TranCont({
   text,
@@ -18,16 +17,14 @@ export default function TranCont({
   fromLang,
   toLang,
   toLang2 = "en",
-  setToLang,
-  setToLang2,
   transApis,
+  simpleStyle,
+  langDetector,
 }) {
   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 +32,73 @@ export default function TranCont({
         setLoading(true);
         setTrText("");
         setError("");
-        setDictResult(null);
-        setSugs([]);
 
-        // 互译
-        if (toLang !== toLang2 && toLang2 !== "none") {
-          const detectLang = await apiBaiduLangdetect(text);
+        let to = toLang;
+        if (fromLang === "auto" && toLang !== toLang2 && toLang2 !== "none") {
+          const detectLang = await tryDetectLang(text, true, langDetector);
           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, langDetector]);
+
+  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>
   );
 }

src/views/Selection/index.js

@@ -1,21 +1,53 @@
-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,
+  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 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,
+    enDict = OPT_DICT_BAIDU,
+  } = 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 +61,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 +187,7 @@ export default function Slection({
       contextMenuType !== 0 &&
         menuCommandIds.push(
           GM.registerMenuCommand(
-            "Translate Selected Text",
+            langMap("translate_selected_text"),
             (event) => {
               handleTranbox();
             },
@@ -130,7 +203,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 +230,28 @@ export default function Slection({
           tranboxSetting={tranboxSetting}
           transApis={transApis}
           setShowBox={setShowBox}
+          simpleStyle={simpleStyle}
+          setSimpleStyle={setSimpleStyle}
+          hideClickAway={hideClickAway}
+          setHideClickAway={setHideClickAway}
+          followSelection={followSelection}
+          setFollowSelection={setFollowSelection}
+          extStyles={extStyles}
+          langDetector={langDetector}
+          enDict={enDict}
         />
       )}
 
       {showBtn && (
         <TranBtn
           position={position}
-          tranboxSetting={tranboxSetting}
-          onClick={handleClick}
+          btnOffsetX={btnOffsetX}
+          btnOffsetY={btnOffsetY}
+          btnEvent={btnEvent}
+          onTrigger={(e) => {
+            e.stopPropagation();
+            handleTrigger();
+          }}
         />
       )}
     </>