v1.8.10

.env

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

package.json

@@ -1,7 +1,7 @@
 {
   "name": "kiss-translator",
   "description": "A minimalist bilingual translation Extension & Greasemonkey Script",
-  "version": "1.8.9",
+  "version": "1.8.10",
   "author": "Gabe<yugang2002@gmail.com>",
   "private": true,
   "dependencies": {
@@ -17,6 +17,7 @@
     "react-markdown": "^8.0.7",
     "react-router-dom": "^6.16.0",
     "react-scripts": "5.0.1",
+    "sval": "^0.5.2",
     "webdav": "^5.3.0",
     "webextension-polyfill": "^0.10.0"
   },
@@ -31,7 +32,7 @@
     "build:userscript": "rm -rf build/userscript && mkdir build/userscript && cp build/web/*.user.js build/userscript/",
     "build:rules": "babel-node src/rules.js",
     "build": "pnpm build:chrome && pnpm build:edge && pnpm build:firefox && pnpm build:web && pnpm build:userscript-ios && pnpm build:userscript && pnpm build:rules",
-    "pack": "cd build && zip -r chrome.zip chrome && zip -r edge.zip edge && cd firefox && zip -r ../firefox.zip .",
+    "zip": "cd build && zip -r chrome.zip chrome && zip -r edge.zip edge && cd firefox && zip -r ../firefox.zip .",
     "test": "react-app-rewired test",
     "eject": "react-scripts eject"
   },

pnpm-lock.yaml

@@ -41,6 +41,9 @@ dependencies:
   react-scripts:
     specifier: 5.0.1
     version: 5.0.1(@babel/plugin-syntax-flow@7.24.1)(@babel/plugin-transform-react-jsx@7.23.4)(eslint@8.57.0)(react@18.2.0)(typescript@5.4.5)
+  sval:
+    specifier: ^0.5.2
+    version: 0.5.2
   webdav:
     specifier: ^5.3.0
     version: 5.3.0
@@ -6504,7 +6507,7 @@ packages:
         optional: true
     dependencies:
       abab: 2.0.6
-      acorn: 8.10.0
+      acorn: 8.11.3
       acorn-globals: 6.0.0
       cssom: 0.4.4
       cssstyle: 2.3.0
@@ -9348,6 +9351,12 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  /sval@0.5.2:
+    resolution: {integrity: sha512-cMN4SWqQ8K2DypYVZ1DVsicvXsr4gQmAYR2faKwHttJFJAqjfc4+taG9esMIP0hMP5+4Caun99n6y+4T6nCPEA==}
+    dependencies:
+      acorn: 8.11.3
+    dev: false
+
   /svg-parser@2.0.4:
     resolution: {integrity: sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==}
 

public/manifest.firefox.json

@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "__MSG_app_name__",
   "description": "__MSG_app_description__",
-  "version": "1.8.9",
+  "version": "1.8.10",
   "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.8.9",
+  "version": "1.8.10",
   "default_locale": "en",
   "author": "Gabe<yugang2002@gmail.com>",
   "homepage_url": "https://github.com/fishjar/kiss-translator",

src/apis/index.js

@@ -33,6 +33,7 @@ import {
   OPT_LANGS_SPECIAL,
 } from "../config";
 import { sha256 } from "../libs/utils";
+import interpreter from "../libs/interpreter";
 
 /**
  * 同步数据
@@ -275,27 +276,14 @@ export const apiTranslate = async ({
     case OPT_TRANS_CUSTOMIZE_3:
     case OPT_TRANS_CUSTOMIZE_4:
     case OPT_TRANS_CUSTOMIZE_5:
-      trText = res.text;
+      const { resHook } = apiSetting;
-      isSame = to === res.from;
+      if (resHook?.trim()) {
-
+        interpreter.run(`exports.resHook = ${resHook}`);
-      const { customOption } = apiSetting;
+        [trText, isSame] = interpreter.exports.resHook(res, text, from, to);
-      if (customOption?.trim()) {
+      } else {
-        try {
+        trText = res.text;
-          const opt = JSON.parse(customOption);
+        isSame = to === res.from;
-          const textPattern = opt.resPattern?.text;
-          const fromPattern = opt.resPattern?.from;
-          if (textPattern) {
-            trText = textPattern.split(".").reduce((pre, cur) => pre[cur], res);
-          }
-          if (fromPattern) {
-            isSame =
-              to === fromPattern.split(".").reduce((pre, cur) => pre[cur], res);
-          }
-        } catch (err) {
-          throw new Error(`custom option parse err: ${err}`);
-        }
       }
-
       break;
     default:
   }

src/apis/trans.js

@@ -28,10 +28,12 @@ import {
   INPUT_PLACE_TO,
   INPUT_PLACE_TEXT,
   INPUT_PLACE_KEY,
+  INPUT_PLACE_MODEL,
 } from "../config";
 import { msAuth } from "../libs/auth";
 import { genDeeplFree } from "./deepl";
 import { genBaidu } from "./baidu";
+import interpreter from "../libs/interpreter";
 
 const keyMap = new Map();
 const urlMap = new Map();
@@ -218,6 +220,9 @@ const genOpenAI = ({ text, from, to, url, key, prompt, model }) => {
 };
 
 const genGemini = ({ text, from, to, url, key, prompt, model }) => {
+  url = url
+    .replaceAll(INPUT_PLACE_MODEL, model)
+    .replaceAll(INPUT_PLACE_KEY, key);
   prompt = prompt
     .replaceAll(INPUT_PLACE_FROM, from)
     .replaceAll(INPUT_PLACE_TO, to)
@@ -236,7 +241,6 @@ const genGemini = ({ text, from, to, url, key, prompt, model }) => {
     ],
   };
 
-  const input = `${url}/${model}:generateContent?key=${key}`;
   const init = {
     headers: {
       "Content-type": "application/json",
@@ -245,7 +249,7 @@ const genGemini = ({ text, from, to, url, key, prompt, model }) => {
     body: JSON.stringify(data),
   };
 
-  return [input, init];
+  return [url, init];
 };
 
 const genOllama = ({ text, from, to, url, key, prompt, model }) => {
@@ -293,20 +297,27 @@ const genCloudflareAI = ({ text, from, to, url, key }) => {
   return [url, init];
 };
 
-const genCustom = ({ text, from, to, url, key, customOption }) => {
+const genCustom = ({ text, from, to, url, key, reqHook }) => {
-  const replaceInput = (str) =>
+  url = url
-    str
+    .replaceAll(INPUT_PLACE_URL, url)
-      .replaceAll(INPUT_PLACE_URL, url)
+    .replaceAll(INPUT_PLACE_FROM, from)
-      .replaceAll(INPUT_PLACE_FROM, from)
+    .replaceAll(INPUT_PLACE_TO, to)
-      .replaceAll(INPUT_PLACE_TO, to)
+    .replaceAll(INPUT_PLACE_TEXT, text)
-      .replaceAll(INPUT_PLACE_TEXT, text.replaceAll(`"`, `\n`))
+    .replaceAll(INPUT_PLACE_KEY, key);
-      .replaceAll(INPUT_PLACE_KEY, key);
+  let init = {};
+
+  if (reqHook?.trim()) {
+    interpreter.run(`exports.reqHook = ${reqHook}`);
+    [url, init] = interpreter.exports.reqHook(text, from, to, url, key);
+    return [url, init];
+  }
+
   const data = {
     text,
     from,
     to,
   };
-  const init = {
+  init = {
     headers: {
       "Content-type": "application/json",
     },
@@ -316,23 +327,6 @@ const genCustom = ({ text, from, to, url, key, customOption }) => {
   if (key) {
     init.headers.Authorization = `Bearer ${key}`;
   }
-  url = replaceInput(url);
-
-  if (customOption?.trim()) {
-    try {
-      const opt = JSON.parse(replaceInput(customOption));
-      opt.url && (url = opt.url);
-      opt.headers && (init.headers = opt.headers);
-      opt.method && (init.method = opt.method);
-      if (init.method === "GET") {
-        delete init.body;
-      } else {
-        opt.body && (init.body = JSON.stringify(opt.body));
-      }
-    } catch (err) {
-      throw new Error(`custom option parse err: ${err}`);
-    }
-  }
 
   return [url, init];
 };

src/config/i18n.js

@@ -42,7 +42,23 @@ const customApiLangs = `["en", "English - English"],
 ["vi", "Vietnamese - Tiếng Việt"],
 `;
 
-const customDefaultOption = `{
+const hookExample = `// URL
+https://translate.googleapis.com/translate_a/single?client=gtx&dj=1&dt=t&ie=UTF-8&q={{text}}&sl=en&tl=zh-CN
+
+// Request Hook
+(text, from, to, url, key) => [url, {
+  headers: {
+      "Content-type": "application/json",
+  },
+  method: "GET",
+  body: null,
+}]
+
+// Response Hook
+(res, text, from, to) => [res.sentences.map((item) => item.trans).join(" "), to === res.src]`;
+
+const customApiHelpZH = `// 请求数据默认格式
+{
   "url": "{{url}}",
   "method": "POST",
   "headers": {
@@ -50,18 +66,12 @@ const customDefaultOption = `{
     "Authorization": "Bearer {{key}}"
   },
   "body": {
-    "text": "{{text}}",
+    "text": "{{text}}", // 待翻译文字
-    "from": "{{from}}",
+    "from": "{{from}}", // 文字的语言（可能为空）
-    "to": "{{to}}"
+    "to": "{{to}}",     // 目标语言
   },
-  "resPattern": {
+}
-    "text": "text",
-    "from": "from"
-  }
-}`;
 
-const customApiHelpZH = `// 自定义选项范例
-${customDefaultOption}
 
 // 返回数据默认格式
 {
@@ -70,20 +80,43 @@ ${customDefaultOption}
   to: "",   // 目标语言（可选）
 }
 
+
+// Hook 范例
+${hookExample}
+
+
 // 支持的语言代码如下
 ${customApiLangs}
 `;
 
-const customApiHelpEN = `// Example of custom options
+const customApiHelpEN = `// Default request
-${customDefaultOption}
+{
+  "url": "{{url}}",
+  "method": "POST",
+  "headers": {
+    "Content-type": "application/json",
+    "Authorization": "Bearer {{key}}"
+  },
+  "body": {
+    "text": "{{text}}", // Text to be translated
+    "from": "{{from}}", // The language of the text (may be empty)
+    "to": "{{to}}",     // Target language
+  },
+}
 
-// Return data default format
+
+// Default response
 {
   text: "", // translated text
   from: "", // Recognized source language
   to: "",   // Target language (optional)
 }
 
+
+/// Hook Example
+${hookExample}
+
+
 // The supported language codes are as follows
 ${customApiLangs}
 `;
@@ -873,4 +906,28 @@ export const I18N = {
     zh: `翻译框跟随选中文本`,
     en: `Transbox Follow Selection`,
   },
+  translate_start_hook: {
+    zh: `翻译开始钩子函数`,
+    en: `Translate Start Hook`,
+  },
+  translate_start_hook_helper: {
+    zh: `翻译开始时运行，入参为： 翻译节点，原文文本。`,
+    en: `Run when translation starts, the input parameters are: translation node, original text.`,
+  },
+  translate_end_hook: {
+    zh: `翻译完成钩子函数`,
+    en: `Translate End Hook`,
+  },
+  translate_end_hook_helper: {
+    zh: `翻译完成时运行，入参为： 翻译节点，原文文本，译文文本，保留元素。`,
+    en: `Run when the translation is completed, the input parameters are: translation node, original text, translation text, retained elements.`,
+  },
+  translate_remove_hook: {
+    zh: `翻译移除钩子函数`,
+    en: `Translate Removed Hook`,
+  },
+  translate_remove_hook_helper: {
+    zh: `翻译移除时运行，入参为： 翻译节点。`,
+    en: `Run when translation is removed, the input parameters are: translation node.`,
+  },
 };

src/config/index.js

@@ -384,6 +384,7 @@ export const INPUT_PLACE_FROM = "{{from}}"; // 占位符
 export const INPUT_PLACE_TO = "{{to}}"; // 占位符
 export const INPUT_PLACE_TEXT = "{{text}}"; // 占位符
 export const INPUT_PLACE_KEY = "{{key}}"; // 占位符
+export const INPUT_PLACE_MODEL = "{{model}}"; // 占位符
 
 export const DEFAULT_COLOR = "#209CEE"; // 默认高亮背景色/线条颜色
 
@@ -416,6 +417,9 @@ export const GLOBLA_RULE = {
   skipLangs: [], // 不翻译的语言
   fixerSelector: "", // 修复函数选择器
   fixerFunc: "-", // 修复函数
+  transStartHook: "", // 钩子函数
+  transEndHook: "", // 钩子函数
+  transRemoveHook: "", // 钩子函数
 };
 
 // 输入框翻译
@@ -485,7 +489,9 @@ export const DEFAULT_SUBRULES_LIST = [
 const defaultCustomApi = {
   url: "",
   key: "",
-  customOption: "",
+  customOption: "", // (作废)
+  reqHook: "", // request 钩子函数
+  resHook: "", // response 钩子函数
   fetchLimit: DEFAULT_FETCH_LIMIT,
   fetchInterval: DEFAULT_FETCH_INTERVAL,
 };
@@ -552,7 +558,7 @@ export const DEFAULT_TRANS_APIS = {
   [OPT_TRANS_OPENAI_2]: defaultOpenaiApi,
   [OPT_TRANS_OPENAI_3]: defaultOpenaiApi,
   [OPT_TRANS_GEMINI]: {
-    url: "https://generativelanguage.googleapis.com/v1/models",
+    url: `https://generativelanguage.googleapis.com/v1/models/${INPUT_PLACE_MODEL}:generateContent?key=${INPUT_PLACE_KEY}`,
     key: "",
     model: "gemini-pro",
     prompt: `Translate the following text from ${INPUT_PLACE_FROM} to ${INPUT_PLACE_TO}:\n\n${INPUT_PLACE_TEXT}`,
@@ -560,7 +566,7 @@ export const DEFAULT_TRANS_APIS = {
     fetchInterval: 500,
   },
   [OPT_TRANS_CLOUDFLAREAI]: {
-    url: "https://api.cloudflare.com/client/v4/accounts/{ACCOUNT_ID}/ai/run/@cf/meta/m2m100-1.2b",
+    url: "https://api.cloudflare.com/client/v4/accounts/{{ACCOUNT_ID}}/ai/run/@cf/meta/m2m100-1.2b",
     key: "",
     fetchLimit: 1,
     fetchInterval: 500,

src/config/rules.js

@@ -30,6 +30,9 @@ export const DEFAULT_RULE = {
   skipLangs: [], // 不翻译的语言
   fixerSelector: "", // 修复函数选择器
   fixerFunc: GLOBAL_KEY, // 修复函数
+  transStartHook: "", // 钩子函数
+  transEndHook: "", // 钩子函数
+  transRemoveHook: "", // 钩子函数
 };
 
 const DEFAULT_DIY_STYLE = `color: #666;

src/libs/interpreter.js

@@ -0,0 +1,16 @@
+import Sval from "sval";
+
+const interpreter = new Sval({
+  // ECMA Version of the code
+  // 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15
+  // or 2015 | 2016 | 2017 | 2018 | 2019 | 2020 | 2021 | 2022 | 2023 | 2024
+  // or "latest"
+  ecmaVer: "latest",
+  // Code source type
+  // "script" or "module"
+  sourceType: "script",
+  // Whether the code runs in a sandbox
+  sandBox: true,
+});
+
+export default interpreter;

src/libs/rules.js

@@ -74,6 +74,9 @@ export const matchRule = async (
     "injectJs",
     "injectCss",
     "fixerSelector",
+    "transStartHook",
+    "transEndHook",
+    "transRemoveHook",
   ].forEach((key) => {
     if (!rule[key]?.trim()) {
       rule[key] = globalRule[key];
@@ -162,6 +165,9 @@ export const checkRules = (rules) => {
         skipLangs,
         fixerSelector,
         fixerFunc,
+        transStartHook,
+        transEndHook,
+        transRemoveHook,
       }) => ({
         pattern: pattern.trim(),
         selector: type(selector) === "string" ? selector : "",
@@ -185,6 +191,10 @@ export const checkRules = (rules) => {
         detectRemote: matchValue([GLOBAL_KEY, "true", "false"], detectRemote),
         skipLangs: type(skipLangs) === "array" ? skipLangs : [],
         fixerSelector: type(fixerSelector) === "string" ? fixerSelector : "",
+        transStartHook: type(transStartHook) === "string" ? transStartHook : "",
+        transEndHook: type(transEndHook) === "string" ? transEndHook : "",
+        transRemoveHook:
+          type(transRemoveHook) === "string" ? transRemoveHook : "",
         fixerFunc: matchValue([GLOBAL_KEY, ...FIXER_ALL], fixerFunc),
       })
     );

src/libs/translator.js

@@ -25,6 +25,7 @@ import { sendBgMsg } from "./msg";
 import { isExt } from "./client";
 import { injectInlineJs, injectInternalCss } from "./injector";
 import { kissLog } from "./log";
+import interpreter from "./interpreter";
 
 /**
  * 翻译类
@@ -405,6 +406,7 @@ export class Translator {
     // 移除键盘监听
     window.removeEventListener("keydown", this._handleKeydown);
 
+    const { transRemoveHook } = this._rule;
     this._tranNodes.forEach((innerHTML, node) => {
       if (
         !this._rule.transTiming ||
@@ -420,10 +422,17 @@ export class Translator {
       }
 
       // 移除/恢复元素
-      if (innerHTML && this._rule.transOnly === "true") {
+      if (innerHTML) {
-        node.innerHTML = innerHTML;
+        if (this._rule.transOnly === "true") {
-      } else {
+          node.innerHTML = innerHTML;
-        node.querySelector(APP_LCNAME)?.remove();
+        } else {
+          node.querySelector(APP_LCNAME)?.remove();
+        }
+        // 钩子函数
+        if (transRemoveHook?.trim()) {
+          interpreter.run(`exports.transRemoveHook = ${transRemoveHook}`);
+          interpreter.exports.transRemoveHook(node);
+        }
       }
     });
 
@@ -490,6 +499,13 @@ export class Translator {
     }
     const keeps = [];
 
+    // 翻译开始钩子函数
+    const { transStartHook } = this._rule;
+    if (transStartHook?.trim()) {
+      interpreter.run(`exports.transStartHook = ${transStartHook}`);
+      interpreter.exports.transStartHook(el, q);
+    }
+
     // 保留元素
     const [matchSelector, subSelector] = this._keepSelector;
     if (matchSelector || subSelector) {
@@ -538,18 +554,22 @@ export class Translator {
       }
     }
 
-    traEl = document.createElement(APP_LCNAME);
+    // 附加样式
-    traEl.style.visibility = "visible";
-    // if (this._rule.transOnly === "true") {
-    //   el.innerHTML = "";
-    // }
     const { selectStyle, parentStyle } = this._rule;
-    el.appendChild(traEl);
     el.style.cssText += selectStyle;
     if (el.parentElement) {
       el.parentElement.style.cssText += parentStyle;
     }
 
+    // 插入译文节点
+    traEl = document.createElement(APP_LCNAME);
+    traEl.style.visibility = "visible";
+    // if (this._rule.transOnly === "true") {
+    //   el.innerHTML = "";
+    // }
+    el.appendChild(traEl);
+
+    // 渲染译文节点
     const root = createRoot(traEl);
     root.render(<Content q={q} keeps={keeps} translator={this} $el={el} />);
   };

src/views/Content/index.js

@@ -15,6 +15,7 @@ import {
 import { useTranslate } from "../../hooks/Translate";
 import { styled, css } from "@mui/material/styles";
 import { APP_LCNAME } from "../../config";
+import interpreter from "../../libs/interpreter";
 
 const LINE_STYLES = {
   [OPT_STYLE_LINE]: "solid",
@@ -85,8 +86,15 @@ const StyledSpan = styled("span")`
 export default function Content({ q, keeps, translator, $el }) {
   const [rule, setRule] = useState(translator.rule);
   const { text, sameLang, loading } = useTranslate(q, rule, translator.setting);
-  const { transOpen, textStyle, bgColor, textDiyStyle, transOnly, transTag } =
+  const {
-    rule;
+    transOpen,
+    textStyle,
+    bgColor,
+    textDiyStyle,
+    transOnly,
+    transTag,
+    transEndHook,
+  } = rule;
 
   const { newlineLength } = translator.setting;
 
@@ -107,6 +115,14 @@ export default function Content({ q, keeps, translator, $el }) {
     };
   }, [translator.eventName]);
 
+  useEffect(() => {
+    // 运行钩子函数
+    if (text && transEndHook?.trim()) {
+      interpreter.run(`exports.transEndHook = ${transEndHook}`);
+      interpreter.exports.transEndHook($el, q, text, keeps);
+    }
+  }, [$el, q, text, keeps, transEndHook]);
+
   const gap = useMemo(() => {
     if (transOnly === "true") {
       return "";

src/views/Options/Apis.js

@@ -119,7 +119,8 @@ function ApiFields({ translator }) {
     fetchInterval = DEFAULT_FETCH_INTERVAL,
     dictNo = "",
     memoryNo = "",
-    customOption = "",
+    reqHook = "",
+    resHook = "",
   } = api;
 
   const handleChange = (e) => {
@@ -244,15 +245,26 @@ function ApiFields({ translator }) {
       )}
 
       {translator.startsWith(OPT_TRANS_CUSTOMIZE) && (
-        <TextField
+        <>
-          size="small"
+          <TextField
-          label={i18n("custom_option")}
+            size="small"
-          name="customOption"
+            label={"Request Hook"}
-          value={customOption}
+            name="reqHook"
-          onChange={handleChange}
+            value={reqHook}
-          multiline
+            onChange={handleChange}
-          maxRows={10}
+            multiline
-        />
+            maxRows={10}
+          />
+          <TextField
+            size="small"
+            label={"Response Hook"}
+            name="resHook"
+            value={resHook}
+            onChange={handleChange}
+            multiline
+            maxRows={10}
+          />
+        </>
       )}
 
       <TextField

src/views/Options/Rules.js

@@ -97,6 +97,9 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
     skipLangs = [],
     fixerSelector = "",
     fixerFunc = "-",
+    transStartHook = "",
+    transEndHook = "",
+    transRemoveHook = "",
   } = formValues;
 
   const hasSamePattern = (str) => {
@@ -458,6 +461,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
               disabled={disabled}
               onChange={handleChange}
               multiline
+              maxRows={10}
             />
 
             <TextField
@@ -468,6 +472,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
               disabled={disabled}
               onChange={handleChange}
               multiline
+              maxRows={10}
             />
             <TextField
               select
@@ -487,6 +492,40 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
               ))}
             </TextField>
 
+            <TextField
+              size="small"
+              label={i18n("translate_start_hook")}
+              helperText={i18n("translate_start_hook_helper")}
+              name="transStartHook"
+              value={transStartHook}
+              disabled={disabled}
+              onChange={handleChange}
+              multiline
+              maxRows={10}
+            />
+            <TextField
+              size="small"
+              label={i18n("translate_end_hook")}
+              helperText={i18n("translate_end_hook_helper")}
+              name="transEndHook"
+              value={transEndHook}
+              disabled={disabled}
+              onChange={handleChange}
+              multiline
+              maxRows={10}
+            />
+            <TextField
+              size="small"
+              label={i18n("translate_remove_hook")}
+              helperText={i18n("translate_remove_hook_helper")}
+              name="transRemoveHook"
+              value={transRemoveHook}
+              disabled={disabled}
+              onChange={handleChange}
+              multiline
+              maxRows={10}
+            />
+
             <TextField
               size="small"
               label={i18n("selector_style")}

src/views/Options/Setting.js

@@ -31,6 +31,8 @@ import ShortcutInput from "./ShortcutInput";
 import { useFab } from "../../hooks/Fab";
 import { sendBgMsg } from "../../libs/msg";
 import { kissLog } from "../../libs/log";
+import UploadButton from "./UploadButton";
+import DownloadButton from "./DownloadButton";
 
 function ShortcutItem({ action, label }) {
   const { shortcut, setShortcut } = useShortcut(action);
@@ -92,6 +94,14 @@ export default function Settings() {
     }
   };
 
+  const handleImport = async (data) => {
+    try {
+      await updateSetting(JSON.parse(data));
+    } catch (err) {
+      kissLog(err, "import setting");
+    }
+  };
+
   const {
     uiLang,
     minLength,
@@ -109,6 +119,21 @@ export default function Settings() {
   return (
     <Box>
       <Stack spacing={3}>
+        <Stack
+          direction="row"
+          alignItems="center"
+          spacing={2}
+          useFlexGap
+          flexWrap="wrap"
+        >
+          <UploadButton text={i18n("import")} handleImport={handleImport} />
+          <DownloadButton
+            handleData={() => JSON.stringify(setting, null, 2)}
+            text={i18n("export")}
+            fileName={`kiss-setting_${Date.now()}.json`}
+          />
+        </Stack>
+
         <FormControl size="small">
           <InputLabel>{i18n("ui_lang")}</InputLabel>
           <Select