polyfill codes

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);
   }