fix: inject js/css

src/config/i18n.js

@@ -228,11 +228,11 @@ export const I18N = {
     en: `After setting, it will produce mutual translation effect with the target language, but it relies on remote language recognition.`,
   },
   text_style: {
-    zh: `文字样式`,
+    zh: `译文样式`,
     en: `Text Style`,
   },
   text_style_alt: {
-    zh: `文字样式`,
+    zh: `译文样式`,
     en: `Text Style`,
   },
   bg_color: {
@@ -419,6 +419,10 @@ export const I18N = {
     zh: `注入JS`,
     en: `Inject JS`,
   },
+  inject_js_helper: {
+    zh: `翻译时注入运行，且随着页面变化，可能会多次注入运行。`,
+    en: `It is injected and run during translation, and may be injected and run multiple times as the page changes.`,
+  },
   inject_css: {
     zh: `注入CSS`,
     en: `Inject CSS`,

src/libs/injector.js

@@ -4,7 +4,7 @@ export const injectInlineJs = (code) => {
   el.setAttribute("data-source", "KISS-Calendar injectInlineJs");
   el.setAttribute("type", "text/javascript");
   el.textContent = code;
-  document.body.appendChild(el);
+  document.body?.appendChild(el);
 };
 
 // Function to inject external JavaScript file
@@ -13,7 +13,7 @@ export const injectExternalJs = (src) => {
   el.setAttribute("data-source", "KISS-Calendar injectExternalJs");
   el.setAttribute("type", "text/javascript");
   el.setAttribute("src", src);
-  document.body.appendChild(el);
+  document.body?.appendChild(el);
 };
 
 // Function to inject internal CSS code
@@ -21,7 +21,7 @@ export const injectInternalCss = (styles) => {
   const el = document.createElement("style");
   el.setAttribute("data-source", "KISS-Calendar injectInternalCss");
   el.textContent = styles;
-  document.head.appendChild(el);
+  document.head?.appendChild(el);
 };
 
 // Function to inject external CSS file
@@ -31,5 +31,5 @@ export const injectExternalCss = (href) => {
   el.setAttribute("rel", "stylesheet");
   el.setAttribute("type", "text/css");
   el.setAttribute("href", href);
-  document.head.appendChild(el);
+  document.head?.appendChild(el);
 };

src/libs/translator.js

@@ -20,6 +20,8 @@ import { debounce, genEventName } from "./utils";
 import { runFixer } from "./webfix";
 import { apiTranslate } from "../apis";
 import { sendBgMsg } from "./msg";
+import { isExt } from "./client";
+import { injectInlineJs, injectInternalCss } from "./injector";
 
 /**
  * 翻译类
@@ -276,8 +278,13 @@ export class Translator {
     }
 
     // 注入用户JS/CSS
-    injectJs && sendBgMsg(MSG_INJECT_JS, injectJs);
-    injectCss && sendBgMsg(MSG_INJECT_CSS, injectCss);
+    if (isExt) {
+      injectJs && sendBgMsg(MSG_INJECT_JS, injectJs);
+      injectCss && sendBgMsg(MSG_INJECT_CSS, injectCss);
+    } else {
+      injectJs && injectInlineJs(injectJs);
+      injectCss && injectInternalCss(injectCss);
+    }
 
     // 搜索节点
     this._queryNodes();
@@ -406,9 +413,7 @@ export class Translator {
     });
 
     // 移除用户JS/CSS
-    document
-      .querySelectorAll(`[data-source^="KISS-Calendar"]`)
-      ?.forEach((el) => el.remove());
+    this._removeInjector();
 
     // 清空节点集合
     this._rootNodes.clear();
@@ -418,8 +423,15 @@ export class Translator {
     clearFetchPool();
   };
 
+  _removeInjector = () => {
+    document
+      .querySelectorAll(`[data-source^="KISS-Calendar"]`)
+      ?.forEach((el) => el.remove());
+  };
+
   _reTranslate = debounce(() => {
     if (this._rule.transOpen === "true") {
+      this._removeInjector();
       this._register();
     }
   }, 500);

src/views/Options/Rules.js

@@ -353,6 +353,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
             <TextField
               size="small"
               label={i18n("inject_js")}
+              helperText={i18n("inject_js_helper")}
               name="injectJs"
               value={injectJs}
               disabled={disabled}