add common.js

src/common.js

@@ -0,0 +1,95 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import Action from "./views/Action";
+import createCache from "@emotion/cache";
+import { CacheProvider } from "@emotion/react";
+import {
+  MSG_TRANS_TOGGLE,
+  MSG_TRANS_TOGGLE_STYLE,
+  MSG_TRANS_GETRULE,
+  MSG_TRANS_PUTRULE,
+  APP_LCNAME,
+} from "./config";
+import { getRulesWithDefault, getFabWithDefault } from "./libs/storage";
+import { Translator } from "./libs/translator";
+import { sendIframeMsg, sendParentMsg } from "./libs/iframe";
+import { matchRule } from "./libs/rules";
+
+export async function runTranslator(setting) {
+  const href = document.location.href;
+  const rules = await getRulesWithDefault();
+  const rule = await matchRule(rules, href, setting);
+  const translator = new Translator(rule, setting);
+
+  return { translator, rule };
+}
+
+export function runIframe(setting) {
+  let translator;
+  window.addEventListener("message", (e) => {
+    const { action, args } = e.data || {};
+    switch (action) {
+      case MSG_TRANS_TOGGLE:
+        translator?.toggle();
+        break;
+      case MSG_TRANS_TOGGLE_STYLE:
+        translator?.toggleStyle();
+        break;
+      case MSG_TRANS_PUTRULE:
+        if (!translator) {
+          translator = new Translator(args, setting);
+        } else {
+          translator.updateRule(args || {});
+        }
+        break;
+      default:
+    }
+  });
+  sendParentMsg(MSG_TRANS_GETRULE);
+}
+
+export async function showFab(translator) {
+  const fab = await getFabWithDefault();
+  if (!fab.isHide) {
+    const $action = document.createElement("div");
+    $action.setAttribute("id", APP_LCNAME);
+    document.body.parentElement.appendChild($action);
+    const shadowContainer = $action.attachShadow({ mode: "closed" });
+    const emotionRoot = document.createElement("style");
+    const shadowRootElement = document.createElement("div");
+    shadowContainer.appendChild(emotionRoot);
+    shadowContainer.appendChild(shadowRootElement);
+    const cache = createCache({
+      key: APP_LCNAME,
+      prepend: true,
+      container: emotionRoot,
+    });
+    ReactDOM.createRoot(shadowRootElement).render(
+      <React.StrictMode>
+        <CacheProvider value={cache}>
+          <Action translator={translator} fab={fab} />
+        </CacheProvider>
+      </React.StrictMode>
+    );
+  }
+}
+
+export function windowListener(rule) {
+  window.addEventListener("message", (e) => {
+    const { action } = e.data || {};
+    switch (action) {
+      case MSG_TRANS_GETRULE:
+        sendIframeMsg(MSG_TRANS_PUTRULE, rule);
+        break;
+      default:
+    }
+  });
+}
+
+export function showErr(err) {
+  console.error("[KISS-Translator]", err);
+  const $err = document.createElement("div");
+  $err.innerText = `KISS-Translator: ${err.message}`;
+  $err.style.cssText = "background:red; color:#fff;";
+  document.body.prepend($err);
+}

src/content.js

@@ -1,64 +1,22 @@
 import { browser } from "./libs/browser";
-import React from "react";
-import ReactDOM from "react-dom/client";
-import Action from "./views/Action";
-import createCache from "@emotion/cache";
-import { CacheProvider } from "@emotion/react";
 import {
   MSG_TRANS_TOGGLE,
   MSG_TRANS_TOGGLE_STYLE,
   MSG_TRANS_GETRULE,
   MSG_TRANS_PUTRULE,
-  APP_LCNAME,
 } from "./config";
+import { getSettingWithDefault } from "./libs/storage";
+import { isIframe, sendIframeMsg } from "./libs/iframe";
+import { runWebfix } from "./libs/webfix";
 import {
-  getSettingWithDefault,
+  runIframe,
-  getRulesWithDefault,
+  runTranslator,
-  getFabWithDefault,
+  showFab,
-} from "./libs/storage";
+  windowListener,
-import { Translator } from "./libs/translator";
+  showErr,
-import { isIframe, sendIframeMsg, sendParentMsg } from "./libs/iframe";
+} from "./common";
-import { matchRule } from "./libs/rules";
-import { webfix } from "./libs/webfix";
 
-/**
+function runtimeListener(translator) {
- * 入口函数
- */
-const init = async () => {
-  const setting = await getSettingWithDefault();
-
-  if (isIframe) {
-    let translator;
-    window.addEventListener("message", (e) => {
-      const { action, args } = e.data || {};
-      switch (action) {
-        case MSG_TRANS_TOGGLE:
-          translator?.toggle();
-          break;
-        case MSG_TRANS_TOGGLE_STYLE:
-          translator?.toggleStyle();
-          break;
-        case MSG_TRANS_PUTRULE:
-          if (!translator) {
-            translator = new Translator(args, setting);
-          } else {
-            translator.updateRule(args || {});
-          }
-          break;
-        default:
-      }
-    });
-    sendParentMsg(MSG_TRANS_GETRULE);
-    return;
-  }
-
-  const href = document.location.href;
-  const rules = await getRulesWithDefault();
-  const rule = await matchRule(rules, href, setting);
-  const translator = new Translator(rule, setting);
-  webfix(href, setting);
-
-  // 监听消息
   browser?.runtime.onMessage.addListener(async ({ action, args }) => {
     switch (action) {
       case MSG_TRANS_TOGGLE:
@@ -80,50 +38,35 @@ const init = async () => {
     }
     return { data: translator.rule };
   });
-  window.addEventListener("message", (e) => {
+}
-    const { action } = e.data || {};
-    switch (action) {
-      case MSG_TRANS_GETRULE:
-        sendIframeMsg(MSG_TRANS_PUTRULE, rule);
-        break;
-      default:
-    }
-  });
-
-  // 浮球按钮
-  const fab = await getFabWithDefault();
-  if (!fab.isHide) {
-    const $action = document.createElement("div");
-    $action.setAttribute("id", APP_LCNAME);
-    document.body.parentElement.appendChild($action);
-    const shadowContainer = $action.attachShadow({ mode: "closed" });
-    const emotionRoot = document.createElement("style");
-    const shadowRootElement = document.createElement("div");
-    shadowContainer.appendChild(emotionRoot);
-    shadowContainer.appendChild(shadowRootElement);
-    const cache = createCache({
-      key: APP_LCNAME,
-      prepend: true,
-      container: emotionRoot,
-    });
-    ReactDOM.createRoot(shadowRootElement).render(
-      <React.StrictMode>
-        <CacheProvider value={cache}>
-          <Action translator={translator} fab={fab} />
-        </CacheProvider>
-      </React.StrictMode>
-    );
-  }
-};
 
+/**
+ * 入口函数
+ */
 (async () => {
   try {
-    await init();
+    // 读取设置信息
+    const setting = await getSettingWithDefault();
+
+    // 适配iframe
+    if (isIframe) {
+      runIframe(setting);
+      return;
+    }
+
+    // 不规范网页修复
+    await runWebfix(setting);
+
+    // 翻译网页
+    const { translator, rule } = await runTranslator(setting);
+
+    // 监听消息
+    windowListener(rule);
+    runtimeListener(translator);
+
+    // 浮球按钮
+    await showFab(translator);
   } catch (err) {
-    console.error("[KISS-Translator]", err);
+    showErr(err);
-    const $err = document.createElement("div");
-    $err.innerText = `KISS-Translator: ${err.message}`;
-    $err.style.cssText = "background:red; color:#fff;";
-    document.body.prepend($err);
   }
 })();

src/libs/webfix.js

@@ -199,12 +199,13 @@ export const loadOrFetchWebfix = async (url) => {
 /**
  * 匹配站点
  */
-export async function webfix(href, { injectWebfix }) {
+export async function runWebfix({ injectWebfix }) {
   try {
     if (!injectWebfix) {
       return;
     }
 
+    const href = document.location.href;
     const sites = await loadOrFetchWebfix(process.env.REACT_APP_WEBFIXURL);
     for (var i = 0; i < sites.length; i++) {
       var site = sites[i];

src/userscript.js

@@ -1,38 +1,18 @@
-import React from "react";
+import { getSettingWithDefault } from "./libs/storage";
-import ReactDOM from "react-dom/client";
-import Action from "./views/Action";
-import createCache from "@emotion/cache";
-import { CacheProvider } from "@emotion/react";
-import {
-  getSettingWithDefault,
-  getRulesWithDefault,
-  getFabWithDefault,
-} from "./libs/storage";
-import { Translator } from "./libs/translator";
 import { trySyncAllSubRules } from "./libs/subRules";
-import {
+import { isIframe } from "./libs/iframe";
-  MSG_TRANS_TOGGLE,
-  MSG_TRANS_TOGGLE_STYLE,
-  MSG_TRANS_GETRULE,
-  MSG_TRANS_PUTRULE,
-  APP_LCNAME,
-} from "./config";
-import { isIframe, sendIframeMsg, sendParentMsg } from "./libs/iframe";
 import { handlePing, injectScript } from "./libs/gm";
-import { matchRule } from "./libs/rules";
 import { genEventName } from "./libs/utils";
-import { webfix } from "./libs/webfix";
+import { runWebfix } from "./libs/webfix";
+import {
+  runIframe,
+  runTranslator,
+  showFab,
+  windowListener,
+  showErr,
+} from "./common";
 
-/**
+function runSettingPage() {
- * 入口函数
- */
-const init = async () => {
-  // 设置页面
-  if (
-    document.location.href.includes(process.env.REACT_APP_OPTIONSPAGE_DEV) ||
-    document.location.href.includes(process.env.REACT_APP_OPTIONSPAGE) ||
-    document.location.href.includes(process.env.REACT_APP_OPTIONSPAGE2)
-  ) {
   if (GM?.info?.script?.grant?.includes("unsafeWindow")) {
     unsafeWindow.GM = GM;
     unsafeWindow.APP_INFO = {
@@ -47,90 +27,47 @@ const init = async () => {
     script.textContent = `(${injectScript})("${ping}")`;
     document.head.append(script);
   }
+}
 
-    return;
+/**
-  }
+ * 入口函数
-
+ */
-  // 翻译页面
-  const setting = await getSettingWithDefault();
-
-  if (isIframe) {
-    let translator;
-    window.addEventListener("message", (e) => {
-      const { action, args } = e.data || {};
-      switch (action) {
-        case MSG_TRANS_TOGGLE:
-          translator?.toggle();
-          break;
-        case MSG_TRANS_TOGGLE_STYLE:
-          translator?.toggleStyle();
-          break;
-        case MSG_TRANS_PUTRULE:
-          if (!translator) {
-            translator = new Translator(args, setting);
-          } else {
-            translator.updateRule(args || {});
-          }
-          break;
-        default:
-      }
-    });
-    sendParentMsg(MSG_TRANS_GETRULE);
-    return;
-  }
-
-  const href = isIframe ? document.referrer : document.location.href;
-  const rules = await getRulesWithDefault();
-  const rule = await matchRule(rules, href, setting);
-  const translator = new Translator(rule, setting);
-  webfix(href, setting);
-
-  // 监听消息
-  window.addEventListener("message", (e) => {
-    const { action } = e.data || {};
-    switch (action) {
-      case MSG_TRANS_GETRULE:
-        sendIframeMsg(MSG_TRANS_PUTRULE, rule);
-        break;
-      default:
-    }
-  });
-
-  // 浮球按钮
-  const fab = await getFabWithDefault();
-  const $action = document.createElement("div");
-  $action.setAttribute("id", APP_LCNAME);
-  document.body.parentElement.appendChild($action);
-  const shadowContainer = $action.attachShadow({ mode: "closed" });
-  const emotionRoot = document.createElement("style");
-  const shadowRootElement = document.createElement("div");
-  shadowContainer.appendChild(emotionRoot);
-  shadowContainer.appendChild(shadowRootElement);
-  const cache = createCache({
-    key: APP_LCNAME,
-    prepend: true,
-    container: emotionRoot,
-  });
-  ReactDOM.createRoot(shadowRootElement).render(
-    <React.StrictMode>
-      <CacheProvider value={cache}>
-        <Action translator={translator} fab={fab} />
-      </CacheProvider>
-    </React.StrictMode>
-  );
-
-  // 同步订阅规则
-  trySyncAllSubRules(setting);
-};
-
 (async () => {
   try {
-    await init();
+    // 设置页面
+    if (
+      document.location.href.includes(process.env.REACT_APP_OPTIONSPAGE_DEV) ||
+      document.location.href.includes(process.env.REACT_APP_OPTIONSPAGE) ||
+      document.location.href.includes(process.env.REACT_APP_OPTIONSPAGE2)
+    ) {
+      runSettingPage();
+      return;
+    }
+
+    // 读取设置信息
+    const setting = await getSettingWithDefault();
+
+    // 适配iframe
+    if (isIframe) {
+      runIframe(setting);
+      return;
+    }
+
+    // 不规范网页修复
+    await runWebfix(setting);
+
+    // 翻译网页
+    const { translator, rule } = await runTranslator(setting);
+
+    // 监听消息
+    windowListener(rule);
+
+    // 浮球按钮
+    await showFab(translator);
+
+    // 同步订阅规则
+    await trySyncAllSubRules(setting);
   } catch (err) {
-    console.error("[KISS-Translator]", err);
+    showErr(err);
-    const $err = document.createElement("div");
-    $err.innerText = `KISS-Translator: ${err.message}`;
-    $err.style.cssText = "background:red; color:#fff;";
-    document.body.prepend($err);
   }
 })();