feat: Restore CSS injection functionality

src/config/i18n.js

@@ -804,9 +804,9 @@ export const I18N = {
     zh_TW: `注入 CSS`,
   },
   inject_css_helper: {
-    zh: `初始化时注入运行，一个页面仅运行一次。`,
+    zh: `预加载时注入，一个页面仅运行一次。`,
-    en: `Injected and run at initialization, and only run once per page.`,
+    en: `Injected during preload, runs only once per page.`,
-    zh_TW: `初始化時注入運行，一個頁面僅運行一次。`,
+    zh_TW: `預先載入時注入，一個頁面僅運行一次。`,
   },
   fixer_function: {
     zh: `修复函数`,

src/config/rules.js

@@ -112,7 +112,7 @@ export const GLOBLA_RULE = {
   parentStyle: DEFAULT_SELECT_STYLE, // 选择器父节点样式
   grandStyle: DEFAULT_SELECT_STYLE, // 选择器祖节点样式
   injectJs: "", // 注入JS
-  // injectCss: "", // 注入CSS（作废）
+  injectCss: "", // 注入CSS
   transOnly: "false", // 是否仅显示译文
   // transTiming: OPT_TIMING_PAGESCROLL, // 翻译时机/鼠标悬停翻译 (暂时作废)
   transTag: DEFAULT_TRANS_TAG, // 译文元素标签

src/libs/rules.js

@@ -58,7 +58,7 @@ export const matchRule = async (href, { injectRules, subrulesList }) => {
     "parentStyle",
     "grandStyle",
     "injectJs",
-    // "injectCss",
+    "injectCss",
     "transStartHook",
     "transEndHook",
     // "transRemoveHook",
@@ -138,7 +138,7 @@ export const checkRules = (rules) => {
         parentStyle,
         grandStyle,
         injectJs,
-        // injectCss,
+        injectCss,
         apiSlug,
         fromLang,
         toLang,
@@ -171,7 +171,7 @@ export const checkRules = (rules) => {
         parentStyle: type(parentStyle) === "string" ? parentStyle : "",
         grandStyle: type(grandStyle) === "string" ? grandStyle : "",
         injectJs: type(injectJs) === "string" ? injectJs : "",
-        // injectCss: type(injectCss) === "string" ? injectCss : "",
+        injectCss: type(injectCss) === "string" ? injectCss : "",
         apiSlug:
           type(apiSlug) === "string" && apiSlug.trim() !== ""
             ? apiSlug.trim()

src/libs/translator.js

@@ -13,6 +13,7 @@ import {
   OPT_SPLIT_PARAGRAPH_PUNCTUATION,
   OPT_SPLIT_PARAGRAPH_DISABLE,
   OPT_SPLIT_PARAGRAPH_TEXTLENGTH,
+  MSG_INJECT_CSS,
 } from "../config";
 import { interpreter } from "./interpreter";
 import { clearFetchPool } from "./pool";
@@ -26,6 +27,9 @@ import { shortcutRegister } from "./shortcut";
 import { tryDetectLang } from "./detect";
 import { trustedTypesHelper } from "./trustedTypes";
 import { injectJs, INJECTOR } from "../injectors";
+import { injectInternalCss } from "./injector";
+import { isExt } from "./client";
+import { sendBgMsg } from "./msg";
 
 /**
  * @class Translator
@@ -1624,7 +1628,14 @@ export class Translator {
       //   injectCss && injectInternalCss(injectCss);
       // }
 
-      const { injectJs, toLang } = this.#rule;
+      const { injectJs, injectCss, toLang } = this.#rule;
+
+      if (isExt) {
+        injectCss && sendBgMsg(MSG_INJECT_CSS, injectCss);
+      } else {
+        injectCss && injectInternalCss(injectCss);
+      }
+
       if (injectJs?.trim()) {
         const apiSetting = { ...this.#apiSetting };
         const docInfo = { ...this.#docInfo };

src/views/Options/Rules.js

@@ -106,7 +106,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
     parentStyle = "",
     grandStyle = "",
     injectJs = "",
-    // injectCss = "",
+    injectCss = "",
     apiSlug,
     fromLang,
     toLang,
@@ -651,7 +651,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
               maxRows={10}
             /> */}
 
-            {/* <TextField
+            <TextField
               size="small"
               label={i18n("inject_css")}
               helperText={i18n("inject_css_helper")}
@@ -661,7 +661,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
               onChange={handleChange}
               maxRows={10}
               multiline
-            /> */}
+            />
             <TextField
               size="small"
               label={i18n("inject_js")}