v1.8.6

.env

@@ -2,26 +2,18 @@ GENERATE_SOURCEMAP=false
 
 REACT_APP_NAME=KISS Translator
 REACT_APP_NAME_CN=简约翻译
-REACT_APP_VERSION=1.8.4
+REACT_APP_VERSION=1.8.6
 
 REACT_APP_HOMEPAGE=https://github.com/fishjar/kiss-translator
 
 REACT_APP_OPTIONSPAGE=https://fishjar.github.io/kiss-translator/options.html
-REACT_APP_OPTIONSPAGE2=https://kiss-translator.rayjar.com/options
 REACT_APP_OPTIONSPAGE_DEV=http://localhost:3000/options.html
 
 REACT_APP_LOGOURL=https://fishjar.github.io/kiss-translator/images/logo192.png
-REACT_APP_LOGOURL2=https://kiss-translator.rayjar.com/images/logo192.png
 
 REACT_APP_RULESURL=https://fishjar.github.io/kiss-rules/kiss-rules.json
 REACT_APP_RULESURL_ON=https://fishjar.github.io/kiss-rules/kiss-rules-on.json
 REACT_APP_RULESURL_OFF=https://fishjar.github.io/kiss-rules/kiss-rules-off.json
 
-REACT_APP_VERSIONFILE=https://fishjar.github.io/kiss-translator/version.txt
-REACT_APP_VERSIONFILE2=https://kiss-translator.rayjar.com/version.txt
-
 REACT_APP_USERSCRIPT_DOWNLOADURL=https://fishjar.github.io/kiss-translator/kiss-translator.user.js
-REACT_APP_USERSCRIPT_DOWNLOADURL2=https://kiss-translator.rayjar.com/kiss-translator.user.js
-
 REACT_APP_USERSCRIPT_IOS_DOWNLOADURL=https://fishjar.github.io/kiss-translator/kiss-translator-ios-safari.user.js
-REACT_APP_USERSCRIPT_IOS_DOWNLOADURL2=https://kiss-translator.rayjar.com/kiss-translator-ios-safari.user.js

README.en.md

@@ -9,7 +9,7 @@ A simple, open source [bilingual translation extension & Greasemonkey script](ht
 - [x] Keep it simple, smart
 - [x] Open source
 - [x] Adapt to common browsers
-  - [x] Chrome/Edge/Firefox/Kiwi
+  - [x] Chrome/Edge/Firefox/Kiwi/Orion
   - [ ] Safari
 - [x] Supports multiple translation services
   - [x] Google/Microsoft/DeepL/OpenAI/Gemini/CloudflareAI/Baidu/Tencent
@@ -44,13 +44,15 @@ A simple, open source [bilingual translation extension & Greasemonkey script](ht
 > - Grease Monkey script will encounter more usage problems (cross domain issues, script conflicts, etc.)
 
 - [x] Browser extension
-  - [x] Chrome/Kiwi [Installation address](https://chrome.google.com/webstore/detail/kiss-translator/bdiifdefkgmcblbcghdlonllpjhhjgof?hl=zh-CN)
+  - [x] Chrome [Installation address](https://chrome.google.com/webstore/detail/kiss-translator/bdiifdefkgmcblbcghdlonllpjhhjgof?hl=zh-CN)
+    - [x] Kiwi (Android)
+    - [x] Orion (iOS)
   - [x] Edge [Installation address](https://microsoftedge.microsoft.com/addons/detail/%E7%AE%80%E7%BA%A6%E7%BF%BB%E8%AF%91/jemckldkclkinpjighnoilpbldbdmmlh?hl=zh-CN)
   - [x] Firefox [Installation address](https://addons.mozilla.org/zh-CN/firefox/addon/kiss-translator/)
   - [ ] Safari
 - [x] GreaseMonkey Script
   - [x] Chrome/Edge/Firefox ([Tampermonkey](https://www.tampermonkey.net/)/[Violentmonkey](https://violentmonkey.github.io/)) [Installation link](https://fishjar.github.io/kiss-translator/kiss-translator.user.js)
-    - Greasy Fork [Installation address](https://greasyfork.org/zh-CN/scripts/472840-kiss-translator)
+    - [Greasy Fork](https://greasyfork.org/zh-CN/scripts/472840-kiss-translator)
   - [x] iOS Safari ([Userscripts Safari](https://github.com/quoid/userscripts)) [Installation link](https://fishjar.github.io/kiss-translator/kiss-translator-ios-safari.user.js)
 
 ## Associated Projects

README.md

@@ -9,7 +9,7 @@
 - [x] 保持简约
 - [x] 开放源代码
 - [x] 适配常见浏览器
-  - [x] Chrome/Edge/Firefox/Kiwi
+  - [x] Chrome/Edge/Firefox/Kiwi/Orion
   - [ ] Safari
 - [x] 支持多种翻译服务
   - [x] Google/Microsoft/DeepL/OpenAI/Gemini/CloudflareAI/Baidu/Tencent
@@ -44,13 +44,15 @@
 > - 油猴脚本会遇到更多使用上的问题（跨域问题、脚本冲突等）
 
 - [x] 浏览器扩展
-  - [x] Chrome/Kiwi [安装地址](https://chrome.google.com/webstore/detail/kiss-translator/bdiifdefkgmcblbcghdlonllpjhhjgof?hl=zh-CN)
+  - [x] Chrome [安装地址](https://chrome.google.com/webstore/detail/kiss-translator/bdiifdefkgmcblbcghdlonllpjhhjgof?hl=zh-CN)
+    - [x] Kiwi (Android)
+    - [x] Orion (iOS)
   - [x] Edge [安装地址](https://microsoftedge.microsoft.com/addons/detail/%E7%AE%80%E7%BA%A6%E7%BF%BB%E8%AF%91/jemckldkclkinpjighnoilpbldbdmmlh?hl=zh-CN)
   - [x] Firefox [安装地址](https://addons.mozilla.org/zh-CN/firefox/addon/kiss-translator/)
   - [ ] Safari
 - [x] 油猴脚本
   - [x] Chrome/Edge/Firefox ([Tampermonkey](https://www.tampermonkey.net/)/[Violentmonkey](https://violentmonkey.github.io/)) [安装链接](https://fishjar.github.io/kiss-translator/kiss-translator.user.js)
-    - Greasy Fork [安装地址](https://greasyfork.org/zh-CN/scripts/472840-kiss-translator)
+    - [Greasy Fork](https://greasyfork.org/zh-CN/scripts/472840-kiss-translator)
   - [x] iOS Safari ([Userscripts Safari](https://github.com/quoid/userscripts)) [安装链接](https://fishjar.github.io/kiss-translator/kiss-translator-ios-safari.user.js)
 
 ## 关联项目

package.json

@@ -1,20 +1,20 @@
 {
   "name": "kiss-translator",
   "description": "A minimalist bilingual translation Extension & Greasemonkey Script",
-  "version": "1.8.4",
+  "version": "1.8.6",
   "author": "Gabe<yugang2002@gmail.com>",
   "private": true,
   "dependencies": {
     "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.10.8",
+    "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.11.11",
+    "@mui/icons-material": "^5.14.9",
-    "@mui/material": "^5.11.12",
+    "@mui/material": "^5.14.10",
     "query-string": "^8.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-markdown": "^8.0.7",
-    "react-router-dom": "^6.10.0",
+    "react-router-dom": "^6.16.0",
     "react-scripts": "5.0.1",
     "webdav": "^5.3.0",
     "webextension-polyfill": "^0.10.0"
@@ -58,10 +58,10 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.22.10",
+    "@babel/core": "^7.22.20",
-    "@babel/node": "^7.22.10",
+    "@babel/node": "^7.22.19",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@babel/preset-env": "^7.22.10",
+    "@babel/preset-env": "^7.22.20",
     "react-app-rewired": "^2.2.1"
   }
 }

public/manifest.firefox.json

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

public/manifest.json

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

src/apis/baidu.js

@@ -4,6 +4,7 @@ import {
   URL_BAIDU_WEB,
   URL_BAIDU_TRANSAPI_V2,
   URL_BAIDU_TRANSAPI,
+  DEFAULT_USER_AGENT,
 } from "../config";
 import { fetchApi } from "../libs/fetch";
 
@@ -248,7 +249,9 @@ export const genBaidu = async ({ text, from, to }) => {
 
   const init = {
     headers: {
+      // Origin: "https://fanyi.baidu.com",
       "content-type": "application/x-www-form-urlencoded; charset=UTF-8",
+      "User-Agent": DEFAULT_USER_AGENT,
     },
     method: "POST",
     body: queryString.stringify(data),

src/apis/index.js

@@ -6,16 +6,22 @@ import {
   OPT_TRANS_DEEPL,
   OPT_TRANS_DEEPLFREE,
   OPT_TRANS_DEEPLX,
+  OPT_TRANS_NIUTRANS,
   OPT_TRANS_BAIDU,
   OPT_TRANS_TENCENT,
   OPT_TRANS_OPENAI,
   OPT_TRANS_GEMINI,
   OPT_TRANS_CLOUDFLAREAI,
   OPT_TRANS_CUSTOMIZE,
+  OPT_TRANS_CUSTOMIZE_2,
+  OPT_TRANS_CUSTOMIZE_3,
+  OPT_TRANS_CUSTOMIZE_4,
+  OPT_TRANS_CUSTOMIZE_5,
   URL_CACHE_TRAN,
   KV_SALT_SYNC,
   URL_BAIDU_LANGDETECT,
   URL_BAIDU_SUGGEST,
+  URL_BAIDU_TTS,
   OPT_LANGS_BAIDU,
   URL_TENCENT_TRANSMART,
   OPT_LANGS_TENCENT,
@@ -95,6 +101,20 @@ export const apiBaiduSuggest = async (text) => {
   return [];
 };
 
+/**
+ * 百度语音
+ * @param {*} text
+ * @param {*} lan
+ * @param {*} spd
+ * @returns
+ */
+export const apiBaiduTTS = (text, lan = "uk", spd = 3) => {
+  const url = `${URL_BAIDU_TTS}?${queryString.stringify({ lan, text, spd })}`;
+  return fetchPolyfill(url, {
+    useCache: false, // 为避免缓存过快增长，禁用缓存语音数据
+  });
+};
+
 /**
  * 腾讯语言识别
  * @param {*} text
@@ -200,6 +220,14 @@ export const apiTranslate = async ({
       trText = res.data;
       isSame = to === res.source_lang;
       break;
+    case OPT_TRANS_NIUTRANS:
+      const json = JSON.parse(res);
+      if (json.error_msg) {
+        throw new Error(json.error_msg);
+      }
+      trText = json.tgt_text;
+      isSame = to === json.from;
+      break;
     case OPT_TRANS_BAIDU:
       // trText = res.trans_result?.data.map((item) => item.dst).join(" ");
       // isSame = res.trans_result?.to === res.trans_result?.from;
@@ -230,6 +258,10 @@ export const apiTranslate = async ({
       isSame = text === trText;
       break;
     case OPT_TRANS_CUSTOMIZE:
+    case OPT_TRANS_CUSTOMIZE_2:
+    case OPT_TRANS_CUSTOMIZE_3:
+    case OPT_TRANS_CUSTOMIZE_4:
+    case OPT_TRANS_CUSTOMIZE_5:
       trText = res.text;
       isSame = to === res.from;
       break;

src/background.js

@@ -12,6 +12,8 @@ import {
   MSG_COMMAND_SHORTCUTS,
   MSG_INJECT_JS,
   MSG_INJECT_CSS,
+  MSG_UPDATE_CSP,
+  DEFAULT_CSPLIST,
   CMD_TOGGLE_TRANSLATE,
   CMD_TOGGLE_STYLE,
   CMD_OPEN_OPTIONS,
@@ -26,9 +28,17 @@ import { tryClearCaches } from "./libs";
 import { saveRule } from "./libs/rules";
 import { getCurTabId } from "./libs/msg";
 import { injectInlineJs, injectInternalCss } from "./libs/injector";
+import { kissLog } from "./libs/log";
 
 globalThis.ContextType = "BACKGROUND";
 
+const REMOVE_HEADERS = [
+  `content-security-policy`,
+  `content-security-policy-report-only`,
+  `x-webkit-csp`,
+  `x-content-security-policy`,
+];
+
 /**
  * 添加右键菜单
  */
@@ -79,6 +89,41 @@ async function addContextMenus(contextMenuType = 1) {
   }
 }
 
+/**
+ * 更新CSP策略
+ * @param {*} csplist
+ */
+async function updateCspRules(csplist = DEFAULT_CSPLIST.join(",\n")) {
+  try {
+    const newRules = csplist
+      .split(/\n|,/)
+      .map((url) => url.trim())
+      .filter(Boolean)
+      .map((url, idx) => ({
+        id: idx + 1,
+        action: {
+          type: "modifyHeaders",
+          responseHeaders: REMOVE_HEADERS.map((header) => ({
+            operation: "remove",
+            header,
+          })),
+        },
+        condition: {
+          urlFilter: url,
+          resourceTypes: ["main_frame", "sub_frame"],
+        },
+      }));
+    const oldRules = await browser.declarativeNetRequest.getDynamicRules();
+    const oldRuleIds = oldRules.map((rule) => rule.id);
+    await browser.declarativeNetRequest.updateDynamicRules({
+      removeRuleIds: oldRuleIds,
+      addRules: newRules,
+    });
+  } catch (err) {
+    kissLog(err, "update csp rules");
+  }
+}
+
 /**
  * 插件安装
  */
@@ -87,6 +132,9 @@ browser.runtime.onInstalled.addListener(() => {
 
   // 右键菜单
   addContextMenus();
+
+  // 禁用CSP
+  updateCspRules();
 });
 
 /**
@@ -96,7 +144,7 @@ browser.runtime.onStartup.addListener(async () => {
   // 同步数据
   await trySyncSettingAndRules();
 
-  const { clearCache, contextMenuType, subrulesList } =
+  const { clearCache, contextMenuType, subrulesList, csplist } =
     await getSettingWithDefault();
 
   // 清除缓存
@@ -108,6 +156,9 @@ browser.runtime.onStartup.addListener(async () => {
   // firefox重启后菜单会消失,故重复添加
   addContextMenus(contextMenuType);
 
+  // 禁用CSP
+  updateCspRules(csplist);
+
   // 同步订阅规则
   trySyncAllSubRules({ subrulesList });
 });
@@ -143,8 +194,10 @@ browser.runtime.onMessage.addListener(async ({ action, args }) => {
         args: [args],
         world: "MAIN",
       });
+    case MSG_UPDATE_CSP:
+      return await updateCspRules(args);
     case MSG_CONTEXT_MENUS:
-      return await addContextMenus(args.contextMenuType);
+      return await addContextMenus(args);
     case MSG_COMMAND_SHORTCUTS:
       return await browser.commands.getAll();
     default:

src/common.js

@@ -213,8 +213,7 @@ export async function run(isUserscript = false) {
     if (
       isUserscript &&
       (href.includes(process.env.REACT_APP_OPTIONSPAGE_DEV) ||
-        href.includes(process.env.REACT_APP_OPTIONSPAGE) ||
+        href.includes(process.env.REACT_APP_OPTIONSPAGE))
-        href.includes(process.env.REACT_APP_OPTIONSPAGE2))
     ) {
       runSettingPage();
       return;

src/config/i18n.js

@@ -623,6 +623,10 @@ export const I18N = {
     zh: `隐藏翻译按钮`,
     en: `Hide Translate Button`,
   },
+  hide_click_away: {
+    zh: `点击外部关闭弹窗`,
+    en: `Click outside to close the pop-up window`,
+  },
   show: {
     zh: `显示`,
     en: `Show`,
@@ -755,6 +759,14 @@ export const I18N = {
     zh: `禁用翻译名单`,
     en: `Translate Blacklist`,
   },
+  disabled_csplist: {
+    zh: `禁用CSP名单`,
+    en: `Disabled CSP List`,
+  },
+  disabled_csplist_helper: {
+    zh: `3、通过调整CSP策略，使得某些页面能够注入JS/CSS/Media，请谨慎使用，除非您已知晓相关风险。`,
+    en: `3. By adjusting the CSP policy, some pages can inject JS/CSS/Media. Please use it with caution unless you are aware of the related risks.`,
+  },
   skip_langs: {
     zh: `不翻译的语言`,
     en: `Disable Languages`,
@@ -807,4 +819,8 @@ export const I18N = {
     zh: `网页修复选择器`,
     en: `Fixer Selector`,
   },
+  reg_niutrans: {
+    zh: `获取小牛翻译密钥`,
+    en: `Get NiuTrans APIKey`,
+  },
 };

src/config/index.js

@@ -65,6 +65,7 @@ export const MSG_CONTEXT_MENUS = "context_menus";
 export const MSG_COMMAND_SHORTCUTS = "command_shortcuts";
 export const MSG_INJECT_JS = "inject_js";
 export const MSG_INJECT_CSS = "inject_css";
+export const MSG_UPDATE_CSP = "update_csp";
 
 export const THEME_LIGHT = "light";
 export const THEME_DARK = "dark";
@@ -83,23 +84,34 @@ export const URL_MICROSOFT_TRAN =
 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_SUGGEST = "https://fanyi.baidu.com/sug";
+export const URL_BAIDU_TTS = "https://fanyi.baidu.com/gettts";
 export const URL_BAIDU_WEB = "https://fanyi.baidu.com/";
 export const URL_BAIDU_TRANSAPI = "https://fanyi.baidu.com/transapi";
 export const URL_BAIDU_TRANSAPI_V2 = "https://fanyi.baidu.com/v2transapi";
 export const URL_DEEPLFREE_TRAN = "https://www2.deepl.com/jsonrpc";
 export const URL_TENCENT_TRANSMART = "https://transmart.qq.com/api/imt";
+export const URL_NIUTRANS_REG =
+  "https://niutrans.com/login?active=3&userSource=kiss-translator";
+
+export const DEFAULT_USER_AGENT =
+  "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36";
 
 export const OPT_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_NIUTRANS = "NiuTrans";
 export const OPT_TRANS_BAIDU = "Baidu";
 export const OPT_TRANS_TENCENT = "Tencent";
 export const OPT_TRANS_OPENAI = "OpenAI";
 export const OPT_TRANS_GEMINI = "Gemini";
 export const OPT_TRANS_CLOUDFLAREAI = "CloudflareAI";
 export const OPT_TRANS_CUSTOMIZE = "Custom";
+export const OPT_TRANS_CUSTOMIZE_2 = "Custom2";
+export const OPT_TRANS_CUSTOMIZE_3 = "Custom3";
+export const OPT_TRANS_CUSTOMIZE_4 = "Custom4";
+export const OPT_TRANS_CUSTOMIZE_5 = "Custom5";
 export const OPT_TRANS_ALL = [
   OPT_TRANS_GOOGLE,
   OPT_TRANS_MICROSOFT,
@@ -108,10 +120,15 @@ export const OPT_TRANS_ALL = [
   OPT_TRANS_DEEPL,
   OPT_TRANS_DEEPLFREE,
   OPT_TRANS_DEEPLX,
+  OPT_TRANS_NIUTRANS,
   OPT_TRANS_OPENAI,
   OPT_TRANS_GEMINI,
   OPT_TRANS_CLOUDFLAREAI,
   OPT_TRANS_CUSTOMIZE,
+  OPT_TRANS_CUSTOMIZE_2,
+  OPT_TRANS_CUSTOMIZE_3,
+  OPT_TRANS_CUSTOMIZE_4,
+  OPT_TRANS_CUSTOMIZE_5,
 ];
 
 export const OPT_LANGS_TO = [
@@ -180,6 +197,12 @@ export const OPT_LANGS_SPECIAL = {
     ["zh-CN", "ZH"],
     ["zh-TW", "ZH"],
   ]),
+  [OPT_TRANS_NIUTRANS]: new Map([
+    ...OPT_LANGS_FROM.map(([key]) => [key, key]),
+    ["auto", "auto"],
+    ["zh-CN", "zh"],
+    ["zh-TW", "cht"],
+  ]),
   [OPT_TRANS_BAIDU]: new Map([
     ...OPT_LANGS_FROM.map(([key]) => [key, key]),
     ["zh-CN", "zh"],
@@ -253,6 +276,22 @@ export const OPT_LANGS_SPECIAL = {
     ...OPT_LANGS_FROM.map(([key]) => [key, key]),
     ["auto", ""],
   ]),
+  [OPT_TRANS_CUSTOMIZE_2]: new Map([
+    ...OPT_LANGS_FROM.map(([key]) => [key, key]),
+    ["auto", ""],
+  ]),
+  [OPT_TRANS_CUSTOMIZE_3]: new Map([
+    ...OPT_LANGS_FROM.map(([key]) => [key, key]),
+    ["auto", ""],
+  ]),
+  [OPT_TRANS_CUSTOMIZE_4]: new Map([
+    ...OPT_LANGS_FROM.map(([key]) => [key, key]),
+    ["auto", ""],
+  ]),
+  [OPT_TRANS_CUSTOMIZE_5]: new Map([
+    ...OPT_LANGS_FROM.map(([key]) => [key, key]),
+    ["auto", ""],
+  ]),
 };
 export const OPT_LANGS_LIST = OPT_LANGS_TO.map(([lang]) => lang);
 export const OPT_LANGS_BAIDU = new Map(
@@ -378,7 +417,8 @@ export const DEFAULT_TRANBOX_SETTING = {
   tranboxShortcut: DEFAULT_TRANBOX_SHORTCUT,
   btnOffsetX: 10,
   btnOffsetY: 10,
-  hideTranBtn: false,
+  hideTranBtn: false, // 是否隐藏翻译按钮
+  hideClickAway: false, // 是否点击外部关闭弹窗
 };
 
 // 订阅列表
@@ -398,6 +438,12 @@ export const DEFAULT_SUBRULES_LIST = [
 ];
 
 // 翻译接口
+const defaultCustomApi = {
+  url: "",
+  key: "",
+  fetchLimit: DEFAULT_FETCH_LIMIT,
+  fetchInterval: DEFAULT_FETCH_INTERVAL,
+};
 export const DEFAULT_TRANS_APIS = {
   [OPT_TRANS_GOOGLE]: {
     url: "https://translate.googleapis.com/translate_a/single",
@@ -433,6 +479,14 @@ export const DEFAULT_TRANS_APIS = {
     fetchLimit: 1,
     fetchInterval: 500,
   },
+  [OPT_TRANS_NIUTRANS]: {
+    url: "https://api.niutrans.com/NiuTransServer/translation",
+    key: "",
+    dictNo: "",
+    memoryNo: "",
+    fetchLimit: DEFAULT_FETCH_LIMIT,
+    fetchInterval: DEFAULT_FETCH_INTERVAL,
+  },
   [OPT_TRANS_OPENAI]: {
     url: "https://api.openai.com/v1/chat/completions",
     key: "",
@@ -455,12 +509,11 @@ export const DEFAULT_TRANS_APIS = {
     fetchLimit: 1,
     fetchInterval: 500,
   },
-  [OPT_TRANS_CUSTOMIZE]: {
+  [OPT_TRANS_CUSTOMIZE]: defaultCustomApi,
-    url: "",
+  [OPT_TRANS_CUSTOMIZE_2]: defaultCustomApi,
-    key: "",
+  [OPT_TRANS_CUSTOMIZE_3]: defaultCustomApi,
-    fetchLimit: DEFAULT_FETCH_LIMIT,
+  [OPT_TRANS_CUSTOMIZE_4]: defaultCustomApi,
-    fetchInterval: DEFAULT_FETCH_INTERVAL,
+  [OPT_TRANS_CUSTOMIZE_5]: defaultCustomApi,
-  },
 };
 
 // 默认快捷键
@@ -485,6 +538,7 @@ export const DEFAULT_BLACKLIST = [
   "oapi.dingtalk.com",
   "login.dingtalk.com",
 ]; // 禁用翻译名单
+export const DEFAULT_CSPLIST = ["https://github.com"]; // 禁用CSP名单
 
 export const DEFAULT_SETTING = {
   darkMode: false, // 深色模式
@@ -512,6 +566,7 @@ export const DEFAULT_SETTING = {
   tranboxSetting: DEFAULT_TRANBOX_SETTING, // 划词翻译设置
   touchTranslate: 2, // 触屏翻译
   blacklist: DEFAULT_BLACKLIST.join(",\n"), // 禁用翻译名单
+  csplist: DEFAULT_CSPLIST.join(",\n"), // 禁用CSP名单
   // disableLangs: [], // 不翻译的语言(移至rule，作废)
   transInterval: 500, // 翻译间隔时间
 };

src/config/rules.js

@@ -4,8 +4,8 @@ export const GLOBAL_KEY = "*";
 export const REMAIN_KEY = "-";
 export const SHADOW_KEY = ">>>";
 
-export const DEFAULT_SELECTOR = `:is(li, p, h1, h2, h3, h4, h5, h6, dd, blockquote)`;
+export const DEFAULT_SELECTOR = `:is(li, p, h1, h2, h3, h4, h5, h6, dd, blockquote, .kiss-p)`;
-export const DEFAULT_KEEP_SELECTOR = `code, img, svg`;
+export const DEFAULT_KEEP_SELECTOR = `code, img, svg, pre`;
 export const DEFAULT_RULE = {
   pattern: "", // 匹配网址
   selector: "", // 选择器

src/hooks/Api.js

@@ -8,7 +8,10 @@ export function useApi(translator) {
 
   const updateApi = useCallback(
     async (obj) => {
-      const api = transApis[translator] || {};
+      const api = {
+        ...DEFAULT_TRANS_APIS[translator],
+        ...(transApis[translator] || {}),
+      };
       Object.assign(transApis, { [translator]: { ...api, ...obj } });
       await updateSetting({ transApis });
     },
@@ -20,5 +23,12 @@ export function useApi(translator) {
     await updateSetting({ transApis });
   }, [translator, transApis, updateSetting]);
 
-  return { api: transApis[translator] || {}, updateApi, resetApi };
+  return {
+    api: {
+      ...DEFAULT_TRANS_APIS[translator],
+      ...(transApis[translator] || {}),
+    },
+    updateApi,
+    resetApi,
+  };
 }

src/hooks/Audio.js

@@ -0,0 +1,61 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { apiBaiduTTS } from "../apis";
+import { kissLog } from "../libs/log";
+
+/**
+ * 声音播放hook
+ * @param {*} src
+ * @returns
+ */
+export function useAudio(src) {
+  const audioRef = useRef(null);
+  const [error, setError] = useState(null);
+  const [ready, setReady] = useState(false);
+  const [playing, setPlaying] = useState(false);
+
+  const onPlay = useCallback(() => {
+    audioRef.current?.play();
+  }, []);
+
+  useEffect(() => {
+    if (!src) {
+      return;
+    }
+    const audio = new Audio(src);
+    audio.addEventListener("error", (err) => setError(err));
+    audio.addEventListener("canplaythrough", () => setReady(true));
+    audio.addEventListener("play", () => setPlaying(true));
+    audio.addEventListener("ended", () => setPlaying(false));
+    audioRef.current = audio;
+  }, [src]);
+
+  return {
+    error,
+    ready,
+    playing,
+    onPlay,
+  };
+}
+
+/**
+ * 获取语音hook
+ * @param {*} text
+ * @param {*} lan
+ * @param {*} spd
+ * @returns
+ */
+export function useTextAudio(text, lan = "uk", spd = 3) {
+  const [src, setSrc] = useState("");
+
+  useEffect(() => {
+    (async () => {
+      try {
+        setSrc(await apiBaiduTTS(text, lan, spd));
+      } catch (err) {
+        kissLog(err, "baidu tts");
+      }
+    })();
+  }, [text, lan, spd]);
+
+  return useAudio(src);
+}

src/hooks/Translate.js

@@ -39,8 +39,10 @@ export function useTranslate(q, rule, setting) {
             text: q,
             fromLang,
             toLang,
-            apiSetting:
+            apiSetting: {
-              setting.transApis?.[translator] || DEFAULT_TRANS_APIS[translator],
+              ...DEFAULT_TRANS_APIS[translator],
+              ...(setting.transApis[translator] || {}),
+            },
           });
           setText(trText);
           setSamelang(isSame);

src/index.js

@@ -36,19 +36,10 @@ function App() {
         <Link href={process.env.REACT_APP_USERSCRIPT_DOWNLOADURL}>
           Install/Update Userscript for Tampermonkey/Violentmonkey
         </Link>
-        {/* <Link href={process.env.REACT_APP_USERSCRIPT_DOWNLOADURL2}>
-          Install/Update Userscript for Tampermonkey/Violentmonkey 2
-        </Link> */}
         <Link href={process.env.REACT_APP_USERSCRIPT_IOS_DOWNLOADURL}>
           Install/Update Userscript for iOS Safari
         </Link>
-        {/* <Link href={process.env.REACT_APP_USERSCRIPT_IOS_DOWNLOADURL2}>
-          Install/Update Userscript for iOS Safari 2
-        </Link> */}
         <Link href={process.env.REACT_APP_OPTIONSPAGE}>Open Options Page</Link>
-        {/* <Link href={process.env.REACT_APP_OPTIONSPAGE2}>
-          Open Options Page 2
-        </Link> */}
       </Stack>
 
       {loading ? (

src/libs/fetch.js

@@ -12,6 +12,7 @@ import {
 import { isBg } from "./browser";
 import { newCacheReq, newTransReq } from "./req";
 import { kissLog } from "./log";
+import { blobToBase64 } from "./utils";
 
 const TIMEOUT = 5000;
 
@@ -138,9 +139,11 @@ export const fetchData = async (
       res = await fetchApi({ input, init, transOpts, apiSetting });
     }
 
-    if (!res?.ok) {
+    if (!res) {
+      throw new Error("Unknow error");
+    } else if (!res.ok) {
       const msg = {
-        url: input,
+        url: res.url,
         status: res.status,
       };
       if (res.headers.get("Content-Type")?.includes("json")) {
@@ -163,6 +166,9 @@ export const fetchData = async (
   const contentType = res.headers.get("Content-Type");
   if (contentType?.includes("json")) {
     return await res.json();
+  } else if (contentType?.includes("audio")) {
+    const blob = await res.blob();
+    return await blobToBase64(blob);
   }
   return await res.text();
 };

src/libs/req.js

@@ -5,12 +5,17 @@ import {
   OPT_TRANS_DEEPL,
   OPT_TRANS_DEEPLFREE,
   OPT_TRANS_DEEPLX,
+  OPT_TRANS_NIUTRANS,
   OPT_TRANS_BAIDU,
   OPT_TRANS_TENCENT,
   OPT_TRANS_OPENAI,
   OPT_TRANS_GEMINI,
   OPT_TRANS_CLOUDFLAREAI,
   OPT_TRANS_CUSTOMIZE,
+  OPT_TRANS_CUSTOMIZE_2,
+  OPT_TRANS_CUSTOMIZE_3,
+  OPT_TRANS_CUSTOMIZE_4,
+  OPT_TRANS_CUSTOMIZE_5,
   URL_MICROSOFT_TRAN,
   URL_TENCENT_TRANSMART,
   PROMPT_PLACE_FROM,
@@ -141,6 +146,27 @@ const genDeeplX = ({ text, from, to, url, key }) => {
   return [url, init];
 };
 
+const genNiuTrans = ({ text, from, to, url, key, dictNo, memoryNo }) => {
+  const data = {
+    from,
+    to,
+    apikey: key,
+    src_text: text,
+    dictNo,
+    memoryNo,
+  };
+
+  const init = {
+    headers: {
+      "Content-type": "application/json",
+    },
+    method: "POST",
+    body: JSON.stringify(data),
+  };
+
+  return [url, init];
+};
+
 const genTencent = ({ text, from, to }) => {
   const data = {
     header: {
@@ -283,6 +309,7 @@ export const newTransReq = ({ translator, text, from, to }, apiSetting) => {
     case OPT_TRANS_OPENAI:
     case OPT_TRANS_GEMINI:
     case OPT_TRANS_CLOUDFLAREAI:
+    case OPT_TRANS_NIUTRANS:
       args.key = keyPick(translator, args.key);
       break;
     default:
@@ -299,6 +326,8 @@ export const newTransReq = ({ translator, text, from, to }, apiSetting) => {
       return genDeeplFree(args);
     case OPT_TRANS_DEEPLX:
       return genDeeplX(args);
+    case OPT_TRANS_NIUTRANS:
+      return genNiuTrans(args);
     case OPT_TRANS_BAIDU:
       return genBaidu(args);
     case OPT_TRANS_TENCENT:
@@ -310,6 +339,10 @@ export const newTransReq = ({ translator, text, from, to }, apiSetting) => {
     case OPT_TRANS_CLOUDFLAREAI:
       return genCloudflareAI(args);
     case OPT_TRANS_CUSTOMIZE:
+    case OPT_TRANS_CUSTOMIZE_2:
+    case OPT_TRANS_CUSTOMIZE_3:
+    case OPT_TRANS_CUSTOMIZE_4:
+    case OPT_TRANS_CUSTOMIZE_5:
       return genCustom(args);
     default:
       throw new Error(`[trans] translator: ${translator} not support`);

src/libs/translator.js

@@ -58,11 +58,11 @@ export class Translator {
 
   // 显示
   _interseObserver = new IntersectionObserver(
-    (intersections) => {
+    (entries, observer) => {
-      intersections.forEach((intersection) => {
+      entries.forEach((entry) => {
-        if (intersection.isIntersecting) {
+        if (entry.isIntersecting) {
-          this._render(intersection.target);
+          observer.unobserve(entry.target);
-          this._interseObserver.unobserve(intersection.target);
+          this._render(entry.target);
         }
       });
     },

src/libs/utils.js

@@ -202,26 +202,20 @@ export const removeEndchar = (s, c, count = 1) => {
  * @returns
  */
 export const matchInputStr = (str, sign) => {
-  let reg = /\/([\w-]+)\s+([^]+)/;
   switch (sign) {
     case "//":
-      reg = /\/\/([\w-]+)\s+([^]+)/;
+      return str.match(/\/\/([\w-]+)\s+([^]+)/);
-      break;
     case "\\":
-      reg = /\\([\w-]+)\s+([^]+)/;
+      return str.match(/\\([\w-]+)\s+([^]+)/);
-      break;
     case "\\\\":
-      reg = /\\\\([\w-]+)\s+([^]+)/;
+      return str.match(/\\\\([\w-]+)\s+([^]+)/);
-      break;
     case ">":
-      reg = />([\w-]+)\s+([^]+)/;
+      return str.match(/>([\w-]+)\s+([^]+)/);
-      break;
     case ">>":
-      reg = />>([\w-]+)\s+([^]+)/;
+      return str.match(/>>([\w-]+)\s+([^]+)/);
-      break;
     default:
   }
-  return str.match(reg);
+  return str.match(/\/([\w-]+)\s+([^]+)/);
 };
 
 /**
@@ -233,3 +227,16 @@ export const isValidWord = (str) => {
   const regex = /^[a-zA-Z-]+$/;
   return regex.test(str);
 };
+
+/**
+ * blob转为base64
+ * @param {*} blob
+ * @returns
+ */
+export const blobToBase64 = (blob) => {
+  return new Promise((resolve) => {
+    const reader = new FileReader();
+    reader.onloadend = () => resolve(reader.result);
+    reader.readAsDataURL(blob);
+  });
+};

src/views/Options/Apis.js

@@ -13,7 +13,9 @@ import {
   OPT_TRANS_GEMINI,
   OPT_TRANS_CLOUDFLAREAI,
   OPT_TRANS_CUSTOMIZE,
+  OPT_TRANS_NIUTRANS,
   URL_KISS_PROXY,
+  URL_NIUTRANS_REG,
   DEFAULT_FETCH_LIMIT,
   DEFAULT_FETCH_INTERVAL,
 } from "../../config";
@@ -62,14 +64,24 @@ function TestButton({ translator, api }) {
       alert.error(
         <>
           <div>{i18n("test_failed")}</div>
-          <pre
+          {msg === err.message ? (
-            style={{
+            <div
-              maxWidth: 400,
+              style={{
-              overflow: "auto",
+                maxWidth: 400,
-            }}
+              }}
-          >
+            >
-            {msg}
+              {msg}
-          </pre>
+            </div>
+          ) : (
+            <pre
+              style={{
+                maxWidth: 400,
+                overflow: "auto",
+              }}
+            >
+              {msg}
+            </pre>
+          )}
         </>
       );
     } finally {
@@ -98,6 +110,8 @@ function ApiFields({ translator }) {
     prompt = "",
     fetchLimit = DEFAULT_FETCH_LIMIT,
     fetchInterval = DEFAULT_FETCH_INTERVAL,
+    dictNo = "",
+    memoryNo = "",
   } = api;
 
   const handleChange = (e) => {
@@ -128,8 +142,23 @@ function ApiFields({ translator }) {
     OPT_TRANS_OPENAI,
     OPT_TRANS_GEMINI,
     OPT_TRANS_CLOUDFLAREAI,
+    OPT_TRANS_NIUTRANS,
   ];
 
+  const keyHelper =
+    translator === OPT_TRANS_NIUTRANS ? (
+      <>
+        {i18n("mulkeys_help")}
+        <Link href={URL_NIUTRANS_REG} target="_blank">
+          {i18n("reg_niutrans")}
+        </Link>
+      </>
+    ) : mulkeysTranslators.includes(translator) ? (
+      i18n("mulkeys_help")
+    ) : (
+      ""
+    );
+
   return (
     <Stack spacing={3}>
       {!buildinTranslators.includes(translator) && (
@@ -148,11 +177,7 @@ function ApiFields({ translator }) {
             value={key}
             onChange={handleChange}
             multiline={mulkeysTranslators.includes(translator)}
-            helperText={
+            helperText={keyHelper}
-              mulkeysTranslators.includes(translator)
-                ? i18n("mulkeys_help")
-                : ""
-            }
           />
         </>
       )}
@@ -177,6 +202,25 @@ function ApiFields({ translator }) {
         </>
       )}
 
+      {translator === OPT_TRANS_NIUTRANS && (
+        <>
+          <TextField
+            size="small"
+            label={"DictNo"}
+            name="dictNo"
+            value={dictNo}
+            onChange={handleChange}
+          />
+          <TextField
+            size="small"
+            label={"MemoryNo"}
+            name="memoryNo"
+            value={memoryNo}
+            onChange={handleChange}
+          />
+        </>
+      )}
+
       <TextField
         size="small"
         label={i18n("fetch_limit")}
@@ -208,7 +252,7 @@ function ApiFields({ translator }) {
         </Button>
       </Stack>
 
-      {translator === OPT_TRANS_CUSTOMIZE && (
+      {translator.startsWith(OPT_TRANS_CUSTOMIZE) && (
         <pre>{i18n("custom_api_help")}</pre>
       )}
     </Stack>

src/views/Options/Setting.js

@@ -22,7 +22,9 @@ import {
   OPT_SHORTCUT_POPUP,
   OPT_SHORTCUT_SETTING,
   DEFAULT_BLACKLIST,
+  DEFAULT_CSPLIST,
   MSG_CONTEXT_MENUS,
+  MSG_UPDATE_CSP,
 } from "../../config";
 import { useShortcut } from "../../hooks/Shortcut";
 import ShortcutInput from "./ShortcutInput";
@@ -69,7 +71,10 @@ export default function Settings() {
         value = limitNumber(value, 0, 4);
         break;
       case "contextMenuType":
-        isExt && sendBgMsg(MSG_CONTEXT_MENUS, { contextMenuType: value });
+        isExt && sendBgMsg(MSG_CONTEXT_MENUS, value);
+        break;
+      case "csplist":
+        isExt && sendBgMsg(MSG_UPDATE_CSP, value);
         break;
       default:
     }
@@ -96,6 +101,7 @@ export default function Settings() {
     contextMenuType = 1,
     touchTranslate = 2,
     blacklist = DEFAULT_BLACKLIST.join(",\n"),
+    csplist = DEFAULT_CSPLIST.join(",\n"),
     transInterval = 500,
   } = setting;
   const { isHide = false } = fab || {};
@@ -219,6 +225,18 @@ export default function Settings() {
                 </Link>
               </FormHelperText>
             </FormControl>
+
+            <TextField
+              size="small"
+              label={i18n("disabled_csplist")}
+              helperText={
+                i18n("pattern_helper") + " " + i18n("disabled_csplist_helper")
+              }
+              name="csplist"
+              defaultValue={csplist}
+              onChange={handleChange}
+              multiline
+            />
           </>
         ) : (
           <>

src/views/Options/Tranbox.js

@@ -50,6 +50,7 @@ export default function Tranbox() {
     btnOffsetX,
     btnOffsetY,
     hideTranBtn = false,
+    hideClickAway = false,
   } = tranboxSetting;
 
   return (
@@ -160,6 +161,18 @@ export default function Tranbox() {
           <MenuItem value={true}>{i18n("hide")}</MenuItem>
         </TextField>
 
+        <TextField
+          select
+          size="small"
+          name="hideClickAway"
+          value={hideClickAway}
+          label={i18n("hide_click_away")}
+          onChange={handleChange}
+        >
+          <MenuItem value={false}>{i18n("disable")}</MenuItem>
+          <MenuItem value={true}>{i18n("enable")}</MenuItem>
+        </TextField>
+
         {!isExt && (
           <ShortcutInput
             value={tranboxShortcut}

src/views/Options/index.js

@@ -81,15 +81,9 @@ export default function Options() {
           <Link href={process.env.REACT_APP_USERSCRIPT_DOWNLOADURL}>
             Install/Update Userscript for Tampermonkey/Violentmonkey
           </Link>
-          {/* <Link href={process.env.REACT_APP_USERSCRIPT_DOWNLOADURL2}>
-            Install/Update Userscript for Tampermonkey/Violentmonkey 2
-          </Link> */}
           <Link href={process.env.REACT_APP_USERSCRIPT_IOS_DOWNLOADURL}>
             Install/Update Userscript for iOS Safari
           </Link>
-          {/* <Link href={process.env.REACT_APP_USERSCRIPT_IOS_DOWNLOADURL2}>
-            Install/Update Userscript for iOS Safari 2
-          </Link> */}
         </Stack>
       </center>
     );

src/views/Selection/AudioBtn.js

@@ -0,0 +1,29 @@
+import IconButton from "@mui/material/IconButton";
+import VolumeUpIcon from "@mui/icons-material/VolumeUp";
+import { useTextAudio } from "../../hooks/Audio";
+
+export default function AudioBtn({ text, lan = "uk" }) {
+  const { error, ready, playing, onPlay } = useTextAudio(text, lan);
+
+  if (error || !ready) {
+    return (
+      <IconButton disabled>
+        <VolumeUpIcon />
+      </IconButton>
+    );
+  }
+
+  if (playing) {
+    return (
+      <IconButton color="primary">
+        <VolumeUpIcon />
+      </IconButton>
+    );
+  }
+
+  return (
+    <IconButton onClick={onPlay}>
+      <VolumeUpIcon />
+    </IconButton>
+  );
+}

src/views/Selection/DictCont.js

@@ -2,10 +2,11 @@ import Box from "@mui/material/Box";
 import Stack from "@mui/material/Stack";
 import FavBtn from "./FavBtn";
 import Typography from "@mui/material/Typography";
+import AudioBtn from "./AudioBtn";
 
 const phonicMap = {
-  en_phonic: "英",
+  en_phonic: ["英", "uk"],
-  us_phonic: "美",
+  us_phonic: ["美", "en"],
 };
 
 export default function DictCont({ dictResult }) {
@@ -27,13 +28,17 @@ export default function DictCont({ dictResult }) {
       </Stack>
 
       <Typography component="div">
-        <Typography>
+        <Stack direction="row">
           {dictResult.voice
             ?.map(Object.entries)
             .map((item) => item[0])
-            .map(([key, val]) => `${phonicMap[key] || key} ${val}`)
+            .map(([key, val]) => (
-            .join(" ")}
+              <span>
-        </Typography>
+                <span>{`${phonicMap[key]?.[0] || key} ${val}`}</span>
+                <AudioBtn text={dictResult.src} lan={phonicMap[key]?.[1]} />
+              </span>
+            ))}
+        </Stack>
         <ul style={{ margin: "0.5em 0" }}>
           {dictResult.content[0].mean.map(({ pre, cont }, idx) => (
             <li key={idx}>

src/views/Selection/DraggableResizable.js

@@ -148,6 +148,7 @@ export default function DraggableResizable({
   },
   onChangeSize,
   onChangePosition,
+  ...props
 }) {
   const lineWidth = 4;
   const [position, setPosition] = useState(defaultPosition);
@@ -182,6 +183,7 @@ export default function DraggableResizable({
         gridTemplateRows: `${lineWidth * 2}px auto ${lineWidth * 2}px`,
         zIndex: 2147483647,
       }}
+      {...props}
     >
       <Pointer
         direction="TopLeft"

src/views/Selection/TranBox.js

@@ -102,17 +102,12 @@ function TranForm({ text, setText, tranboxSetting, transApis }) {
           fullWidth
           multiline
           value={editMode ? editText : text}
-          disabled={!editMode}
           onChange={(e) => {
             setEditText(e.target.value);
           }}
-          onClick={() => {
+          onFocus={() => {
             setEditMode(true);
             setEditText(text);
-            const timer = setTimeout(() => {
-              clearTimeout(timer);
-              inputRef.current?.focus();
-            }, 100);
           }}
           onBlur={() => {
             setEditMode(false);
@@ -180,6 +175,7 @@ export default function TranBox({
           header={<Header setShowPopup={setShowBox} />}
           onChangeSize={setBoxSize}
           onChangePosition={setBoxPosition}
+          onClick={(e) => e.stopPropagation()}
         >
           <Divider />
           <TranForm

src/views/Selection/TranBtn.js

@@ -25,8 +25,8 @@ export default function TranBtn({ onClick, position, tranboxSetting }) {
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width="20"
+        width={isMobile ? "32" : "20"}
-        height="20"
+        height={isMobile ? "32" : "20"}
         viewBox="0 0 32 32"
         version="1.1"
       >

src/views/Selection/index.js

@@ -71,8 +71,8 @@ export default function Slection({
     }
 
     // todo: mobile support
-    window.addEventListener("mouseup", handleMouseup);
+    // window.addEventListener("mouseup", handleMouseup);
-    // window.addEventListener(isMobile ? "touchend" : "mouseup", handleMouseup);
+    window.addEventListener(isMobile ? "touchend" : "mouseup", handleMouseup);
     return () => {
       window.removeEventListener(
         isMobile ? "touchend" : "mouseup",
@@ -132,6 +132,18 @@ export default function Slection({
     }
   }, [handleTranbox, contextMenuType]);
 
+  useEffect(() => {
+    if (tranboxSetting.hideClickAway) {
+      const handleHideBox = () => {
+        setShowBox(false);
+      };
+      window.addEventListener("click", handleHideBox);
+      return () => {
+        window.removeEventListener("click", handleHideBox);
+      };
+    }
+  }, [tranboxSetting.hideClickAway]);
+
   return (
     <>
       {showBox && (