polyfill codes

src/apis/index.js

@@ -1,5 +1,5 @@
 import queryString from "query-string";
-import { fetchData } from "../libs/fetch";
+import { fetchPolyfill } from "../libs/fetch";
 import {
   OPT_TRANS_GOOGLE,
   OPT_TRANS_MICROSOFT,
@@ -20,7 +20,7 @@ import { getSetting, detectLang } from "../libs";
  * @returns
  */
 export const apiSyncData = async (url, key, data) =>
-  fetchData(url, {
+  fetchPolyfill(url, {
     headers: {
       "Content-type": "application/json",
       [KV_HEADER_KEY]: key,
@@ -48,7 +48,7 @@ const apiGoogleTranslate = async (translator, text, to, from) => {
   };
   const { googleUrl } = await getSetting();
   const input = `${googleUrl}?${queryString.stringify(params)}`;
-  return fetchData(
+  return fetchPolyfill(
     input,
     {
       headers: {
@@ -73,7 +73,7 @@ const apiMicrosoftTranslate = (translator, text, to, from, token) => {
     "api-version": "3.0",
   };
   const input = `${URL_MICROSOFT_TRANS}?${queryString.stringify(params)}`;
-  return fetchData(
+  return fetchPolyfill(
     input,
     {
       headers: {
@@ -100,7 +100,7 @@ const apiOpenaiTranslate = async (translator, text, to, from) => {
   let prompt = openaiPrompt
     .replaceAll(PROMPT_PLACE_FROM, from)
     .replaceAll(PROMPT_PLACE_TO, to);
-  return fetchData(
+  return fetchPolyfill(
     openaiUrl,
     {
       headers: {

src/background.js

@@ -1,4 +1,4 @@
-import { browser } from "webextension-polyfill";
+import browser from "webextension-polyfill";
 import {
   MSG_FETCH,
   DEFAULT_SETTING,
@@ -12,6 +12,7 @@ import {
 import storage from "./libs/storage";
 import { getSetting } from "./libs";
 import { syncAll } from "./libs/sync";
+import { fetchData } from "./libs/fetch";
 
 /**
  * 插件安装
@@ -46,10 +47,7 @@ browser.runtime.onMessage.addListener(
   ({ action, args }, sender, sendResponse) => {
     switch (action) {
       case MSG_FETCH:
-        fetch(args.input, args.init)
-          .then((res) => {
-            return res.json();
-          })
+        fetchData(args.input, args.init, args.opts)
           .then((data) => {
             sendResponse({ data });
           })

src/config/index.js

@@ -15,6 +15,7 @@ export const CLIENT_CHROME = "chrome";
 export const CLIENT_EDGE = "edge";
 export const CLIENT_FIREFOX = "firefox";
 export const CLIENT_USERSCRIPT = "userscript";
+export const CLIENT_EXTS = [CLIENT_CHROME, CLIENT_EDGE, CLIENT_FIREFOX];
 
 export const KV_HEADER_KEY = "X-KISS-PSK";
 export const KV_RULES_KEY = "KT_RULES";

src/hooks/Storage.js

@@ -1,5 +1,5 @@
 import { createContext, useContext, useEffect, useState } from "react";
-import { browser } from "../libs/browser";
+import { browser, isExt, isGm, isWeb } from "../libs/browser";
 import {
   STOKEY_SETTING,
   STOKEY_RULES,
@@ -27,7 +27,7 @@ export function StoragesProvider({ children }) {
   const [storages, setStorages] = useState(null);
 
   const handleChanged = (changes) => {
-    if (!browser) {
+    if (isWeb || isGm) {
       const { key, oldValue, newValue } = changes;
       changes = {
         [key]: {
@@ -69,8 +69,10 @@ export function StoragesProvider({ children }) {
 
     // 解除监听
     return () => {
-      if (browser?.storage) {
+      if (isExt) {
         browser.storage.onChanged.removeListener(handleChanged);
+      } else if (isGm) {
+        window.GM.removeValueChangeListener(handleChanged);
       } else {
         window.removeEventListener("storage", handleChanged);
       }

src/libs/auth.js

@@ -1,6 +1,6 @@
 import storage from "./storage";
 import { STOKEY_MSAUTH, URL_MICROSOFT_AUTH } from "../config";
-import { fetchData } from "./fetch";
+import { fetchPolyfill } from "./fetch";
 
 const parseMSToken = (token) => JSON.parse(atob(token.split(".")[1])).exp;
 
@@ -27,7 +27,7 @@ const _msAuth = () => {
     }
 
     // 缓存没有或失效，查询接口
-    token = await fetchData(URL_MICROSOFT_AUTH);
+    token = await fetchPolyfill(URL_MICROSOFT_AUTH);
     exp = parseMSToken(token);
     await storage.setObj(STOKEY_MSAUTH, { token, exp });
     return [token, exp];

src/libs/browser.js

@@ -1,3 +1,5 @@
+import { CLIENT_EXTS, CLIENT_USERSCRIPT, CLIENT_WEB } from "../config";
+
 /**
  * 浏览器兼容插件，另可用于判断是插件模式还是网页模式，方便开发
  * @returns
@@ -12,3 +14,6 @@ function _browser() {
 
 export const browser = _browser();
 export const client = process.env.REACT_APP_CLIENT;
+export const isExt = CLIENT_EXTS.includes(client);
+export const isGm = client === CLIENT_USERSCRIPT;
+export const isWeb = client === CLIENT_WEB;

src/libs/fetch.js

@@ -1,4 +1,4 @@
-import { browser } from "./browser";
+import { isExt, isGm } from "./browser";
 import { sendMsg } from "./msg";
 import {
   MSG_FETCH,
@@ -8,7 +8,33 @@ import {
 } from "../config";
 
 /**
- * request 改造，因缓存必须是GET方法
+ * 油猴脚本的请求封装
+ * @param {*} input
+ * @param {*} init
+ * @returns
+ */
+const fetchGM = async (input, { method, headers, body }) =>
+  new Promise((resolve, reject) => {
+    try {
+      window.GM.xmlhttpRequest({
+        method,
+        url: input,
+        headers,
+        data: body,
+        onload: (response) => {
+          resolve(new Response(response.response));
+        },
+        onerror: (error) => {
+          reject(error);
+        },
+      });
+    } catch (error) {
+      reject(error);
+    }
+  });
+
+/**
+ * 构造缓存 request
  * @param {*} request
  * @returns
  */
@@ -30,27 +56,6 @@ const newCacheReq = async (request, translator) => {
   return request;
 };
 
-/**
- * 兼容性封装
- * @param {*} input
- * @param {*} init
- * @param {*} opts
- * @returns
- */
-export const fetchPolyfill = async (input, init) => {
-  if (browser?.runtime) {
-    // 插件调用
-    const res = await sendMsg(MSG_FETCH, { input, init });
-    if (res.error) {
-      throw new Error(res.error);
-    }
-    return res.data;
-  }
-
-  // 网页直接调用
-  return await fetch(input, init);
-};
-
 /**
  * 请求数据
  * @param {*} input
@@ -74,7 +79,11 @@ export const fetchData = async (input, init, { useCache, translator } = {}) => {
 
   // 发送请求
   if (!res) {
-    res = await fetchPolyfill(input, init);
+    if (isGm) {
+      res = await fetchGM(input, init);
+    } else {
+      res = await fetch(input, init);
+    }
   }
 
   if (!res?.ok) {
@@ -96,3 +105,24 @@ export const fetchData = async (input, init, { useCache, translator } = {}) => {
   }
   return await res.text();
 };
+
+/**
+ * fetch 兼容性封装
+ * @param {*} input
+ * @param {*} init
+ * @param {*} opts
+ * @returns
+ */
+export const fetchPolyfill = async (input, init, opts) => {
+  // 插件
+  if (isExt) {
+    const res = await sendMsg(MSG_FETCH, { input, init, opts });
+    if (res.error) {
+      throw new Error(res.error);
+    }
+    return res.data;
+  }
+
+  // 油猴/网页
+  return await fetchData(input, init, opts);
+};

src/libs/storage.js

@@ -1,8 +1,10 @@
-import { browser } from "./browser";
+import { browser, isExt, isGm } from "./browser";
 
 async function set(key, val) {
-  if (browser?.storage) {
+  if (isExt) {
     await browser.storage.local.set({ [key]: val });
+  } else if (isGm) {
+    await window.GM.setValue(key, val);
   } else {
     const oldValue = window.localStorage.getItem(key);
     window.localStorage.setItem(key, val);
@@ -18,16 +20,21 @@ async function set(key, val) {
 }
 
 async function get(key) {
-  if (browser?.storage) {
+  if (isExt) {
     const res = await browser.storage.local.get([key]);
     return res[key];
+  } else if (isGm) {
+    const res = await window.GM.getValue(key);
+    return res;
   }
   return window.localStorage.getItem(key);
 }
 
 async function del(key) {
-  if (browser?.storage) {
+  if (isExt) {
     await browser.storage.local.remove([key]);
+  } else if (isGm) {
+    await window.GM.deleteValue(key);
   } else {
     const oldValue = window.localStorage.getItem(key);
     window.localStorage.removeItem(key);
@@ -67,8 +74,10 @@ async function putObj(key, obj) {
  * @param {*} handleChanged
  */
 function onChanged(handleChanged) {
-  if (browser?.storage) {
+  if (isExt) {
     browser.storage.onChanged.addListener(handleChanged);
+  } else if (isGm) {
+    window.GM.addValueChangeListener("storage", handleChanged);
   } else {
     window.addEventListener("storage", handleChanged);
   }