feat: inject user js/css

src/libs/injector.js

@@ -0,0 +1,35 @@
+// Function to inject inline JavaScript code
+export const injectInlineJs = (code) => {
+  const el = document.createElement("script");
+  el.setAttribute("data-source", "KISS-Calendar injectInlineJs");
+  el.setAttribute("type", "text/javascript");
+  el.textContent = code;
+  document.body.appendChild(el);
+};
+
+// Function to inject external JavaScript file
+export const injectExternalJs = (src) => {
+  const el = document.createElement("script");
+  el.setAttribute("data-source", "KISS-Calendar injectExternalJs");
+  el.setAttribute("type", "text/javascript");
+  el.setAttribute("src", src);
+  document.body.appendChild(el);
+};
+
+// Function to inject internal CSS code
+export const injectInternalCss = (styles) => {
+  const el = document.createElement("style");
+  el.setAttribute("data-source", "KISS-Calendar injectInternalCss");
+  el.textContent = styles;
+  document.head.appendChild(el);
+};
+
+// Function to inject external CSS file
+export const injectExternalCss = (href) => {
+  const el = document.createElement("link");
+  el.setAttribute("data-source", "KISS-Calendar injectExternalCss");
+  el.setAttribute("rel", "stylesheet");
+  el.setAttribute("type", "text/css");
+  el.setAttribute("href", href);
+  document.head.appendChild(el);
+};

src/libs/rules.js

@@ -68,6 +68,10 @@ export const matchRule = async (
   rule.selector = rule.selector?.trim() || globalRule.selector;
   rule.keepSelector = rule.keepSelector?.trim() || globalRule.keepSelector;
   rule.terms = rule.terms?.trim() || globalRule.terms;
+  rule.selectStyle = rule.selectStyle?.trim() || globalRule.selectStyle;
+  rule.parentStyle = rule.parentStyle?.trim() || globalRule.parentStyle;
+  rule.injectJs = rule.injectJs?.trim() || globalRule.injectJs;
+  rule.injectCss = rule.injectCss?.trim() || globalRule.injectCss;
   if (rule.textStyle === GLOBAL_KEY) {
     rule.textStyle = globalRule.textStyle;
     rule.bgColor = globalRule.bgColor;
@@ -116,6 +120,10 @@ export const checkRules = (rules) => {
         selector,
         keepSelector,
         terms,
+        selectStyle,
+        parentStyle,
+        injectJs,
+        injectCss,
         translator,
         fromLang,
         toLang,
@@ -128,6 +136,10 @@ export const checkRules = (rules) => {
         selector: type(selector) === "string" ? selector : "",
         keepSelector: type(keepSelector) === "string" ? keepSelector : "",
         terms: type(terms) === "string" ? terms : "",
+        selectStyle: type(selectStyle) === "string" ? selectStyle : "",
+        parentStyle: type(parentStyle) === "string" ? parentStyle : "",
+        injectJs: type(injectJs) === "string" ? injectJs : "",
+        injectCss: type(injectCss) === "string" ? injectCss : "",
         bgColor: type(bgColor) === "string" ? bgColor : "",
         textDiyStyle: type(textDiyStyle) === "string" ? textDiyStyle : "",
         translator: matchValue([GLOBAL_KEY, ...OPT_TRANS_ALL], translator),

src/libs/translator.js

@@ -4,6 +4,8 @@ import {
   TRANS_MIN_LENGTH,
   TRANS_MAX_LENGTH,
   MSG_TRANS_CURRULE,
+  MSG_INJECT_JS,
+  MSG_INJECT_CSS,
   OPT_STYLE_DASHLINE,
   OPT_STYLE_FUZZY,
   SHADOW_KEY,
@@ -17,6 +19,7 @@ import { updateFetchPool, clearFetchPool } from "./fetch";
 import { debounce, genEventName } from "./utils";
 import { runFixer } from "./webfix";
 import { apiTranslate } from "../apis";
+import { sendBgMsg } from "./msg";
 
 /**
  * 翻译类
@@ -262,7 +265,8 @@ export class Translator {
   };
 
   _register = () => {
-    if (this._rule.fromLang === this._rule.toLang) {
+    const { fromLang, toLang, injectJs, injectCss } = this._rule;
+    if (fromLang === toLang) {
       return;
     }
 
@@ -271,6 +275,10 @@ export class Translator {
       runFixer(this._fixerSetting);
     }
 
+    // 注入用户JS/CSS
+    injectJs && sendBgMsg(MSG_INJECT_JS, injectJs);
+    injectCss && sendBgMsg(MSG_INJECT_CSS, injectCss);
+
     // 搜索节点
     this._queryNodes();
 
@@ -397,6 +405,11 @@ export class Translator {
       }
     });
 
+    // 移除用户JS/CSS
+    document
+      .querySelectorAll(`[data-source^="KISS-Calendar"]`)
+      ?.forEach((el) => el.remove());
+
     // 清空节点集合
     this._rootNodes.clear();
     this._tranNodes.clear();
@@ -500,12 +513,11 @@ export class Translator {
     // if (this._setting.transOnly) {
     //   el.innerHTML = "";
     // }
+    const { selectStyle, parentStyle } = this._rule;
     el.appendChild(traEl);
-    el.style.cssText +=
-      "-webkit-line-clamp: unset; max-height: none; height: auto;";
+    el.style.cssText += selectStyle;
     if (el.parentElement) {
-      el.parentElement.style.cssText +=
-        "-webkit-line-clamp: unset; max-height: none; height: auto;";
+      el.parentElement.style.cssText += parentStyle;
     }
 
     // console.log({ q, keeps });