feat: support translate hooks

src/config/i18n.js

@@ -906,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

@@ -417,6 +417,9 @@ export const GLOBLA_RULE = {
   skipLangs: [], // 不翻译的语言
   fixerSelector: "", // 修复函数选择器
   fixerFunc: "-", // 修复函数
+  transStartHook: "", // 钩子函数
+  transEndHook: "", // 钩子函数
+  transRemoveHook: "", // 钩子函数
 };
 
 // 输入框翻译

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/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") {
-        node.innerHTML = innerHTML;
-      } else {
-        node.querySelector(APP_LCNAME)?.remove();
+      if (innerHTML) {
+        if (this._rule.transOnly === "true") {
+          node.innerHTML = innerHTML;
+        } 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 } =
-    rule;
+  const {
+    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/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")}