v1.7.11

fix dict ui
2023-10-27 17:14:13 +08:00 · 2023-10-27 14:51:53 +08:00 · 2023-10-27 14:07:22 +08:00 · 2023-10-27 13:55:24 +08:00 · 2023-10-27 13:18:42 +08:00 · 2023-10-27 00:11:44 +08:00
58 changed files with 2856 additions and 1235 deletions
--- a/.env
+++ b/.env
@@ -2,7 +2,7 @@ GENERATE_SOURCEMAP=false

 REACT_APP_NAME=KISS Translator
 REACT_APP_NAME_CN=简约翻译
-REACT_APP_VERSION=1.7.2
+REACT_APP_VERSION=1.7.11

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

--- a/README.en.md
+++ b/README.en.md
@@ -1,19 +1,9 @@
 # KISS Translator

-A minimalist [bilingual translation Extension & Greasemonkey Script](https://github.com/fishjar/kiss-translator).
+A simple [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)

-## Inspiration
-
-The inspiration for this project comes from [Immersive Translate](https://github.com/immersive-translate/immersive-translate). After trying it out, I found that it can be used together with the [Webpage Word Translation Extension](https://github.com/fishjar/kiss-dictionary) developed by me earlier, which just forms a very good supplement.
-
-But the function of this extension is a bit complicated for me, and only the compiled and obfuscated installation package is provided, and the source code is not provided, which cannot meet some of my personalized customization needs.
-
-It just so happens that I am obsessed with translation tools. Based on the concept of "mainly for personal use, as long as you can use it", I made one. At present, the first version is completed, which basically meets the needs of personal use.
-
-If you also like a little more simplicity, welcome to pick it up.
-
 ## Features

 - [x] Keep it simple, smart
@@ -22,11 +12,13 @@ If you also like a little more simplicity, welcome to pick it up.
  - [x] Chrome/Edge/Firefox/Kiwi
  - [ ] Safari
 - [x] Supports multiple translation services
-  - [x] Google/Microsoft/DeepL/OpenAI
+  - [x] Google/Microsoft/DeepL/OpenAI/CloudflareAI/Baidu/Tencent
  - [x] Custom translation interface
 - [x] Covers common translation scenarios
  - [x] Web bilingual translation
  - [x] Input box translation
+  - [x] Seletction translation
+    - [x] Favorite Words
  - [x] Mouseover translation
  - [x] YouTube subtitle translation
 - [x] Cross-client data synchronization
@@ -38,8 +30,9 @@ If you also like a little more simplicity, welcome to pick it up.
 - [x] Custom shortcut keys
  - `Alt+Q` Toggle Translation
  - `Alt+C` Toggle Styles
-  - `Alt+K` Open Popup
-  - `Alt+O` Open Options
+  - `Alt+K` Open Setting Popup
+  - `Alt+B` Open Translate Popup
+  - `Alt+O` Open Options Page
  - `Alt+I` Input Box Translation

 ## Install
@@ -59,7 +52,7 @@ If you also like a little more simplicity, welcome to pick it up.
    - Greasy Fork [Installation address](https://greasyfork.org/zh-CN/scripts/472840-kiss-translator)
  - [x] iOS Safari ([Userscripts Safari](https://github.com/quoid/userscripts)) [Installation link 1](https://fishjar.github.io/kiss-translator/kiss-translator-ios-safari.user.js)、 [Installation link 2](https://kiss-translator.rayjar.com/kiss-translator.user-ios-safari.js)

-## Associated ProjectS
+## Associated Projects

 - Data synchronization service: [https://github.com/fishjar/kiss-worker](https://github.com/fishjar/kiss-worker)
  - Data synchronization service available for this project.
--- a/README.md
+++ b/README.md
@@ -1,19 +1,9 @@
 # 简约翻译

-一个简约的 [网页双语翻译扩展 & 油猴脚本](https://github.com/fishjar/kiss-translator)。
+一个简约的 [双语对照翻译扩展 & 油猴脚本](https://github.com/fishjar/kiss-translator)。

 [kiss-translator.webm](https://github.com/fishjar/kiss-translator/assets/1157624/f7ba8a5c-e4a8-4d5a-823a-5c5c67a0a47f)

-## 缘由
-
-本项目灵感来源于 [Immersive Translate](https://github.com/immersive-translate/immersive-translate)，在试用了后，发现搭配本人早前开发的 [网页划词翻译扩展](https://github.com/fishjar/kiss-dictionary) 一起使用，刚好形成很好补充。
-
-但该扩展的功能对我来说有些繁杂了，而且只提供编译混淆后的安装包，没有提供源代码，无法满足我的一些个性化定制需求。
-
-恰巧本人对翻译类工具有些执念，本着`“自用为主，能用就行”`的理念，于是动手撸了一个，目前初版完成，基本达到个人使用需求。
-
-如果你也喜欢简约一点的，欢迎自取。
-
 ## 特性

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

 ## 安装
--- a/config-overrides.js
+++ b/config-overrides.js
@@ -75,7 +75,7 @@ const userscriptWebpack = (config, env) => {
 // @name          ${process.env.REACT_APP_NAME}
 // @namespace     ${process.env.REACT_APP_HOMEPAGE}
 // @version       ${process.env.REACT_APP_VERSION}
-// @description   A minimalist bilingual translation Extension & Greasemonkey Script (一个简约的网页双语翻译扩展 & 油猴脚本)
+// @description   A simple bilingual translation extension & Greasemonkey script (一个简约的双语对照翻译扩展 & 油猴脚本)
 // @author        Gabe<yugang2002@gmail.com>
 // @homepageURL   ${process.env.REACT_APP_HOMEPAGE}
 // @license       GPL-3.0
@@ -95,6 +95,7 @@ const userscriptWebpack = (config, env) => {
 // @connect       edge.microsoft.com
 // @connect       api-free.deepl.com
 // @connect       api.deepl.com
+// @connect       www2.deepl.com
 // @connect       api.openai.com
 // @connect       openai.azure.com
 // @connect       workers.dev
@@ -103,7 +104,12 @@ const userscriptWebpack = (config, env) => {
 // @connect       kiss-translator.rayjar.com
 // @connect       ghproxy.com
 // @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
 // @run-at        document-end
 // ==/UserScript==

--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "kiss-translator",
  "description": "A minimalist bilingual translation Extension & Greasemonkey Script",
-  "version": "1.7.2",
+  "version": "1.7.11",
  "author": "Gabe<yugang2002@gmail.com>",
  "private": true,
  "dependencies": {
@@ -62,8 +62,6 @@
    "@babel/node": "^7.22.10",
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@babel/preset-env": "^7.22.10",
-    "react-app-rewired": "^2.2.1",
-    "wrangler": "^3.4.0"
-  },
-  "packageManager": "yarn@3.6.3"
+    "react-app-rewired": "^2.2.1"
+  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -37,7 +37,7 @@ dependencies:
    version: 6.16.0(react-dom@18.2.0)(react@18.2.0)
  react-scripts:
    specifier: 5.0.1
-    version: 5.0.1(@babel/plugin-syntax-flow@7.22.5)(@babel/plugin-transform-react-jsx@7.22.15)(esbuild@0.17.19)(eslint@8.49.0)(react@18.2.0)(typescript@5.2.2)
+    version: 5.0.1(@babel/plugin-syntax-flow@7.22.5)(@babel/plugin-transform-react-jsx@7.22.15)(eslint@8.49.0)(react@18.2.0)(typescript@5.2.2)
  webdav:
    specifier: ^5.3.0
    version: 5.3.0
@@ -61,9 +61,6 @@ devDependencies:
  react-app-rewired:
    specifier: ^2.2.1
    version: 2.2.1(react-scripts@5.0.1)
-  wrangler:
-    specifier: ^3.4.0
-    version: 3.9.0

 packages:

@@ -1434,57 +1431,6 @@ packages:
      node-fetch: 3.3.2
    dev: false

-  /@cloudflare/kv-asset-handler@0.2.0:
-    resolution: {integrity: sha512-MVbXLbTcAotOPUj0pAMhVtJ+3/kFkwJqc5qNOleOZTv6QkZZABDMS21dSrSlVswEHwrpWC03e4fWytjqKvuE2A==}
-    dependencies:
-      mime: 3.0.0
-    dev: true
-
-  /@cloudflare/workerd-darwin-64@1.20230904.0:
-    resolution: {integrity: sha512-/GDlmxAFbDtrQwP4zOXFbqOfaPvkDxdsCoEa+KEBcAl5uR98+7WW5/b8naBHX+t26uS7p4bLlImM8J5F1ienRQ==}
-    engines: {node: '>=16'}
-    cpu: [x64]
-    os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@cloudflare/workerd-darwin-arm64@1.20230904.0:
-    resolution: {integrity: sha512-x8WXNc2xnDqr5y1iirnNdyx8GZY3rL5xiF7ebK3mKQeB+jFjkhO71yuPTkDCzUWtOvw1Wfd4jbwy4wxacMX4mQ==}
-    engines: {node: '>=16'}
-    cpu: [arm64]
-    os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@cloudflare/workerd-linux-64@1.20230904.0:
-    resolution: {integrity: sha512-V58xyMS3oDpKO8Dpdh0r0BXm99OzoGgvWe9ufttVraj/1NTMGELwb6i9ySb8k3F1J9m/sO26+TV7pQc/bGC1VQ==}
-    engines: {node: '>=16'}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@cloudflare/workerd-linux-arm64@1.20230904.0:
-    resolution: {integrity: sha512-VrDaW+pjb5IAKEnNWtEaFiG377kXKmk5Fu0Era4W+jKzPON2BW/qRb/4LNHXQ4yxg/2HLm7RiUTn7JZtt1qO6A==}
-    engines: {node: '>=16'}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@cloudflare/workerd-windows-64@1.20230904.0:
-    resolution: {integrity: sha512-/R/dE8uy+8J2YeXfDhI8/Bg7YUirdbbjH5/l/Vv00ZRE0lC3nPLcYeyBXSwXIQ6/Xht3gN+lksLQgKd0ZWRd+Q==}
-    engines: {node: '>=16'}
-    cpu: [x64]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
-
  /@csstools/normalize.css@12.0.0:
    resolution: {integrity: sha512-M0qqxAcwCsIVfpFQSlGN5XjXWu8l5JDZN+fPt1LeW5SZexQTgnaEvgXAY+CeygRw0EeppWHi12JxESWiWrB0Sg==}

@@ -1742,200 +1688,6 @@ packages:
    resolution: {integrity: sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==}
    dev: false

-  /@esbuild-plugins/node-globals-polyfill@0.2.3(esbuild@0.17.19):
-    resolution: {integrity: sha512-r3MIryXDeXDOZh7ih1l/yE9ZLORCd5e8vWg02azWRGj5SPTuoh69A2AIyn0Z31V/kHBfZ4HgWJ+OK3GTTwLmnw==}
-    peerDependencies:
-      esbuild: '*'
-    dependencies:
-      esbuild: 0.17.19
-    dev: true
-
-  /@esbuild-plugins/node-modules-polyfill@0.2.2(esbuild@0.17.19):
-    resolution: {integrity: sha512-LXV7QsWJxRuMYvKbiznh+U1ilIop3g2TeKRzUxOG5X3YITc8JyyTa90BmLwqqv0YnX4v32CSlG+vsziZp9dMvA==}
-    peerDependencies:
-      esbuild: '*'
-    dependencies:
-      esbuild: 0.17.19
-      escape-string-regexp: 4.0.0
-      rollup-plugin-node-polyfills: 0.2.1
-    dev: true
-
-  /@esbuild/android-arm64@0.17.19:
-    resolution: {integrity: sha512-KBMWvEZooR7+kzY0BtbTQn0OAYY7CsiydT63pVEaPtVYF0hXbUaOyZog37DKxK7NF3XacBJOpYT4adIJh+avxA==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [android]
-    requiresBuild: true
-    optional: true
-
-  /@esbuild/android-arm@0.17.19:
-    resolution: {integrity: sha512-rIKddzqhmav7MSmoFCmDIb6e2W57geRsM94gV2l38fzhXMwq7hZoClug9USI2pFRGL06f4IOPHHpFNOkWieR8A==}
-    engines: {node: '>=12'}
-    cpu: [arm]
-    os: [android]
-    requiresBuild: true
-    optional: true
-
-  /@esbuild/android-x64@0.17.19:
-    resolution: {integrity: sha512-uUTTc4xGNDT7YSArp/zbtmbhO0uEEK9/ETW29Wk1thYUJBz3IVnvgEiEwEa9IeLyvnpKrWK64Utw2bgUmDveww==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [android]
-    requiresBuild: true
-    optional: true
-
-  /@esbuild/darwin-arm64@0.17.19:
-    resolution: {integrity: sha512-80wEoCfF/hFKM6WE1FyBHc9SfUblloAWx6FJkFWTWiCoht9Mc0ARGEM47e67W9rI09YoUxJL68WHfDRYEAvOhg==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [darwin]
-    requiresBuild: true
-    optional: true
-
-  /@esbuild/darwin-x64@0.17.19:
-    resolution: {integrity: sha512-IJM4JJsLhRYr9xdtLytPLSH9k/oxR3boaUIYiHkAawtwNOXKE8KoU8tMvryogdcT8AU+Bflmh81Xn6Q0vTZbQw==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [darwin]
-    requiresBuild: true
-    optional: true
-
-  /@esbuild/freebsd-arm64@0.17.19:
-    resolution: {integrity: sha512-pBwbc7DufluUeGdjSU5Si+P3SoMF5DQ/F/UmTSb8HXO80ZEAJmrykPyzo1IfNbAoaqw48YRpv8shwd1NoI0jcQ==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [freebsd]
-    requiresBuild: true
-    optional: true
-
-  /@esbuild/freebsd-x64@0.17.19:
-    resolution: {integrity: sha512-4lu+n8Wk0XlajEhbEffdy2xy53dpR06SlzvhGByyg36qJw6Kpfk7cp45DR/62aPH9mtJRmIyrXAS5UWBrJT6TQ==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [freebsd]
-    requiresBuild: true
-    optional: true
-
-  /@esbuild/linux-arm64@0.17.19:
-    resolution: {integrity: sha512-ct1Tg3WGwd3P+oZYqic+YZF4snNl2bsnMKRkb3ozHmnM0dGWuxcPTTntAF6bOP0Sp4x0PjSF+4uHQ1xvxfRKqg==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    optional: true
-
-  /@esbuild/linux-arm@0.17.19:
-    resolution: {integrity: sha512-cdmT3KxjlOQ/gZ2cjfrQOtmhG4HJs6hhvm3mWSRDPtZ/lP5oe8FWceS10JaSJC13GBd4eH/haHnqf7hhGNLerA==}
-    engines: {node: '>=12'}
-    cpu: [arm]
-    os: [linux]
-    requiresBuild: true
-    optional: true
-
-  /@esbuild/linux-ia32@0.17.19:
-    resolution: {integrity: sha512-w4IRhSy1VbsNxHRQpeGCHEmibqdTUx61Vc38APcsRbuVgK0OPEnQ0YD39Brymn96mOx48Y2laBQGqgZ0j9w6SQ==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [linux]
-    requiresBuild: true
-    optional: true
-
-  /@esbuild/linux-loong64@0.17.19:
-    resolution: {integrity: sha512-2iAngUbBPMq439a+z//gE+9WBldoMp1s5GWsUSgqHLzLJ9WoZLZhpwWuym0u0u/4XmZ3gpHmzV84PonE+9IIdQ==}
-    engines: {node: '>=12'}
-    cpu: [loong64]
-    os: [linux]
-    requiresBuild: true
-    optional: true
-
-  /@esbuild/linux-mips64el@0.17.19:
-    resolution: {integrity: sha512-LKJltc4LVdMKHsrFe4MGNPp0hqDFA1Wpt3jE1gEyM3nKUvOiO//9PheZZHfYRfYl6AwdTH4aTcXSqBerX0ml4A==}
-    engines: {node: '>=12'}
-    cpu: [mips64el]
-    os: [linux]
-    requiresBuild: true
-    optional: true
-
-  /@esbuild/linux-ppc64@0.17.19:
-    resolution: {integrity: sha512-/c/DGybs95WXNS8y3Ti/ytqETiW7EU44MEKuCAcpPto3YjQbyK3IQVKfF6nbghD7EcLUGl0NbiL5Rt5DMhn5tg==}
-    engines: {node: '>=12'}
-    cpu: [ppc64]
-    os: [linux]
-    requiresBuild: true
-    optional: true
-
-  /@esbuild/linux-riscv64@0.17.19:
-    resolution: {integrity: sha512-FC3nUAWhvFoutlhAkgHf8f5HwFWUL6bYdvLc/TTuxKlvLi3+pPzdZiFKSWz/PF30TB1K19SuCxDTI5KcqASJqA==}
-    engines: {node: '>=12'}
-    cpu: [riscv64]
-    os: [linux]
-    requiresBuild: true
-    optional: true
-
-  /@esbuild/linux-s390x@0.17.19:
-    resolution: {integrity: sha512-IbFsFbxMWLuKEbH+7sTkKzL6NJmG2vRyy6K7JJo55w+8xDk7RElYn6xvXtDW8HCfoKBFK69f3pgBJSUSQPr+4Q==}
-    engines: {node: '>=12'}
-    cpu: [s390x]
-    os: [linux]
-    requiresBuild: true
-    optional: true
-
-  /@esbuild/linux-x64@0.17.19:
-    resolution: {integrity: sha512-68ngA9lg2H6zkZcyp22tsVt38mlhWde8l3eJLWkyLrp4HwMUr3c1s/M2t7+kHIhvMjglIBrFpncX1SzMckomGw==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    optional: true
-
-  /@esbuild/netbsd-x64@0.17.19:
-    resolution: {integrity: sha512-CwFq42rXCR8TYIjIfpXCbRX0rp1jo6cPIUPSaWwzbVI4aOfX96OXY8M6KNmtPcg7QjYeDmN+DD0Wp3LaBOLf4Q==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [netbsd]
-    requiresBuild: true
-    optional: true
-
-  /@esbuild/openbsd-x64@0.17.19:
-    resolution: {integrity: sha512-cnq5brJYrSZ2CF6c35eCmviIN3k3RczmHz8eYaVlNasVqsNY+JKohZU5MKmaOI+KkllCdzOKKdPs762VCPC20g==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [openbsd]
-    requiresBuild: true
-    optional: true
-
-  /@esbuild/sunos-x64@0.17.19:
-    resolution: {integrity: sha512-vCRT7yP3zX+bKWFeP/zdS6SqdWB8OIpaRq/mbXQxTGHnIxspRtigpkUcDMlSCOejlHowLqII7K2JKevwyRP2rg==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [sunos]
-    requiresBuild: true
-    optional: true
-
-  /@esbuild/win32-arm64@0.17.19:
-    resolution: {integrity: sha512-yYx+8jwowUstVdorcMdNlzklLYhPxjniHWFKgRqH7IFlUEa0Umu3KuYplf1HUZZ422e3NU9F4LGb+4O0Kdcaag==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [win32]
-    requiresBuild: true
-    optional: true
-
-  /@esbuild/win32-ia32@0.17.19:
-    resolution: {integrity: sha512-eggDKanJszUtCdlVs0RB+h35wNlb5v4TWEkq4vZcmVt5u/HiDZrTXe2bWFQUez3RgNHwx/x4sk5++4NSSicKkw==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [win32]
-    requiresBuild: true
-    optional: true
-
-  /@esbuild/win32-x64@0.17.19:
-    resolution: {integrity: sha512-lAhycmKnVOuRYNtRtatQR1LPQf2oYCkRGkSFnseDAKPl8lu5SOsK/e1sXe5a0Pc5kHIHe6P2I/ilntNv2xf3cA==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [win32]
-    requiresBuild: true
-    optional: true
-
  /@eslint-community/eslint-utils@4.4.0(eslint@8.49.0):
    resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -2516,7 +2268,7 @@ packages:
      react-refresh: 0.11.0
      schema-utils: 3.3.0
      source-map: 0.7.4
-      webpack: 5.88.2(esbuild@0.17.19)
+      webpack: 5.88.2
      webpack-dev-server: 4.15.1(webpack@5.88.2)

  /@popperjs/core@2.11.8:
@@ -3216,11 +2968,6 @@ packages:
    resolution: {integrity: sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==}
    engines: {node: '>=0.4.0'}

-  /acorn-walk@8.2.0:
-    resolution: {integrity: sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==}
-    engines: {node: '>=0.4.0'}
-    dev: true
-
  /acorn@7.4.1:
    resolution: {integrity: sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==}
    engines: {node: '>=0.4.0'}
@@ -3437,12 +3184,6 @@ packages:
      is-array-buffer: 3.0.2
      is-shared-array-buffer: 1.0.2

-  /as-table@1.0.55:
-    resolution: {integrity: sha512-xvsWESUJn0JN421Xb9MQw6AsMHRCUknCe0Wjlxvjud80mU4E6hQf1A6NzQKcYNmYw62MfzEtXc+badstZP3JpQ==}
-    dependencies:
-      printable-characters: 1.0.42
-    dev: true
-
  /asap@2.0.6:
    resolution: {integrity: sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==}

@@ -3522,7 +3263,7 @@ packages:
      loader-utils: 2.0.4
      make-dir: 3.1.0
      schema-utils: 2.7.1
-      webpack: 5.88.2(esbuild@0.17.19)
+      webpack: 5.88.2

  /babel-plugin-istanbul@6.1.1:
    resolution: {integrity: sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==}
@@ -3679,10 +3420,6 @@ packages:
    resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
    engines: {node: '>=8'}

-  /blake3-wasm@2.1.5:
-    resolution: {integrity: sha512-F1+K8EbfOZE49dtoPtmxUQrpXaBIl3ICvasLh+nJta0xkz+9kF/7uet9fLnwKqhDrmj6g+6K3Tw9yQPUg2ka5g==}
-    dev: true
-
  /bluebird@3.7.2:
    resolution: {integrity: sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==}

@@ -3758,13 +3495,6 @@ packages:
    resolution: {integrity: sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==}
    engines: {node: '>=6'}

-  /busboy@1.6.0:
-    resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
-    engines: {node: '>=10.16.0'}
-    dependencies:
-      streamsearch: 1.1.0
-    dev: true
-
  /byte-length@1.0.2:
    resolution: {integrity: sha512-ovBpjmsgd/teRmgcPh23d4gJvxDoXtAzEL9xTfMU8Yc2kqCDb7L9jAG0XHl1nzuGl+h3ebCIF1i62UFyA9V/2Q==}
    dev: false
@@ -3816,15 +3546,6 @@ packages:
  /caniuse-lite@1.0.30001538:
    resolution: {integrity: sha512-HWJnhnID+0YMtGlzcp3T9drmBJUVDchPJ08tpUGFLs9CYlwWPH2uLgpHn8fND5pCgXVtnGS3H4QR9XLMHVNkHw==}

-  /capnp-ts@0.7.0:
-    resolution: {integrity: sha512-XKxXAC3HVPv7r674zP0VC3RTXz+/JKhfyw94ljvF80yynK6VkTnqE3jMuN8b3dUVmmc43TjyxjW4KTsmB3c86g==}
-    dependencies:
-      debug: 4.3.4
-      tslib: 2.6.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
  /case-sensitive-paths-webpack-plugin@2.4.0:
    resolution: {integrity: sha512-roIFONhcxog0JSSWbvVAh3OocukmSgpqOH6YpMkCvav/ySIV3JKg4Dc8vYtQjYi/UxpNE36r/9v+VqTQqgkYmw==}
    engines: {node: '>=4'}
@@ -4132,9 +3853,9 @@ packages:
      postcss-modules-values: 4.0.0(postcss@8.4.30)
      postcss-value-parser: 4.2.0
      semver: 7.5.4
-      webpack: 5.88.2(esbuild@0.17.19)
+      webpack: 5.88.2

-  /css-minimizer-webpack-plugin@3.4.1(esbuild@0.17.19)(webpack@5.88.2):
+  /css-minimizer-webpack-plugin@3.4.1(webpack@5.88.2):
    resolution: {integrity: sha512-1u6D71zeIfgngN2XNRJefc/hY7Ybsxd74Jm4qngIXyUEk7fss3VUzuHxLAq/R8NAba4QU9OUSaMZlbpRc7bM4Q==}
    engines: {node: '>= 12.13.0'}
    peerDependencies:
@@ -4154,13 +3875,12 @@ packages:
        optional: true
    dependencies:
      cssnano: 5.1.15(postcss@8.4.30)
-      esbuild: 0.17.19
      jest-worker: 27.5.1
      postcss: 8.4.30
      schema-utils: 4.2.0
      serialize-javascript: 6.0.1
      source-map: 0.6.1
-      webpack: 5.88.2(esbuild@0.17.19)
+      webpack: 5.88.2

  /css-prefers-color-scheme@6.0.3(postcss@8.4.30):
    resolution: {integrity: sha512-4BqMbZksRkJQx2zAjrokiGMd07RqOa2IxIrrN10lyBe9xhn9DEvjUK79J6jkeiv9D9hQFXKb6g1jwU62jziJZA==}
@@ -4302,10 +4022,6 @@ packages:
  /damerau-levenshtein@1.0.8:
    resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}

-  /data-uri-to-buffer@2.0.2:
-    resolution: {integrity: sha512-ND9qDTLc6diwj+Xe5cdAgVTbLVdXbtxTJRXRhli8Mowuaan+0EJOtdqJ0QCHNSSPyoXGx9HX2/VMnKeC34AChA==}
-    dev: true
-
  /data-uri-to-buffer@4.0.1:
    resolution: {integrity: sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==}
    engines: {node: '>= 12'}
@@ -4697,35 +4413,6 @@ packages:
      is-date-object: 1.0.5
      is-symbol: 1.0.4

-  /esbuild@0.17.19:
-    resolution: {integrity: sha512-XQ0jAPFkK/u3LcVRcvVHQcTIqD6E2H1fvZMA5dQPSOWb3suUbWbfbRf94pjc0bNzRYLfIrDRQXr7X+LHIm5oHw==}
-    engines: {node: '>=12'}
-    hasBin: true
-    requiresBuild: true
-    optionalDependencies:
-      '@esbuild/android-arm': 0.17.19
-      '@esbuild/android-arm64': 0.17.19
-      '@esbuild/android-x64': 0.17.19
-      '@esbuild/darwin-arm64': 0.17.19
-      '@esbuild/darwin-x64': 0.17.19
-      '@esbuild/freebsd-arm64': 0.17.19
-      '@esbuild/freebsd-x64': 0.17.19
-      '@esbuild/linux-arm': 0.17.19
-      '@esbuild/linux-arm64': 0.17.19
-      '@esbuild/linux-ia32': 0.17.19
-      '@esbuild/linux-loong64': 0.17.19
-      '@esbuild/linux-mips64el': 0.17.19
-      '@esbuild/linux-ppc64': 0.17.19
-      '@esbuild/linux-riscv64': 0.17.19
-      '@esbuild/linux-s390x': 0.17.19
-      '@esbuild/linux-x64': 0.17.19
-      '@esbuild/netbsd-x64': 0.17.19
-      '@esbuild/openbsd-x64': 0.17.19
-      '@esbuild/sunos-x64': 0.17.19
-      '@esbuild/win32-arm64': 0.17.19
-      '@esbuild/win32-ia32': 0.17.19
-      '@esbuild/win32-x64': 0.17.19
-
  /escalade@3.1.1:
    resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
    engines: {node: '>=6'}
@@ -5011,7 +4698,7 @@ packages:
      micromatch: 4.0.5
      normalize-path: 3.0.0
      schema-utils: 4.2.0
-      webpack: 5.88.2(esbuild@0.17.19)
+      webpack: 5.88.2

  /eslint@8.49.0:
    resolution: {integrity: sha512-jw03ENfm6VJI0jA9U+8H5zfl5b+FvuU3YYvZRdZHOlU2ggJkxrlkJH4HcDrZpj6YwD8kuYqvQM8LyesoazrSOQ==}
@@ -5096,10 +4783,6 @@ packages:
    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
    engines: {node: '>=4.0'}

-  /estree-walker@0.6.1:
-    resolution: {integrity: sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==}
-    dev: true
-
  /estree-walker@1.0.1:
    resolution: {integrity: sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==}

@@ -5132,11 +4815,6 @@ packages:
      signal-exit: 3.0.7
      strip-final-newline: 2.0.0

-  /exit-hook@2.2.1:
-    resolution: {integrity: sha512-eNTPlAD67BmP31LDINZ3U7HSF8l57TxOY2PmBJ1shpCvpnxBF93mWCE8YHBnXs8qiUZJc9WDcWIeC3a2HIAMfw==}
-    engines: {node: '>=6'}
-    dev: true
-
  /exit@0.1.2:
    resolution: {integrity: sha512-Zk/eNKV2zbjpKzrsQ+n1G6poVbErQxJ0LBOJXaKZ1EViLzH+hrLu9cdXI4zw9dBQJslwBEpbQ2P1oS7nDxs6jQ==}
    engines: {node: '>= 0.8.0'}
@@ -5258,7 +4936,7 @@ packages:
    dependencies:
      loader-utils: 2.0.4
      schema-utils: 3.3.0
-      webpack: 5.88.2(esbuild@0.17.19)
+      webpack: 5.88.2

  /filelist@1.0.4:
    resolution: {integrity: sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==}
@@ -5389,7 +5067,7 @@ packages:
      semver: 7.5.4
      tapable: 1.1.3
      typescript: 5.2.2
-      webpack: 5.88.2(esbuild@0.17.19)
+      webpack: 5.88.2

  /form-data@3.0.1:
    resolution: {integrity: sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==}
@@ -5487,13 +5165,6 @@ packages:
    resolution: {integrity: sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==}
    engines: {node: '>=8.0.0'}

-  /get-source@2.0.12:
-    resolution: {integrity: sha512-X5+4+iD+HoSeEED+uwrQ07BOQr0kEDFMVqqpBuI+RaZBpBpHCuXxo70bjar6f0b0u/DQJsJ7ssurpP0V60Az+w==}
-    dependencies:
-      data-uri-to-buffer: 2.0.2
-      source-map: 0.6.1
-    dev: true
-
  /get-stream@6.0.1:
    resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
    engines: {node: '>=10'}
@@ -5713,7 +5384,7 @@ packages:
      lodash: 4.17.21
      pretty-error: 4.0.0
      tapable: 2.2.1
-      webpack: 5.88.2(esbuild@0.17.19)
+      webpack: 5.88.2

  /htmlparser2@6.1.0:
    resolution: {integrity: sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==}
@@ -7257,12 +6928,6 @@ packages:
    engines: {node: '>=4'}
    hasBin: true

-  /mime@3.0.0:
-    resolution: {integrity: sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==}
-    engines: {node: '>=10.0.0'}
-    hasBin: true
-    dev: true
-
  /mimic-fn@2.1.0:
    resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
    engines: {node: '>=6'}
@@ -7274,29 +6939,7 @@ packages:
      webpack: ^5.0.0
    dependencies:
      schema-utils: 4.2.0
-      webpack: 5.88.2(esbuild@0.17.19)
-
-  /miniflare@3.20230918.0:
-    resolution: {integrity: sha512-Dd29HB7ZlT1CXB2tPH8nW6fBOOXi/m7qFZHjKm2jGS+1OaGfrv0PkT5UspWW5jQi8rWI87xtordAUiIJkwWqRw==}
-    engines: {node: '>=16.13'}
-    dependencies:
-      acorn: 8.10.0
-      acorn-walk: 8.2.0
-      capnp-ts: 0.7.0
-      exit-hook: 2.2.1
-      glob-to-regexp: 0.4.1
-      source-map-support: 0.5.21
-      stoppable: 1.1.0
-      undici: 5.25.1
-      workerd: 1.20230904.0
-      ws: 8.14.2
-      youch: 3.3.1
-      zod: 3.22.2
-    transitivePeerDependencies:
-      - bufferutil
-      - supports-color
-      - utf-8-validate
-    dev: true
+      webpack: 5.88.2

  /minimalistic-assert@1.0.1:
    resolution: {integrity: sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==}
@@ -7349,11 +6992,6 @@ packages:
      dns-packet: 5.6.1
      thunky: 1.1.0

-  /mustache@4.2.0:
-    resolution: {integrity: sha512-71ippSywq5Yb7/tVYyGbkBggbU8H3u5Rz56fH60jGFgr8uHwxs+aSKeqmluIVzM0m0kB7xQjKS6qPfd0b2ZoqQ==}
-    hasBin: true
-    dev: true
-
  /mz@2.7.0:
    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
    dependencies:
@@ -7687,10 +7325,6 @@ packages:
  /path-to-regexp@0.1.7:
    resolution: {integrity: sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==}

-  /path-to-regexp@6.2.1:
-    resolution: {integrity: sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==}
-    dev: true
-
  /path-type@4.0.0:
    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
    engines: {node: '>=8'}
@@ -8026,7 +7660,7 @@ packages:
      klona: 2.0.6
      postcss: 8.4.30
      semver: 7.5.4
-      webpack: 5.88.2(esbuild@0.17.19)
+      webpack: 5.88.2

  /postcss-logical@5.0.4(postcss@8.4.30):
    resolution: {integrity: sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g==}
@@ -8480,10 +8114,6 @@ packages:
      ansi-styles: 5.2.0
      react-is: 18.2.0

-  /printable-characters@1.0.42:
-    resolution: {integrity: sha512-dKp+C4iXWK4vVYZmYSd0KBH5F/h1HoZRsbJ82AVKRO3PEo8L4lBS/vLwhVtpwwuYcoIsVY+1JYKR268yn480uQ==}
-    dev: true
-
  /process-nextick-args@2.0.1:
    resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}

@@ -8589,7 +8219,7 @@ packages:
    peerDependencies:
      react-scripts: '>=2.1.3'
    dependencies:
-      react-scripts: 5.0.1(@babel/plugin-syntax-flow@7.22.5)(@babel/plugin-transform-react-jsx@7.22.15)(esbuild@0.17.19)(eslint@8.49.0)(react@18.2.0)(typescript@5.2.2)
+      react-scripts: 5.0.1(@babel/plugin-syntax-flow@7.22.5)(@babel/plugin-transform-react-jsx@7.22.15)(eslint@8.49.0)(react@18.2.0)(typescript@5.2.2)
      semver: 5.7.2
    dev: true

@@ -8628,7 +8258,7 @@ packages:
      strip-ansi: 6.0.1
      text-table: 0.2.0
      typescript: 5.2.2
-      webpack: 5.88.2(esbuild@0.17.19)
+      webpack: 5.88.2
    transitivePeerDependencies:
      - eslint
      - supports-color
@@ -8710,7 +8340,7 @@ packages:
      react: 18.2.0
    dev: false

-  /react-scripts@5.0.1(@babel/plugin-syntax-flow@7.22.5)(@babel/plugin-transform-react-jsx@7.22.15)(esbuild@0.17.19)(eslint@8.49.0)(react@18.2.0)(typescript@5.2.2):
+  /react-scripts@5.0.1(@babel/plugin-syntax-flow@7.22.5)(@babel/plugin-transform-react-jsx@7.22.15)(eslint@8.49.0)(react@18.2.0)(typescript@5.2.2):
    resolution: {integrity: sha512-8VAmEm/ZAwQzJ+GOMLbBsTdDKOpuZh7RPs0UymvBR2vRk4iZWCskjbFnxqjrzoIvlNNRZ3QJFx6/qDSi6zSnaQ==}
    engines: {node: '>=14.0.0'}
    hasBin: true
@@ -8734,7 +8364,7 @@ packages:
      camelcase: 6.3.0
      case-sensitive-paths-webpack-plugin: 2.4.0
      css-loader: 6.8.1(webpack@5.88.2)
-      css-minimizer-webpack-plugin: 3.4.1(esbuild@0.17.19)(webpack@5.88.2)
+      css-minimizer-webpack-plugin: 3.4.1(webpack@5.88.2)
      dotenv: 10.0.0
      dotenv-expand: 5.1.0
      eslint: 8.49.0
@@ -8765,9 +8395,9 @@ packages:
      source-map-loader: 3.0.2(webpack@5.88.2)
      style-loader: 3.3.3(webpack@5.88.2)
      tailwindcss: 3.3.3
-      terser-webpack-plugin: 5.3.9(esbuild@0.17.19)(webpack@5.88.2)
+      terser-webpack-plugin: 5.3.9(webpack@5.88.2)
      typescript: 5.2.2
-      webpack: 5.88.2(esbuild@0.17.19)
+      webpack: 5.88.2
      webpack-dev-server: 4.15.1(webpack@5.88.2)
      webpack-manifest-plugin: 4.1.1(webpack@5.88.2)
      workbox-webpack-plugin: 6.6.0(webpack@5.88.2)
@@ -9030,21 +8660,6 @@ packages:
    dependencies:
      glob: 7.2.3

-  /rollup-plugin-inject@3.0.2:
-    resolution: {integrity: sha512-ptg9PQwzs3orn4jkgXJ74bfs5vYz1NCZlSQMBUA0wKcGp5i5pA1AO3fOUEte8enhGUC+iapTCzEWw2jEFFUO/w==}
-    deprecated: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-inject.
-    dependencies:
-      estree-walker: 0.6.1
-      magic-string: 0.25.9
-      rollup-pluginutils: 2.8.2
-    dev: true
-
-  /rollup-plugin-node-polyfills@0.2.1:
-    resolution: {integrity: sha512-4kCrKPTJ6sK4/gLL/U5QzVT8cxJcofO0OU74tnB19F40cmuAKSzH5/siithxlofFEjwvw1YAhPmbvGNA6jEroA==}
-    dependencies:
-      rollup-plugin-inject: 3.0.2
-    dev: true
-
  /rollup-plugin-terser@7.0.2(rollup@2.79.1):
    resolution: {integrity: sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==}
    deprecated: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser
@@ -9057,12 +8672,6 @@ packages:
      serialize-javascript: 4.0.0
      terser: 5.20.0

-  /rollup-pluginutils@2.8.2:
-    resolution: {integrity: sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==}
-    dependencies:
-      estree-walker: 0.6.1
-    dev: true
-
  /rollup@2.79.1:
    resolution: {integrity: sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==}
    engines: {node: '>=10.0.0'}
@@ -9131,7 +8740,7 @@ packages:
    dependencies:
      klona: 2.0.6
      neo-async: 2.6.2
-      webpack: 5.88.2(esbuild@0.17.19)
+      webpack: 5.88.2

  /sax@1.2.4:
    resolution: {integrity: sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==}
@@ -9339,7 +8948,7 @@ packages:
      abab: 2.0.6
      iconv-lite: 0.6.3
      source-map-js: 1.0.2
-      webpack: 5.88.2(esbuild@0.17.19)
+      webpack: 5.88.2

  /source-map-support@0.5.21:
    resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
@@ -9419,13 +9028,6 @@ packages:
  /stackframe@1.3.4:
    resolution: {integrity: sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==}

-  /stacktracey@2.1.8:
-    resolution: {integrity: sha512-Kpij9riA+UNg7TnphqjH7/CzctQ/owJGNbFkfEeve4Z4uxT5+JapVLFXcsurIfN34gnTWZNJ/f7NMG0E8JDzTw==}
-    dependencies:
-      as-table: 1.0.55
-      get-source: 2.0.12
-    dev: true
-
  /static-eval@2.0.2:
    resolution: {integrity: sha512-N/D219Hcr2bPjLxPiV+TQE++Tsmrady7TqAJugLy7Xk1EumfDWS/f5dtBbkRCGE7wKKXuYockQoj8Rm2/pVKyg==}
    dependencies:
@@ -9439,16 +9041,6 @@ packages:
    resolution: {integrity: sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==}
    engines: {node: '>= 0.8'}

-  /stoppable@1.1.0:
-    resolution: {integrity: sha512-KXDYZ9dszj6bzvnEMRYvxgeTHU74QBFL54XKtP3nyMuJ81CFYtABZ3bAzL2EdFUaEwJOBOgENyFj3R7oTzDyyw==}
-    engines: {node: '>=4', npm: '>=6'}
-    dev: true
-
-  /streamsearch@1.1.0:
-    resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
-    engines: {node: '>=10.0.0'}
-    dev: true
-
  /string-length@4.0.2:
    resolution: {integrity: sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==}
    engines: {node: '>=10'}
@@ -9569,7 +9161,7 @@ packages:
    peerDependencies:
      webpack: ^5.0.0
    dependencies:
-      webpack: 5.88.2(esbuild@0.17.19)
+      webpack: 5.88.2

  /style-to-object@0.4.2:
    resolution: {integrity: sha512-1JGpfPB3lo42ZX8cuPrheZbfQ6kqPPnPHlKMyeRYtfKD+0jG+QsXgXN57O/dvJlzlB2elI6dGmrPnl5VPQFPaA==}
@@ -9730,7 +9322,7 @@ packages:
      ansi-escapes: 4.3.2
      supports-hyperlinks: 2.3.0

-  /terser-webpack-plugin@5.3.9(esbuild@0.17.19)(webpack@5.88.2):
+  /terser-webpack-plugin@5.3.9(webpack@5.88.2):
    resolution: {integrity: sha512-ZuXsqE07EcggTWQjXUj+Aot/OMcD0bMKGgF63f7UxYcu5/AJF53aIpK1YoP5xR9l6s/Hy2b+t1AM0bLNPRuhwA==}
    engines: {node: '>= 10.13.0'}
    peerDependencies:
@@ -9747,12 +9339,11 @@ packages:
        optional: true
    dependencies:
      '@jridgewell/trace-mapping': 0.3.19
-      esbuild: 0.17.19
      jest-worker: 27.5.1
      schema-utils: 3.3.0
      serialize-javascript: 6.0.1
      terser: 5.20.0
-      webpack: 5.88.2(esbuild@0.17.19)
+      webpack: 5.88.2

  /terser@5.20.0:
    resolution: {integrity: sha512-e56ETryaQDyebBwJIWYB2TT6f2EZ0fL0sW/JRXNMN26zZdKi2u/E/5my5lG6jNxym6qsrVXfFRmOdV42zlAgLQ==}
@@ -9956,13 +9547,6 @@ packages:
  /underscore@1.12.1:
    resolution: {integrity: sha512-hEQt0+ZLDVUMhebKxL4x1BTtDY7bavVofhZ9KZ4aI26X9SRaE+Y3m83XUL1UP2jn8ynjndwCCpEHdUG+9pP1Tw==}

-  /undici@5.25.1:
-    resolution: {integrity: sha512-nTw6b2G2OqP6btYPyghCgV4hSwjJlL/78FMJatVLCa3otj6PCOQSt6dVtYt82OtNqFz8XsnJ+vsXLADPXjPhqw==}
-    engines: {node: '>=14.0'}
-    dependencies:
-      busboy: 1.6.0
-    dev: true
-
  /unicode-canonical-property-names-ecmascript@2.0.0:
    resolution: {integrity: sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==}
    engines: {node: '>=4'}
@@ -10231,7 +9815,7 @@ packages:
      mime-types: 2.1.35
      range-parser: 1.2.1
      schema-utils: 4.2.0
-      webpack: 5.88.2(esbuild@0.17.19)
+      webpack: 5.88.2

  /webpack-dev-server@4.15.1(webpack@5.88.2):
    resolution: {integrity: sha512-5hbAst3h3C3L8w6W4P96L5vaV0PxSmJhxZvWKYIdgxOQm8pNZ5dEOmmSLBVpP85ReeyRt6AS1QJNyo/oFFPeVA==}
@@ -10274,7 +9858,7 @@ packages:
      serve-index: 1.9.1
      sockjs: 0.3.24
      spdy: 4.0.2
-      webpack: 5.88.2(esbuild@0.17.19)
+      webpack: 5.88.2
      webpack-dev-middleware: 5.3.3(webpack@5.88.2)
      ws: 8.14.2
    transitivePeerDependencies:
@@ -10290,7 +9874,7 @@ packages:
      webpack: ^4.44.2 || ^5.47.0
    dependencies:
      tapable: 2.2.1
-      webpack: 5.88.2(esbuild@0.17.19)
+      webpack: 5.88.2
      webpack-sources: 2.3.1

  /webpack-sources@1.4.3:
@@ -10310,7 +9894,7 @@ packages:
    resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==}
    engines: {node: '>=10.13.0'}

-  /webpack@5.88.2(esbuild@0.17.19):
+  /webpack@5.88.2:
    resolution: {integrity: sha512-JmcgNZ1iKj+aiR0OvTYtWQqJwq37Pf683dY9bVORwVbUrDhLhdn/PlO2sHsFHPkj7sHNQF3JwaAkp49V+Sq1tQ==}
    engines: {node: '>=10.13.0'}
    hasBin: true
@@ -10341,7 +9925,7 @@ packages:
      neo-async: 2.6.2
      schema-utils: 3.3.0
      tapable: 2.2.1
-      terser-webpack-plugin: 5.3.9(esbuild@0.17.19)(webpack@5.88.2)
+      terser-webpack-plugin: 5.3.9(webpack@5.88.2)
      watchpack: 2.4.0
      webpack-sources: 3.2.3
    transitivePeerDependencies:
@@ -10582,7 +10166,7 @@ packages:
      fast-json-stable-stringify: 2.1.0
      pretty-bytes: 5.6.0
      upath: 1.2.0
-      webpack: 5.88.2(esbuild@0.17.19)
+      webpack: 5.88.2
      webpack-sources: 1.4.3
      workbox-build: 6.6.0
    transitivePeerDependencies:
@@ -10595,45 +10179,6 @@ packages:
      '@types/trusted-types': 2.0.4
      workbox-core: 6.6.0

-  /workerd@1.20230904.0:
-    resolution: {integrity: sha512-t9znszH0rQGK4mJGvF9L3nN0qKEaObAGx0JkywFtAwH8OkSn+YfQbHNZE+YsJ4qa1hOz1DCNEk08UDFRBaYq4g==}
-    engines: {node: '>=16'}
-    hasBin: true
-    requiresBuild: true
-    optionalDependencies:
-      '@cloudflare/workerd-darwin-64': 1.20230904.0
-      '@cloudflare/workerd-darwin-arm64': 1.20230904.0
-      '@cloudflare/workerd-linux-64': 1.20230904.0
-      '@cloudflare/workerd-linux-arm64': 1.20230904.0
-      '@cloudflare/workerd-windows-64': 1.20230904.0
-    dev: true
-
-  /wrangler@3.9.0:
-    resolution: {integrity: sha512-Ho1A76KxbqfcRgCsuN6xGar3BVPyn4oVWM9zx0HvEVhT9wQ7n/LvB6GlPdXKABqEBYhVe/oTH72S5TgWl0DgaA==}
-    engines: {node: '>=16.13.0'}
-    hasBin: true
-    dependencies:
-      '@cloudflare/kv-asset-handler': 0.2.0
-      '@esbuild-plugins/node-globals-polyfill': 0.2.3(esbuild@0.17.19)
-      '@esbuild-plugins/node-modules-polyfill': 0.2.2(esbuild@0.17.19)
-      blake3-wasm: 2.1.5
-      chokidar: 3.5.3
-      esbuild: 0.17.19
-      miniflare: 3.20230918.0
-      nanoid: 3.3.6
-      path-to-regexp: 6.2.1
-      selfsigned: 2.1.1
-      source-map: 0.6.1
-      source-map-support: 0.5.21
-      xxhash-wasm: 1.0.2
-    optionalDependencies:
-      fsevents: 2.3.3
-    transitivePeerDependencies:
-      - bufferutil
-      - supports-color
-      - utf-8-validate
-    dev: true
-
  /wrap-ansi@7.0.0:
    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
    engines: {node: '>=10'}
@@ -10683,10 +10228,6 @@ packages:
  /xmlchars@2.2.0:
    resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}

-  /xxhash-wasm@1.0.2:
-    resolution: {integrity: sha512-ibF0Or+FivM9lNrg+HGJfVX8WJqgo+kCLDc4vx6xMeTce7Aj+DLttKbxxRR/gNLSAelRc1omAPlJ77N/Jem07A==}
-    dev: true
-
  /y18n@5.0.8:
    resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
    engines: {node: '>=10'}
@@ -10724,15 +10265,3 @@ packages:
  /yocto-queue@0.1.0:
    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
    engines: {node: '>=10'}
-
-  /youch@3.3.1:
-    resolution: {integrity: sha512-Rg9ioi+AkKyje2Hk4qILSVvayaFW98KTsOJ4aIkjDf97LZX5WJVIHZmFLnM4ThcVofHo/fbbwtYajfBPHFOVtg==}
-    dependencies:
-      cookie: 0.5.0
-      mustache: 4.2.0
-      stacktracey: 2.1.8
-    dev: true
-
-  /zod@3.22.2:
-    resolution: {integrity: sha512-wvWkphh5WQsJbVk1tbx1l1Ly4yg+XecD+Mq280uBGt9wa5BKSWf4Mhp6GmrkPixhMxmabYY7RbzlwVP32pbGCg==}
-    dev: true
--- a/public/_locales/en/messages.json
+++ b/public/_locales/en/messages.json
@@ -3,7 +3,7 @@
    "message": "KISS Translator"
  },
  "app_description": {
-    "message": "A minimalist bilingual translation Extension & Greasemonkey Script"
+    "message": "A simple bilingual translation extension & Greasemonkey script"
  },
  "toggle_translate": {
    "message": "Toggle Translate"
--- a/public/_locales/zh_CN/messages.json
+++ b/public/_locales/zh_CN/messages.json
@@ -3,7 +3,7 @@
    "message": "简约翻译"
  },
  "app_description": {
-    "message": "一个简约的网页双语翻译扩展 & 油猴脚本"
+    "message": "一个简约的双语对照翻译扩展 & 油猴脚本"
  },
  "toggle_translate": {
    "message": "开启翻译"
--- a/public/manifest.firefox.json
+++ b/public/manifest.firefox.json
@@ -2,7 +2,7 @@
  "manifest_version": 2,
  "name": "__MSG_app_name__",
  "description": "__MSG_app_description__",
-  "version": "1.7.2",
+  "version": "1.7.11",
  "default_locale": "en",
  "author": "Gabe<yugang2002@gmail.com>",
  "homepage_url": "https://github.com/fishjar/kiss-translator",
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -2,7 +2,7 @@
  "manifest_version": 3,
  "name": "__MSG_app_name__",
  "description": "__MSG_app_description__",
-  "version": "1.7.2",
+  "version": "1.7.11",
  "default_locale": "en",
  "author": "Gabe<yugang2002@gmail.com>",
  "homepage_url": "https://github.com/fishjar/kiss-translator",
--- a/src/apis/baidu.js
+++ b/src/apis/baidu.js
@@ -0,0 +1,230 @@
+import queryString from "query-string";
+import { getBdauth, setBdauth } from "../libs/storage";
+import { URL_BAIDU_WEB, URL_BAIDU_TRAN } 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();
+
+export const genBaidu = 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_TRAN}?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];
+};
--- a/src/apis/deepl.js
+++ b/src/apis/deepl.js
@@ -0,0 +1,58 @@
+import { URL_DEEPLFREE_TRAN } from "../config";
+
+let id = 1e4 * Math.round(1e4 * Math.random());
+
+export const genDeeplFree = ({ text, from, to }) => {
+  const iCount = (text.match(/[i]/g) || []).length + 1;
+  let timestamp = Date.now();
+  timestamp = timestamp + (iCount - (timestamp % iCount));
+  id++;
+
+  let body = JSON.stringify({
+    jsonrpc: "2.0",
+    method: "LMT_handle_texts",
+    params: {
+      splitting: "newlines",
+      lang: {
+        target_lang: to,
+        source_lang_user_selected: from,
+      },
+      commonJobParams: {
+        wasSpoken: false,
+        transcribe_as: "",
+      },
+      id,
+      timestamp,
+      texts: [
+        {
+          text,
+          requestAlternatives: 3,
+        },
+      ],
+    },
+  });
+
+  body = body.replace(
+    'method":"',
+    (id + 3) % 13 === 0 || (id + 5) % 29 === 0 ? 'method" : "' : 'method": "'
+  );
+
+  const init = {
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "*/*",
+      "x-app-os-name": "iOS",
+      "x-app-os-version": "16.3.0",
+      "Accept-Language": "en-US,en;q=0.9",
+      "Accept-Encoding": "gzip, deflate, br",
+      "x-app-device": "iPhone13,2",
+      "User-Agent": "DeepL-iOS/2.9.1 iOS 16.3.0 (iPhone13,2)",
+      "x-app-build": "510265",
+      "x-app-version": "2.9.1",
+    },
+    method: "POST",
+    body,
+  };
+
+  return [URL_DEEPLFREE_TRAN, init];
+};
--- a/src/apis/index.js
+++ b/src/apis/index.js
@@ -4,14 +4,21 @@ 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_CLOUDFLAREAI,
  OPT_TRANS_CUSTOMIZE,
-  OPT_LANGS_SPECIAL,
-  PROMPT_PLACE_FROM,
-  PROMPT_PLACE_TO,
+  URL_CACHE_TRAN,
  KV_SALT_SYNC,
+  URL_BAIDU_LANGDETECT,
+  OPT_LANGS_BAIDU,
+  URL_TENCENT_TRANSMART,
+  OPT_LANGS_TENCENT,
+  OPT_LANGS_SPECIAL,
 } from "../config";
-import { tryDetectLang } from "../libs";
 import { sha256 } from "../libs/utils";

 /**
@@ -39,202 +46,52 @@ export const apiSyncData = async (url, key, data) =>
 export const apiFetch = (url) => fetchPolyfill(url);

 /**
- * 谷歌翻译
+ * 百度语言识别
 * @param {*} text
- * @param {*} to
- * @param {*} from
 * @returns
 */
-const apiGoogleTranslate = async (
-  translator,
-  text,
-  to,
-  from,
-  { url, key, useCache = true }
-) => {
-  const params = {
-    client: "gtx",
-    dt: "t",
-    dj: 1,
-    ie: "UTF-8",
-    sl: from,
-    tl: to,
-    q: text,
-  };
-  const input = `${url}?${queryString.stringify(params)}`;
-  const res = await fetchPolyfill(input, {
-    headers: {
-      "Content-type": "application/json",
-    },
-    useCache,
-    usePool: true,
-    translator,
-    token: key,
-  });
-  const trText = res.sentences.map((item) => item.trans).join(" ");
-  const isSame = to === res.src;
-
-  return [trText, isSame];
-};
-
-/**
- * 微软翻译
- * @param {*} text
- * @param {*} to
- * @param {*} from
- * @returns
- */
-const apiMicrosoftTranslate = async (
-  translator,
-  text,
-  to,
-  from,
-  { url, useCache = true }
-) => {
-  const params = {
-    from,
-    to,
-    "api-version": "3.0",
-  };
-  const input = `${url}?${queryString.stringify(params)}`;
-  const res = await fetchPolyfill(input, {
+export const apiBaiduLangdetect = async (text) => {
+  const res = await fetchPolyfill(URL_BAIDU_LANGDETECT, {
    headers: {
      "Content-type": "application/json",
    },
    method: "POST",
-    body: JSON.stringify([{ Text: text }]),
-    useCache,
-    usePool: true,
-    translator,
+    body: JSON.stringify({
+      query: text,
+    }),
+    useCache: true,
  });
-  const trText = res[0].translations[0].text;
-  const isSame = to === res[0].detectedLanguage?.language;

-  return [trText, isSame];
-};
-
-/**
- * DeepL翻译
- * @param {*} text
- * @param {*} to
- * @param {*} from
- * @returns
- */
-const apiDeepLTranslate = async (
-  translator,
-  text,
-  to,
-  from,
-  { url, key, useCache = true }
-) => {
-  const data = {
-    text: [text],
-    target_lang: to,
-    split_sentences: "0",
-  };
-  if (from) {
-    data.source_lang = from;
+  if (res.error === 0) {
+    return OPT_LANGS_BAIDU.get(res.lan) ?? res.lan;
  }
-  const res = await fetchPolyfill(url, {
-    headers: {
-      "Content-type": "application/json",
-    },
-    method: "POST",
-    body: JSON.stringify(data),
-    useCache,
-    usePool: true,
-    translator,
-    token: key,
-  });
-  const trText = res.translations.map((item) => item.text).join(" ");
-  const isSame = to === res.translations[0].detected_source_language;

-  return [trText, isSame];
+  return "";
 };

 /**
- * OpenAI 翻译
+ * 腾讯语言识别
 * @param {*} text
- * @param {*} to
- * @param {*} from
 * @returns
 */
-const apiOpenaiTranslate = async (
-  translator,
-  text,
-  to,
-  from,
-  { url, key, model, prompt, useCache = true }
-) => {
-  prompt = prompt
-    .replaceAll(PROMPT_PLACE_FROM, from)
-    .replaceAll(PROMPT_PLACE_TO, to);
-  const res = await fetchPolyfill(url, {
+export const apiTencentLangdetect = async (text) => {
+  const body = JSON.stringify({
+    header: {
+      fn: "text_analysis",
+    },
+    text,
+  });
+
+  const res = await fetchPolyfill(URL_TENCENT_TRANSMART, {
    headers: {
      "Content-type": "application/json",
    },
    method: "POST",
-    body: JSON.stringify({
-      model: model,
-      messages: [
-        {
-          role: "system",
-          content: prompt,
-        },
-        {
-          role: "user",
-          content: text,
-        },
-      ],
-      temperature: 0,
-      max_tokens: 256,
-    }),
-    useCache,
-    usePool: true,
-    translator,
-    token: key,
+    body,
+    useCache: true,
  });
-  const trText = res?.choices?.[0].message.content;
-  const sLang = await tryDetectLang(text);
-  const tLang = await tryDetectLang(trText);
-  const isSame = text === trText || (sLang && tLang && sLang === tLang);

-  return [trText, isSame];
-};
-
-/**
- * 自定义接口 翻译
- * @param {*} text
- * @param {*} to
- * @param {*} from
- * @returns
- */
-const apiCustomTranslate = async (
-  translator,
-  text,
-  to,
-  from,
-  { url, key, useCache = true }
-) => {
-  const res = await fetchPolyfill(url, {
-    headers: {
-      "Content-type": "application/json",
-    },
-    method: "POST",
-    body: JSON.stringify({
-      text,
-      from,
-      to,
-    }),
-    useCache,
-    usePool: true,
-    translator,
-    token: key,
-  });
-  const trText = res.text;
-  const isSame = to === res.from;
-
-  return [trText, isSame];
+  return OPT_LANGS_TENCENT.get(res.language) ?? res.language;
 };

 /**
@@ -242,29 +99,94 @@ const apiCustomTranslate = async (
 * @param {*} param0
 * @returns
 */
-export const apiTranslate = ({
+export const apiTranslate = async ({
  translator,
  text,
  fromLang,
  toLang,
-  apiSetting,
+  apiSetting = {},
+  useCache = true,
+  usePool = true,
 }) => {
-  const from = OPT_LANGS_SPECIAL[translator]?.get(fromLang) ?? fromLang;
-  const to = OPT_LANGS_SPECIAL[translator]?.get(toLang) ?? toLang;
-  const callApi = (api) => api(translator, text, to, from, apiSetting);
+  let trText = "";
+  let isSame = false;
+
+  const from =
+    OPT_LANGS_SPECIAL[translator].get(fromLang) ??
+    OPT_LANGS_SPECIAL[translator].get("auto");
+  const to = OPT_LANGS_SPECIAL[translator].get(toLang);
+  if (!text || !to) {
+    console.log(`[trans] target lang: ${toLang} not support`);
+    return [trText, isSame];
+  }
+
+  const cacheOpts = {
+    translator,
+    text,
+    fromLang,
+    toLang,
+  };
+
+  const transOpts = {
+    translator,
+    text,
+    from,
+    to,
+  };
+
+  const res = await fetchPolyfill(
+    `${URL_CACHE_TRAN}?${queryString.stringify(cacheOpts)}`,
+    {
+      useCache,
+      usePool,
+      transOpts,
+      apiSetting,
+    }
+  );

  switch (translator) {
    case OPT_TRANS_GOOGLE:
-      return callApi(apiGoogleTranslate);
+      trText = res.sentences.map((item) => item.trans).join(" ");
+      isSame = to === res.src;
+      break;
    case OPT_TRANS_MICROSOFT:
-      return callApi(apiMicrosoftTranslate);
+      trText = res[0].translations.map((item) => item.text).join(" ");
+      isSame = text === trText;
+      break;
    case OPT_TRANS_DEEPL:
-      return callApi(apiDeepLTranslate);
+      trText = res.translations.map((item) => item.text).join(" ");
+      isSame = to === res.translations[0].detected_source_language;
+      break;
+    case OPT_TRANS_DEEPLFREE:
+      trText = res.result?.texts.map((item) => item.text).join(" ");
+      isSame = to === res.result?.lang;
+      break;
+    case OPT_TRANS_DEEPLX:
+      trText = res.data;
+      isSame = to === res.source_lang;
+      break;
+    case OPT_TRANS_BAIDU:
+      trText = res.trans_result?.data.map((item) => item.dst).join(" ");
+      isSame = res.trans_result?.to === res.trans_result?.from;
+      break;
+    case OPT_TRANS_TENCENT:
+      trText = res.auto_translation;
+      isSame = text === trText;
+      break;
    case OPT_TRANS_OPENAI:
-      return callApi(apiOpenaiTranslate);
+      trText = res?.choices?.[0].message.content;
+      isSame = text === trText;
+      break;
+    case OPT_TRANS_CLOUDFLAREAI:
+      trText = res?.result?.translated_text;
+      isSame = text === trText;
+      break;
    case OPT_TRANS_CUSTOMIZE:
-      return callApi(apiCustomTranslate);
+      trText = res.text;
+      isSame = to === res.from;
+      break;
    default:
-      return ["", false];
  }
+
+  return [trText, isSame, res];
 };
--- a/src/background.js
+++ b/src/background.js
@@ -4,6 +4,8 @@ import {
  MSG_FETCH_LIMIT,
  MSG_FETCH_CLEAR,
  MSG_TRANS_TOGGLE,
+  MSG_OPEN_OPTIONS,
+  MSG_SAVE_RULE,
  MSG_TRANS_TOGGLE_STYLE,
  CMD_TOGGLE_TRANSLATE,
  CMD_TOGGLE_STYLE,
@@ -15,6 +17,7 @@ import { fetchData, fetchPool } from "./libs/fetch";
 import { sendTabMsg } from "./libs/msg";
 import { trySyncAllSubRules } from "./libs/subRules";
 import { tryClearCaches } from "./libs";
+import { saveRule } from "./libs/rules";

 globalThis.ContextType = "BACKGROUND";

@@ -69,6 +72,12 @@ browser.runtime.onMessage.addListener(
        fetchPool.clear();
        sendResponse({ data: "ok" });
        break;
+      case MSG_OPEN_OPTIONS:
+        browser.runtime.openOptionsPage();
+        break;
+      case MSG_SAVE_RULE:
+        saveRule(args);
+        break;
      default:
        sendResponse({ error: `message action is unavailable: ${action}` });
    }
--- a/src/common.js
+++ b/src/common.js
@@ -0,0 +1,129 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import Action from "./views/Action";
+import createCache from "@emotion/cache";
+import { CacheProvider } from "@emotion/react";
+import {
+  MSG_TRANS_TOGGLE,
+  MSG_TRANS_TOGGLE_STYLE,
+  MSG_TRANS_GETRULE,
+  MSG_TRANS_PUTRULE,
+  APP_LCNAME,
+  DEFAULT_TRANBOX_SETTING,
+} from "./config";
+import { getRulesWithDefault, getFabWithDefault } from "./libs/storage";
+import { Translator } from "./libs/translator";
+import { sendIframeMsg, sendParentMsg } from "./libs/iframe";
+import { matchRule } from "./libs/rules";
+import Slection from "./views/Selection";
+
+export async function runTranslator(setting) {
+  const href = document.location.href;
+  const rules = await getRulesWithDefault();
+  const rule = await matchRule(rules, href, setting);
+  const translator = new Translator(rule, setting);
+
+  return { translator, rule };
+}
+
+export function runIframe(setting) {
+  let translator;
+  window.addEventListener("message", (e) => {
+    const { action, args } = e.data || {};
+    switch (action) {
+      case MSG_TRANS_TOGGLE:
+        translator?.toggle();
+        break;
+      case MSG_TRANS_TOGGLE_STYLE:
+        translator?.toggleStyle();
+        break;
+      case MSG_TRANS_PUTRULE:
+        if (!translator) {
+          translator = new Translator(args, setting);
+        } else {
+          translator.updateRule(args || {});
+        }
+        break;
+      default:
+    }
+  });
+  sendParentMsg(MSG_TRANS_GETRULE);
+}
+
+export async function showFab(translator) {
+  const fab = await getFabWithDefault();
+  if (fab.isHide) {
+    return;
+  }
+
+  const $action = document.createElement("div");
+  $action.setAttribute("id", APP_LCNAME);
+  document.body.parentElement.appendChild($action);
+  const shadowContainer = $action.attachShadow({ mode: "closed" });
+  const emotionRoot = document.createElement("style");
+  const shadowRootElement = document.createElement("div");
+  shadowContainer.appendChild(emotionRoot);
+  shadowContainer.appendChild(shadowRootElement);
+  const cache = createCache({
+    key: APP_LCNAME,
+    prepend: true,
+    container: emotionRoot,
+  });
+  ReactDOM.createRoot(shadowRootElement).render(
+    <React.StrictMode>
+      <CacheProvider value={cache}>
+        <Action translator={translator} fab={fab} />
+      </CacheProvider>
+    </React.StrictMode>
+  );
+}
+
+export function showTransbox({
+  tranboxSetting = DEFAULT_TRANBOX_SETTING,
+  transApis,
+}) {
+  if (!tranboxSetting?.transOpen) {
+    return;
+  }
+
+  const $tranbox = document.createElement("div");
+  $tranbox.setAttribute("id", "kiss-transbox");
+  document.body.parentElement.appendChild($tranbox);
+  const shadowContainer = $tranbox.attachShadow({ mode: "closed" });
+  const emotionRoot = document.createElement("style");
+  const shadowRootElement = document.createElement("div");
+  shadowContainer.appendChild(emotionRoot);
+  shadowContainer.appendChild(shadowRootElement);
+  const cache = createCache({
+    key: "kiss-transbox",
+    prepend: true,
+    container: emotionRoot,
+  });
+  ReactDOM.createRoot(shadowRootElement).render(
+    <React.StrictMode>
+      <CacheProvider value={cache}>
+        <Slection tranboxSetting={tranboxSetting} transApis={transApis} />
+      </CacheProvider>
+    </React.StrictMode>
+  );
+}
+
+export function windowListener(rule) {
+  window.addEventListener("message", (e) => {
+    const { action } = e.data || {};
+    switch (action) {
+      case MSG_TRANS_GETRULE:
+        sendIframeMsg(MSG_TRANS_PUTRULE, rule);
+        break;
+      default:
+    }
+  });
+}
+
+export function showErr(err) {
+  console.error("[KISS-Translator]", err);
+  const $err = document.createElement("div");
+  $err.innerText = `KISS-Translator: ${err.message}`;
+  $err.style.cssText = "background:red; color:#fff;";
+  document.body.prepend($err);
+}
--- a/src/config/i18n.js
+++ b/src/config/i18n.js
@@ -50,20 +50,20 @@ const customApiHelpZH = `/// 自定义翻译源接口说明
  method: "POST",
  headers: {
    "Content-type": "application/json",
-    "Authorization" = "Bearer {{YOUR_KEY}}"
+    "Authorization": "Bearer {{YOUR_KEY}}",
  },
  body: {
-    text, // 需要翻译的文字
-    from, // 源语言，可能为空，表示需要接口自动识别语言
-    to,   // 目标语言
+    text: "", // 需要翻译的文字
+    from: "", // 源语言，可能为空，表示需要接口自动识别语言
+    to: "",   // 目标语言
  }
 }

 // 返回（Response）数据需符合下面的JSON规范
 {
-  text, // 翻译后的文字
-  from, // 识别的源语言
-  to,   // 目标语言（可选）
+  text: "", // 翻译后的文字
+  from: "", // 识别的源语言
+  to: "",   // 目标语言（可选）
 }

 // 支持的语言代码如下
@@ -78,20 +78,20 @@ const customApiHelpEN = `/// Custom translation source interface description
  method: "POST",
  headers: {
    "Content-type": "application/json",
-    "Authorization" = "Bearer {{YOUR_KEY}}"
+    "Authorization": "Bearer {{YOUR_KEY}}",
  },
  body: {
-    text, // text to be translated
-    from, // Source language, may be empty
-    to,   // Target language
+    text: "", // text to be translated
+    from: "", // Source language, may be empty
+    to: "",   // Target language
  }
 }

 // The returned data must conform to the following JSON specification
 {
-  text, // translated text
-  from, // Recognized source language
-  to,   // Target language (optional)
+  text: "", // translated text
+  from: "", // Recognized source language
+  to: "",   // Target language (optional)
 }

 // The supported language codes are as follows
@@ -555,11 +555,11 @@ export const I18N = {
    zh: `全局规则`,
    en: `Global Rule`,
  },
-  input_setting: {
-    zh: `输入框设置`,
-    en: `Input Box Setting`,
+  input_translate: {
+    zh: `输入框翻译`,
+    en: `Input Box Translation`,
  },
-  input_box_translation: {
+  use_input_box_translation: {
    zh: `启用输入框翻译`,
    en: `Input Box Translation`,
  },
@@ -576,8 +576,8 @@ export const I18N = {
    en: `Trigger Translation Shortcut Keys`,
  },
  trigger_trans_shortcut_help: {
-    zh: `默认为单击“Alt+i”`,
-    en: `Default is "Alt+i"`,
+    zh: `默认为单击“AltLeft+KeyI”`,
+    en: `Default is "AltLeft+KeyI"`,
  },
  shortcut_press_count: {
    zh: `快捷键连击次数`,
@@ -595,4 +595,52 @@ export const I18N = {
    zh: `标识后面可以加目标语言代码，如： “/en 你好”、“/zh hello”`,
    en: `The target language code can be added after the sign, such as: "/en 你好", "/zh hello"`,
  },
+  detect_lang_remote: {
+    zh: `远程语言检测`,
+    en: `Remote language detection`,
+  },
+  detect_lang_remote_help: {
+    zh: `启用后检测准确度增加，但会降低翻译速度，请酌情开启`,
+    en: `After enabling, the detection accuracy will increase, but it will reduce the translation speed. Please enable it as appropriate.`,
+  },
+  disable: {
+    zh: `禁用`,
+    en: `Disable`,
+  },
+  enable: {
+    zh: `启用`,
+    en: `Enable`,
+  },
+  selection_translate: {
+    zh: `划词翻译`,
+    en: `Selection Translate`,
+  },
+  toggle_selection_translate: {
+    zh: `启用划词翻译`,
+    en: `Use Selection Translate`,
+  },
+  trigger_tranbox_shortcut: {
+    zh: `显示翻译框快捷键`,
+    en: `Toggle Translate Box Shortcut`,
+  },
+  tranbtn_offset_x: {
+    zh: `翻译按钮偏移X（0-100）`,
+    en: `Translate Button Offset X (0-100)`,
+  },
+  tranbtn_offset_y: {
+    zh: `翻译按钮偏移Y（0-100）`,
+    en: `Translate Button Offset Y (0-100)`,
+  },
+  translated_text: {
+    zh: `译文`,
+    en: `Translated Text`,
+  },
+  original_text: {
+    zh: `原文`,
+    en: `Original Text`,
+  },
+  favorite_words: {
+    zh: `收藏词汇`,
+    en: `Favorite Words`,
+  },
 };
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -20,8 +20,10 @@ export {
 };

 export const STOKEY_MSAUTH = `${APP_NAME}_msauth`;
+export const STOKEY_BDAUTH = `${APP_NAME}_bdauth`;
 export const STOKEY_SETTING = `${APP_NAME}_setting`;
 export const STOKEY_RULES = `${APP_NAME}_rules`;
+export const STOKEY_WORDS = `${APP_NAME}_words`;
 export const STOKEY_SYNC = `${APP_NAME}_sync`;
 export const STOKEY_FAB = `${APP_NAME}_fab`;
 export const STOKEY_RULESCACHE_PREFIX = `${APP_NAME}_rulescache_`;
@@ -39,6 +41,7 @@ export const CLIENT_USERSCRIPT = "userscript";
 export const CLIENT_EXTS = [CLIENT_CHROME, CLIENT_EDGE, CLIENT_FIREFOX];

 export const KV_RULES_KEY = "kiss-rules.json";
+export const KV_WORDS_KEY = "kiss-words.json";
 export const KV_RULES_SHARE_KEY = "kiss-rules-share.json";
 export const KV_SETTING_KEY = "kiss-setting.json";
 export const KV_SALT_SYNC = "KISS-Translator-SYNC";
@@ -49,6 +52,8 @@ 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_OPEN_OPTIONS = "open_options";
+export const MSG_SAVE_RULE = "save_rule";
 export const MSG_TRANS_TOGGLE = "trans_toggle";
 export const MSG_TRANS_TOGGLE_STYLE = "trans_toggle_style";
 export const MSG_TRANS_GETRULE = "trans_getrule";
@@ -65,18 +70,37 @@ export const URL_KISS_RULES_NEW_ISSUE =
  "https://github.com/fishjar/kiss-rules/issues/new";
 export const URL_RAW_PREFIX =
  "https://raw.githubusercontent.com/fishjar/kiss-translator/master";
+
+export const URL_CACHE_TRAN = `https://${APP_LCNAME}/translate`;
+export const URL_MICROSOFT_TRAN =
+  "https://api-edge.cognitive.microsofttranslator.com/translate";
 export const URL_MICROSOFT_AUTH = "https://edge.microsoft.com/translate/auth";
+export const URL_BAIDU_LANGDETECT = "https://fanyi.baidu.com/langdetect";
+export const URL_BAIDU_WEB = "https://fanyi.baidu.com/";
+export const URL_BAIDU_TRAN = "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 OPT_TRANS_GOOGLE = "Google";
 export const OPT_TRANS_MICROSOFT = "Microsoft";
 export const OPT_TRANS_DEEPL = "DeepL";
+export const OPT_TRANS_DEEPLX = "DeepLX";
+export const OPT_TRANS_DEEPLFREE = "DeepLFree";
+export const OPT_TRANS_BAIDU = "Baidu";
+export const OPT_TRANS_TENCENT = "Tencent";
 export const OPT_TRANS_OPENAI = "OpenAI";
+export const OPT_TRANS_CLOUDFLAREAI = "CloudflareAI";
 export const OPT_TRANS_CUSTOMIZE = "Custom";
 export const OPT_TRANS_ALL = [
  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_CLOUDFLAREAI,
  OPT_TRANS_CUSTOMIZE,
 ];

@@ -121,7 +145,9 @@ 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_MICROSOFT]: new Map([
+    ...OPT_LANGS_FROM.map(([key]) => [key, key]),
    ["auto", ""],
    ["zh-CN", "zh-Hans"],
    ["zh-TW", "zh-Hant"],
@@ -132,12 +158,103 @@ export const OPT_LANGS_SPECIAL = {
    ["zh-CN", "ZH"],
    ["zh-TW", "ZH"],
  ]),
+  [OPT_TRANS_DEEPLFREE]: new Map([
+    ...OPT_LANGS_FROM.map(([key]) => [key, key.toUpperCase()]),
+    ["auto", "auto"],
+    ["zh-CN", "ZH"],
+    ["zh-TW", "ZH"],
+  ]),
+  [OPT_TRANS_DEEPLX]: new Map([
+    ...OPT_LANGS_FROM.map(([key]) => [key, key.toUpperCase()]),
+    ["auto", ""],
+    ["zh-CN", "ZH"],
+    ["zh-TW", "ZH"],
+  ]),
+  [OPT_TRANS_BAIDU]: new Map([
+    ...OPT_LANGS_FROM.map(([key]) => [key, key]),
+    ["zh-CN", "zh"],
+    ["zh-TW", "cht"],
+    ["ar", "ara"],
+    ["bg", "bul"],
+    ["ca", "cat"],
+    ["hr", "hrv"],
+    ["da", "dan"],
+    ["fi", "fin"],
+    ["fr", "fra"],
+    ["hi", "mai"],
+    ["ja", "jp"],
+    ["ko", "kor"],
+    ["ms", "may"],
+    ["mt", "mlt"],
+    ["nb", "nor"],
+    ["ro", "rom"],
+    ["ru", "ru"],
+    ["sl", "slo"],
+    ["es", "spa"],
+    ["sv", "swe"],
+    ["ta", "tam"],
+    ["te", "tel"],
+    ["uk", "ukr"],
+    ["vi", "vie"],
+  ]),
+  [OPT_TRANS_TENCENT]: new Map([
+    ["auto", "auto"],
+    ["zh-CN", "zh"],
+    ["zh-TW", "zh"],
+    ["en", "en"],
+    ["ar", "ar"],
+    ["de", "de"],
+    ["ru", "ru"],
+    ["fr", "fr"],
+    ["fi", "fil"],
+    ["ko", "ko"],
+    ["ms", "ms"],
+    ["pt", "pt"],
+    ["ja", "ja"],
+    ["th", "th"],
+    ["tr", "tr"],
+    ["es", "es"],
+    ["it", "it"],
+    ["hi", "hi"],
+    ["id", "id"],
+    ["vi", "vi"],
+  ]),
  [OPT_TRANS_OPENAI]: new Map(
    OPT_LANGS_FROM.map(([key, val]) => [key, val.split(" - ")[0]])
  ),
-  [OPT_TRANS_CUSTOMIZE]: new Map([["auto", ""]]),
+  [OPT_TRANS_CLOUDFLAREAI]: new Map([
+    ["auto", ""],
+    ["zh-CN", "chinese"],
+    ["zh-TW", "chinese"],
+    ["en", "english"],
+    ["ar", "arabic"],
+    ["de", "german"],
+    ["ru", "russian"],
+    ["fr", "french"],
+    ["pt", "portuguese"],
+    ["ja", "japanese"],
+    ["es", "spanish"],
+    ["hi", "hindi"],
+  ]),
+  [OPT_TRANS_CUSTOMIZE]: new Map([
+    ...OPT_LANGS_FROM.map(([key]) => [key, key]),
+    ["auto", ""],
+  ]),
 };
 export const OPT_LANGS_LIST = OPT_LANGS_TO.map(([lang]) => lang);
+export const OPT_LANGS_BAIDU = new Map(
+  Array.from(OPT_LANGS_SPECIAL[OPT_TRANS_BAIDU].entries()).map(([k, v]) => [
+    v,
+    k,
+  ])
+);
+export const OPT_LANGS_TENCENT = new Map(
+  Array.from(OPT_LANGS_SPECIAL[OPT_TRANS_TENCENT].entries()).map(([k, v]) => [
+    v,
+    k,
+  ])
+);
+OPT_LANGS_TENCENT.set("zh", "zh-CN");

 export const OPT_STYLE_NONE = "style_none"; // 无
 export const OPT_STYLE_LINE = "under_line"; // 下划线
@@ -201,7 +318,7 @@ export const GLOBLA_RULE = {

 // 输入框翻译
 export const OPT_INPUT_TRANS_SIGNS = ["/", "//", "\\", "\\\\", ">", ">>"];
-export const DEFAULT_INPUT_SHORTCUT = ["Alt", "i"];
+export const DEFAULT_INPUT_SHORTCUT = ["AltLeft", "KeyI"];
 export const DEFAULT_INPUT_RULE = {
  transOpen: true,
  translator: OPT_TRANS_MICROSOFT,
@@ -213,6 +330,18 @@ export const DEFAULT_INPUT_RULE = {
  transSign: OPT_INPUT_TRANS_SIGNS[0],
 };

+// 划词翻译
+export const DEFAULT_TRANBOX_SHORTCUT = ["AltLeft", "KeyB"];
+export const DEFAULT_TRANBOX_SETTING = {
+  transOpen: true,
+  translator: OPT_TRANS_MICROSOFT,
+  fromLang: "auto",
+  toLang: "zh-CN",
+  tranboxShortcut: DEFAULT_TRANBOX_SHORTCUT,
+  btnOffsetX: 10,
+  btnOffsetY: 10,
+};
+
 // 订阅列表
 export const DEFAULT_SUBRULES_LIST = [
  {
@@ -235,20 +364,24 @@ export const DEFAULT_TRANS_APIS = {
    url: "https://translate.googleapis.com/translate_a/single",
    key: "",
  },
-  [OPT_TRANS_MICROSOFT]: {
-    url: "https://api-edge.cognitive.microsofttranslator.com/translate",
-    authUrl: "https://edge.microsoft.com/translate/auth",
-  },
  [OPT_TRANS_DEEPL]: {
    url: "https://api-free.deepl.com/v2/translate",
    key: "",
  },
+  [OPT_TRANS_DEEPLX]: {
+    url: "http://localhost:1188/translate",
+    key: "",
+  },
  [OPT_TRANS_OPENAI]: {
-    url: "https://api.openai.com/v1/chat/completion",
+    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}.`,
  },
+  [OPT_TRANS_CLOUDFLAREAI]: {
+    url: "https://api.cloudflare.com/client/v4/accounts/{ACCOUNT_ID}/ai/run/@cf/meta/m2m100-1.2b",
+    key: "",
+  },
  [OPT_TRANS_CUSTOMIZE]: {
    url: "",
    key: "",
@@ -261,15 +394,15 @@ export const OPT_SHORTCUT_STYLE = "toggleStyle";
 export const OPT_SHORTCUT_POPUP = "togglePopup";
 export const OPT_SHORTCUT_SETTING = "openSetting";
 export const DEFAULT_SHORTCUTS = {
-  [OPT_SHORTCUT_TRANSLATE]: ["Alt", "q"],
-  [OPT_SHORTCUT_STYLE]: ["Alt", "c"],
-  [OPT_SHORTCUT_POPUP]: ["Alt", "k"],
-  [OPT_SHORTCUT_SETTING]: ["Alt", "o"],
+  [OPT_SHORTCUT_TRANSLATE]: ["AltLeft", "KeyQ"],
+  [OPT_SHORTCUT_STYLE]: ["AltLeft", "KeyC"],
+  [OPT_SHORTCUT_POPUP]: ["AltLeft", "KeyK"],
+  [OPT_SHORTCUT_SETTING]: ["AltLeft", "KeyN"],
 };

 export const TRANS_MIN_LENGTH = 5; // 最短翻译长度
 export const TRANS_MAX_LENGTH = 5000; // 最长翻译长度
-export const TRANS_NEWLINE_LENGTH = 40; // 换行字符数
+export const TRANS_NEWLINE_LENGTH = 20; // 换行字符数

 export const DEFAULT_SETTING = {
  darkMode: false, // 深色模式
@@ -282,13 +415,14 @@ export const DEFAULT_SETTING = {
  clearCache: false, // 是否在浏览器下次启动时清除缓存
  injectRules: true, // 是否注入订阅规则
  injectWebfix: true, // 是否注入修复补丁
+  detectRemote: false, // 是否使用远程语言检测
  subrulesList: DEFAULT_SUBRULES_LIST, // 订阅列表
  owSubrule: DEFAULT_OW_RULE, // 覆写订阅规则
  transApis: DEFAULT_TRANS_APIS, // 翻译接口
  mouseKey: OPT_MOUSEKEY_DISABLE, // 鼠标悬停翻译
  shortcuts: DEFAULT_SHORTCUTS, // 快捷键
-  hideFab: false, // 是否隐藏按钮
  inputRule: DEFAULT_INPUT_RULE, // 输入框设置
+  tranboxSetting: DEFAULT_TRANBOX_SETTING, // 划词翻译设置
 };

 export const DEFAULT_RULES = [GLOBLA_RULE];
@@ -303,10 +437,6 @@ export const DEFAULT_SYNC = {
  syncUser: "", // 数据同步用户名
  syncKey: "", // 数据同步密钥
  syncMeta: {}, // 数据更新及同步信息
-  // settingUpdateAt: 0,
-  // settingSyncAt: 0,
-  // rulesUpdateAt: 0,
-  // rulesSyncAt: 0,
  subRulesSyncAt: 0, // 订阅规则同步时间
  dataCaches: {}, // 缓存同步时间
 };
--- a/src/content.js
+++ b/src/content.js
@@ -5,50 +5,19 @@ import {
  MSG_TRANS_GETRULE,
  MSG_TRANS_PUTRULE,
 } from "./config";
-import { getSettingWithDefault, getRulesWithDefault } from "./libs/storage";
-import { Translator } from "./libs/translator";
-import { isIframe, sendIframeMsg, sendPrentMsg } from "./libs/iframe";
-import { matchRule } from "./libs/rules";
-import { webfix } from "./libs/webfix";
+import { getSettingWithDefault } from "./libs/storage";
+import { isIframe, sendIframeMsg } from "./libs/iframe";
+import { runWebfix } from "./libs/webfix";
+import {
+  runIframe,
+  runTranslator,
+  showFab,
+  showTransbox,
+  windowListener,
+  showErr,
+} from "./common";

-/**
- * 入口函数
- */
-const init = async () => {
-  const setting = await getSettingWithDefault();
-
-  if (isIframe) {
-    let translator;
-    window.addEventListener("message", (e) => {
-      const { action, args } = e.data || {};
-      switch (action) {
-        case MSG_TRANS_TOGGLE:
-          translator?.toggle();
-          break;
-        case MSG_TRANS_TOGGLE_STYLE:
-          translator?.toggleStyle();
-          break;
-        case MSG_TRANS_PUTRULE:
-          if (!translator) {
-            translator = new Translator(args, setting);
-          } else {
-            translator.updateRule(args || {});
-          }
-          break;
-        default:
-      }
-    });
-    sendPrentMsg(MSG_TRANS_GETRULE);
-    return;
-  }
-
-  const href = document.location.href;
-  const rules = await getRulesWithDefault();
-  const rule = await matchRule(rules, href, setting);
-  const translator = new Translator(rule, setting);
-  webfix(href, setting);
-
-  // 监听消息
+function runtimeListener(translator) {
  browser?.runtime.onMessage.addListener(async ({ action, args }) => {
    switch (action) {
      case MSG_TRANS_TOGGLE:
@@ -70,25 +39,38 @@ const init = async () => {
    }
    return { data: translator.rule };
  });
-  window.addEventListener("message", (e) => {
-    const { action } = e.data || {};
-    switch (action) {
-      case MSG_TRANS_GETRULE:
-        sendIframeMsg(MSG_TRANS_PUTRULE, rule);
-        break;
-      default:
-    }
-  });
-};
+}

+/**
+ * 入口函数
+ */
 (async () => {
  try {
-    await init();
+    // 读取设置信息
+    const setting = await getSettingWithDefault();
+
+    // 适配iframe
+    if (isIframe) {
+      runIframe(setting);
+      return;
+    }
+
+    // 不规范网页修复
+    await runWebfix(setting);
+
+    // 翻译网页
+    const { translator, rule } = await runTranslator(setting);
+
+    // 监听消息
+    windowListener(rule);
+    runtimeListener(translator);
+
+    // 划词翻译
+    showTransbox(setting);
+
+    // 浮球按钮
+    await showFab(translator);
  } catch (err) {
-    console.error("[KISS-Translator]", err);
-    const $err = document.createElement("div");
-    $err.innerText = `KISS-Translator: ${err.message}`;
-    $err.style.cssText = "background:red; color:#fff;";
-    document.body.prepend($err);
+    showErr(err);
  }
 })();
--- a/src/hooks/Fab.js
+++ b/src/hooks/Fab.js
@@ -0,0 +1,11 @@
+import { STOKEY_FAB } from "../config";
+import { useStorage } from "./Storage";
+
+/**
+ * fab hook
+ * @returns
+ */
+export function useFab() {
+  const { data, update } = useStorage(STOKEY_FAB);
+  return { fab: data, updateFab: update };
+}
--- a/src/hooks/FavWords.js
+++ b/src/hooks/FavWords.js
@@ -0,0 +1,67 @@
+import { KV_WORDS_KEY } from "../config";
+import { useCallback, useEffect, useState } from "react";
+import { trySyncWords } from "../libs/sync";
+import { getWordsWithDefault, setWords } from "../libs/storage";
+import { useSyncMeta } from "./Sync";
+
+export function useFavWords() {
+  const [loading, setLoading] = useState(false);
+  const [favWords, setFavWords] = useState({});
+  const { updateSyncMeta } = useSyncMeta();
+
+  const toggleFav = useCallback(
+    async (word) => {
+      const favs = { ...favWords };
+      if (favs[word]) {
+        delete favs[word];
+      } else {
+        favs[word] = { createdAt: Date.now() };
+      }
+      await setWords(favs);
+      await updateSyncMeta(KV_WORDS_KEY);
+      await trySyncWords();
+      setFavWords(favs);
+    },
+    [updateSyncMeta, favWords]
+  );
+
+  const mergeWords = useCallback(
+    async (newWords) => {
+      const favs = { ...favWords };
+      newWords.forEach((word) => {
+        if (!favs[word]) {
+          favs[word] = { createdAt: Date.now() };
+        }
+      });
+      await setWords(favs);
+      await updateSyncMeta(KV_WORDS_KEY);
+      await trySyncWords();
+      setFavWords(favs);
+    },
+    [updateSyncMeta, favWords]
+  );
+
+  const clearWords = useCallback(async () => {
+    await setWords({});
+    await updateSyncMeta(KV_WORDS_KEY);
+    await trySyncWords();
+    setFavWords({});
+  }, [updateSyncMeta]);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        setLoading(true);
+        await trySyncWords();
+        const favWords = await getWordsWithDefault();
+        setFavWords(favWords);
+      } catch (err) {
+        console.log("[query fav]", err);
+      } finally {
+        setLoading(false);
+      }
+    })();
+  }, []);
+
+  return { loading, favWords, toggleFav, mergeWords, clearWords };
+}
--- a/src/hooks/Sync.js
+++ b/src/hooks/Sync.js
@@ -23,7 +23,7 @@ export function useSyncMeta() {
      syncMeta[key] = { ...(syncMeta[key] || {}), updateAt: Date.now() };
      await updateSync({ syncMeta });
    },
-    [sync, updateSync]
+    [sync?.syncMeta, updateSync]
  );
  return { updateSyncMeta };
 }
--- a/src/hooks/Tranbox.js
+++ b/src/hooks/Tranbox.js
@@ -0,0 +1,18 @@
+import { useCallback } from "react";
+import { DEFAULT_TRANBOX_SETTING } from "../config";
+import { useSetting } from "./Setting";
+
+export function useTranbox() {
+  const { setting, updateSetting } = useSetting();
+  const tranboxSetting = setting?.tranboxSetting || DEFAULT_TRANBOX_SETTING;
+
+  const updateTranbox = useCallback(
+    async (obj) => {
+      Object.assign(tranboxSetting, obj);
+      await updateSetting({ tranboxSetting });
+    },
+    [tranboxSetting, updateSetting]
+  );
+
+  return { tranboxSetting, updateTranbox };
+}
--- a/src/hooks/Translate.js
+++ b/src/hooks/Translate.js
@@ -23,7 +23,7 @@ export function useTranslate(q, rule, setting) {
      try {
        setLoading(true);

-        const deLang = await tryDetectLang(q);
+        const deLang = await tryDetectLang(q, setting.detectRemote);
        if (deLang && toLang.includes(deLang)) {
          setSamelang(true);
        } else {
@@ -32,7 +32,8 @@ export function useTranslate(q, rule, setting) {
            text: q,
            fromLang,
            toLang,
-            apiSetting: (setting.transApis || DEFAULT_TRANS_APIS)[translator],
+            apiSetting:
+              setting.transApis?.[translator] || DEFAULT_TRANS_APIS[translator],
          });
          setText(trText);
          setSamelang(isSame);
--- a/src/index.js
+++ b/src/index.js
@@ -32,25 +32,23 @@ function App() {
          href={process.env.REACT_APP_HOMEPAGE}
        >{`KISS Translator v${process.env.REACT_APP_VERSION}`}</Link>
      </Divider>
-      <Stack spacing={2} direction="row" useFlexGap flexWrap="wrap">
+      <Stack spacing={2}>
        <Link href={process.env.REACT_APP_USERSCRIPT_DOWNLOADURL}>
-          Install Userscript 1
-        </Link>
-        <Link href={process.env.REACT_APP_USERSCRIPT_DOWNLOADURL2}>
-          Install Userscript 2
+          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 Userscript Safari 1
+          Install/Update Userscript for iOS Safari
        </Link>
-        <Link href={process.env.REACT_APP_USERSCRIPT_IOS_DOWNLOADURL2}>
-          Install Userscript Safari 2
-        </Link>
-        <Link href={process.env.REACT_APP_OPTIONSPAGE}>
-          Open Options Page 1
-        </Link>
-        <Link href={process.env.REACT_APP_OPTIONSPAGE2}>
+        {/* <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>
+        </Link> */}
      </Stack>

      {loading ? (
--- a/src/libs/fetch.js
+++ b/src/libs/fetch.js
@@ -6,14 +6,11 @@ import {
  MSG_FETCH_LIMIT,
  MSG_FETCH_CLEAR,
  CACHE_NAME,
-  OPT_TRANS_MICROSOFT,
-  OPT_TRANS_DEEPL,
-  OPT_TRANS_OPENAI,
  DEFAULT_FETCH_INTERVAL,
  DEFAULT_FETCH_LIMIT,
 } from "../config";
-import { msAuth } from "./auth";
 import { isBg } from "./browser";
+import { newCacheReq, newTransReq } from "./req";

 /**
 * 油猴脚本的请求封装
@@ -28,55 +25,34 @@ export const fetchGM = async (input, { method = "GET", headers, body } = {}) =>
      url: input,
      headers,
      data: body,
-      onload: (response) => {
-        if (response.status < 300) {
-          const headers = new Headers();
-          response.responseHeaders.split("\n").forEach((line) => {
-            const [name, value] = line.split(":").map((item) => item.trim());
-            if (name && value) {
-              headers.append(name, value);
-            }
-          });
-          resolve(new Response(response.response, { headers }));
-        } else {
-          reject(new Error(`[${response.status}] ${response.responseText}`));
-        }
+      // withCredentials: true,
+      onload: ({ response, responseHeaders, status, statusText, ...opts }) => {
+        const headers = {};
+        responseHeaders.split("\n").forEach((line) => {
+          const [name, value] = line.split(":").map((item) => item.trim());
+          if (name && value) {
+            headers[name] = value;
+          }
+        });
+        resolve({
+          body: response,
+          headers,
+          status,
+          statusText,
+        });
      },
      onerror: reject,
    });
  });

-/**
- * 构造缓存 request
- * @param {*} request
- * @returns
- */
-const newCacheReq = async (request) => {
-  if (request.method !== "GET") {
-    const body = await request.text();
-    const cacheUrl = new URL(request.url);
-    cacheUrl.pathname += body;
-    request = new Request(cacheUrl.toString(), { method: "GET" });
-  }
-
-  return request;
-};
-
 /**
 * 发起请求
 * @param {*} param0
 * @returns
 */
-export const fetchApi = async ({ input, init = {}, translator, token }) => {
-  if (token) {
-    if (translator === OPT_TRANS_DEEPL) {
-      init.headers["Authorization"] = `DeepL-Auth-Key ${token}`; // DeepL
-    } else if (translator === OPT_TRANS_OPENAI) {
-      init.headers["Authorization"] = `Bearer ${token}`; // OpenAI
-      init.headers["api-key"] = token; // Azure OpenAI
-    } else {
-      init.headers["Authorization"] = `Bearer ${token}`; // Microsoft & others
-    }
+export const fetchApi = async ({ input, init, transOpts, apiSetting }) => {
+  if (transOpts?.translator) {
+    [input, init] = await newTransReq(transOpts, apiSetting);
  }

  if (isGm) {
@@ -86,19 +62,26 @@ export const fetchApi = async ({ input, init = {}, translator, token }) => {
    } 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) {
-      if (window.KISS_GM) {
-        return window.KISS_GM.fetch(input, init);
-      } else {
-        return fetchGM(input, init);
-      }
+      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,
+      });
    }
  }
+
  return fetch(input, init);
 };

@@ -107,13 +90,7 @@ export const fetchApi = async ({ input, init = {}, translator, token }) => {
 */
 export const fetchPool = taskPool(
  fetchApi,
-  async ({ translator }) => {
-    if (translator === OPT_TRANS_MICROSOFT) {
-      const [token] = await msAuth();
-      return { token };
-    }
-    return {};
-  },
+  null,
  DEFAULT_FETCH_INTERVAL,
  DEFAULT_FETCH_LIMIT
 );
@@ -126,9 +103,9 @@ export const fetchPool = taskPool(
 */
 export const fetchData = async (
  input,
-  { useCache, usePool, translator, token, ...init } = {}
+  { useCache, usePool, transOpts, apiSetting, ...init } = {}
 ) => {
-  const cacheReq = await newCacheReq(new Request(input, init));
+  const cacheReq = await newCacheReq(input, init);
  let res;

  // 查询缓存
@@ -144,9 +121,9 @@ export const fetchData = async (
  if (!res) {
    // 发送请求
    if (usePool) {
-      res = await fetchPool.push({ input, init, translator, token });
+      res = await fetchPool.push({ input, init, transOpts, apiSetting });
    } else {
-      res = await fetchApi({ input, init, translator, token });
+      res = await fetchApi({ input, init, transOpts, apiSetting });
    }

    if (!res?.ok) {
@@ -178,7 +155,7 @@ export const fetchData = async (
 * @returns
 */
 export const fetchPolyfill = async (input, opts) => {
-  if (!input.trim()) {
+  if (!input?.trim()) {
    throw new Error("URL is empty");
  }

--- a/src/libs/iframe.js
+++ b/src/libs/iframe.js
@@ -6,6 +6,6 @@ export const sendIframeMsg = (action, args) => {
  });
 };

-export const sendPrentMsg = (action, args) => {
+export const sendParentMsg = (action, args) => {
  window.parent.postMessage({ action, args }, "*");
 };
--- a/src/libs/index.js
+++ b/src/libs/index.js
@@ -1,5 +1,6 @@
 import { CACHE_NAME } from "../config";
 import { browser } from "./browser";
+import { apiBaiduLangdetect } from "../apis";

 /**
 * 清除缓存数据
@@ -13,15 +14,29 @@ export const tryClearCaches = async () => {
 };

 /**
- * 本地语言识别
+ * 语言识别
 * @param {*} q
 * @returns
 */
-export const tryDetectLang = async (q) => {
-  try {
-    const res = await browser?.i18n?.detectLanguage(q);
-    return res?.languages?.[0]?.language;
-  } catch (err) {
-    console.log("[detect lang]", err.message);
+export const tryDetectLang = async (q, useRemote = false) => {
+  let lang = "";
+
+  if (useRemote) {
+    try {
+      lang = await apiBaiduLangdetect(q);
+    } catch (err) {
+      console.log("[detect lang remote]", err.message);
+    }
  }
+
+  if (!lang) {
+    try {
+      const res = await browser?.i18n?.detectLanguage(q);
+      lang = res?.languages?.[0]?.language;
+    } catch (err) {
+      console.log("[detect lang local]", err.message);
+    }
+  }
+
+  return lang;
 };
--- a/src/libs/pool.js
+++ b/src/libs/pool.js
@@ -6,7 +6,13 @@
 * @param {*} _limit
 * @returns
 */
-export const taskPool = (fn, preFn, _interval = 100, _limit = 100) => {
+export const taskPool = (
+  fn,
+  preFn,
+  _interval = 100,
+  _limit = 100,
+  _retryInteral = 1000
+) => {
  const pool = [];
  const maxRetry = 2; // 最大重试次数
  let maxCount = _limit; // 最大数量
@@ -14,23 +20,6 @@ export const taskPool = (fn, preFn, _interval = 100, _limit = 100) => {
  let interval = _interval; // 间隔时间
  let timer = null;

-  const handleTask = async (item, preArgs) => {
-    curCount++;
-    const { args, resolve, reject, retry } = item;
-    try {
-      const res = await fn({ ...args, ...preArgs });
-      resolve(res);
-    } catch (err) {
-      if (retry < maxRetry) {
-        pool.push({ args, resolve, reject, retry: retry + 1 });
-      } else {
-        reject(err);
-      }
-    } finally {
-      curCount--;
-    }
-  };
-
  const run = async () => {
    // console.log("timer", timer);
    timer && clearTimeout(timer);
@@ -39,12 +28,24 @@ export const taskPool = (fn, preFn, _interval = 100, _limit = 100) => {
    if (curCount < maxCount) {
      const item = pool.shift();
      if (item) {
+        curCount++;
+        const { args, resolve, reject, retry } = item;
        try {
-          const preArgs = await preFn(item.args);
-          handleTask(item, preArgs);
+          const preArgs = preFn ? await preFn(item.args) : {};
+          const res = await fn({ ...args, ...preArgs });
+          resolve(res);
        } catch (err) {
-          console.log("[preFn]", err);
-          pool.push(item);
+          console.log("[task]", retry, err);
+          if (retry < maxRetry) {
+            const retryTimer = setTimeout(() => {
+              clearTimeout(retryTimer);
+              pool.push({ args, resolve, reject, retry: retry + 1 });
+            }, _retryInteral);
+          } else {
+            reject(err);
+          }
+        } finally {
+          curCount--;
        }
      }
    }
--- a/src/libs/req.js
+++ b/src/libs/req.js
@@ -0,0 +1,251 @@
+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_CLOUDFLAREAI,
+  OPT_TRANS_CUSTOMIZE,
+  URL_MICROSOFT_TRAN,
+  URL_TENCENT_TRANSMART,
+  PROMPT_PLACE_FROM,
+  PROMPT_PLACE_TO,
+} from "../config";
+import { msAuth } from "./auth";
+import { genDeeplFree } from "../apis/deepl";
+import { genBaidu } from "../apis/baidu";
+
+/**
+ * 构造缓存 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 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_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_CLOUDFLAREAI:
+      return genCloudflareAI(args);
+    case OPT_TRANS_CUSTOMIZE:
+      return genCustom(args);
+    default:
+      throw new Error(`[trans] translator: ${translator} not support`);
+  }
+};
--- a/src/libs/shortcut.js
+++ b/src/libs/shortcut.js
@@ -22,14 +22,14 @@ export const shortcutListener = (fn, target = document, timeout = 3000) => {
    }, timeout);

    if (e.code) {
-      allkeys.add(e.key);
-      curkeys.add(e.key);
+      allkeys.add(e.code);
+      curkeys.add(e.code);
      fn([...curkeys], [...allkeys]);
    }
  };

  const handleKeyup = (e) => {
-    curkeys.delete(e.key);
+    curkeys.delete(e.code);
    if (curkeys.size === 0) {
      fn([...curkeys], [...allkeys]);
      allkeys.clear();
--- a/src/libs/storage.js
+++ b/src/libs/storage.js
@@ -1,9 +1,11 @@
 import {
  STOKEY_SETTING,
  STOKEY_RULES,
+  STOKEY_WORDS,
  STOKEY_FAB,
  STOKEY_SYNC,
  STOKEY_MSAUTH,
+  STOKEY_BDAUTH,
  STOKEY_RULESCACHE_PREFIX,
  STOKEY_WEBFIXCACHE_PREFIX,
  DEFAULT_SETTING,
@@ -96,6 +98,13 @@ export const getRulesWithDefault = async () =>
  (await getRules()) || DEFAULT_RULES;
 export const setRules = (val) => setObj(STOKEY_RULES, val);

+/**
+ * 词汇列表
+ */
+export const getWords = () => getObj(STOKEY_WORDS);
+export const getWordsWithDefault = async () => (await getWords()) || {};
+export const setWords = (val) => setObj(STOKEY_WORDS, val);
+
 /**
 * 订阅规则
 */
@@ -119,6 +128,7 @@ export const setWebfix = (url, val) =>
 export const getFab = () => getObj(STOKEY_FAB);
 export const getFabWithDefault = async () => (await getFab()) || {};
 export const setFab = (obj) => setObj(STOKEY_FAB, obj);
+export const updateFab = (obj) => putObj(STOKEY_FAB, obj);

 /**
 * 数据同步
@@ -133,6 +143,12 @@ export const updateSync = (obj) => putObj(STOKEY_SYNC, obj);
 export const getMsauth = () => getObj(STOKEY_MSAUTH);
 export const setMsauth = (val) => setObj(STOKEY_MSAUTH, val);

+/**
+ * baidu auth
+ */
+export const getBdauth = () => getObj(STOKEY_BDAUTH);
+export const setBdauth = (val) => setObj(STOKEY_BDAUTH, val);
+
 /**
 * 存入默认数据
 */
--- a/src/libs/sync.js
+++ b/src/libs/sync.js
@@ -2,6 +2,7 @@ import {
  APP_LCNAME,
  KV_SETTING_KEY,
  KV_RULES_KEY,
+  KV_WORDS_KEY,
  KV_RULES_SHARE_KEY,
  KV_SALT_SHARE,
  OPT_SYNCTYPE_WEBDAV,
@@ -11,8 +12,10 @@ import {
  updateSync,
  getSettingWithDefault,
  getRulesWithDefault,
+  getWordsWithDefault,
  setSetting,
  setRules,
+  setWords,
 } from "./storage";
 import { apiSyncData } from "../apis";
 import { sha256, removeEndchar } from "./utils";
@@ -135,6 +138,25 @@ export const trySyncRules = async () => {
  }
 };

+/**
+ * 同步词汇
+ * @returns
+ */
+const syncWords = async () => {
+  const res = await syncData(KV_WORDS_KEY, getWordsWithDefault);
+  if (res?.isNew) {
+    await setWords(res.value);
+  }
+};
+
+export const trySyncWords = async () => {
+  try {
+    await syncWords();
+  } catch (err) {
+    console.log("[sync fav words]", err);
+  }
+};
+
 /**
 * 同步分享规则
 * @param {*} param0
@@ -163,9 +185,11 @@ export const syncShareRules = async ({ rules, syncUrl, syncKey }) => {
 export const syncSettingAndRules = async () => {
  await syncSetting();
  await syncRules();
+  await syncWords();
 };

 export const trySyncSettingAndRules = async () => {
  await trySyncSetting();
  await trySyncRules();
+  await trySyncWords();
 };
--- a/src/libs/translator.js
+++ b/src/libs/translator.js
@@ -91,8 +91,8 @@ function addLoading(node, loadingId) {
  node.offsetParent?.appendChild(div);
 }

-function removeLoading(loadingId) {
-  const div = document.getElementById(loadingId);
+function removeLoading(node, loadingId) {
+  const div = node.offsetParent.querySelector(`#${loadingId}`);
  if (div) {
    div.remove();
  }
@@ -124,6 +124,7 @@ export class Translator {
    "iframe",
  ];
  _eventName = genEventName();
+  _mouseoverNode = null;

  // 显示
  _interseObserver = new IntersectionObserver(
@@ -259,6 +260,22 @@ export class Translator {
    );
  };

+  _queryShadowNodes = (selector, rootNode) => {
+    this._rootNodes.add(rootNode);
+    this._queryFilter(selector, rootNode).forEach((item) => {
+      if (!this._tranNodes.has(item)) {
+        this._tranNodes.set(item, "");
+      }
+    });
+
+    Array.from(rootNode.querySelectorAll("*"))
+      .map((item) => item.shadowRoot)
+      .filter(Boolean)
+      .forEach((item) => {
+        this._queryShadowNodes(selector, item);
+      });
+  };
+
  _queryNodes = (rootNode = document) => {
    // const childRoots = Array.from(rootNode.querySelectorAll("*"))
    //   .map((item) => item.shadowRoot)
@@ -281,14 +298,15 @@ export class Translator {
            const outNodes = this._querySelectorAll(outSelector, rootNode);
            outNodes.forEach((outNode) => {
              if (outNode.shadowRoot) {
-                this._rootNodes.add(outNode.shadowRoot);
-                this._queryFilter(inSelector, outNode.shadowRoot).forEach(
-                  (item) => {
-                    if (!this._tranNodes.has(item)) {
-                      this._tranNodes.set(item, "");
-                    }
-                  }
-                );
+                // this._rootNodes.add(outNode.shadowRoot);
+                // this._queryFilter(inSelector, outNode.shadowRoot).forEach(
+                //   (item) => {
+                //     if (!this._tranNodes.has(item)) {
+                //       this._tranNodes.set(item, "");
+                //     }
+                //   }
+                // );
+                this._queryShadowNodes(inSelector, outNode.shadowRoot);
              }
            });
          }
@@ -319,18 +337,22 @@ export class Translator {
      });
    });

-    this._tranNodes.forEach((_, node) => {
-      if (
-        !this._setting.mouseKey ||
-        this._setting.mouseKey === OPT_MOUSEKEY_DISABLE
-      ) {
-        // 监听节点显示
+    if (
+      !this._setting.mouseKey ||
+      this._setting.mouseKey === OPT_MOUSEKEY_DISABLE
+    ) {
+      // 监听节点显示
+      this._tranNodes.forEach((_, node) => {
        this._interseObserver.observe(node);
-      } else {
-        // 监听鼠标悬停
+      });
+    } else {
+      // 监听鼠标悬停
+      window.addEventListener("keydown", this._handleKeydown);
+      this._tranNodes.forEach((_, node) => {
        node.addEventListener("mouseover", this._handleMouseover);
-      }
-    });
+        node.addEventListener("mouseout", this._handleMouseout);
+      });
+    }
  };

  _registerInput = () => {
@@ -343,9 +365,9 @@ export class Translator {
      triggerTime,
      transSign,
    } = this._inputRule;
-    const apiSetting = (this._setting.transApis || DEFAULT_TRANS_APIS)[
-      translator
-    ];
+    const apiSetting =
+      this._setting.transApis?.[translator] || DEFAULT_TRANS_APIS[translator];
+    const { detectRemote } = this._setting;

    let triggerShortcut = initTriggerShortcut;
    let triggerCount = initTriggerCount;
@@ -357,8 +379,17 @@ export class Translator {
    stepShortcutRegister(
      triggerShortcut,
      async () => {
-        const node = document.activeElement;
-        if (!node || !(isInputNode(node) || isEditAbleNode(node))) {
+        let node = document.activeElement;
+
+        if (!node) {
+          return;
+        }
+
+        while (node.shadowRoot) {
+          node = node.shadowRoot.activeElement;
+        }
+
+        if (!isInputNode(node) && !isEditAbleNode(node)) {
          return;
        }

@@ -395,7 +426,7 @@ export class Translator {
        try {
          addLoading(node, loadingId);

-          const deLang = await tryDetectLang(text);
+          const deLang = await tryDetectLang(text, detectRemote);
          if (deLang && toLang.includes(deLang)) {
            return;
          }
@@ -435,7 +466,7 @@ export class Translator {
        } catch (err) {
          console.log("[translate input]", err.message);
        } finally {
-          removeLoading(loadingId);
+          removeLoading(node, loadingId);
        }
      },
      triggerCount,
@@ -444,10 +475,43 @@ export class Translator {
  };

  _handleMouseover = (e) => {
+    // console.log("mouseover", e);
+    if (!this._tranNodes.has(e.target)) {
+      return;
+    }
+
    const key = this._setting.mouseKey.slice(3);
    if (this._setting.mouseKey === OPT_MOUSEKEY_MOUSEOVER || e[key]) {
      e.target.removeEventListener("mouseover", this._handleMouseover);
+      e.target.removeEventListener("mouseout", this._handleMouseout);
      this._render(e.target);
+    } else {
+      this._mouseoverNode = e.target;
+    }
+  };
+
+  _handleMouseout = (e) => {
+    // console.log("mouseout", e);
+    if (!this._tranNodes.has(e.target)) {
+      return;
+    }
+
+    this._mouseoverNode = null;
+  };
+
+  _handleKeydown = (e) => {
+    // console.log("keydown", e);
+    const key = this._setting.mouseKey.slice(3);
+    if (e[key] && this._mouseoverNode) {
+      this._mouseoverNode.removeEventListener(
+        "mouseover",
+        this._handleMouseover
+      );
+      this._mouseoverNode.removeEventListener("mouseout", this._handleMouseout);
+
+      const node = this._mouseoverNode;
+      this._render(node);
+      this._mouseoverNode = null;
    }
  };

@@ -458,21 +522,26 @@ export class Translator {
    // 解除节点显示监听
    // this._interseObserver.disconnect();

-    this._tranNodes.forEach((_, node) => {
-      if (
-        !this._setting.mouseKey ||
-        this._setting.mouseKey === OPT_MOUSEKEY_DISABLE
-      ) {
-        // 解除节点显示监听
+    if (
+      !this._setting.mouseKey ||
+      this._setting.mouseKey === OPT_MOUSEKEY_DISABLE
+    ) {
+      // 解除节点显示监听
+      this._tranNodes.forEach((_, node) => {
        this._interseObserver.unobserve(node);
-      } else {
-        // 移除鼠标悬停监听
+        // 移除已插入元素
+        node.querySelector(APP_LCNAME)?.remove();
+      });
+    } else {
+      // 移除鼠标悬停监听
+      window.removeEventListener("keydown", this._handleKeydown);
+      this._tranNodes.forEach((_, node) => {
        node.removeEventListener("mouseover", this._handleMouseover);
-      }
-
-      // 移除已插入元素
-      node.querySelector(APP_LCNAME)?.remove();
-    });
+        node.removeEventListener("mouseout", this._handleMouseout);
+        // 移除已插入元素
+        node.querySelector(APP_LCNAME)?.remove();
+      });
+    }

    // 清空节点集合
    this._rootNodes.clear();
--- a/src/libs/utils.js
+++ b/src/libs/utils.js
@@ -223,3 +223,13 @@ export const matchInputStr = (str, sign) => {
  }
  return str.match(reg);
 };
+
+/**
+ * 判断是否英文单词
+ * @param {*} str
+ * @returns
+ */
+export const isValidWord = (str) => {
+  const regex = /^[a-zA-Z-]+$/;
+  return regex.test(str);
+};
--- a/src/libs/webfix.js
+++ b/src/libs/webfix.js
@@ -6,6 +6,7 @@ import { apiFetch } from "../apis";
 * 修复程序类型
 */
 const FIXER_BR = "br";
+const FIXER_BN = "bn";
 const FIXER_FONTSIZE = "fontSize";

 /**
@@ -34,6 +35,12 @@ const DEFAULT_SITES = [
    rootSelector: "",
    fixer: FIXER_FONTSIZE,
  },
+  {
+    pattern: "chat.openai.com",
+    selector: "div[data-testid^=conversation-turn] .items-start > div",
+    rootSelector: "",
+    fixer: FIXER_BN,
+  },
 ];

 /**
@@ -94,6 +101,26 @@ function brFixer(node) {
  node.innerHTML = html;
 }

+/**
+ * 目标是将 `\n` 替换成 `p`
+ * @param {*} node
+ * @returns
+ */
+function bnFixer(node) {
+  if (node.hasAttribute(fixedSign)) {
+    return;
+  }
+  node.setAttribute(fixedSign, "true");
+
+  const childs = node.childNodes;
+  if (childs.length === 1 && childs[0].nodeName === "#text") {
+    node.innerHTML = node.innerHTML
+      .split("\n")
+      .map((item) => `<p>${item || "&nbsp;"}</p>`)
+      .join("");
+  }
+}
+
 /**
 * 修复字体大小问题，如 baidu.com
 * @param {*} node
@@ -107,6 +134,7 @@ function fontSizeFixer(node) {
 */
 const fixerMap = {
  [FIXER_BR]: brFixer,
+  [FIXER_BN]: bnFixer,
  [FIXER_FONTSIZE]: fontSizeFixer,
 };

@@ -134,6 +162,7 @@ function run(selector, fixer, rootSelector) {
    rootNode.querySelectorAll(selector).forEach(fixer);
    mutaObserver.observe(rootNode, {
      childList: true,
+      subtree: true,
    });
  });
 }
@@ -170,12 +199,13 @@ export const loadOrFetchWebfix = async (url) => {
 /**
 * 匹配站点
 */
-export async function webfix(href, { injectWebfix }) {
+export async function runWebfix({ injectWebfix }) {
  try {
    if (!injectWebfix) {
      return;
    }

+    const href = document.location.href;
    const sites = await loadOrFetchWebfix(process.env.REACT_APP_WEBFIXURL);
    for (var i = 0; i < sites.length; i++) {
      var site = sites[i];
--- a/src/userscript.js
+++ b/src/userscript.js
@@ -1,135 +1,77 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import Action from "./views/Action";
-import createCache from "@emotion/cache";
-import { CacheProvider } from "@emotion/react";
-import {
-  getSettingWithDefault,
-  getRulesWithDefault,
-  getFabWithDefault,
-} from "./libs/storage";
-import { Translator } from "./libs/translator";
+import { getSettingWithDefault } from "./libs/storage";
 import { trySyncAllSubRules } from "./libs/subRules";
-import {
-  MSG_TRANS_TOGGLE,
-  MSG_TRANS_TOGGLE_STYLE,
-  MSG_TRANS_GETRULE,
-  MSG_TRANS_PUTRULE,
-} from "./config";
-import { isIframe, sendIframeMsg, sendPrentMsg } from "./libs/iframe";
+import { isIframe } from "./libs/iframe";
 import { handlePing, injectScript } from "./libs/gm";
-import { matchRule } from "./libs/rules";
 import { genEventName } from "./libs/utils";
-import { webfix } from "./libs/webfix";
+import { runWebfix } from "./libs/webfix";
+import {
+  runIframe,
+  runTranslator,
+  showFab,
+  showTransbox,
+  windowListener,
+  showErr,
+} from "./common";
+
+function runSettingPage() {
+  if (GM?.info?.script?.grant?.includes("unsafeWindow")) {
+    unsafeWindow.GM = GM;
+    unsafeWindow.APP_INFO = {
+      name: process.env.REACT_APP_NAME,
+      version: process.env.REACT_APP_VERSION,
+    };
+  } else {
+    const ping = genEventName();
+    window.addEventListener(ping, handlePing);
+    // window.eval(`(${injectScript})("${ping}")`); // eslint-disable-line
+    const script = document.createElement("script");
+    script.textContent = `(${injectScript})("${ping}")`;
+    document.head.append(script);
+  }
+}

 /**
 * 入口函数
 */
-const init = async () => {
-  // 设置页面
-  if (
-    document.location.href.includes(process.env.REACT_APP_OPTIONSPAGE_DEV) ||
-    document.location.href.includes(process.env.REACT_APP_OPTIONSPAGE) ||
-    document.location.href.includes(process.env.REACT_APP_OPTIONSPAGE2)
-  ) {
-    if (GM?.info?.script?.grant?.includes("unsafeWindow")) {
-      unsafeWindow.GM = GM;
-      unsafeWindow.APP_INFO = {
-        name: process.env.REACT_APP_NAME,
-        version: process.env.REACT_APP_VERSION,
-      };
-    } else {
-      const ping = genEventName();
-      window.addEventListener(ping, handlePing);
-      // window.eval(`(${injectScript})("${ping}")`); // eslint-disable-line
-      const script = document.createElement("script");
-      script.textContent = `(${injectScript})("${ping}")`;
-      document.head.append(script);
-    }
-
-    return;
-  }
-
-  // 翻译页面
-  const setting = await getSettingWithDefault();
-
-  if (isIframe) {
-    let translator;
-    window.addEventListener("message", (e) => {
-      const { action, args } = e.data || {};
-      switch (action) {
-        case MSG_TRANS_TOGGLE:
-          translator?.toggle();
-          break;
-        case MSG_TRANS_TOGGLE_STYLE:
-          translator?.toggleStyle();
-          break;
-        case MSG_TRANS_PUTRULE:
-          if (!translator) {
-            translator = new Translator(args, setting);
-          } else {
-            translator.updateRule(args || {});
-          }
-          break;
-        default:
-      }
-    });
-    sendPrentMsg(MSG_TRANS_GETRULE);
-    return;
-  }
-
-  const href = isIframe ? document.referrer : document.location.href;
-  const rules = await getRulesWithDefault();
-  const rule = await matchRule(rules, href, setting);
-  const translator = new Translator(rule, setting);
-  webfix(href, setting);
-
-  // 监听消息
-  window.addEventListener("message", (e) => {
-    const { action } = e.data || {};
-    switch (action) {
-      case MSG_TRANS_GETRULE:
-        sendIframeMsg(MSG_TRANS_PUTRULE, rule);
-        break;
-      default:
-    }
-  });
-
-  // 浮球按钮
-  const fab = await getFabWithDefault();
-  const $action = document.createElement("div");
-  $action.setAttribute("id", "kiss-translator");
-  document.body.parentElement.appendChild($action);
-  const shadowContainer = $action.attachShadow({ mode: "closed" });
-  const emotionRoot = document.createElement("style");
-  const shadowRootElement = document.createElement("div");
-  shadowContainer.appendChild(emotionRoot);
-  shadowContainer.appendChild(shadowRootElement);
-  const cache = createCache({
-    key: "css",
-    prepend: true,
-    container: emotionRoot,
-  });
-  ReactDOM.createRoot(shadowRootElement).render(
-    <React.StrictMode>
-      <CacheProvider value={cache}>
-        <Action translator={translator} fab={fab} />
-      </CacheProvider>
-    </React.StrictMode>
-  );
-
-  // 同步订阅规则
-  trySyncAllSubRules(setting);
-};
-
 (async () => {
  try {
-    await init();
+    // 设置页面
+    if (
+      document.location.href.includes(process.env.REACT_APP_OPTIONSPAGE_DEV) ||
+      document.location.href.includes(process.env.REACT_APP_OPTIONSPAGE) ||
+      document.location.href.includes(process.env.REACT_APP_OPTIONSPAGE2)
+    ) {
+      runSettingPage();
+      return;
+    }
+
+    // 读取设置信息
+    const setting = await getSettingWithDefault();
+
+    // 适配iframe
+    if (isIframe) {
+      runIframe(setting);
+      return;
+    }
+
+    // 不规范网页修复
+    await runWebfix(setting);
+
+    // 翻译网页
+    const { translator, rule } = await runTranslator(setting);
+
+    // 监听消息
+    windowListener(rule);
+
+    // 划词翻译
+    showTransbox(setting);
+
+    // 浮球按钮
+    await showFab(translator);
+
+    // 同步订阅规则
+    await trySyncAllSubRules(setting);
  } catch (err) {
-    console.error("[KISS-Translator]", err);
-    const $err = document.createElement("div");
-    $err.innerText = `KISS-Translator: ${err.message}`;
-    $err.style.cssText = "background:red; color:#fff;";
-    document.body.prepend($err);
+    showErr(err);
  }
 })();
--- a/src/views/Action/Draggable.js
+++ b/src/views/Action/Draggable.js
@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from "react";
 import { limitNumber } from "../../libs/utils";
 import { isMobile } from "../../libs/mobile";
-import { setFab } from "../../libs/storage";
+import { updateFab } from "../../libs/storage";
 import { debounce } from "../../libs/utils";
 import Paper from "@mui/material/Paper";

@@ -61,7 +61,7 @@ export default function Draggable({
  const [hover, setHover] = useState(false);
  const [origin, setOrigin] = useState(null);
  const [position, setPosition] = useState({ x: left, y: top });
-  const setFabPosition = useMemo(() => debounce(setFab, 500), []);
+  const setFabPosition = useMemo(() => debounce(updateFab, 500), []);

  const handlePointerDown = (e) => {
    !isMobile && e.target.setPointerCapture(e.pointerId);
--- a/src/views/Action/index.js
+++ b/src/views/Action/index.js
@@ -55,6 +55,10 @@ export default function Action({ translator, fab }) {
  }, []);

  useEffect(() => {
+    if (!isGm) {
+      return;
+    }
+
    // 注册快捷键
    const shortcuts = translator.setting.shortcuts || DEFAULT_SHORTCUTS;
    const clearShortcuts = [
@@ -198,7 +202,7 @@ export default function Action({ translator, fab }) {
          key="fab"
          snapEdge
          {...fabProps}
-          show={translator.setting.hideFab ? false : !showPopup}
+          show={fab.isHide ? false : !showPopup}
          onStart={handleStart}
          onMove={handleMove}
          handler={
--- a/src/views/Content/index.js
+++ b/src/views/Content/index.js
@@ -120,7 +120,7 @@ export default function Content({ q, translator }) {
  if (loading) {
    return (
      <>
-        {q.length > newlineLength ? <br /> : " "}
+        {q.length >= newlineLength ? <br /> : " "}
        <LoadingIcon />
      </>
    );
@@ -129,7 +129,7 @@ export default function Content({ q, translator }) {
  if (text && !sameLang) {
    return (
      <>
-        {q.length > newlineLength ? <br /> : " "}
+        {q.length >= newlineLength ? <br /> : " "}
        <StyledSpan
          textStyle={textStyle}
          textDiyStyle={textDiyStyle}
--- a/src/views/Options/Apis.js
+++ b/src/views/Options/Apis.js
@@ -5,6 +5,9 @@ import CircularProgress from "@mui/material/CircularProgress";
 import {
  OPT_TRANS_ALL,
  OPT_TRANS_MICROSOFT,
+  OPT_TRANS_DEEPLFREE,
+  OPT_TRANS_BAIDU,
+  OPT_TRANS_TENCENT,
  OPT_TRANS_OPENAI,
  OPT_TRANS_CUSTOMIZE,
  URL_KISS_PROXY,
@@ -35,7 +38,8 @@ function TestButton({ translator, api }) {
        text: "hello world",
        fromLang: "en",
        toLang: "zh-CN",
-        apiSetting: { ...api, useCache: false },
+        apiSetting: api,
+        useCache: false,
      });
      if (!text) {
        throw new Error("empty reault");
@@ -71,9 +75,16 @@ function ApiFields({ translator }) {
    });
  };

+  const buildinTranslators = [
+    OPT_TRANS_MICROSOFT,
+    OPT_TRANS_DEEPLFREE,
+    OPT_TRANS_BAIDU,
+    OPT_TRANS_TENCENT,
+  ];
+
  return (
    <Stack spacing={3}>
-      {translator !== OPT_TRANS_MICROSOFT && (
+      {!buildinTranslators.includes(translator) && (
        <>
          <TextField
            size="small"
@@ -113,7 +124,7 @@ function ApiFields({ translator }) {

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

        <TextField
--- a/src/views/Options/Navigator.js
+++ b/src/views/Options/Navigator.js
@@ -13,6 +13,8 @@ import SyncIcon from "@mui/icons-material/Sync";
 import ApiIcon from "@mui/icons-material/Api";
 import SendTimeExtensionIcon from "@mui/icons-material/SendTimeExtension";
 import InputIcon from "@mui/icons-material/Input";
+import SelectAllIcon from '@mui/icons-material/SelectAll';
+import EventNoteIcon from '@mui/icons-material/EventNote';

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

 function RuleFields({ rule, rules, setShow, setKeyword }) {
  const initFormValues = rule || {
@@ -375,8 +375,9 @@ function RuleAccordion({ rule, rules }) {
    <Accordion expanded={expanded} onChange={handleChange}>
      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
        <Typography
-          style={{
+          sx={{
            opacity: rules ? 1 : 0.5,
+            overflowWrap: "anywhere",
          }}
        >
          {rule.pattern === GLOBAL_KEY
@@ -391,56 +392,6 @@ function RuleAccordion({ rule, rules }) {
  );
 }

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

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

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

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

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

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

      {syncAt && (
        <span style={{ marginLeft: "0.5em", opacity: 0.5 }}>
--- a/src/views/Options/Setting.js
+++ b/src/views/Options/Setting.js
@@ -26,6 +26,7 @@ import {
 } from "../../config";
 import { useShortcut } from "../../hooks/Shortcut";
 import ShortcutInput from "./ShortcutInput";
+import { useFab } from "../../hooks/Fab";

 function ShortcutItem({ action, label }) {
  const { shortcut, setShortcut } = useShortcut(action);
@@ -38,6 +39,7 @@ export default function Settings() {
  const i18n = useI18n();
  const { setting, updateSetting } = useSetting();
  const alert = useAlert();
+  const { fab, updateFab } = useFab();

  const handleChange = (e) => {
    e.preventDefault();
@@ -83,8 +85,9 @@ export default function Settings() {
    clearCache,
    newlineLength = TRANS_NEWLINE_LENGTH,
    mouseKey = OPT_MOUSEKEY_DISABLE,
-    hideFab = false,
+    detectRemote = false,
  } = setting;
+  const { isHide = false } = fab || {};

  return (
    <Box>
@@ -166,6 +169,35 @@ export default function Settings() {
          </Select>
        </FormControl>

+        <FormControl size="small">
+          <InputLabel>{i18n("hide_fab_button")}</InputLabel>
+          <Select
+            name="isHide"
+            value={isHide}
+            label={i18n("hide_fab_button")}
+            onChange={(e) => {
+              updateFab({ isHide: e.target.value });
+            }}
+          >
+            <MenuItem value={false}>{i18n("show")}</MenuItem>
+            <MenuItem value={true}>{i18n("hide")}</MenuItem>
+          </Select>
+        </FormControl>
+
+        <FormControl size="small">
+          <InputLabel>{i18n("detect_lang_remote")}</InputLabel>
+          <Select
+            name="detectRemote"
+            value={detectRemote}
+            label={i18n("detect_lang_remote")}
+            onChange={handleChange}
+          >
+            <MenuItem value={false}>{i18n("disable")}</MenuItem>
+            <MenuItem value={true}>{i18n("enable")}</MenuItem>
+          </Select>
+          <FormHelperText>{i18n("detect_lang_remote_help")}</FormHelperText>
+        </FormControl>
+
        {isExt ? (
          <FormControl size="small">
            <InputLabel>{i18n("if_clear_cache")}</InputLabel>
@@ -186,19 +218,6 @@ export default function Settings() {
          </FormControl>
        ) : (
          <>
-            <FormControl size="small">
-              <InputLabel>{i18n("hide_fab_button")}</InputLabel>
-              <Select
-                name="hideFab"
-                value={hideFab}
-                label={i18n("hide_fab_button")}
-                onChange={handleChange}
-              >
-                <MenuItem value={false}>{i18n("show")}</MenuItem>
-                <MenuItem value={true}>{i18n("hide")}</MenuItem>
-              </Select>
-            </FormControl>
-
            <Box>
              <Grid container spacing={2} columns={12}>
                <Grid item xs={12} sm={12} md={3} lg={3}>
--- a/src/views/Options/Tranbox.js
+++ b/src/views/Options/Tranbox.js
@@ -0,0 +1,140 @@
+import Box from "@mui/material/Box";
+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 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";
+
+export default function Tranbox() {
+  const i18n = useI18n();
+  const { tranboxSetting, updateTranbox } = useTranbox();
+
+  const handleChange = (e) => {
+    e.preventDefault();
+    let { name, value } = e.target;
+    switch (name) {
+      case "btnOffsetX":
+        value = limitNumber(value, 0, 100);
+        break;
+      case "btnOffsetY":
+        value = limitNumber(value, 0, 100);
+        break;
+      default:
+    }
+    updateTranbox({
+      [name]: value,
+    });
+  };
+
+  const handleShortcutInput = useCallback(
+    (val) => {
+      updateTranbox({ tranboxShortcut: val });
+    },
+    [updateTranbox]
+  );
+
+  const {
+    transOpen,
+    translator,
+    fromLang,
+    toLang,
+    tranboxShortcut,
+    btnOffsetX,
+    btnOffsetY,
+  } = 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"
+          name="translator"
+          value={translator}
+          label={i18n("translate_service")}
+          onChange={handleChange}
+        >
+          {OPT_TRANS_ALL.map((item) => (
+            <MenuItem key={item} value={item}>
+              {item}
+            </MenuItem>
+          ))}
+        </TextField>
+
+        <TextField
+          select
+          size="small"
+          name="fromLang"
+          value={fromLang}
+          label={i18n("from_lang")}
+          onChange={handleChange}
+        >
+          {OPT_LANGS_FROM.map(([lang, name]) => (
+            <MenuItem key={lang} value={lang}>
+              {name}
+            </MenuItem>
+          ))}
+        </TextField>
+
+        <TextField
+          select
+          size="small"
+          name="toLang"
+          value={toLang}
+          label={i18n("to_lang")}
+          onChange={handleChange}
+        >
+          {OPT_LANGS_TO.map(([lang, name]) => (
+            <MenuItem key={lang} value={lang}>
+              {name}
+            </MenuItem>
+          ))}
+        </TextField>
+
+        <TextField
+          size="small"
+          label={i18n("tranbtn_offset_x")}
+          type="number"
+          name="btnOffsetX"
+          defaultValue={btnOffsetX}
+          onChange={handleChange}
+        />
+
+        <TextField
+          size="small"
+          label={i18n("tranbtn_offset_y")}
+          type="number"
+          name="btnOffsetY"
+          defaultValue={btnOffsetY}
+          onChange={handleChange}
+        />
+
+        <ShortcutInput
+          value={tranboxShortcut}
+          onChange={handleShortcutInput}
+          label={i18n("trigger_tranbox_shortcut")}
+        />
+      </Stack>
+    </Box>
+  );
+}
--- a/src/views/Options/UploadButton.js
+++ b/src/views/Options/UploadButton.js
@@ -0,0 +1,55 @@
+import { useRef } from "react";
+import FileUploadIcon from "@mui/icons-material/FileUpload";
+import { useI18n } from "../../hooks/I18n";
+import Button from "@mui/material/Button";
+
+export default function UploadButton({
+  handleImport,
+  text,
+  fileType = "json",
+  fileExts = [".json"],
+}) {
+  const i18n = useI18n();
+  const inputRef = useRef(null);
+  const handleClick = () => {
+    if (inputRef.current) {
+      inputRef.current.click();
+      inputRef.current.value = null;
+    }
+  };
+  const onChange = (e) => {
+    const file = e.target.files[0];
+    if (!file) {
+      return;
+    }
+
+    if (!file.type.includes(fileType)) {
+      alert(i18n("error_wrong_file_type"));
+      return;
+    }
+
+    const reader = new FileReader();
+    reader.onload = async (e) => {
+      handleImport(e.target.result);
+    };
+    reader.readAsText(file);
+  };
+
+  return (
+    <Button
+      size="small"
+      variant="outlined"
+      onClick={handleClick}
+      startIcon={<FileUploadIcon />}
+    >
+      {text}
+      <input
+        type="file"
+        accept={fileExts.join(", ")}
+        ref={inputRef}
+        onChange={onChange}
+        hidden
+      />
+    </Button>
+  );
+}
--- a/src/views/Options/index.js
+++ b/src/views/Options/index.js
@@ -20,6 +20,8 @@ import Alert from "@mui/material/Alert";
 import Apis from "./Apis";
 import Webfix from "./Webfix";
 import InputSetting from "./InputSetting";
+import Tranbox from "./Tranbox";
+import FavWords from "./FavWords";

 export default function Options() {
  const [error, setError] = useState("");
@@ -37,7 +39,7 @@ export default function Options() {
            // 检查版本是否一致
            if (version !== process.env.REACT_APP_VERSION) {
              setError(
-                `The version is inconsistent, please check whether the script(v${version}) is the latest version(v${process.env.REACT_APP_VERSION}). (版本不一致，请检查脚本(v${version})是否为最新版(v${process.env.REACT_APP_VERSION}))`
+                `The version of the local script(v${version}) is not the latest version(v${process.env.REACT_APP_VERSION}). 本地脚本之版本(v${version})非最新版(v${process.env.REACT_APP_VERSION})。`
              );
              break;
            }
@@ -54,7 +56,9 @@ export default function Options() {
          }

          if (++i > 8) {
-            setError("Time out. (连接超时)");
+            setError(
+              "Time out. Please confirm whether to install or enable KISS Translator GreaseMonkey script? 连接超时，请检查是否安装或启用简约翻译油猴脚本。"
+            );
            break;
          }

@@ -71,39 +75,25 @@ export default function Options() {
  if (error) {
    return (
      <center>
-        <Alert severity="error">{error}</Alert>
        <Divider>
          <Link
            href={process.env.REACT_APP_HOMEPAGE}
          >{`KISS Translator v${process.env.REACT_APP_VERSION}`}</Link>
        </Divider>
-        <h2>
-          Please confirm whether to install or enable KISS Translator
-          GreaseMonkey script? (请检查是否安装或启用简约翻译油猴脚本)
-        </h2>
+        <Alert severity="error">{error}</Alert>
        <Stack spacing={2}>
          <Link href={process.env.REACT_APP_USERSCRIPT_DOWNLOADURL}>
-            Install Userscript for Tampermonkey/Violentmonkey 1 (油猴脚本
-            安装地址 1)
-          </Link>
-          <Link href={process.env.REACT_APP_USERSCRIPT_DOWNLOADURL2}>
-            Install Userscript for Tampermonkey/Violentmonkey 2 (油猴脚本
-            安装地址 2)
+            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 Userscript for iOS Safari 1 (油猴脚本 iOS Safari专用
-            安装地址 1)
-          </Link>
-          <Link href={process.env.REACT_APP_USERSCRIPT_IOS_DOWNLOADURL2}>
-            Install Userscript for iOS Safari 2 (油猴脚本 iOS Safari专用
-            安装地址 2)
-          </Link>
-          <Link href={process.env.REACT_APP_OPTIONSPAGE}>
-            Open Options Page 1 (打开设置页面 1)
-          </Link>
-          <Link href={process.env.REACT_APP_OPTIONSPAGE2}>
-            Open Options Page 2 (打开设置页面 2)
+            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>
    );
@@ -132,9 +122,11 @@ export default function Options() {
                <Route index element={<Setting />} />
                <Route path="rules" element={<Rules />} />
                <Route path="input" element={<InputSetting />} />
+                <Route path="tranbox" element={<Tranbox />} />
                <Route path="apis" element={<Apis />} />
                <Route path="sync" element={<SyncSetting />} />
                <Route path="webfix" element={<Webfix />} />
+                <Route path="words" element={<FavWords />} />
                <Route path="about" element={<About />} />
              </Route>
            </Routes>
--- a/src/views/Popup/index.js
+++ b/src/views/Popup/index.js
@@ -5,7 +5,7 @@ import MenuItem from "@mui/material/MenuItem";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import Switch from "@mui/material/Switch";
 import Button from "@mui/material/Button";
-import { sendTabMsg, getTabInfo } from "../../libs/msg";
+import { sendBgMsg, sendTabMsg, getTabInfo } from "../../libs/msg";
 import { browser } from "../../libs/browser";
 import { isExt } from "../../libs/client";
 import { useI18n } from "../../hooks/I18n";
@@ -16,6 +16,8 @@ import {
  MSG_TRANS_TOGGLE,
  MSG_TRANS_GETRULE,
  MSG_TRANS_PUTRULE,
+  MSG_OPEN_OPTIONS,
+  MSG_SAVE_RULE,
  OPT_TRANS_ALL,
  OPT_LANGS_FROM,
  OPT_LANGS_TO,
@@ -31,8 +33,10 @@ export default function Popup({ setShowPopup, translator: tran }) {
  const [rule, setRule] = useState(tran?.rule);

  const handleOpenSetting = () => {
-    if (isExt) {
+    if (!tran) {
      browser?.runtime.openOptionsPage();
+    } else if (isExt) {
+      sendBgMsg(MSG_OPEN_OPTIONS);
    } else {
      window.open(process.env.REACT_APP_OPTIONSPAGE, "_blank");
    }
@@ -43,7 +47,7 @@ export default function Popup({ setShowPopup, translator: tran }) {
    try {
      setRule({ ...rule, transOpen: e.target.checked ? "true" : "false" });

-      if (isExt) {
+      if (!tran) {
        await sendTabMsg(MSG_TRANS_TOGGLE);
      } else {
        tran.toggle();
@@ -59,7 +63,7 @@ export default function Popup({ setShowPopup, translator: tran }) {
      const { name, value } = e.target;
      setRule((pre) => ({ ...pre, [name]: value }));

-      if (isExt) {
+      if (!tran) {
        await sendTabMsg(MSG_TRANS_PUTRULE, { [name]: value });
      } else {
        tran.updateRule({ [name]: value });
@@ -77,18 +81,23 @@ export default function Popup({ setShowPopup, translator: tran }) {
  const handleSaveRule = async () => {
    try {
      let href = window.location.href;
-      if (isExt) {
+      if (!tran) {
        const tab = await getTabInfo();
        href = tab.url;
      }
-      saveRule({ ...rule, pattern: href });
+      const newRule = { ...rule, pattern: href };
+      if (isExt && tran) {
+        sendBgMsg(MSG_SAVE_RULE, newRule);
+      } else {
+        saveRule(newRule);
+      }
    } catch (err) {
      console.log("[save rule]", err);
    }
  };

  useEffect(() => {
-    if (!isExt) {
+    if (tran) {
      return;
    }
    (async () => {
@@ -101,12 +110,12 @@ export default function Popup({ setShowPopup, translator: tran }) {
        console.log("[query rule]", err);
      }
    })();
-  }, []);
+  }, [tran]);

  if (!rule) {
    return (
      <Box minWidth={300}>
-        {isExt && (
+        {!tran && (
          <>
            <Header />
            <Divider />
@@ -125,7 +134,7 @@ export default function Popup({ setShowPopup, translator: tran }) {

  return (
    <Box minWidth={300}>
-      {isExt && (
+      {!tran && (
        <>
          <Header />
          <Divider />
--- a/src/views/Selection/CopyBtn.js
+++ b/src/views/Selection/CopyBtn.js
@@ -0,0 +1,35 @@
+import IconButton from "@mui/material/IconButton";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import LibraryAddCheckIcon from "@mui/icons-material/LibraryAddCheck";
+import { useState } from "react";
+
+export default function CopyBtn({ text }) {
+  const [copied, setCopied] = useState(false);
+  const handleClick = (e) => {
+    e.stopPropagation();
+    navigator.clipboard.writeText(text);
+    setCopied(true);
+    const timer = setTimeout(() => {
+      clearTimeout(timer);
+      setCopied(false);
+    }, 500);
+  };
+  return (
+    <IconButton
+      size="small"
+      sx={{
+        opacity: 0.5,
+        "&:hover": {
+          opacity: 1,
+        },
+      }}
+      onClick={handleClick}
+    >
+      {copied ? (
+        <LibraryAddCheckIcon fontSize="inherit" />
+      ) : (
+        <ContentCopyIcon fontSize="inherit" />
+      )}
+    </IconButton>
+  );
+}
--- a/src/views/Selection/DictCont.js
+++ b/src/views/Selection/DictCont.js
@@ -0,0 +1,64 @@
+import Box from "@mui/material/Box";
+import Chip from "@mui/material/Chip";
+import Stack from "@mui/material/Stack";
+import FavBtn from "./FavBtn";
+
+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"
+      >
+        <div style={{ fontWeight: "bold" }}>
+          {dictResult.simple_means?.word_name}
+        </div>
+        <FavBtn word={dictResult.simple_means?.word_name} />
+      </Stack>
+
+      {dictResult.simple_means?.symbols?.map(({ ph_en, ph_am, parts }, idx) => (
+        <div key={idx}>
+          {(ph_en || ph_am) && (
+            <div>{`英/${ph_en || ""}/ 美/${ph_am || ""}/`}</div>
+          )}
+          <ul style={{ margin: "0.5em 0" }}>
+            {parts.map(({ part, means }, idx) => (
+              <li key={idx}>
+                {part ? `[${part}] ${means.join("; ")}` : means.join("; ")}
+              </li>
+            ))}
+          </ul>
+        </div>
+      ))}
+
+      <div>
+        {Object.entries(dictResult.simple_means?.exchange || {})
+          .map(([key, val]) => `${exchangeMap[key] || key}: ${val.join(", ")}`)
+          .join("; ")}
+      </div>
+
+      <Stack direction="row" spacing={1} flexWrap="wrap" useFlexGap>
+        {Object.values(dictResult.simple_means?.tags || {})
+          .flat()
+          .filter((item) => item)
+          .map((item) => (
+            <Chip label={item} size="small" />
+          ))}
+      </Stack>
+    </Box>
+  );
+}
--- a/src/views/Selection/DraggableResizable.js
+++ b/src/views/Selection/DraggableResizable.js
@@ -0,0 +1,258 @@
+import { useEffect, useState } from "react";
+import Paper from "@mui/material/Paper";
+import Box from "@mui/material/Box";
+
+function Pointer({
+  direction,
+  size,
+  setSize,
+  position,
+  setPosition,
+  children,
+  minSize,
+  maxSize,
+  ...props
+}) {
+  const [origin, setOrigin] = useState(null);
+
+  function handlePointerDown(e) {
+    e.target.setPointerCapture(e.pointerId);
+    setOrigin({
+      x: position.x,
+      y: position.y,
+      w: size.w,
+      h: size.h,
+      clientX: e.clientX,
+      clientY: e.clientY,
+    });
+  }
+
+  function handlePointerMove(e) {
+    if (origin) {
+      const dx = e.clientX - origin.clientX;
+      const dy = e.clientY - origin.clientY;
+      let x = position.x;
+      let y = position.y;
+      let w = size.w;
+      let h = size.h;
+
+      switch (direction) {
+        case "Header":
+          x = origin.x + dx;
+          y = origin.y + dy;
+          break;
+        case "TopLeft":
+          x = origin.x + dx;
+          y = origin.y + dy;
+          w = origin.w - dx;
+          h = origin.h - dy;
+          break;
+        case "Top":
+          y = origin.y + dy;
+          h = origin.h - dy;
+          break;
+        case "TopRight":
+          y = origin.y + dy;
+          w = origin.w + dx;
+          h = origin.h - dy;
+          break;
+        case "Left":
+          x = origin.x + dx;
+          w = origin.w - dx;
+          break;
+        case "Right":
+          w = origin.w + dx;
+          break;
+        case "BottomLeft":
+          x = origin.x + dx;
+          w = origin.w - dx;
+          h = origin.h + dy;
+          break;
+        case "Bottom":
+          h = origin.h + dy;
+          break;
+        case "BottomRight":
+          w = origin.w + dx;
+          h = origin.h + dy;
+          break;
+        default:
+      }
+
+      if (w < minSize.w) {
+        w = minSize.w;
+        x = position.x;
+      }
+      if (w > maxSize.w) {
+        w = maxSize.w;
+        x = position.x;
+      }
+      if (h < minSize.h) {
+        h = minSize.h;
+        y = position.y;
+      }
+      if (h > maxSize.h) {
+        h = maxSize.h;
+        y = position.y;
+      }
+
+      setPosition({ x, y });
+      setSize({ w, h });
+    }
+  }
+
+  function handlePointerUp(e) {
+    setOrigin(null);
+  }
+
+  return (
+    <div
+      {...props}
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerUp}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default function DraggableResizable({
+  header,
+  children,
+  defaultPosition = {
+    x: 0,
+    y: 0,
+  },
+  defaultSize = {
+    w: 600,
+    h: 400,
+  },
+  minSize = {
+    w: 300,
+    h: 200,
+  },
+  maxSize = {
+    w: 1200,
+    h: 1200,
+  },
+  onChangeSize,
+  onChangePosition,
+}) {
+  const lineWidth = 4;
+  const [position, setPosition] = useState(defaultPosition);
+  const [size, setSize] = useState(defaultSize);
+
+  const opts = {
+    size,
+    setSize,
+    position,
+    setPosition,
+    minSize,
+    maxSize,
+  };
+
+  useEffect(() => {
+    onChangeSize && onChangeSize(size);
+  }, [size, onChangeSize]);
+
+  useEffect(() => {
+    onChangePosition && onChangePosition(position);
+  }, [position, onChangePosition]);
+
+  return (
+    <Box
+      style={{
+        position: "fixed",
+        left: position.x,
+        top: position.y,
+        display: "grid",
+        gridTemplateColumns: `${lineWidth * 2}px auto ${lineWidth * 2}px`,
+        gridTemplateRows: `${lineWidth * 2}px auto ${lineWidth * 2}px`,
+        zIndex: 2147483647,
+      }}
+    >
+      <Pointer
+        direction="TopLeft"
+        style={{
+          transform: `translate(${lineWidth}px, ${lineWidth}px)`,
+          cursor: "nw-resize",
+        }}
+        {...opts}
+      />
+      <Pointer
+        direction="Top"
+        style={{
+          margin: `0 ${lineWidth}px`,
+          transform: `translate(0px, ${lineWidth}px)`,
+          cursor: "row-resize",
+        }}
+        {...opts}
+      />
+      <Pointer
+        direction="TopRight"
+        style={{
+          transform: `translate(-${lineWidth}px, ${lineWidth}px)`,
+          cursor: "ne-resize",
+        }}
+        {...opts}
+      />
+      <Pointer
+        direction="Left"
+        style={{
+          margin: `${lineWidth}px 0`,
+          transform: `translate(${lineWidth}px, 0px)`,
+          cursor: "col-resize",
+        }}
+        {...opts}
+      />
+      <Paper elevation={4}>
+        <Pointer direction="Header" style={{ cursor: "move" }} {...opts}>
+          {header}
+        </Pointer>
+        <div
+          style={{
+            width: size.w,
+            height: size.h,
+            overflow: "hidden auto",
+          }}
+        >
+          {children}
+        </div>
+      </Paper>
+      <Pointer
+        direction="Right"
+        style={{
+          margin: `${lineWidth}px 0`,
+          transform: `translate(-${lineWidth}px, 0px)`,
+          cursor: "col-resize",
+        }}
+        {...opts}
+      />
+      <Pointer
+        direction="BottomLeft"
+        style={{
+          transform: `translate(${lineWidth}px, -${lineWidth}px)`,
+          cursor: "ne-resize",
+        }}
+        {...opts}
+      />
+      <Pointer
+        direction="Bottom"
+        style={{
+          margin: `0 ${lineWidth}px`,
+          transform: `translate(0px, -${lineWidth}px)`,
+          cursor: "row-resize",
+        }}
+        {...opts}
+      />
+      <Pointer
+        direction="BottomRight"
+        style={{
+          transform: `translate(-${lineWidth}px, -${lineWidth}px)`,
+          cursor: "nw-resize",
+        }}
+        {...opts}
+      />
+    </Box>
+  );
+}
--- a/src/views/Selection/FavBtn.js
+++ b/src/views/Selection/FavBtn.js
@@ -0,0 +1,31 @@
+import IconButton from "@mui/material/IconButton";
+import FavoriteIcon from "@mui/icons-material/Favorite";
+import FavoriteBorderIcon from "@mui/icons-material/FavoriteBorder";
+import { useState } from "react";
+import { useFavWords } from "../../hooks/FavWords";
+
+export default function FavBtn({ word }) {
+  const { favWords, toggleFav } = useFavWords();
+  const [loading, setLoading] = useState(false);
+
+  const handleClick = async () => {
+    try {
+      setLoading(true);
+      await toggleFav(word);
+    } catch (err) {
+      console.log("[set fav]", err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <IconButton disabled={loading} size="small" onClick={handleClick}>
+      {favWords[word] ? (
+        <FavoriteIcon fontSize="inherit" />
+      ) : (
+        <FavoriteBorderIcon fontSize="inherit" />
+      )}
+    </IconButton>
+  );
+}
--- a/src/views/Selection/TranBox.js
+++ b/src/views/Selection/TranBox.js
@@ -0,0 +1,190 @@
+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";
+import Grid from "@mui/material/Grid";
+import Box from "@mui/material/Box";
+import Divider from "@mui/material/Divider";
+import IconButton from "@mui/material/IconButton";
+import DoneIcon from "@mui/icons-material/Done";
+import { useI18n } from "../../hooks/I18n";
+import { OPT_TRANS_ALL, OPT_LANGS_FROM, OPT_LANGS_TO } from "../../config";
+import { useState, useRef } from "react";
+import TranCont from "./TranCont";
+import CopyBtn from "./CopyBtn";
+
+function TranForm({ text, setText, tranboxSetting, transApis }) {
+  const i18n = useI18n();
+
+  const [editMode, setEditMode] = useState(false);
+  const [editText, setEditText] = useState("");
+  const [translator, setTranslator] = useState(tranboxSetting.translator);
+  const [fromLang, setFromLang] = useState(tranboxSetting.fromLang);
+  const [toLang, setToLang] = useState(tranboxSetting.toLang);
+  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>
+
+      <Box>
+        <TextField
+          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();
+                    }}
+                  >
+                    <DoneIcon fontSize="inherit" />
+                  </IconButton>
+                ) : (
+                  <CopyBtn text={text} />
+                )}
+              </Stack>
+            ),
+          }}
+        />
+      </Box>
+
+      <TranCont
+        text={text}
+        translator={translator}
+        fromLang={fromLang}
+        toLang={toLang}
+        transApis={transApis}
+      />
+    </Stack>
+  );
+}
+
+export default function TranBox({
+  text,
+  setText,
+  setShowBox,
+  tranboxSetting,
+  transApis,
+  boxSize,
+  setBoxSize,
+  boxPosition,
+  setBoxPosition,
+}) {
+  return (
+    <SettingProvider>
+      <ThemeProvider>
+        <DraggableResizable
+          defaultPosition={boxPosition}
+          defaultSize={boxSize}
+          header={<Header setShowPopup={setShowBox} />}
+          onChangeSize={setBoxSize}
+          onChangePosition={setBoxPosition}
+        >
+          <Divider />
+          <TranForm
+            text={text}
+            setText={setText}
+            tranboxSetting={tranboxSetting}
+            transApis={transApis}
+          />
+        </DraggableResizable>
+      </ThemeProvider>
+    </SettingProvider>
+  );
+}
--- a/src/views/Selection/TranBtn.js
+++ b/src/views/Selection/TranBtn.js
@@ -0,0 +1,36 @@
+export default function TranBtn({ onClick, position, tranboxSetting }) {
+  return (
+    <div
+      style={{
+        cursor: "pointer",
+        position: "fixed",
+        left: position.x + tranboxSetting.btnOffsetX,
+        top: position.y + tranboxSetting.btnOffsetY,
+        zIndex: 2147483647,
+      }}
+      onClick={onClick}
+      onMouseUp={(e) => {
+        e.stopPropagation();
+      }}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 32 32"
+        version="1.1"
+      >
+        <path
+          d="M0 0 C10.56 0 21.12 0 32 0 C32 10.56 32 21.12 32 32 C21.44 32 10.88 32 0 32 C0 21.44 0 10.88 0 0 Z "
+          fill="#209CEE"
+          transform="translate(0,0)"
+        />
+        <path
+          d="M0 0 C0.66 0 1.32 0 2 0 C2 2.97 2 5.94 2 9 C2.969375 8.2575 3.93875 7.515 4.9375 6.75 C5.48277344 6.33234375 6.02804688 5.9146875 6.58984375 5.484375 C8.39053593 3.83283924 8.39053593 3.83283924 9 0 C13.95 0 18.9 0 24 0 C24 0.99 24 1.98 24 3 C22.68 3 21.36 3 20 3 C20 9.27 20 15.54 20 22 C19.01 22 18.02 22 17 22 C17 15.73 17 9.46 17 3 C15.35 3 13.7 3 12 3 C11.731875 3.598125 11.46375 4.19625 11.1875 4.8125 C10.01506533 6.97224808 8.80630718 8.35790256 7 10 C8.01790655 12.27071461 8.77442829 13.80784632 10.6875 15.4375 C11.120625 15.953125 11.55375 16.46875 12 17 C11.6875 19.6875 11.6875 19.6875 11 22 C10.34 22 9.68 22 9 22 C8.773125 21.236875 8.54625 20.47375 8.3125 19.6875 C6.73268318 16.45263699 5.16717283 15.58358642 2 14 C2 16.64 2 19.28 2 22 C1.34 22 0.68 22 0 22 C0 14.74 0 7.48 0 0 Z "
+          fill="#E9F5FD"
+          transform="translate(4,5)"
+        />
+      </svg>
+    </div>
+  );
+}
--- a/src/views/Selection/TranCont.js
+++ b/src/views/Selection/TranCont.js
@@ -0,0 +1,99 @@
+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 { useEffect, useState } from "react";
+import { apiTranslate } from "../../apis";
+import { isValidWord } from "../../libs/utils";
+import CopyBtn from "./CopyBtn";
+import DictCont from "./DictCont";
+
+export default function TranCont({
+  text,
+  translator,
+  fromLang,
+  toLang,
+  transApis,
+}) {
+  const i18n = useI18n();
+  const [trText, setTrText] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [dictResult, setDictResult] = useState(null);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        setLoading(true);
+        setTrText("");
+        setError("");
+        setDictResult(null);
+
+        const apiSetting =
+          transApis[translator] || DEFAULT_TRANS_APIS[translator];
+        const tranRes = await apiTranslate({
+          text,
+          translator,
+          fromLang,
+          toLang,
+          apiSetting,
+        });
+        setTrText(tranRes[0]);
+
+        // 词典
+        if (isValidWord(text) && toLang.startsWith("zh")) {
+          if (fromLang === "en" && translator === OPT_TRANS_BAIDU) {
+            setDictResult(tranRes[2].dict_result);
+          } else {
+            const dictRes = await apiTranslate({
+              text,
+              translator: OPT_TRANS_BAIDU,
+              fromLang: "en",
+              toLang: "zh-CN",
+            });
+            setDictResult(dictRes[2].dict_result);
+          }
+        }
+      } catch (err) {
+        setError(err.message);
+      } finally {
+        setLoading(false);
+      }
+    })();
+  }, [text, translator, fromLang, toLang, transApis]);
+
+  return (
+    <>
+      <Box>
+        <TextField
+          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} />}
+    </>
+  );
+}
--- a/src/views/Selection/index.js
+++ b/src/views/Selection/index.js
@@ -0,0 +1,85 @@
+import { useState, useEffect } from "react";
+import TranBtn from "./TranBtn";
+import TranBox from "./TranBox";
+import { shortcutRegister } from "../../libs/shortcut";
+
+export default function Slection({ tranboxSetting, transApis }) {
+  const [showBox, setShowBox] = useState(false);
+  const [showBtn, setShowBtn] = useState(false);
+  const [selectedText, setSelText] = useState("");
+  const [text, setText] = useState("");
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [boxSize, setBoxSize] = useState({ w: 600, h: 400 });
+  const [boxPosition, setBoxPosition] = useState({
+    x: (window.innerWidth - 600) / 2,
+    y: (window.innerHeight - 400) / 2,
+  });
+
+  function handleMouseup(e) {
+    const selectedText = window.getSelection()?.toString()?.trim() || "";
+    if (!selectedText) {
+      setShowBtn(false);
+      return;
+    }
+
+    setSelText(selectedText);
+    setShowBtn(true);
+    setPosition({ x: e.clientX, y: e.clientY });
+  }
+
+  const handleClick = (e) => {
+    e.stopPropagation();
+    setShowBtn(false);
+
+    setText(selectedText);
+    if (!showBox) {
+      setShowBox(true);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener("mouseup", handleMouseup);
+    return () => {
+      window.removeEventListener("mouseup", handleMouseup);
+    };
+  }, []);
+
+  useEffect(() => {
+    const clearShortcut = shortcutRegister(
+      tranboxSetting.tranboxShortcut,
+      () => {
+        setShowBox((pre) => !pre);
+      }
+    );
+
+    return () => {
+      clearShortcut();
+    };
+  }, [tranboxSetting.tranboxShortcut, setShowBox]);
+
+  return (
+    <>
+      {showBox && (
+        <TranBox
+          text={text}
+          setText={setText}
+          boxSize={boxSize}
+          setBoxSize={setBoxSize}
+          boxPosition={boxPosition}
+          setBoxPosition={setBoxPosition}
+          tranboxSetting={tranboxSetting}
+          transApis={transApis}
+          setShowBox={setShowBox}
+        />
+      )}
+
+      {showBtn && (
+        <TranBtn
+          position={position}
+          tranboxSetting={tranboxSetting}
+          onClick={handleClick}
+        />
+      )}
+    </>
+  );
+}
Author	SHA1	Message	Date
Gabe Yuan	450283b80a	v1.7.11	2023-10-27 17:14:13 +08:00
Gabe Yuan	44aeed03a6	fix dict ui	2023-10-27 14:51:53 +08:00
Gabe Yuan	fa4569415d	fix dict ui	2023-10-27 14:07:22 +08:00
Gabe Yuan	a341bf30ba	fix tranbox apisetting bug	2023-10-27 13:55:24 +08:00
Gabe Yuan	34a7354c84	fix dict tags stack	2023-10-27 13:18:42 +08:00
Gabe Yuan	21b5dfbe98	update readme	2023-10-27 00:11:44 +08:00
Gabe Yuan	c1920f5cdd	v1.7.10	2023-10-27 00:01:48 +08:00
Gabe Yuan	3e24568df9	add upload button for fav words	2023-10-26 23:55:05 +08:00
Gabe Yuan	b785cfe854	add download button for fav words	2023-10-26 17:59:49 +08:00
Gabe Yuan	15367bd117	add fav words page	2023-10-26 17:32:55 +08:00
Gabe Yuan	d7eaac5aca	update nav icon	2023-10-26 13:22:01 +08:00
Gabe Yuan	d4526d605c	fix i18n text	2023-10-26 13:18:02 +08:00
Gabe Yuan	52979356ca	fix i18n text	2023-10-26 13:10:25 +08:00
Gabe Yuan	c6d3d6454f	add copy button to tranbox	2023-10-26 12:24:24 +08:00
Gabe Yuan	0d7112187d	update readme	2023-10-26 11:17:10 +08:00
Gabe Yuan	045ff3c3d9	support: cloudflare ai	2023-10-26 11:13:50 +08:00
Gabe Yuan	dd68a73efd	set overflowWrap for long url	2023-10-26 10:41:04 +08:00
Gabe Yuan	5947dc182e	remove log	2023-10-25 16:19:58 +08:00
Gabe Yuan	e185bbdb4d	v1.7.9	2023-10-25 16:08:06 +08:00
Gabe Yuan	9368320c38	fix btn offset bug	2023-10-25 16:07:09 +08:00
Gabe Yuan	f65314bc2d	v1.7.8	2023-10-25 14:55:08 +08:00
Gabe Yuan	1791e36038	fix readme	2023-10-25 13:36:46 +08:00
Gabe Yuan	8d93094af5	fix mouseover translate	2023-10-25 13:26:31 +08:00
Gabe Yuan	43f34fe6ed	tranbox	2023-10-25 11:20:05 +08:00
Gabe Yuan	83911b2164	tranbox	2023-10-25 11:14:18 +08:00
Gabe Yuan	94c7494e90	tranbox	2023-10-25 11:13:56 +08:00
Gabe Yuan	65f2177299	tranbox	2023-10-24 23:50:07 +08:00
Gabe Yuan	f033b11e63	tranbox	2023-10-24 23:37:53 +08:00
Gabe Yuan	02f26af592	tranbox...	2023-10-24 17:58:37 +08:00
Gabe Yuan	4125aba808	tranbox...	2023-10-23 18:02:42 +08:00
Gabe Yuan	e89da9120c	add common.js	2023-10-23 13:35:57 +08:00
Gabe Yuan	160fc218fc	add more translators: baidu/tencent/deeplfree	2023-10-21 11:54:04 +08:00
Gabe Yuan	507d54dba0	add more translators...	2023-10-20 17:44:48 +08:00
Gabe Yuan	f3029a0f76	update task pool	2023-10-19 14:28:18 +08:00
Gabe Yuan	53181588cf	support deeplx api	2023-10-17 11:33:26 +08:00
Gabe Yuan	f88aa159fc	fix deepl bug: remove split_sentences param	2023-10-16 16:16:33 +08:00
Gabe Yuan	fb2b517a67	add webfix: FIXER_BN	2023-10-16 15:48:53 +08:00
Gabe Yuan	6e952a9530	update readme	2023-10-13 15:14:43 +08:00
Gabe Yuan	d9acef8d56	v1.7.7	2023-10-13 14:41:25 +08:00
Gabe Yuan	113a4d8eca	modify langs map	2023-10-13 11:31:11 +08:00
Gabe Yuan	6d5b93c01b	modify langs map	2023-10-13 10:48:01 +08:00
Gabe Yuan	5746911651	update app description & readme	2023-10-13 10:20:14 +08:00
Gabe Yuan	7173692db7	correct function name	2023-10-12 17:00:18 +08:00
Gabe Yuan	b13a63e568	fix: openai default url	2023-10-11 14:28:00 +08:00
Gabe Yuan	791ec65579	detect lang remote	2023-10-11 10:27:51 +08:00
Gabe Yuan	dd99fddc07	detect lang remote	2023-10-11 09:48:52 +08:00
Gabe Yuan	5cd6977a6e	detect lang remote	2023-10-10 18:03:05 +08:00
Gabe Yuan	5af66204c4	rm wrangler package	2023-10-07 16:21:17 +08:00
Gabe Yuan	595efe808f	rm yarn packageManager	2023-10-07 16:17:21 +08:00
Gabe Yuan	7b4b3b020c	v1.7.6	2023-10-07 15:09:12 +08:00
Gabe Yuan	3e96540b56	fix createCache options key	2023-10-07 15:08:10 +08:00
Gabe Yuan	88b791bd73	fix createCache options key	2023-10-07 15:01:23 +08:00
Gabe Yuan	7817019e70	fix createCache options key	2023-10-07 14:57:36 +08:00
Gabe Yuan	6013bbd32c	v1.7.5	2023-09-28 16:19:39 +08:00
Gabe Yuan	40e0b96f39	fix GM.xmlHttpRequest response	2023-09-28 16:18:28 +08:00
Gabe Yuan	16560fbdf0	fix install links	2023-09-27 15:39:57 +08:00
Gabe Yuan	16fdd704aa	v1.7.4	2023-09-27 15:08:45 +08:00
Gabe Yuan	44e84d9259	minor revision	2023-09-25 11:56:46 +08:00
Gabe Yuan	18d29461ce	minor revision	2023-09-25 11:47:12 +08:00
Gabe Yuan	31fb749e93	minor revision	2023-09-25 11:43:14 +08:00
Gabe Yuan	e17931493b	add fab for ext	2023-09-23 19:16:51 +08:00
Gabe Yuan	a395f0b31b	change newline length to 20	2023-09-22 16:37:35 +08:00
Gabe Yuan	c819896b43	change newline length to 30	2023-09-22 16:33:00 +08:00
Gabe Yuan	733ec92c9c	v1.7.3	2023-09-22 15:40:02 +08:00
Gabe Yuan	7c67bb7181	change shortcut e.key to e.code	2023-09-22 15:33:37 +08:00
Gabe Yuan	87f099dd7f	Solve the problem of multi-layer shadowroot selector and input box translation	2023-09-22 15:33:02 +08:00
Gabe Yuan	5306d81284	fix shortcut bug	2023-09-22 11:21:38 +08:00