userscript...

src/libs/auth.js

@@ -2,7 +2,14 @@ import storage from "./storage";
 import { STOKEY_MSAUTH, URL_MICROSOFT_AUTH } from "../config";
 import { fetchPolyfill } from "./fetch";
 
-const parseMSToken = (token) => JSON.parse(atob(token.split(".")[1])).exp;
+const parseMSToken = (token) => {
+  try {
+    return JSON.parse(atob(token.split(".")[1])).exp;
+  } catch (err) {
+    console.log("[parseMSToken]", err);
+  }
+  return 0;
+};
 
 /**
  * 闭包缓存token，减少对storage查询

src/libs/fetch.js

@@ -13,20 +13,29 @@ import {
  * @param {*} init
  * @returns
  */
-const fetchGM = async (input, { method, headers, body }) =>
+const fetchGM = async (input, { method = "GET", headers, body } = {}) =>
   new Promise((resolve, reject) => {
     try {
-      window.GM.xmlhttpRequest({
+      window.GM_xmlhttpRequest({
         method,
         url: input,
         headers,
         data: body,
         onload: (response) => {
-          resolve(new Response(response.response));
-        },
-        onerror: (error) => {
-          reject(error);
+          if (response.status === 200) {
+            const headers = new Headers();
+            response.responseHeaders.split("\n").forEach((line) => {
+              let [name, value] = line.split(":").map((item) => item.trim());
+              if (name && value) {
+                headers.append(name, value);
+              }
+            });
+            resolve(new Response(response.response, { headers }));
+          } else {
+            reject(new Error(`[${response.status}] ${response.responseText}`));
+          }
         },
+        onerror: reject,
       });
     } catch (error) {
       reject(error);

src/libs/storage.js

@@ -21,11 +21,11 @@ async function set(key, val) {
 
 async function get(key) {
   if (isExt) {
-    const res = await browser.storage.local.get([key]);
-    return res[key];
+    const val = await browser.storage.local.get([key]);
+    return val[key];
   } else if (isGm) {
-    const res = await window.GM.getValue(key);
-    return res;
+    const val = await window.GM.getValue(key);
+    return val;
   }
   return window.localStorage.getItem(key);
 }

src/libs/translator.js

@@ -0,0 +1,116 @@
+import { createRoot } from "react-dom/client";
+import { APP_LCNAME, TRANS_MIN_LENGTH, TRANS_MAX_LENGTH } from "../config";
+import { StoragesProvider } from "../hooks/Storage";
+import { queryEls } from ".";
+import Content from "../views/Content";
+
+/**
+ * 翻译类
+ */
+export class Translator {
+  _rule = {};
+
+  _interseObserver = new IntersectionObserver(
+    (intersections) => {
+      intersections.forEach((intersection) => {
+        if (intersection.isIntersecting) {
+          this._render(intersection.target);
+          this._interseObserver.unobserve(intersection.target);
+        }
+      });
+    },
+    {
+      threshold: 0.1,
+    }
+  );
+
+  _mutaObserver = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      mutation.addedNodes.forEach((node) => {
+        try {
+          queryEls(this._rule.selector, node).forEach((el) => {
+            this._interseObserver.observe(el);
+          });
+        } catch (err) {
+          //
+        }
+      });
+    });
+  });
+
+  constructor(rule) {
+    this._rule = rule;
+    if (rule.transOpen) {
+      this._register();
+    }
+  }
+
+  get rule() {
+    return this._rule;
+  }
+
+  updateRule = (obj) => {
+    this._rule = { ...this._rule, ...obj };
+  };
+
+  toggle = () => {
+    if (this._rule.transOpen) {
+      this._rule.transOpen = false;
+      this._unRegister();
+    } else {
+      this._rule.transOpen = true;
+      this._register();
+    }
+  };
+
+  _register = () => {
+    // 监听节点变化
+    this._mutaObserver.observe(document, {
+      childList: true,
+      subtree: true,
+    });
+
+    // 监听节点显示
+    queryEls(this._rule.selector).forEach((el) => {
+      this._interseObserver.observe(el);
+    });
+  };
+
+  _unRegister = () => {
+    // 解除节点变化监听
+    this._mutaObserver.disconnect();
+
+    // 解除节点显示监听
+    queryEls(this._rule.selector).forEach((el) =>
+      this._interseObserver.unobserve(el)
+    );
+
+    // 移除已插入元素
+    queryEls(APP_LCNAME).forEach((el) => el.remove());
+  };
+
+  _render = (el) => {
+    if (el.querySelector(APP_LCNAME)) {
+      return;
+    }
+
+    // 除openai外，保留code和a标签
+    const q = el.innerText.trim();
+    if (!q || q.length < TRANS_MIN_LENGTH || q.length > TRANS_MAX_LENGTH) {
+      // 太长或太短不翻译
+      return;
+    }
+
+    // console.log("---> ", q);
+
+    const span = document.createElement(APP_LCNAME);
+    el.appendChild(span);
+
+    const root = createRoot(span);
+    root.render(
+      <StoragesProvider>
+        <Content q={q} rule={this._rule} />
+      </StoragesProvider>
+    );
+  };
+}