browser & client

package.json

@@ -18,10 +18,10 @@
     "webextension-polyfill": "^0.10.0"
   },
   "scripts": {
-    "start": "react-app-rewired start",
+    "start": "REACT_APP_CLIENT=web react-app-rewired start",
-    "build": "BUILD_PATH=./build/chrome REACT_APP_BROWSER=chrome react-app-rewired build && rm ./build/chrome/manifest.firefox.json",
+    "build": "BUILD_PATH=./build/chrome REACT_APP_CLIENT=chrome react-app-rewired build && rm ./build/chrome/manifest.firefox.json",
-    "build:edge": "BUILD_PATH=./build/edge REACT_APP_BROWSER=edge react-app-rewired build && rm ./build/edge/manifest.firefox.json",
+    "build:edge": "BUILD_PATH=./build/edge REACT_APP_CLIENT=edge react-app-rewired build && rm ./build/edge/manifest.firefox.json",
-    "build:firefox": "BUILD_PATH=./build/firefox REACT_APP_BROWSER=firefox react-app-rewired build && rm ./build/firefox/manifest.json && mv ./build/firefox/manifest.firefox.json ./build/firefox/manifest.json",
+    "build:firefox": "BUILD_PATH=./build/firefox REACT_APP_CLIENT=firefox react-app-rewired build && rm ./build/firefox/manifest.json && mv ./build/firefox/manifest.firefox.json ./build/firefox/manifest.json",
     "build:all": "yarn build && yarn build:edge && yarn build:firefox",
     "dist": "yarn build:all && rm -r dist && cp -r build dist",
     "test": "react-app-rewired test",

src/background.js

@@ -1,4 +1,4 @@
-import browser from "webextension-polyfill";
+import { browser } from "webextension-polyfill";
 import {
   MSG_FETCH,
   DEFAULT_SETTING,

src/config/index.js

@@ -10,6 +10,12 @@ export const STOKEY_SETTING = `${APP_NAME}_setting`;
 export const STOKEY_RULES = `${APP_NAME}_rules`;
 export const STOKEY_SYNC = `${APP_NAME}_sync`;
 
+export const CLIENT_WEB = "web";
+export const CLIENT_CHROME = "chrome";
+export const CLIENT_EDGE = "edge";
+export const CLIENT_FIREFOX = "firefox";
+export const CLIENT_USERSCRIPT = "userscript";
+
 export const KV_HEADER_KEY = "X-KISS-PSK";
 export const KV_RULES_KEY = "KT_RULES";
 export const KV_SETTING_KEY = "KT_SETTING";

src/config/rules.js

@@ -1,7 +1,7 @@
 const els = `li, p, h1, h2, h3, h4, h5, h6, dd`;
 
 export const DEFAULT_SELECTOR =
-  process.env.REACT_APP_BROWSER === "firefox"
+  process.env.REACT_APP_CLIENT === "firefox"
     ? `:is(${els})`
     : `:is(${els}):not(:has(:is(${els})))`;
 

src/content.js

@@ -1,4 +1,4 @@
-import browser from "./libs/browser";
+import { browser } from "./libs/browser";
 import { createRoot } from "react-dom/client";
 import {
   APP_LCNAME,

src/hooks/Storage.js

@@ -1,5 +1,5 @@
 import { createContext, useContext, useEffect, useState } from "react";
-import browser from "../libs/browser";
+import { browser } from "../libs/browser";
 import {
   STOKEY_SETTING,
   STOKEY_RULES,

src/hooks/Translate.js

@@ -1,7 +1,7 @@
 import { useEffect } from "react";
 import { useState } from "react";
 import { transPool } from "../libs/pool";
-import browser from "../libs/browser";
+import { browser } from "../libs/browser";
 import { MSG_TRANS_PUTRULE } from "../config";
 import { detectLang } from "../libs";
 

src/libs/browser.js

@@ -10,6 +10,5 @@ function _browser() {
   }
 }
 
-const browser = _browser();
+export const browser = _browser();
-
+export const client = process.env.REACT_APP_CLIENT;
-export default browser;

src/libs/fetch.js

@@ -1,4 +1,4 @@
-import browser from "./browser";
+import { browser } from "./browser";
 import { sendMsg } from "./msg";
 import {
   MSG_FETCH,

src/libs/index.js

@@ -5,7 +5,7 @@ import {
   STOKEY_RULES,
   DEFAULT_RULE,
 } from "../config";
-import browser from "./browser";
+import { browser } from "./browser";
 
 /**
  * 获取节点列表并转为数组

src/libs/msg.js

@@ -1,4 +1,4 @@
-import browser from "./browser";
+import { browser } from "./browser";
 
 /**
  * 发送消息给background

src/libs/storage.js

@@ -1,4 +1,4 @@
-import browser from "./browser";
+import { browser } from "./browser";
 
 async function set(key, val) {
   if (browser?.storage) {

src/views/Popup/index.js

@@ -6,7 +6,7 @@ import FormControlLabel from "@mui/material/FormControlLabel";
 import Switch from "@mui/material/Switch";
 import Button from "@mui/material/Button";
 import { sendTabMsg } from "../../libs/msg";
-import browser from "../../libs/browser";
+import { browser } from "../../libs/browser";
 import { useI18n } from "../../hooks/I18n";
 import TextField from "@mui/material/TextField";
 import {
@@ -90,7 +90,9 @@ export default function Popup() {
           onChange={handleChange}
         >
           {OPT_TRANS_ALL.map((item) => (
-            <MenuItem key={item} value={item}>{item}</MenuItem>
+            <MenuItem key={item} value={item}>
+              {item}
+            </MenuItem>
           ))}
         </TextField>
 
@@ -103,7 +105,9 @@ export default function Popup() {
           onChange={handleChange}
         >
           {OPT_LANGS_FROM.map(([lang, name]) => (
-            <MenuItem key={lang} value={lang}>{name}</MenuItem>
+            <MenuItem key={lang} value={lang}>
+              {name}
+            </MenuItem>
           ))}
         </TextField>
 
@@ -116,7 +120,9 @@ export default function Popup() {
           onChange={handleChange}
         >
           {OPT_LANGS_TO.map(([lang, name]) => (
-            <MenuItem key={lang} value={lang}>{name}</MenuItem>
+            <MenuItem key={lang} value={lang}>
+              {name}
+            </MenuItem>
           ))}
         </TextField>
 
@@ -129,7 +135,9 @@ export default function Popup() {
           onChange={handleChange}
         >
           {OPT_STYLE_ALL.map((item) => (
-            <MenuItem key={item} value={item}>{i18n(item)}</MenuItem>
+            <MenuItem key={item} value={item}>
+              {i18n(item)}
+            </MenuItem>
           ))}
         </TextField>