userscript...

src/hooks/Fetch.js

@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+
+/**
+ * fetch data hook
+ * @returns
+ */
+export const useFetch = (url) => {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    if (!url) {
+      return;
+    }
+    setLoading(true);
+    fetch(url)
+      .then((res) => {
+        if (res.ok) {
+          if (res.headers.get("Content-Type")?.includes("json")) {
+            return res.json().then(setData);
+          }
+          return res.text().then(setData);
+        }
+        setError(`[${res.status}] ${res.statusText}`);
+      })
+      .catch(setError)
+      .finally(() => setLoading(false));
+  }, [url]);
+
+  return [data, loading, error];
+};

src/hooks/I18n.js

@@ -1,6 +1,6 @@
 import { useSetting } from "./Setting";
 import { I18N, URL_RAW_PREFIX } from "../config";
-import { useEffect, useState } from "react";
+import { useFetch } from "./Fetch";
 
 /**
  * 多语言 hook
@@ -13,29 +13,7 @@ export const useI18n = () => {
 
 export const useI18nMd = (key) => {
   const i18n = useI18n();
-  const [md, setMd] = useState("");
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState("");
-
   const fileName = i18n(key);
-
-  useEffect(() => {
-    if (!fileName) {
-      return;
-    }
-
-    const url = `${URL_RAW_PREFIX}/${fileName}`;
-    setLoading(true);
-    fetch(url)
-      .then((res) => {
-        if (res.ok) {
-          return res.text().then(setMd);
-        }
-        setError(`[${res.status}] ${res.statusText}`);
-      })
-      .catch(setError)
-      .finally(() => setLoading(false));
-  }, [fileName]);
-
-  return [md, loading, error];
+  const url = `${URL_RAW_PREFIX}/${fileName}`;
+  return useFetch(url);
 };

src/hooks/Translate.js

@@ -2,8 +2,9 @@ import { useEffect } from "react";
 import { useState } from "react";
 import { transPool } from "../libs/pool";
 import { browser } from "../libs/browser";
-import { MSG_TRANS_PUTRULE } from "../config";
+import { MSG_TRANS_PUTRULE, EVENT_KISS } from "../config";
 import { detectLang } from "../libs";
+import { isExt } from "../libs/browser";
 
 /**
  * 翻译hook
@@ -25,10 +26,31 @@ export function useTranslate(q, initRule) {
     return true;
   };
 
+  const handleKissEvent = (e) => {
+    const action = e?.detail?.action;
+    const args = e?.detail?.args || {};
+    switch (action) {
+      case MSG_TRANS_PUTRULE:
+        setRule((pre) => ({ ...pre, ...args }));
+        break;
+      default:
+        // console.log(`[popup] kissEvent action skip: ${action}`);
+    }
+  };
+
   useEffect(() => {
-    browser?.runtime.onMessage.addListener(handleMessage);
+    if (isExt) {
+      browser?.runtime.onMessage.addListener(handleMessage);
+    } else {
+      window.addEventListener(EVENT_KISS, handleKissEvent);
+    }
+
     return () => {
-      browser?.runtime.onMessage.removeListener(handleMessage);
+      if (isExt) {
+        browser?.runtime.onMessage.removeListener(handleMessage);
+      } else {
+        window.removeEventListener(EVENT_KISS, handleKissEvent);
+      }
     };
   }, []);