v1.6.6

.env

@@ -2,7 +2,7 @@ GENERATE_SOURCEMAP=false
 
 REACT_APP_NAME=KISS Translator
 REACT_APP_NAME_CN=简约翻译
-REACT_APP_VERSION=1.6.2
+REACT_APP_VERSION=1.6.6
 
 REACT_APP_HOMEPAGE=https://github.com/fishjar/kiss-translator
 

README.en.md

@@ -18,6 +18,12 @@ If you also like a little more simplicity, welcome to pick it up.
 
 - Keep it simple, smart
 
+## Shortcut keys
+
+- `Alt+Q` Toggle Translation
+- `Alt+C` Toggle Styles
+- `Alt+K` Open Menu
+
 ## Schedule
 
 - [x] Provide trial installation package
@@ -30,8 +36,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)

README.md

@@ -18,6 +18,12 @@
 
 - 保持简约
 
+## 快捷键
+
+- `Alt+Q` 开启翻译
+- `Alt+C` 切换样式
+- `Alt+K` 打开菜单
+
 ## 进度
 
 - [x] 提供试用安装包
@@ -30,8 +36,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)

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.2",
+  "version": "1.6.6",
   "author": "Gabe<yugang2002@gmail.com>",
   "private": true,
   "dependencies": {
@@ -26,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"

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.2",
+  "version": "1.6.6",
   "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.2",
+  "version": "1.6.6",
   "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,32 @@ 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`,
+  },
 };

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/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/Setting.js

@@ -6,14 +6,26 @@ 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 {
+  UI_LANGS,
+  URL_KISS_PROXY,
+  TRANS_NEWLINE_LENGTH,
+  CACHE_NAME,
+  OPT_TRANS_GOOGLE,
+  OPT_TRANS_DEEPL,
+  OPT_TRANS_OPENAI,
+} from "../../config";
 
 export default function Settings() {
   const i18n = useI18n();
   const { setting, updateSetting } = useSetting();
+  const alert = useAlert();
 
   const handleChange = (e) => {
     e.preventDefault();
@@ -41,6 +53,33 @@ export default function Settings() {
     });
   };
 
+  const handleClearCache = () => {
+    try {
+      caches.delete(CACHE_NAME);
+      alert.success(i18n("clear_success"));
+    } catch (err) {
+      console.log("[clear cache]", err);
+    }
+  };
+
+  const handleApiTest = async (translator) => {
+    try {
+      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}`);
+    }
+  };
+
   const {
     uiLang,
     googleUrl,
@@ -123,21 +162,41 @@ 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 && (
+                <Link
+                  sx={{ marginLeft: "1em" }}
+                  component="button"
+                  onClick={() => {
+                    handleApiTest(OPT_TRANS_GOOGLE);
+                  }}
+                >
+                  {i18n("click_test")}
+                </Link>
+              )}
+            </>
+          }
           name="googleUrl"
           value={googleUrl}
           onChange={handleChange}
@@ -148,7 +207,22 @@ export default function Settings() {
 
         <TextField
           size="small"
-          label={i18n("deepl_api")}
+          label={
+            <>
+              {i18n("deepl_api")}
+              {deeplUrl && (
+                <Link
+                  sx={{ marginLeft: "1em" }}
+                  component="button"
+                  onClick={() => {
+                    handleApiTest(OPT_TRANS_DEEPL);
+                  }}
+                >
+                  {i18n("click_test")}
+                </Link>
+              )}
+            </>
+          }
           name="deeplUrl"
           value={deeplUrl}
           onChange={handleChange}
@@ -164,7 +238,22 @@ export default function Settings() {
 
         <TextField
           size="small"
-          label={i18n("openai_api")}
+          label={
+            <>
+              {i18n("openai_api")}
+              {openaiUrl && openaiPrompt && (
+                <Link
+                  sx={{ marginLeft: "1em" }}
+                  component="button"
+                  onClick={() => {
+                    handleApiTest(OPT_TRANS_OPENAI);
+                  }}
+                >
+                  {i18n("click_test")}
+                </Link>
+              )}
+            </>
+          }
           name="openaiUrl"
           value={openaiUrl}
           onChange={handleChange}

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

src/views/Popup/index.js

@@ -19,6 +19,7 @@ import {
   OPT_LANGS_TO,
   OPT_STYLE_ALL,
   OPT_STYLE_USE_COLOR,
+  CACHE_NAME,
 } from "../../config";
 import { sendIframeMsg } from "../../libs/iframe";
 
@@ -66,6 +67,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;
@@ -99,15 +108,27 @@ export default function Popup({ setShowPopup, translator: tran }) {
   return (
     <Box minWidth={300} sx={{ p: 2 }}>
       <Stack spacing={2}>
-        <FormControlLabel
-          control={
-            <Switch
-              checked={transOpen === "true"}
-              onChange={handleTransToggle}
-            />
-          }
-          label={i18n("translate_alt")}
-        />
+        <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