v1.6.7

.env

@@ -2,7 +2,7 @@ GENERATE_SOURCEMAP=false
 
 REACT_APP_NAME=KISS Translator
 REACT_APP_NAME_CN=简约翻译
-REACT_APP_VERSION=1.6.3
+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

README.en.md

@@ -18,6 +18,34 @@ If you also like a little more simplicity, welcome to pick it up.
 
 - Keep it simple, smart
 
+## 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
@@ -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] OpenAI
   - [x] DeepL
+  - [x] OpenAI
 - [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)
@@ -54,10 +82,6 @@ yarn install
 yarn build
 ```
 
-## Data Sync
-
-Goto: [https://github.com/fishjar/kiss-worker](https://github.com/fishjar/kiss-worker)
-
 ## Discussion
 
 - Join [Telegram Group](https://t.me/+RRCu_4oNwrM2NmFl)

README.md

@@ -18,6 +18,34 @@
 
 - 保持简约
 
+## 关联项目
+
+- 数据同步服务: [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] 提供试用安装包
@@ -30,8 +58,8 @@
 - [x] 支持翻译服务
   - [x] Google
   - [x] Microsoft
-  - [x] OpenAI
   - [x] DeepL
+  - [x] OpenAI
 - [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)
@@ -54,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)

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

package.json

@@ -1,7 +1,7 @@
 {
   "name": "kiss-translator",
   "description": "A minimalist bilingual translation Extension & Greasemonkey Script",
-  "version": "1.6.3",
+  "version": "1.6.7",
   "author": "Gabe<yugang2002@gmail.com>",
   "private": true,
   "dependencies": {

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>

public/manifest.firefox.json

@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "__MSG_app_name__",
   "description": "__MSG_app_description__",
-  "version": "1.6.3",
+  "version": "1.6.7",
   "default_locale": "en",
   "author": "Gabe<yugang2002@gmail.com>",
   "homepage_url": "https://github.com/fishjar/kiss-translator",

public/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "__MSG_app_name__",
   "description": "__MSG_app_description__",
-  "version": "1.6.3",
+  "version": "1.6.7",
   "default_locale": "en",
   "author": "Gabe<yugang2002@gmail.com>",
   "homepage_url": "https://github.com/fishjar/kiss-translator",

src/config/i18n.js

@@ -284,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: `不清除缓存`,
@@ -308,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: `抱歉，出错了！`,
@@ -324,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`,
+  },
 };

src/config/index.js

@@ -58,6 +58,9 @@ 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";
@@ -183,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,
   },
 ];

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

src/libs/fetch.js

@@ -83,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) {

src/views/Action/index.js

@@ -1,18 +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;
@@ -161,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>
           }
         >

src/views/Content/index.js

@@ -17,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};
@@ -29,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`

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

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

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

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,
@@ -123,32 +182,53 @@ 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("deepl_api")}
+          label={
+            <>
+              {i18n("deepl_api")}
+              {deeplUrl && (
+                <TestLink translator={OPT_TRANS_DEEPL} setting={setting} />
+              )}
+            </>
+          }
           name="deeplUrl"
           value={deeplUrl}
           onChange={handleChange}
@@ -164,12 +244,21 @@ export default function Settings() {
 
         <TextField
           size="small"
-          label={i18n("openai_api")}
+          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>
           }
         />
 

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>
           }
         />
 

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

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,17 +114,35 @@ 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}>
-        <FormControlLabel
-          control={
-            <Switch
-              checked={transOpen === "true"}
-              onChange={handleTransToggle}
-            />
-          }
-          label={i18n("translate_alt")}
-        />
+    <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
+                checked={transOpen === "true"}
+                onChange={handleTransToggle}
+              />
+            }
+            label={i18n("translate_alt")}
+          />
+          {!isExt && (
+            <Button variant="text" onClick={handleClearCache}>
+              {i18n("clear_cache")}
+            </Button>
+          )}
+        </Stack>
 
         <TextField
           select