v1.6.7

fix popup header
fix help link
2023-09-04 23:28:41 +08:00 · 2023-09-04 23:24:50 +08:00 · 2023-09-04 23:12:35 +08:00 · 2023-09-04 23:08:00 +08:00 · 2023-09-04 22:29:39 +08:00 · 2023-09-04 22:03:17 +08:00
28 changed files with 632 additions and 158 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.6.1
+REACT_APP_VERSION=1.6.7

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

@@ -13,8 +13,9 @@ REACT_APP_OPTIONSPAGE_DEV=http://localhost:3000/options.html
 REACT_APP_LOGOURL=https://fishjar.github.io/kiss-translator/images/logo192.png
 REACT_APP_LOGOURL2=https://kiss-translator.rayjar.com/images/logo192.png

-REACT_APP_RULESURL=https://fishjar.github.io/kiss-translator/kiss-translator-rules.json
-REACT_APP_RULESURL2=https://kiss-translator.rayjar.com/kiss-translator-rules.json
+REACT_APP_RULESURL=https://fishjar.github.io/kiss-rules/kiss-rules.json
+REACT_APP_RULESURL_ON=https://fishjar.github.io/kiss-rules/kiss-rules-on.json
+REACT_APP_RULESURL_OFF=https://fishjar.github.io/kiss-rules/kiss-rules-off.json

 REACT_APP_VERSIONFILE=https://fishjar.github.io/kiss-translator/version.txt
 REACT_APP_VERSIONFILE2=https://kiss-translator.rayjar.com/version.txt
--- a/README.en.md
+++ b/README.en.md
@@ -1,10 +1,10 @@
-## KISS Translator
+# KISS Translator

 A minimalist [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
+## 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.

@@ -14,11 +14,39 @@ It just so happens that I am obsessed with translation tools. Based on the conce

 If you also like a little more simplicity, welcome to pick it up.

-### Features
+## Features

 - Keep it simple, smart

-### Schedule
+## Associated ProjectS
+
+- Data synchronization service: [https://github.com/fishjar/kiss-worker](https://github.com/fishjar/kiss-worker)
+  - Data synchronization service available for this project.
+  - You can also share your own private rule list.
+  - Deploy by yourself, manage by yourself, data is private.
+- Community subscription rules: [https://github.com/fishjar/kiss-rules](https://github.com/fishjar/kiss-rules)
+  - Provides the latest and most complete list of subscription rules maintained by the community.
+  - Help with rules-related issues.
+- Web page correction script: [https://github.com/fishjar/kiss-webfixer](https://github.com/fishjar/kiss-webfixer)
+  - Fixed scripts for some special sites.
+  - So that the translation software can get better display effect.
+- Translation interface agent: [https://github.com/fishjar/kiss-proxy](https://github.com/fishjar/kiss-proxy)
+  - If you encounter network problems when accessing a certain translation interface, this proxy service may help you.
+  - Deploy and manage by yourself.
+- Minimalistic Dictionary Plugin: [https://github.com/fishjar/kiss-dictionary](https://github.com/fishjar/kiss-dictionary)
+  - A word-marking translation plug-in used with this project.
+  - Supports query of English words, sentences and Chinese characters.
+  - Supports history records and word collections.
+
+## Description
+
+### Support shortcut keys
+
+- `Alt+Q` Toggle Translation
+- `Alt+C` Toggle Styles
+- `Alt+K` Open Menu
+
+## Schedule

 - [x] Provide trial installation package
 - [x] Adapt browser
@@ -30,8 +58,8 @@ If you also like a little more simplicity, welcome to pick it up.
 - [x] Support translation services
  - [x] Google
  - [x] Microsoft
+  - [x] DeepL
  - [x] OpenAI
-  - [ ] DeepL
 - [x] Upload to app Store
  - [x] Chrome [Install Link](https://chrome.google.com/webstore/detail/kiss-translator/bdiifdefkgmcblbcghdlonllpjhhjgof)
  - [x] Edge [Install Link](https://microsoftedge.microsoft.com/addons/detail/kiss-translator/jemckldkclkinpjighnoilpbldbdmmlh)
@@ -42,9 +70,10 @@ If you also like a little more simplicity, welcome to pick it up.
 - [x] Data Synchronization Function
 - [x] Greasemonkey Script ([Setting Page 1](https://fishjar.github.io/kiss-translator/options.html)、[Setting Page 2](https://kiss-translator.rayjar.com/options))
  - [x] [Tampermonkey](https://www.tampermonkey.net/) (Chrome/Edge/Firefox) [Install Link 1](https://fishjar.github.io/kiss-translator/kiss-translator.user.js)、[Install Link 2](https://kiss-translator.rayjar.com/kiss-translator.user.js)
+  - [x] [Violentmonkey](https://violentmonkey.github.io/) (Chrome/Edge/Firefox) [Install Link 1](https://fishjar.github.io/kiss-translator/kiss-translator.user.js)、[Install Link 2](https://kiss-translator.rayjar.com/kiss-translator.user.js)
  - [x] [Userscripts Safari](https://github.com/quoid/userscripts) (iOS Safari) [Install Link 1](https://fishjar.github.io/kiss-translator/kiss-translator-ios-safari.user.js)、[Install Link 2](https://kiss-translator.rayjar.com/kiss-translator.user-ios-safari.js)

-### Guide
+## Guide

 ```sh
 git clone https://github.com/fishjar/kiss-translator.git
@@ -53,10 +82,6 @@ yarn install
 yarn build
 ```

-### Data Sync
-
-Goto: [https://github.com/fishjar/kiss-worker](https://github.com/fishjar/kiss-worker)
-
-### Discussion
+## Discussion

 - Join [Telegram Group](https://t.me/+RRCu_4oNwrM2NmFl)
--- a/README.md
+++ b/README.md
@@ -1,10 +1,10 @@
-## 简约翻译
+# 简约翻译

 一个简约的 [双语网页翻译扩展 & 油猴脚本](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) 一起使用，刚好形成很好补充。

@@ -14,11 +14,39 @@

 如果你也喜欢简约一点的，欢迎自取。

-### 特点
+## 特点

 - 保持简约

-### 进度
+## 关联项目
+
+- 数据同步服务: [https://github.com/fishjar/kiss-worker](https://github.com/fishjar/kiss-worker)
+  - 可用于本项目的数据同步服务。
+  - 亦可用与分享个人的私有规则列表。
+  - 自己部署，自己管理，数据私有。
+- 社区订阅规则: [https://github.com/fishjar/kiss-rules](https://github.com/fishjar/kiss-rules)
+  - 提供社区维护的，最新最全的订阅规则列表。
+  - 求助规则相关的问题。
+- 网页修正脚本: [https://github.com/fishjar/kiss-webfixer](https://github.com/fishjar/kiss-webfixer)
+  - 针对一些特殊网站的修正脚本。
+  - 以便翻译软件得到更好的展示效果。
+- 翻译接口代理: [https://github.com/fishjar/kiss-proxy](https://github.com/fishjar/kiss-proxy)
+  - 如果访问某个翻译接口遇到网络问题，这个代理服务也许可以帮你到你。
+  - 自己部署，自己管理。
+- 简约词典插件: [https://github.com/fishjar/kiss-dictionary](https://github.com/fishjar/kiss-dictionary)
+  - 搭配本项目一起使用的划词翻译插件。
+  - 支持英文单词、句子、汉字的查询。
+  - 支持历史记录、单词收藏。
+
+## 简要说明
+
+### 支持快捷键
+
+- `Alt+Q` 开启翻译
+- `Alt+C` 切换样式
+- `Alt+K` 打开菜单
+
+## 进度

 - [x] 提供试用安装包
 - [x] 适配浏览器
@@ -30,8 +58,8 @@
 - [x] 支持翻译服务
  - [x] Google
  - [x] Microsoft
+  - [x] DeepL
  - [x] OpenAI
-  - [ ] DeepL
 - [x] 上架应用市场
  - [x] Chrome [安装地址](https://chrome.google.com/webstore/detail/kiss-translator/bdiifdefkgmcblbcghdlonllpjhhjgof?hl=zh-CN)
  - [x] Edge [安装地址](https://microsoftedge.microsoft.com/addons/detail/%E7%AE%80%E7%BA%A6%E7%BF%BB%E8%AF%91/jemckldkclkinpjighnoilpbldbdmmlh?hl=zh-CN)
@@ -42,9 +70,10 @@
 - [x] 数据同步功能
 - [x] 油猴脚本 ([设置页面 1](https://fishjar.github.io/kiss-translator/options.html)、[设置页面 2](https://kiss-translator.rayjar.com/options))
  - [x] [Tampermonkey](https://www.tampermonkey.net/) (Chrome/Edge/Firefox) [安装链接 1](https://fishjar.github.io/kiss-translator/kiss-translator.user.js)、[安装链接 2](https://kiss-translator.rayjar.com/kiss-translator.user.js)
+  - [x] [Violentmonkey](https://violentmonkey.github.io/) (Chrome/Edge/Firefox) [安装链接 1](https://fishjar.github.io/kiss-translator/kiss-translator.user.js)、[安装链接 2](https://kiss-translator.rayjar.com/kiss-translator.user.js)
  - [x] [Userscripts Safari](https://github.com/quoid/userscripts) (iOS Safari) [安装链接 1](https://fishjar.github.io/kiss-translator/kiss-translator-ios-safari.user.js)、[安装链接 2](https://kiss-translator.rayjar.com/kiss-translator.user-ios-safari.js)

-### 指引
+## 指引

 ```sh
 git clone https://github.com/fishjar/kiss-translator.git
@@ -53,10 +82,6 @@ yarn install
 yarn build
 ```

-### 数据同步
-
-移步: [https://github.com/fishjar/kiss-worker](https://github.com/fishjar/kiss-worker)
-
-### 交流
+## 交流

 - 加入 [Telegram 群](https://t.me/+RRCu_4oNwrM2NmFl)
--- a/config-overrides.js
+++ b/config-overrides.js
@@ -93,6 +93,8 @@ const userscriptWebpack = (config, env) => {
 // @connect       translate.googleapis.com
 // @connect       api-edge.cognitive.microsofttranslator.com
 // @connect       edge.microsoft.com
+// @connect       api-free.deepl.com
+// @connect       api.deepl.com
 // @connect       api.openai.com
 // @connect       openai.azure.com
 // @connect       workers.dev
@@ -100,6 +102,7 @@ const userscriptWebpack = (config, env) => {
 // @connect       githubusercontent.com
 // @connect       kiss-translator.rayjar.com
 // @connect       ghproxy.com
+// @connect       localhost:3000
 // @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.6.1",
+  "version": "1.6.7",
  "author": "Gabe<yugang2002@gmail.com>",
  "private": true,
  "dependencies": {
@@ -9,6 +9,7 @@
    "@emotion/styled": "^11.10.8",
    "@mui/icons-material": "^5.11.11",
    "@mui/material": "^5.11.12",
+    "@violentmonkey/shortcut": "^1.3.0",
    "query-string": "^8.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
@@ -25,10 +26,10 @@
    "build:edge": "rm -rf build/edge && cp -r build/chrome build/edge",
    "build:firefox": "rm -rf build/firefox && cp -r build/chrome build/firefox && cat ./build/firefox/manifest.firefox.json > ./build/firefox/manifest.json",
    "build:web": "rm -rf build/web && BUILD_PATH=./build/web REACT_APP_CLIENT=userscript react-app-rewired build",
-    "build:userscript": "rm -rf build/userscript && mkdir build/userscript && cp build/web/kiss-translator.user.js build/userscript/kiss-translator.user.js",
-    "build:userscript-ios": "file1=build/userscript/kiss-translator.user.js file2=build/userscript/kiss-translator-ios-safari.user.js && cp $file1 $file2 && sed -i 's|// @grant         unsafeWindow|// @inject-into   content|g' $file2",
+    "build:userscript-ios": "file1=build/web/kiss-translator.user.js file2=build/web/kiss-translator-ios-safari.user.js && cp $file1 $file2 && sed -i 's|// @grant         unsafeWindow|// @inject-into   content|g' $file2",
+    "build:userscript": "rm -rf build/userscript && mkdir build/userscript && cp build/web/*.user.js build/userscript/",
    "build:rules": "babel-node src/rules.js",
-    "build": "yarn build:chrome && yarn build:edge && yarn build:firefox && yarn build:web && yarn build:userscript && yarn build:userscript-ios && yarn build:rules",
+    "build": "yarn build:chrome && yarn build:edge && yarn build:firefox && yarn build:web && yarn build:userscript-ios && yarn build:userscript && yarn build:rules",
    "deploy:web": "wrangler pages deploy ./build/web --project-name kiss-translator",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
--- a/public/content.html
+++ b/public/content.html
@@ -64,8 +64,25 @@
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root">
+      <div id="content">
+        <p>You need to enable JavaScript to run <span>this app.</span></p>
+        The <span>embargo</span> has just lifted to confirm that AmpereOne is
+        coming to Google Cloud with the C3A instances.
+        <br />
+        But these upcoming instances for now are only in private preview form.
+        <br />
+        <br />
+        Needless to say I also haven't had any AmpereOne access to check out the
+        performance and power efficiency of these new Arm server processors from
+        Ampere Computing.
+        <br />
+      </div>
      <h2>
-        <p><span>React is a JavaScript library for building user interfaces.</span></p>
+        <p>
+          <span
+            >React is a JavaScript library for building user interfaces.</span
+          >
+        </p>
      </h2>
      <div id="addtitle"></div>
      <h2>Shadow 1</h2>
--- 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.6.1",
+  "version": "1.6.7",
  "default_locale": "en",
  "author": "Gabe<yugang2002@gmail.com>",
  "homepage_url": "https://github.com/fishjar/kiss-translator",
@@ -17,6 +17,11 @@
    }
  ],
  "commands": {
+    "_execute_browser_action": {
+      "suggested_key": {
+        "default": "Alt+K"
+      }
+    },
    "toggleTranslate": {
      "suggested_key": {
        "default": "Alt+Q"
--- 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.6.1",
+  "version": "1.6.7",
  "default_locale": "en",
  "author": "Gabe<yugang2002@gmail.com>",
  "homepage_url": "https://github.com/fishjar/kiss-translator",
@@ -18,6 +18,11 @@
    }
  ],
  "commands": {
+    "_execute_action": {
+      "suggested_key": {
+        "default": "Alt+K"
+      }
+    },
    "toggleTranslate": {
      "suggested_key": {
        "default": "Alt+Q"
--- a/src/apis/index.js
+++ b/src/apis/index.js
@@ -3,6 +3,7 @@ import { fetchPolyfill } from "../libs/fetch";
 import {
  OPT_TRANS_GOOGLE,
  OPT_TRANS_MICROSOFT,
+  OPT_TRANS_DEEPL,
  OPT_TRANS_OPENAI,
  URL_MICROSOFT_TRANS,
  OPT_LANGS_SPECIAL,
@@ -95,6 +96,36 @@ const apiMicrosoftTranslate = (translator, text, to, from) => {
  });
 };

+/**
+ * DeepL翻译
+ * @param {*} text
+ * @param {*} to
+ * @param {*} from
+ * @returns
+ */
+const apiDeepLTranslate = (translator, text, to, from, setting) => {
+  const { deeplUrl, deeplKey } = setting;
+  const data = {
+    text: [text],
+    target_lang: to,
+    split_sentences: "0",
+  };
+  if (from) {
+    data.source_lang = from;
+  }
+  return fetchPolyfill(deeplUrl, {
+    headers: {
+      "Content-type": "application/json",
+    },
+    method: "POST",
+    body: JSON.stringify(data),
+    useCache: true,
+    usePool: true,
+    translator,
+    token: deeplKey,
+  });
+};
+
 /**
 * OpenAI 翻译
 * @param {*} text
@@ -160,6 +191,10 @@ export const apiTranslate = async ({
    const res = await apiMicrosoftTranslate(translator, q, to, from);
    trText = res[0].translations[0].text;
    isSame = to === res[0].detectedLanguage.language;
+  } else if (translator === OPT_TRANS_DEEPL) {
+    const res = await apiDeepLTranslate(translator, q, to, from, setting);
+    trText = res.translations.map((item) => item.text).join(" ");
+    isSame = to === res.translations[0].detected_source_language;
  } else if (translator === OPT_TRANS_OPENAI) {
    const res = await apiOpenaiTranslate(translator, q, to, from, setting);
    trText = res?.choices?.[0].message.content;
--- a/src/config/i18n.js
+++ b/src/config/i18n.js
@@ -260,6 +260,14 @@ export const I18N = {
    zh: `请检查url地址是否正确或稍后再试。`,
    en: `Please check if the url address is correct or try again later.`,
  },
+  deepl_api: {
+    zh: `DeepL 接口`,
+    en: `DeepL API`,
+  },
+  deepl_key: {
+    zh: `DeepL 密钥`,
+    en: `DeepL Key`,
+  },
  openai_api: {
    zh: `OpenAI 接口`,
    en: `OpenAI API`,
@@ -276,9 +284,9 @@ export const I18N = {
    zh: `OpenAI 提示词`,
    en: `OpenAI Prompt`,
  },
-  clear_cache: {
-    zh: `是否清除缓存`,
-    en: `Whether clear cache`,
+  if_clear_cache: {
+    zh: `是否清除缓存 (仅用于扩展)`,
+    en: `Whether clear cache (only for extension)`,
  },
  clear_cache_never: {
    zh: `不清除缓存`,
@@ -300,13 +308,13 @@ export const I18N = {
    zh: `数据同步测试`,
    en: `Data Sync Test`,
  },
-  data_sync_success: {
-    zh: `数据同步成功！`,
-    en: `Data Sync Success`,
+  sync_success: {
+    zh: `同步成功！`,
+    en: `Sync Success`,
  },
-  data_sync_error: {
-    zh: `数据同步失败！`,
-    en: `Data Sync Error`,
+  sync_failed: {
+    zh: `同步失败！`,
+    en: `Sync Error`,
  },
  error_got_some_wrong: {
    zh: `抱歉，出错了！`,
@@ -316,4 +324,40 @@ export const I18N = {
    zh: `您的同步设置未填写，无法在线分享。`,
    en: `Your sync settings are missing and cannot be shared online.`,
  },
+  click_test: {
+    zh: `点击测试`,
+    en: `Click Test`,
+  },
+  test_success: {
+    zh: `测试成功`,
+    en: `Test success`,
+  },
+  test_failed: {
+    zh: `测试失败`,
+    en: `Test failed`,
+  },
+  clear_all_cache_now: {
+    zh: `立即清除全部缓存`,
+    en: `Clear all cache now`,
+  },
+  clear_cache: {
+    zh: `清除缓存`,
+    en: `Clear Cache`,
+  },
+  clear_success: {
+    zh: `清除成功`,
+    en: `Clear success`,
+  },
+  clear_failed: {
+    zh: `清除失败`,
+    en: `Clear failed`,
+  },
+  share: {
+    zh: `分享`,
+    en: `Share`,
+  },
+  help: {
+    zh: `求助`,
+    en: `Help`,
+  },
 };
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -53,13 +53,14 @@ export const MSG_TRANS_GETRULE = "trans_getrule";
 export const MSG_TRANS_PUTRULE = "trans_putrule";
 export const MSG_TRANS_CURRULE = "trans_currule";

-export const EVENT_KISS = "kissEvent";
-
 export const THEME_LIGHT = "light";
 export const THEME_DARK = "dark";

 export const URL_KISS_WORKER = "https://github.com/fishjar/kiss-worker";
 export const URL_KISS_PROXY = "https://github.com/fishjar/kiss-proxy";
+export const URL_KISS_RULES = "https://github.com/fishjar/kiss-rules";
+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_MICROSOFT_AUTH = "https://edge.microsoft.com/translate/auth";
@@ -68,10 +69,12 @@ export const URL_MICROSOFT_TRANS =

 export const OPT_TRANS_GOOGLE = "Google";
 export const OPT_TRANS_MICROSOFT = "Microsoft";
+export const OPT_TRANS_DEEPL = "DeepL";
 export const OPT_TRANS_OPENAI = "OpenAI";
 export const OPT_TRANS_ALL = [
  OPT_TRANS_GOOGLE,
  OPT_TRANS_MICROSOFT,
+  OPT_TRANS_DEEPL,
  OPT_TRANS_OPENAI,
 ];

@@ -121,6 +124,12 @@ export const OPT_LANGS_SPECIAL = {
    ["zh-CN", "zh-Hans"],
    ["zh-TW", "zh-Hant"],
  ]),
+  [OPT_TRANS_DEEPL]: new Map([
+    ...OPT_LANGS_FROM.map(([key]) => [key, key.toUpperCase()]),
+    ["auto", ""],
+    ["zh-CN", "ZH"],
+    ["zh-TW", "ZH"],
+  ]),
  [OPT_TRANS_OPENAI]: new Map(
    OPT_LANGS_FROM.map(([key, val]) => [key, val.split(" - ")[0]])
  ),
@@ -177,10 +186,14 @@ export const GLOBLA_RULE = {
 export const DEFAULT_SUBRULES_LIST = [
  {
    url: process.env.REACT_APP_RULESURL,
+    selected: false,
+  },
+  {
+    url: process.env.REACT_APP_RULESURL_ON,
    selected: true,
  },
  {
-    url: process.env.REACT_APP_RULESURL2,
+    url: process.env.REACT_APP_RULESURL_OFF,
    selected: false,
  },
 ];
@@ -202,6 +215,8 @@ export const DEFAULT_SETTING = {
  subrulesList: DEFAULT_SUBRULES_LIST, // 订阅列表
  owSubrule: DEFAULT_OW_RULE, // 覆写订阅规则
  googleUrl: "https://translate.googleapis.com/translate_a/single", // 谷歌翻译接口
+  deeplUrl: "https://api-free.deepl.com/v2/translate",
+  deeplKey: "",
  openaiUrl: "https://api.openai.com/v1/chat/completions",
  openaiKey: "",
  openaiModel: "gpt-4",
--- a/src/config/rules.js
+++ b/src/config/rules.js
@@ -177,7 +177,9 @@ const RULES = [
  },
 ];

-export const BUILTIN_RULES = RULES.map((item) => ({
+export const BUILTIN_RULES = RULES.sort((a, b) =>
+  a.pattern.localeCompare(b.pattern)
+).map((item) => ({
  ...DEFAULT_RULE,
  ...item,
  transOpen: "true",
--- a/src/libs/fetch.js
+++ b/src/libs/fetch.js
@@ -7,6 +7,7 @@ import {
  MSG_FETCH_CLEAR,
  CACHE_NAME,
  OPT_TRANS_MICROSOFT,
+  OPT_TRANS_DEEPL,
  OPT_TRANS_OPENAI,
  DEFAULT_FETCH_INTERVAL,
  DEFAULT_FETCH_LIMIT,
@@ -67,9 +68,11 @@ const newCacheReq = async (request) => {
 */
 const fetchApi = async ({ input, init = {}, translator, token }) => {
  if (translator === OPT_TRANS_MICROSOFT) {
-    init.headers["Authorization"] = `Bearer ${token}`;
+    init.headers["Authorization"] = `Bearer ${token}`; // Microsoft
+  } else 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["Authorization"] = `Bearer ${token}`; // OpenAI
    init.headers["api-key"] = token; // Azure OpenAI
  }

@@ -80,7 +83,9 @@ const fetchApi = async ({ input, init = {}, translator, token }) => {
    } else {
      info = GM.info;
    }
-    const connects = info?.script?.connects || [];
+    // 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) {
--- a/src/libs/gm.js
+++ b/src/libs/gm.js
@@ -1,20 +1,31 @@
 import { fetchGM } from "./fetch";
+import { genEventName } from "./utils";
+
+const MSG_GM_xmlHttpRequest = "xmlHttpRequest";
+const MSG_GM_setValue = "setValue";
+const MSG_GM_getValue = "getValue";
+const MSG_GM_deleteValue = "deleteValue";
+const MSG_GM_info = "info";

 /**
 * 注入页面的脚本，请求并接受GM接口信息
 * @param {*} param0
 */
 export const injectScript = (ping) => {
-  const MSG_GM_xmlHttpRequest = "xmlHttpRequest";
-  const MSG_GM_setValue = "setValue";
-  const MSG_GM_getValue = "getValue";
-  const MSG_GM_deleteValue = "deleteValue";
-  const MSG_GM_info = "info";
-  let GM_info;
+  window.APP_INFO = {
+    name: process.env.REACT_APP_NAME,
+    version: process.env.REACT_APP_VERSION,
+    eventName: ping,
+  };
+};

+/**
+ * 适配GM脚本
+ */
+export const adaptScript = (ping) => {
  const promiseGM = (action, args, timeout = 5000) =>
    new Promise((resolve, reject) => {
-      const pong = btoa(Math.random()).slice(3, 11);
+      const pong = genEventName();
      const handleEvent = (e) => {
        window.removeEventListener(pong, handleEvent);
        const { data, error } = e.detail;
@@ -41,14 +52,13 @@ export const injectScript = (ping) => {
    setValue: (key, val) => promiseGM(MSG_GM_setValue, { key, val }),
    getValue: (key) => promiseGM(MSG_GM_getValue, { key }),
    deleteValue: (key) => promiseGM(MSG_GM_deleteValue, { key }),
-    getInfo: () => {
-      if (GM_info) {
-        return GM_info;
+    getInfo: async () => {
+      if (!window.GM_info) {
+        window.GM_info = await promiseGM(MSG_GM_info);
      }
-      return promiseGM(MSG_GM_info);
+      return window.GM_info;
    },
  };
-  window.APP_NAME = process.env.REACT_APP_NAME;
 };

 /**
@@ -56,11 +66,6 @@ export const injectScript = (ping) => {
 * @param {*} param0
 */
 export const handlePing = async (e) => {
-  const MSG_GM_xmlHttpRequest = "xmlHttpRequest";
-  const MSG_GM_setValue = "setValue";
-  const MSG_GM_getValue = "getValue";
-  const MSG_GM_deleteValue = "deleteValue";
-  const MSG_GM_info = "info";
  const { action, args, pong } = e.detail;
  let res;
  try {
--- a/src/libs/translator.js
+++ b/src/libs/translator.js
@@ -3,7 +3,6 @@ import {
  APP_LCNAME,
  TRANS_MIN_LENGTH,
  TRANS_MAX_LENGTH,
-  EVENT_KISS,
  MSG_TRANS_CURRULE,
  OPT_STYLE_DASHLINE,
  OPT_STYLE_FUZZY,
@@ -11,7 +10,7 @@ import {
 } from "../config";
 import Content from "../views/Content";
 import { updateFetchPool, clearFetchPool } from "./fetch";
-import { debounce } from "./utils";
+import { debounce, genEventName } from "./utils";

 /**
 * 翻译类
@@ -37,6 +36,7 @@ export class Translator {
    "script",
    "iframe",
  ];
+  _eventName = genEventName();

  // 显示
  _interseObserver = new IntersectionObserver(
@@ -105,6 +105,10 @@ export class Translator {
    return this._setting;
  }

+  get eventName() {
+    return this._eventName;
+  }
+
  get rule() {
    // console.log("get rule", this._rule);
    return this._rule;
@@ -115,8 +119,9 @@ export class Translator {
    this._rule = rule;

    // 广播消息
+    const eventName = this._eventName;
    window.dispatchEvent(
-      new CustomEvent(EVENT_KISS, {
+      new CustomEvent(eventName, {
        detail: {
          action: MSG_TRANS_CURRULE,
          args: rule,
--- a/src/libs/utils.js
+++ b/src/libs/utils.js
@@ -116,3 +116,9 @@ export const sha256 = async (text, salt) => {
    .map((b) => b.toString(16).padStart(2, "0"))
    .join("");
 };
+
+/**
+ * 生成随机事件名称
+ * @returns
+ */
+export const genEventName = () => btoa(Math.random()).slice(3, 11);
--- a/src/userscript.js
+++ b/src/userscript.js
@@ -10,11 +10,11 @@ import {
 } from "./libs/storage";
 import { Translator } from "./libs/translator";
 import { trySyncAllSubRules } from "./libs/subRules";
-import { isGm } from "./libs/client";
 import { MSG_TRANS_TOGGLE, MSG_TRANS_PUTRULE } from "./config";
 import { isIframe } from "./libs/iframe";
 import { handlePing, injectScript } from "./libs/gm";
 import { matchRule } from "./libs/rules";
+import { genEventName } from "./libs/utils";

 /**
 * 入口函数
@@ -28,9 +28,12 @@ const init = async () => {
  ) {
    if (GM?.info?.script?.grant?.includes("unsafeWindow")) {
      unsafeWindow.GM = GM;
-      unsafeWindow.APP_NAME = process.env.REACT_APP_NAME;
+      unsafeWindow.APP_INFO = {
+        name: process.env.REACT_APP_NAME,
+        version: process.env.REACT_APP_VERSION,
+      };
    } else {
-      const ping = btoa(Math.random()).slice(3, 11);
+      const ping = genEventName();
      window.addEventListener(ping, handlePing);
      // window.eval(`(${injectScript})("${ping}")`); // eslint-disable-line
      const script = document.createElement("script");
@@ -88,28 +91,6 @@ const init = async () => {
    </React.StrictMode>
  );

-  // 注册菜单
-  if (isGm) {
-    try {
-      GM.registerMenuCommand(
-        "Toggle Translate",
-        (event) => {
-          translator.toggle();
-        },
-        "Q"
-      );
-      GM.registerMenuCommand(
-        "Toggle Style",
-        (event) => {
-          translator.toggleStyle();
-        },
-        "C"
-      );
-    } catch (err) {
-      console.log("[registerMenuCommand]", err);
-    }
-  }
-
  // 同步订阅规则
  trySyncAllSubRules(setting);
 };
--- a/src/views/Action/index.js
+++ b/src/views/Action/index.js
@@ -1,16 +1,15 @@
 import Paper from "@mui/material/Paper";
-import Box from "@mui/material/Box";
 import Fab from "@mui/material/Fab";
 import TranslateIcon from "@mui/icons-material/Translate";
 import ThemeProvider from "../../hooks/Theme";
 import Draggable from "./Draggable";
-import IconButton from "@mui/material/IconButton";
-import CloseIcon from "@mui/icons-material/Close";
-import Stack from "@mui/material/Stack";
 import { useEffect, useState, useMemo, useCallback } from "react";
 import { SettingProvider } from "../../hooks/Setting";
 import Popup from "../Popup";
 import { debounce } from "../../libs/utils";
+import * as shortcut from "@violentmonkey/shortcut";
+import { isGm } from "../../libs/client";
+import Header from "../Popup/Header";

 export default function Action({ translator, fab }) {
  const fabWidth = 40;
@@ -44,6 +43,73 @@ export default function Action({ translator, fab }) {
    setMoved(true);
  }, []);

+  useEffect(() => {
+    // 注册快捷键
+    shortcut.register("a-q", () => {
+      translator.toggle();
+      setShowPopup(false);
+    });
+    shortcut.register("a-c", () => {
+      translator.toggleStyle();
+      setShowPopup(false);
+    });
+    shortcut.register("a-k", () => {
+      setShowPopup((pre) => !pre);
+    });
+
+    return () => {
+      shortcut.disable();
+    };
+  }, [translator]);
+
+  useEffect(() => {
+    // 注册菜单
+    const menuCommandIds = [];
+    if (isGm) {
+      try {
+        menuCommandIds.push(
+          GM.registerMenuCommand(
+            "Toggle Translate",
+            (event) => {
+              translator.toggle();
+              setShowPopup(false);
+            },
+            "Q"
+          ),
+          GM.registerMenuCommand(
+            "Toggle Style",
+            (event) => {
+              translator.toggleStyle();
+              setShowPopup(false);
+            },
+            "C"
+          ),
+          GM.registerMenuCommand(
+            "Open Menu",
+            (event) => {
+              setShowPopup((pre) => !pre);
+            },
+            "K"
+          )
+        );
+      } catch (err) {
+        console.log("[registerMenuCommand]", err);
+      }
+    }
+
+    return () => {
+      if (isGm) {
+        try {
+          menuCommandIds.forEach((id) => {
+            GM.unregisterMenuCommand(id);
+          });
+        } catch (err) {
+          //
+        }
+      }
+    };
+  }, [translator]);
+
  useEffect(() => {
    window.addEventListener("resize", handleWindowResize);
    return () => {
@@ -53,6 +119,7 @@ export default function Action({ translator, fab }) {

  useEffect(() => {
    window.addEventListener("click", handleWindowClick);
+
    return () => {
      window.removeEventListener("click", handleWindowClick);
    };
@@ -91,23 +158,7 @@ export default function Action({ translator, fab }) {
          onMove={handleMove}
          handler={
            <Paper style={{ cursor: "move" }} elevation={3}>
-              <Stack
-                direction="row"
-                justifyContent="space-between"
-                alignItems="center"
-                spacing={2}
-              >
-                <Box style={{ marginLeft: 16 }}>
-                  {`${process.env.REACT_APP_NAME} v${process.env.REACT_APP_VERSION}`}
-                </Box>
-                <IconButton
-                  onClick={() => {
-                    setShowPopup(false);
-                  }}
-                >
-                  <CloseIcon />
-                </IconButton>
-              </Stack>
+              <Header setShowPopup={setShowPopup} />
            </Paper>
          }
        >
--- a/src/views/Content/index.js
+++ b/src/views/Content/index.js
@@ -9,7 +9,6 @@ import {
  OPT_STYLE_HIGHLIGHT,
  OPT_STYLE_DIY,
  DEFAULT_COLOR,
-  EVENT_KISS,
  MSG_TRANS_CURRULE,
  TRANS_NEWLINE_LENGTH,
 } from "../../config";
@@ -18,6 +17,7 @@ import styled from "styled-components";

 const LineSpan = styled.span`
  opacity: 0.6;
+  -webkit-opacity: 0.6;
  text-decoration-line: underline;
  text-decoration-style: ${(props) => props.$lineStyle};
  text-decoration-color: ${(props) => props.$lineColor};
@@ -30,23 +30,22 @@ const LineSpan = styled.span`
  -webkit-text-underline-offset: 0.3em;
  &:hover {
    opacity: 1;
+    -webkit-opacity: 1;
  }
 `;

 const FuzzySpan = styled.span`
  filter: blur(5px);
-  transition: filter 0.2s ease-in-out;
-  &hover: {
+  -webkit-filter: blur(5px);
+  &:hover {
    filter: none;
+    -webkit-filter: none;
  }
 `;

 const HighlightSpan = styled.span`
  color: #fff;
  background-color: ${(props) => props.$bgColor};
-  &hover: {
-    filter: none;
-  }
 `;

 const DiySpan = styled.span`
@@ -112,11 +111,11 @@ export default function Content({ q, translator }) {
  };

  useEffect(() => {
-    window.addEventListener(EVENT_KISS, handleKissEvent);
+    window.addEventListener(translator.eventName, handleKissEvent);
    return () => {
-      window.removeEventListener(EVENT_KISS, handleKissEvent);
+      window.removeEventListener(translator.eventName, handleKissEvent);
    };
-  }, []);
+  }, [translator.eventName]);

  if (loading) {
    return (
--- a/src/views/Options/DarkModeButton.js
+++ b/src/views/Options/DarkModeButton.js
@@ -0,0 +1,13 @@
+import IconButton from "@mui/material/IconButton";
+import { useDarkMode } from "../../hooks/ColorMode";
+import LightModeIcon from "@mui/icons-material/LightMode";
+import DarkModeIcon from "@mui/icons-material/DarkMode";
+
+export default function DarkModeButton() {
+  const { darkMode, toggleDarkMode } = useDarkMode();
+  return (
+    <IconButton onClick={toggleDarkMode} color="inherit">
+      {darkMode ? <LightModeIcon /> : <DarkModeIcon />}
+    </IconButton>
+  );
+}
--- a/src/views/Options/Header.js
+++ b/src/views/Options/Header.js
@@ -4,16 +4,13 @@ import IconButton from "@mui/material/IconButton";
 import MenuIcon from "@mui/icons-material/Menu";
 import Toolbar from "@mui/material/Toolbar";
 import Box from "@mui/material/Box";
-import { useDarkMode } from "../../hooks/ColorMode";
-import LightModeIcon from "@mui/icons-material/LightMode";
-import DarkModeIcon from "@mui/icons-material/DarkMode";
 import Link from "@mui/material/Link";
 import { useI18n } from "../../hooks/I18n";
+import DarkModeButton from "./DarkModeButton";

 function Header(props) {
  const i18n = useI18n();
  const { onDrawerToggle } = props;
-  const { darkMode, toggleDarkMode } = useDarkMode();

  return (
    <AppBar
@@ -39,11 +36,10 @@ function Header(props) {
            underline="none"
            color="inherit"
            href={process.env.REACT_APP_HOMEPAGE}
+            target="_blank"
          >{`${i18n("app_name")} v${process.env.REACT_APP_VERSION}`}</Link>
        </Box>
-        <IconButton onClick={toggleDarkMode} color="inherit">
-          {darkMode ? <LightModeIcon /> : <DarkModeIcon />}
-        </IconButton>
+        <DarkModeButton />
      </Toolbar>
    </AppBar>
  );
--- a/src/views/Options/Rules.js
+++ b/src/views/Options/Rules.js
@@ -13,6 +13,7 @@ import {
  OPT_STYLE_ALL,
  OPT_STYLE_DIY,
  OPT_STYLE_USE_COLOR,
+  URL_KISS_RULES_NEW_ISSUE,
 } from "../../config";
 import { useState, useRef, useEffect, useMemo } from "react";
 import { useI18n } from "../../hooks/I18n";
@@ -35,6 +36,7 @@ import Radio from "@mui/material/Radio";
 import RadioGroup from "@mui/material/RadioGroup";
 import DeleteIcon from "@mui/icons-material/Delete";
 import IconButton from "@mui/material/IconButton";
+import HelpIcon from "@mui/icons-material/Help";
 import ShareIcon from "@mui/icons-material/Share";
 import SyncIcon from "@mui/icons-material/Sync";
 import { useSubRules } from "../../hooks/SubRules";
@@ -470,7 +472,23 @@ function ShareButton({ rules, injectRules, selectedUrl }) {
      onClick={handleClick}
      startIcon={<ShareIcon />}
    >
-      {"分享"}
+      {i18n("share")}
+    </Button>
+  );
+}
+
+function HelpButton() {
+  const i18n = useI18n();
+  return (
+    <Button
+      size="small"
+      variant="outlined"
+      onClick={() => {
+        window.open(URL_KISS_RULES_NEW_ISSUE, "_blank");
+      }}
+      startIcon={<HelpIcon />}
+    >
+      {i18n("help")}
    </Button>
  );
 }
@@ -552,6 +570,8 @@ function UserRules({ subRules }) {
          selectedUrl={selectedUrl}
        />

+        <HelpButton />
+
        <FormControlLabel
          control={
            <Switch
@@ -715,6 +735,7 @@ function SubRulesEdit({ subList, addSub }) {
        >
          {i18n("add")}
        </Button>
+        <HelpButton />
      </Stack>

      {showInput && (
--- a/src/views/Options/Setting.js
+++ b/src/views/Options/Setting.js
@@ -6,14 +6,64 @@ import MenuItem from "@mui/material/MenuItem";
 import FormControl from "@mui/material/FormControl";
 import Select from "@mui/material/Select";
 import Link from "@mui/material/Link";
+import FormHelperText from "@mui/material/FormHelperText";
 import { useSetting } from "../../hooks/Setting";
 import { limitNumber } from "../../libs/utils";
 import { useI18n } from "../../hooks/I18n";
-import { UI_LANGS, URL_KISS_PROXY, TRANS_NEWLINE_LENGTH } from "../../config";
+import { apiTranslate } from "../../apis";
+import { useAlert } from "../../hooks/Alert";
+import CircularProgress from "@mui/material/CircularProgress";
+import {
+  UI_LANGS,
+  URL_KISS_PROXY,
+  TRANS_NEWLINE_LENGTH,
+  CACHE_NAME,
+  OPT_TRANS_GOOGLE,
+  OPT_TRANS_DEEPL,
+  OPT_TRANS_OPENAI,
+} from "../../config";
+import { useState } from "react";
+
+function TestLink({ translator, setting }) {
+  const i18n = useI18n();
+  const alert = useAlert();
+  const [loading, setLoading] = useState(false);
+  const handleApiTest = async () => {
+    try {
+      setLoading(true);
+      const [text] = await apiTranslate({
+        translator,
+        q: "hello world",
+        fromLang: "en",
+        toLang: "zh-CN",
+        setting,
+      });
+      if (!text) {
+        throw new Error("empty reault");
+      }
+      alert.success(i18n("test_success"));
+    } catch (err) {
+      alert.error(`${i18n("test_failed")}: ${err.message}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (loading) {
+    return <CircularProgress sx={{ marginLeft: "2em" }} size={12} />;
+  }
+
+  return (
+    <Link sx={{ marginLeft: "1em" }} component="button" onClick={handleApiTest}>
+      {i18n("click_test")}
+    </Link>
+  );
+}

 export default function Settings() {
  const i18n = useI18n();
  const { setting, updateSetting } = useSetting();
+  const alert = useAlert();

  const handleChange = (e) => {
    e.preventDefault();
@@ -41,6 +91,15 @@ export default function Settings() {
    });
  };

+  const handleClearCache = () => {
+    try {
+      caches.delete(CACHE_NAME);
+      alert.success(i18n("clear_success"));
+    } catch (err) {
+      console.log("[clear cache]", err);
+    }
+  };
+
  const {
    uiLang,
    googleUrl,
@@ -49,6 +108,8 @@ export default function Settings() {
    minLength,
    maxLength,
    openaiUrl,
+    deeplUrl = "",
+    deeplKey = "",
    openaiKey,
    openaiModel,
    openaiPrompt,
@@ -121,37 +182,83 @@ export default function Settings() {
        />

        <FormControl size="small">
-          <InputLabel>{i18n("clear_cache")}</InputLabel>
+          <InputLabel>{i18n("if_clear_cache")}</InputLabel>
          <Select
            name="clearCache"
            value={clearCache}
-            label={i18n("clear_cache")}
+            label={i18n("if_clear_cache")}
            onChange={handleChange}
          >
            <MenuItem value={false}>{i18n("clear_cache_never")}</MenuItem>
            <MenuItem value={true}>{i18n("clear_cache_restart")}</MenuItem>
          </Select>
+          <FormHelperText>
+            <Link component="button" onClick={handleClearCache}>
+              {i18n("clear_all_cache_now")}
+            </Link>
+          </FormHelperText>
        </FormControl>

        <TextField
          size="small"
-          label={i18n("google_api")}
+          label={
+            <>
+              {i18n("google_api")}
+              {googleUrl && (
+                <TestLink translator={OPT_TRANS_GOOGLE} setting={setting} />
+              )}
+            </>
+          }
          name="googleUrl"
          value={googleUrl}
          onChange={handleChange}
          helperText={
-            <Link href={URL_KISS_PROXY}>{i18n("about_api_proxy")}</Link>
+            <Link href={URL_KISS_PROXY} target="_blank">
+              {i18n("about_api_proxy")}
+            </Link>
          }
        />

        <TextField
          size="small"
-          label={i18n("openai_api")}
+          label={
+            <>
+              {i18n("deepl_api")}
+              {deeplUrl && (
+                <TestLink translator={OPT_TRANS_DEEPL} setting={setting} />
+              )}
+            </>
+          }
+          name="deeplUrl"
+          value={deeplUrl}
+          onChange={handleChange}
+        />
+
+        <TextField
+          size="small"
+          label={i18n("deepl_key")}
+          name="deeplKey"
+          value={deeplKey}
+          onChange={handleChange}
+        />
+
+        <TextField
+          size="small"
+          label={
+            <>
+              {i18n("openai_api")}
+              {openaiUrl && openaiPrompt && (
+                <TestLink translator={OPT_TRANS_OPENAI} setting={setting} />
+              )}
+            </>
+          }
          name="openaiUrl"
          value={openaiUrl}
          onChange={handleChange}
          helperText={
-            <Link href={URL_KISS_PROXY}>{i18n("about_api_proxy")}</Link>
+            <Link href={URL_KISS_PROXY} target="_blank">
+              {i18n("about_api_proxy")}
+            </Link>
          }
        />

--- a/src/views/Options/SyncSetting.js
+++ b/src/views/Options/SyncSetting.js
@@ -35,10 +35,10 @@ export default function SyncSetting() {
      setLoading(true);
      await syncSettingAndRules();
      await reloadSetting();
-      alert.success(i18n("data_sync_success"));
+      alert.success(i18n("sync_success"));
    } catch (err) {
      console.log("[sync all]", err);
-      alert.error(i18n("data_sync_error"));
+      alert.error(i18n("sync_failed"));
    } finally {
      setLoading(false);
    }
@@ -58,7 +58,9 @@ export default function SyncSetting() {
          value={syncUrl}
          onChange={handleChange}
          helperText={
-            <Link href={URL_KISS_WORKER}>{i18n("about_sync_api")}</Link>
+            <Link href={URL_KISS_WORKER} target="_blank">
+              {i18n("about_sync_api")}
+            </Link>
          }
        />

--- a/src/views/Options/index.js
+++ b/src/views/Options/index.js
@@ -15,9 +15,11 @@ import { AlertProvider } from "../../hooks/Alert";
 import Link from "@mui/material/Link";
 import Divider from "@mui/material/Divider";
 import Stack from "@mui/material/Stack";
+import { adaptScript } from "../../libs/gm";
+import Alert from "@mui/material/Alert";

 export default function Options() {
-  const [error, setError] = useState(false);
+  const [error, setError] = useState("");
  const [ready, setReady] = useState(false);

  useEffect(() => {
@@ -26,7 +28,22 @@ export default function Options() {
        // 等待GM注入
        let i = 0;
        for (;;) {
-          if (window.APP_NAME === process.env.REACT_APP_NAME) {
+          if (window?.APP_INFO?.name === process.env.REACT_APP_NAME) {
+            const { version, eventName } = window.APP_INFO;
+
+            // 检查版本是否一致
+            if (version !== process.env.REACT_APP_VERSION) {
+              setError(
+                `The version of the script(v${version}) and this page(v${process.env.REACT_APP_VERSION}) are inconsistent.`
+              );
+              break;
+            }
+
+            if (eventName) {
+              // 注入GM接口
+              adaptScript(eventName);
+            }
+
            // 同步数据
            await trySyncSettingAndRules();
            setReady(true);
@@ -34,7 +51,7 @@ export default function Options() {
          }

          if (++i > 8) {
-            setError(true);
+            setError("Time out.");
            break;
          }

@@ -51,6 +68,7 @@ export default function Options() {
  if (error) {
    return (
      <center>
+        <Alert severity="error">{error}</Alert>
        <Divider>
          <Link
            href={process.env.REACT_APP_HOMEPAGE}
--- a/src/views/Popup/Header.js
+++ b/src/views/Popup/Header.js
@@ -0,0 +1,42 @@
+import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
+import CloseIcon from "@mui/icons-material/Close";
+import HomeIcon from "@mui/icons-material/Home";
+import Stack from "@mui/material/Stack";
+import DarkModeButton from "../Options/DarkModeButton";
+
+export default function Header({ setShowPopup }) {
+  const handleHomepage = () => {
+    window.open(process.env.REACT_APP_HOMEPAGE, "_blank");
+  };
+
+  return (
+    <Stack
+      direction="row"
+      justifyContent="space-between"
+      alignItems="center"
+      spacing={2}
+    >
+      <Stack direction="row" justifyContent="flex-start" alignItems="center">
+        <IconButton onClick={handleHomepage}>
+          <HomeIcon />
+        </IconButton>
+        <Box>
+          {`${process.env.REACT_APP_NAME} v${process.env.REACT_APP_VERSION}`}
+        </Box>
+      </Stack>
+
+      {setShowPopup ? (
+        <IconButton
+          onClick={() => {
+            setShowPopup(false);
+          }}
+        >
+          <CloseIcon />
+        </IconButton>
+      ) : (
+        <DarkModeButton />
+      )}
+    </Stack>
+  );
+}
--- a/src/views/Popup/index.js
+++ b/src/views/Popup/index.js
@@ -10,6 +10,8 @@ import { browser } from "../../libs/browser";
 import { isExt } from "../../libs/client";
 import { useI18n } from "../../hooks/I18n";
 import TextField from "@mui/material/TextField";
+import Divider from "@mui/material/Divider";
+import Header from "./Header";
 import {
  MSG_TRANS_TOGGLE,
  MSG_TRANS_GETRULE,
@@ -19,6 +21,7 @@ import {
  OPT_LANGS_TO,
  OPT_STYLE_ALL,
  OPT_STYLE_USE_COLOR,
+  CACHE_NAME,
 } from "../../config";
 import { sendIframeMsg } from "../../libs/iframe";

@@ -66,6 +69,14 @@ export default function Popup({ setShowPopup, translator: tran }) {
    }
  };

+  const handleClearCache = () => {
+    try {
+      caches.delete(CACHE_NAME);
+    } catch (err) {
+      console.log("[clear cache]", err);
+    }
+  };
+
  useEffect(() => {
    if (!isExt) {
      return;
@@ -84,8 +95,14 @@ export default function Popup({ setShowPopup, translator: tran }) {

  if (!rule) {
    return (
-      <Box minWidth={300} sx={{ p: 2 }}>
-        <Stack spacing={3}>
+      <Box minWidth={300}>
+        {isExt && (
+          <>
+            <Header />
+            <Divider />
+          </>
+        )}
+        <Stack sx={{ p: 2 }} spacing={3}>
          <Button variant="text" onClick={handleOpenSetting}>
            {i18n("setting")}
          </Button>
@@ -97,8 +114,20 @@ export default function Popup({ setShowPopup, translator: tran }) {
  const { transOpen, translator, fromLang, toLang, textStyle, bgColor } = rule;

  return (
-    <Box minWidth={300} sx={{ p: 2 }}>
-      <Stack spacing={2}>
+    <Box minWidth={300}>
+      {isExt && (
+        <>
+          <Header />
+          <Divider />
+        </>
+      )}
+      <Stack sx={{ p: 2 }} spacing={2}>
+        <Stack
+          direction="row"
+          justifyContent="space-between"
+          alignItems="center"
+          spacing={2}
+        >
          <FormControlLabel
            control={
              <Switch
@@ -108,6 +137,12 @@ export default function Popup({ setShowPopup, translator: tran }) {
            }
            label={i18n("translate_alt")}
          />
+          {!isExt && (
+            <Button variant="text" onClick={handleClearCache}>
+              {i18n("clear_cache")}
+            </Button>
+          )}
+        </Stack>

        <TextField
          select
--- a/yarn.lock
+++ b/yarn.lock
@@ -1663,7 +1663,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.22.10, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7":
+"@babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.1, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.22.10, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7":
  version: 7.22.11
  resolution: "@babel/runtime@npm:7.22.11"
  dependencies:
@@ -3841,6 +3841,15 @@ __metadata:
  languageName: node
  linkType: hard

+"@violentmonkey/shortcut@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "@violentmonkey/shortcut@npm:1.3.0"
+  dependencies:
+    "@babel/runtime": ^7.20.1
+  checksum: 5c839c0193014ff29d000337c8cb03f950e5386379a5cc7c845b9e4c566126dc1cfc431b71bc591e30ce7b8a5e82c2fc38396d52b705352252eb0376a7d18fd3
+  languageName: node
+  linkType: hard
+
 "@webassemblyjs/ast@npm:1.11.6, @webassemblyjs/ast@npm:^1.11.5":
  version: 1.11.6
  resolution: "@webassemblyjs/ast@npm:1.11.6"
@@ -9516,6 +9525,7 @@ __metadata:
    "@emotion/styled": ^11.10.8
    "@mui/icons-material": ^5.11.11
    "@mui/material": ^5.11.12
+    "@violentmonkey/shortcut": ^1.3.0
    query-string: ^8.1.0
    react: ^18.2.0
    react-app-rewired: ^2.2.1
Author	SHA1	Message	Date
Gabe Yuan	c6f8a45027	v1.6.7	2023-09-04 23:28:41 +08:00
Gabe Yuan	6ec16e1f98	fix popup header	2023-09-04 23:24:50 +08:00
Gabe Yuan	40adf85b20	fix help link	2023-09-04 23:12:35 +08:00
Gabe Yuan	4c78f469c1	update readme	2023-09-04 23:08:00 +08:00
Gabe Yuan	55af58faac	add rules help button	2023-09-04 22:29:39 +08:00
Gabe Yuan	4200caa641	fix popup header	2023-09-04 22:03:17 +08:00
Gabe Yuan	0ac06f8e3d	use new rules link	2023-09-04 17:04:28 +08:00
Gabe Yuan	966c78fb16	optimize test link	2023-09-03 22:18:33 +08:00
Gabe Yuan	5c5a35d3bb	v1.6.6	2023-09-03 21:47:38 +08:00
Gabe Yuan	2c24214f48	fix Violentmonkey --> .connect	2023-09-03 21:45:06 +08:00
Gabe Yuan	67d9e70b3c	v1,6,5	2023-09-03 21:10:35 +08:00
Gabe Yuan	000a55f43b	modify content.html	2023-09-03 21:08:45 +08:00
Gabe Yuan	4096a6976c	add clear cache & api test button	2023-09-03 13:11:04 +08:00
Gabe Yuan	df4c4ebd50	fix i18n text	2023-09-03 00:26:57 +08:00
Gabe Yuan	b43bd4e0e2	add deepl @connect	2023-09-03 00:10:07 +08:00
Gabe Yuan	2660dbf866	update readme	2023-09-02 23:45:40 +08:00
Gabe Yuan	e0b7c60099	v1.6.4	2023-09-02 20:07:24 +08:00
Gabe Yuan	536b58bf67	fix fuzzy style hover bug	2023-09-02 19:55:26 +08:00
Gabe Yuan	6bb742f828	v1.6.3	2023-09-02 19:16:14 +08:00
Gabe Yuan	72742e5e12	fix build:script	2023-09-02 19:09:12 +08:00
Gabe Yuan	3667e0a509	update readme	2023-09-02 18:14:42 +08:00
Gabe Yuan	c2d7668ba7	v1.6.2	2023-09-02 17:26:37 +08:00
Gabe Yuan	aa830f5e20	update readme	2023-09-02 17:22:35 +08:00
Gabe Yuan	b593fa4146	add deepl api	2023-09-02 16:57:09 +08:00
Gabe Yuan	b00b906484	optimize inject script	2023-09-02 15:54:51 +08:00
Gabe Yuan	c1bd6a1be6	use random eventname	2023-09-02 14:14:27 +08:00
Gabe Yuan	36739f04b3	add more shortcut	2023-09-02 13:14:27 +08:00
Gabe Yuan	23eb92853e	register a shortcut for userscript	2023-09-02 00:42:15 +08:00