can set global value to rules

src/config/i18n.js

@@ -149,8 +149,8 @@ export const I18N = {
     en: `Multiple URLs can be separated by English commas ","`,
   },
   selector_helper: {
-    zh: `遵循CSS选择器规则，但不同浏览器，有些不同的写法。`,
+    zh: `1、遵循CSS选择器规则，但不同浏览器，支持写法不尽相同。2、留空表示采用全局设置。`,
-    en: `Follow the CSS selector rules, but different browsers have some different ways of writing.`,
+    en: `1. Follow CSS selector rules, but different browsers support different writing methods. 2. Leave blank to adopt the global setting.`,
   },
   translate_switch: {
     zh: `开启翻译`,

src/config/index.js

@@ -10,6 +10,8 @@ export const STOKEY_SETTING = `${APP_NAME}_setting`;
 export const STOKEY_RULES = `${APP_NAME}_rules`;
 export const STOKEY_SYNC = `${APP_NAME}_sync`;
 
+export const GLOBAL_KEY = "*";
+
 export const CLIENT_WEB = "web";
 export const CLIENT_CHROME = "chrome";
 export const CLIENT_EDGE = "edge";
@@ -125,14 +127,26 @@ export const DEFAULT_FETCH_INTERVAL = 100; // 默认任务间隔时间
 export const PROMPT_PLACE_FROM = "{{from}}"; // 占位符
 export const PROMPT_PLACE_TO = "{{to}}"; // 占位符
 
-export const DEFAULT_RULE = {
+// 全局规则
+export const GLOBLA_RULE = {
   pattern: "*",
   selector: DEFAULT_SELECTOR,
   translator: OPT_TRANS_MICROSOFT,
   fromLang: "auto",
   toLang: "zh-CN",
   textStyle: OPT_STYLE_DASHLINE,
-  transOpen: false,
+  transOpen: "false",
+};
+
+// 默认规则
+export const DEFAULT_RULE = {
+  pattern: "",
+  selector: "",
+  translator: GLOBAL_KEY,
+  fromLang: GLOBAL_KEY,
+  toLang: GLOBAL_KEY,
+  textStyle: GLOBAL_KEY,
+  transOpen: GLOBAL_KEY,
 };
 
 export const DEFAULT_SETTING = {
@@ -152,9 +166,9 @@ export const DEFAULT_RULES = [
   ...RULES.map((item) => ({
     ...DEFAULT_RULE,
     ...item,
-    transOpen: true,
+    transOpen: "true",
   })),
-  DEFAULT_RULE,
+  GLOBLA_RULE,
 ];
 
 export const TRANS_MIN_LENGTH = 5; // 最短翻译长度

src/hooks/Rules.js

@@ -4,6 +4,7 @@ import {
   OPT_STYLE_ALL,
   OPT_LANGS_FROM,
   OPT_LANGS_TO,
+  GLOBAL_KEY,
 } from "../config";
 import storage from "../libs/storage";
 import { useStorages } from "./Storage";
@@ -67,13 +68,7 @@ export function useRules() {
     const fromLangs = OPT_LANGS_FROM.map((item) => item[0]);
     const toLangs = OPT_LANGS_TO.map((item) => item[0]);
     newRules
-      .filter(
+      .filter(({ pattern }) => pattern && typeof pattern === "string")
-        ({ pattern, selector }) =>
-          pattern &&
-          selector &&
-          typeof pattern === "string" &&
-          typeof selector === "string"
-      )
       .map(
         ({
           pattern,
@@ -85,12 +80,12 @@ export function useRules() {
           transOpen,
         }) => ({
           pattern,
-          selector,
+          selector: typeof selector === "string" ? selector : "",
-          translator: matchValue(OPT_TRANS_ALL, translator),
+          translator: matchValue([GLOBAL_KEY, ...OPT_TRANS_ALL], translator),
-          fromLang: matchValue(fromLangs, fromLang),
+          fromLang: matchValue([GLOBAL_KEY, ...fromLangs], fromLang),
-          toLang: matchValue(toLangs, toLang),
+          toLang: matchValue([GLOBAL_KEY, ...toLangs], toLang),
-          textStyle: matchValue(OPT_STYLE_ALL, textStyle),
+          textStyle: matchValue([GLOBAL_KEY, ...OPT_STYLE_ALL], textStyle),
-          transOpen: matchValue([true, false], transOpen),
+          transOpen: matchValue([GLOBAL_KEY, "true", "false"], transOpen),
         })
       )
       .forEach((newRule) => {

src/libs/browser.js

@@ -8,7 +8,7 @@ function _browser() {
   try {
     return require("webextension-polyfill");
   } catch (err) {
-    console.log("[browser]", err.message);
+    // console.log("[browser]", err.message);
   }
 }
 

src/libs/index.js

@@ -3,7 +3,8 @@ import {
   DEFAULT_SETTING,
   STOKEY_SETTING,
   STOKEY_RULES,
-  DEFAULT_RULE,
+  GLOBLA_RULE,
+  GLOBAL_KEY,
 } from "../config";
 import { browser } from "./browser";
 
@@ -38,12 +39,31 @@ export const getRules = async () => (await storage.getObj(STOKEY_RULES)) || [];
  * @param {string} href
  * @returns
  */
-export const matchRule = (rules, href) =>
+export const matchRule = (rules, href) => {
-  rules.find((rule) =>
+  const rule = rules.find((rule) =>
     rule.pattern
       .split(",")
       .some((p) => p.trim() === "*" || href.includes(p.trim()))
-  ) || DEFAULT_RULE;
+  );
+
+  if (!rule) {
+    return GLOBLA_RULE;
+  }
+
+  if (!rule?.selector?.trim()) {
+    rule.selector = GLOBLA_RULE.selector;
+  }
+
+  ["translator", "fromLang", "toLang", "textStyle", "transOpen"].forEach(
+    (key) => {
+      if (rule[key] === GLOBAL_KEY) {
+        rule[key] = GLOBLA_RULE[key];
+      }
+    }
+  );
+
+  return rule;
+};
 
 /**
  * 本地语言识别

src/libs/translator.js

@@ -40,7 +40,7 @@ export class Translator {
 
   constructor(rule) {
     this._rule = rule;
-    if (rule.transOpen) {
+    if (rule.transOpen === "true") {
       this._register();
     }
   }
@@ -54,11 +54,11 @@ export class Translator {
   };
 
   toggle = () => {
-    if (this._rule.transOpen) {
+    if (this._rule.transOpen === "true") {
-      this._rule.transOpen = false;
+      this._rule.transOpen = "false";
       this._unRegister();
     } else {
-      this._rule.transOpen = true;
+      this._rule.transOpen = "true";
       this._register();
     }
   };

src/views/Options/Rules.js

@@ -3,6 +3,7 @@ import Stack from "@mui/material/Stack";
 import TextField from "@mui/material/TextField";
 import Button from "@mui/material/Button";
 import {
+  GLOBAL_KEY,
   DEFAULT_RULE,
   OPT_LANGS_FROM,
   OPT_LANGS_TO,
@@ -23,11 +24,7 @@ import FileDownloadIcon from "@mui/icons-material/FileDownload";
 import FileUploadIcon from "@mui/icons-material/FileUpload";
 
 function RuleFields({ rule, rules, setShow }) {
-  const initFormValues = rule || {
+  const initFormValues = rule || DEFAULT_RULE;
-    ...DEFAULT_RULE,
-    pattern: "",
-    transOpen: true,
-  };
   const editMode = !!rule;
 
   const i18n = useI18n();
@@ -82,9 +79,9 @@ function RuleFields({ rule, rules, setShow }) {
     if (!pattern.trim()) {
       errors.pattern = i18n("error_cant_be_blank");
     }
-    if (!selector.trim()) {
+    // if (!selector.trim()) {
-      errors.selector = i18n("error_cant_be_blank");
+    //   errors.selector = i18n("error_cant_be_blank");
-    }
+    // }
     if (hasSamePattern(pattern)) {
       errors.pattern = i18n("error_duplicate_values");
     }
@@ -105,6 +102,12 @@ function RuleFields({ rule, rules, setShow }) {
     }
   };
 
+  const globalItem = rule?.pattern !== "*" && (
+    <MenuItem key={GLOBAL_KEY} value={GLOBAL_KEY}>
+      {GLOBAL_KEY}
+    </MenuItem>
+  );
+
   return (
     <form onSubmit={handleSubmit}>
       <Stack spacing={2}>
@@ -147,8 +150,9 @@ function RuleFields({ rule, rules, setShow }) {
                 disabled={disabled}
                 onChange={handleChange}
               >
-                <MenuItem value={true}>{i18n("default_enabled")}</MenuItem>
+                {globalItem}
-                <MenuItem value={false}>{i18n("default_disabled")}</MenuItem>
+                <MenuItem value={"true"}>{i18n("default_enabled")}</MenuItem>
+                <MenuItem value={"false"}>{i18n("default_disabled")}</MenuItem>
               </TextField>
             </Grid>
             <Grid item xs={10} md={4}>
@@ -162,6 +166,7 @@ function RuleFields({ rule, rules, setShow }) {
                 disabled={disabled}
                 onChange={handleChange}
               >
+                {globalItem}
                 {OPT_TRANS_ALL.map((item) => (
                   <MenuItem key={item} value={item}>
                     {item}
@@ -180,8 +185,11 @@ function RuleFields({ rule, rules, setShow }) {
                 disabled={disabled}
                 onChange={handleChange}
               >
+                {globalItem}
                 {OPT_LANGS_FROM.map(([lang, name]) => (
-                  <MenuItem key={lang} value={lang}>{name}</MenuItem>
+                  <MenuItem key={lang} value={lang}>
+                    {name}
+                  </MenuItem>
                 ))}
               </TextField>
             </Grid>
@@ -196,8 +204,11 @@ function RuleFields({ rule, rules, setShow }) {
                 disabled={disabled}
                 onChange={handleChange}
               >
+                {globalItem}
                 {OPT_LANGS_TO.map(([lang, name]) => (
-                  <MenuItem key={lang} value={lang}>{name}</MenuItem>
+                  <MenuItem key={lang} value={lang}>
+                    {name}
+                  </MenuItem>
                 ))}
               </TextField>
             </Grid>
@@ -212,8 +223,11 @@ function RuleFields({ rule, rules, setShow }) {
                 disabled={disabled}
                 onChange={handleChange}
               >
+                {globalItem}
                 {OPT_STYLE_ALL.map((item) => (
-                  <MenuItem key={item} value={item}>{i18n(item)}</MenuItem>
+                  <MenuItem key={item} value={item}>
+                    {i18n(item)}
+                  </MenuItem>
                 ))}
               </TextField>
             </Grid>

src/views/Popup/index.js

@@ -35,7 +35,7 @@ export default function Popup() {
 
   const handleTransToggle = async (e) => {
     try {
-      setRule({ ...rule, transOpen: e.target.checked });
+      setRule({ ...rule, transOpen: e.target.checked ? "true" : "false" });
 
       if (isExt) {
         await sendTabMsg(MSG_TRANS_TOGGLE);
@@ -83,7 +83,7 @@ export default function Popup() {
         setRule(args);
         break;
       default:
-        // console.log(`[popup] kissEvent action skip: ${action}`);
+      // console.log(`[popup] kissEvent action skip: ${action}`);
     }
   };
 
@@ -131,7 +131,12 @@ export default function Popup() {
     <Box minWidth={300} sx={{ p: 2 }}>
       <Stack spacing={2}>
         <FormControlLabel
-          control={<Switch checked={transOpen} onChange={handleTransToggle} />}
+          control={
+            <Switch
+              checked={transOpen === "true"}
+              onChange={handleTransToggle}
+            />
+          }
           label={i18n("translate")}
         />