optimize userscript events

src/userscript.js

@@ -5,45 +5,11 @@ import Action from "./views/Action";
 import createCache from "@emotion/cache";
 import { CacheProvider } from "@emotion/react";
 
-import {
-  MSG_TRANS_TOGGLE,
-  MSG_TRANS_GETRULE,
-  MSG_TRANS_PUTRULE,
-  MSG_TRANS_CURRULE,
-  EVENT_KISS,
-} from "./config";
 import { getRules, matchRule } from "./libs";
 import { getSetting } from "./libs";
 import { transPool } from "./libs/pool";
 import { Translator } from "./libs/translator";
 
-/**
- * 自定义元素
- */
-// class ActionElement extends HTMLElement {
-//   connectedCallback() {
-//     const shadowContainer = this.attachShadow({ mode: "open" });
-//     const emotionRoot = document.createElement("style");
-//     const shadowRootElement = document.createElement("div");
-//     shadowContainer.appendChild(emotionRoot);
-//     shadowContainer.appendChild(shadowRootElement);
-
-//     const cache = createCache({
-//       key: "css",
-//       prepend: true,
-//       container: emotionRoot,
-//     });
-
-//     ReactDOM.createRoot(shadowRootElement).render(
-//       <React.StrictMode>
-//         <CacheProvider value={cache}>
-//           <Action />
-//         </CacheProvider>
-//       </React.StrictMode>
-//     );
-//   }
-// }
-
 /**
  * 入口函数
  */
@@ -63,18 +29,19 @@ import { Translator } from "./libs/translator";
     return;
   }
 
-  // iframe
+  // skip iframe
   if (window.self !== window.top) {
     return;
   }
 
-  // 插入按钮
-  // const actionName = "kiss-action";
-  // customElements.define(actionName, ActionElement);
-  // const $action = document.createElement(actionName);
-  // document.body.parentElement.appendChild($action);
+  // 翻译页面
+  const { fetchInterval, fetchLimit } = await getSetting();
+  transPool.update(fetchInterval, fetchLimit);
+  const rules = await getRules();
+  const rule = matchRule(rules, document.location.href);
+  const translator = new Translator(rule);
 
-  // 插入按钮，兼容性更好
+  // 浮球按钮
   const $action = document.createElement("div");
   $action.setAttribute("id", "kiss-translator");
   document.body.parentElement.appendChild($action);
@@ -91,41 +58,8 @@ import { Translator } from "./libs/translator";
   ReactDOM.createRoot(shadowRootElement).render(
     <React.StrictMode>
       <CacheProvider value={cache}>
-        <Action />
+        <Action translator={translator} />
       </CacheProvider>
     </React.StrictMode>
   );
-
-  // 翻译页面
-  const { fetchInterval, fetchLimit } = await getSetting();
-  transPool.update(fetchInterval, fetchLimit);
-  const rules = await getRules();
-  const rule = matchRule(rules, document.location.href);
-  const translator = new Translator(rule);
-
-  // 监听消息
-  window.addEventListener(EVENT_KISS, (e) => {
-    const action = e?.detail?.action;
-    const args = e?.detail?.args || {};
-    switch (action) {
-      case MSG_TRANS_TOGGLE:
-        translator.toggle();
-        break;
-      case MSG_TRANS_GETRULE:
-        window.dispatchEvent(
-          new CustomEvent(EVENT_KISS, {
-            detail: {
-              action: MSG_TRANS_CURRULE,
-              args: translator.rule,
-            },
-          })
-        );
-        break;
-      case MSG_TRANS_PUTRULE:
-        translator.updateRule(args);
-        break;
-      default:
-      // console.log(`[entry] kissEvent action skip: ${action}`);
-    }
-  });
 })();

src/views/Action/index.js

@@ -11,7 +11,7 @@ import { useEffect, useState, useMemo, useCallback } from "react";
 import { StoragesProvider } from "../../hooks/Storage";
 import Popup from "../Popup";
 
-export default function Action() {
+export default function Action({ translator }) {
   const fabWidth = 56;
   const [showPopup, setShowPopup] = useState(false);
   const [windowSize, setWindowSize] = useState({
@@ -103,7 +103,7 @@ export default function Action() {
           }
         >
           <Paper>
-            <Popup setShowPopup={setShowPopup} />
+            <Popup setShowPopup={setShowPopup} translator={translator} />
           </Paper>
         </Draggable>
         <Draggable

src/views/Popup/index.js

@@ -17,13 +17,11 @@ import {
   OPT_LANGS_FROM,
   OPT_LANGS_TO,
   OPT_STYLE_ALL,
-  EVENT_KISS,
-  MSG_TRANS_CURRULE,
 } from "../../config";
 
-export default function Popup({ setShowPopup }) {
+export default function Popup({ setShowPopup, translator: tran }) {
   const i18n = useI18n();
-  const [rule, setRule] = useState(null);
+  const [rule, setRule] = useState(tran.rule);
 
   const handleOpenSetting = () => {
     if (isExt) {
@@ -41,13 +39,7 @@ export default function Popup({ setShowPopup }) {
       if (isExt) {
         await sendTabMsg(MSG_TRANS_TOGGLE);
       } else {
-        window.dispatchEvent(
-          new CustomEvent(EVENT_KISS, {
-            detail: {
-              action: MSG_TRANS_TOGGLE,
-            },
-          })
-        );
+        tran.toggle();
       }
     } catch (err) {
       console.log("[toggle trans]", err);
@@ -62,46 +54,17 @@ export default function Popup({ setShowPopup }) {
       if (isExt) {
         await sendTabMsg(MSG_TRANS_PUTRULE, { [name]: value });
       } else {
-        window.dispatchEvent(
-          new CustomEvent(EVENT_KISS, {
-            detail: {
-              action: MSG_TRANS_PUTRULE,
-              args: { [name]: value },
-            },
-          })
-        );
+        tran.updateRule({ [name]: value });
       }
     } catch (err) {
       console.log("[update rule]", err);
     }
   };
 
-  const handleKissEvent = (e) => {
-    const action = e?.detail?.action;
-    const args = e?.detail?.args || {};
-    switch (action) {
-      case MSG_TRANS_CURRULE:
-        setRule(args);
-        break;
-      default:
-      // console.log(`[popup] kissEvent action skip: ${action}`);
-    }
-  };
-
   useEffect(() => {
     if (!isExt) {
-      window.addEventListener(EVENT_KISS, handleKissEvent);
-      window.dispatchEvent(
-        new CustomEvent(EVENT_KISS, {
-          detail: { action: MSG_TRANS_GETRULE },
-        })
-      );
-
-      return () => {
-        window.removeEventListener(EVENT_KISS, handleKissEvent);
-      };
+      return;
     }
-
     (async () => {
       try {
         const res = await sendTabMsg(MSG_TRANS_GETRULE);