v1.4.6

.babelrc

@@ -0,0 +1,5 @@
+{
+    "presets": [
+        "@babel/preset-env"
+    ]
+}

.env

@@ -2,7 +2,7 @@ GENERATE_SOURCEMAP=false
 
 REACT_APP_NAME=KISS Translator
 REACT_APP_NAME_CN=简约翻译
-REACT_APP_VERSION=1.4.4
+REACT_APP_VERSION=1.4.6
 REACT_APP_HOMEPAGE=https://github.com/fishjar/kiss-translator
 REACT_APP_OPTIONSPAGE=https://kiss-translator.rayjar.com/options
 REACT_APP_OPTIONSPAGE2=https://fishjar.github.io/kiss-translator/options.html

config-overrides.js

@@ -83,13 +83,9 @@ const userscriptWebpack = (config, env) => {
 // @icon          ${process.env.REACT_APP_LOGOURL}
 // @downloadURL   ${process.env.REACT_APP_USERSCRIPT_DOWNLOADURL}
 // @updateURL     ${process.env.REACT_APP_USERSCRIPT_DOWNLOADURL}
-// @grant         GM_xmlhttpRequest
+// @grant         GM.xmlHttpRequest
-// @grant         GM.xmlhttpRequest
-// @grant         GM_setValue
 // @grant         GM.setValue
-// @grant         GM_getValue
 // @grant         GM.getValue
-// @grant         GM_deleteValue
 // @grant         GM.deleteValue
 // @grant         unsafeWindow
 // @connect       translate.googleapis.com

package.json

@@ -1,7 +1,7 @@
 {
   "name": "kiss-translator",
   "description": "A minimalist bilingual translation Extension & Greasemonkey Script",
-  "version": "1.4.4",
+  "version": "1.4.6",
   "author": "Gabe<yugang2002@gmail.com>",
   "private": true,
   "dependencies": {
@@ -25,7 +25,8 @@
     "build:firefox": "rm -rf build/firefox && cp -r build/chrome build/firefox && cat ./build/firefox/manifest.firefox.json > ./build/firefox/manifest.json",
     "build:web": "rm -rf build/web && BUILD_PATH=./build/web REACT_APP_CLIENT=userscript react-app-rewired build",
     "build:userscript": "rm -rf build/userscript && mkdir build/userscript && cp build/web/kiss-translator.user.js build/userscript/kiss-translator.user.js",
-    "build": "yarn build:chrome && yarn build:edge && yarn build:firefox && yarn build:web && yarn build:userscript",
+    "build:rules": "babel-node src/rules.js",
+    "build": "yarn build:chrome && yarn build:edge && yarn build:firefox && yarn build:web && yarn build:userscript && yarn build:rules",
     "deploy:web": "wrangler pages deploy ./build/web --project-name kiss-translator",
     "test": "react-app-rewired test",
     "eject": "react-scripts eject"
@@ -53,6 +54,10 @@
     ]
   },
   "devDependencies": {
+    "@babel/core": "^7.22.10",
+    "@babel/node": "^7.22.10",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@babel/preset-env": "^7.22.10",
     "react-app-rewired": "^2.2.1",
     "wrangler": "^3.4.0"
   }

public/manifest.firefox.json

@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "__MSG_app_name__",
   "description": "__MSG_app_description__",
-  "version": "1.4.4",
+  "version": "1.4.6",
   "default_locale": "en",
   "author": "Gabe<yugang2002@gmail.com>",
   "homepage_url": "https://github.com/fishjar/kiss-translator",

public/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "__MSG_app_name__",
   "description": "__MSG_app_description__",
-  "version": "1.4.4",
+  "version": "1.4.6",
   "default_locale": "en",
   "author": "Gabe<yugang2002@gmail.com>",
   "homepage_url": "https://github.com/fishjar/kiss-translator",

src/background.js

@@ -20,7 +20,7 @@ import { fetchData, fetchPool } from "./libs/fetch";
  * 插件安装
  */
 browser.runtime.onInstalled.addListener(() => {
-  console.log("onInstalled");
+  console.log("KISS Translator onInstalled");
   storage.trySetObj(STOKEY_SETTING, DEFAULT_SETTING);
   storage.trySetObj(STOKEY_RULES, DEFAULT_RULES);
   storage.trySetObj(STOKEY_SYNC, DEFAULT_SYNC);
@@ -30,7 +30,7 @@ browser.runtime.onInstalled.addListener(() => {
  * 浏览器启动
  */
 browser.runtime.onStartup.addListener(async () => {
-  console.log("onStartup");
+  console.log("browser onStartup");
 
   // 同步数据
   await syncAll();

src/config/i18n.js

@@ -104,6 +104,10 @@ export const I18N = {
     zh: `添加`,
     en: `Add`,
   },
+  inject_rules: {
+    zh: `注入内置规则`,
+    en: `Inject Built-in Rules`,
+  },
   sync_warn: {
     zh: `如果服务器存在其他客户端同步的数据，第一次同步将直接覆盖本地配置，后面则根据修改时间，新的覆盖旧的。`,
     en: `If the server has data synchronized by other clients, the first synchronization will directly overwrite the local configuration, and later, according to the modification time, the new one will overwrite the old one.`,
@@ -149,12 +153,12 @@ export const I18N = {
     en: `URL pattern`,
   },
   pattern_helper: {
-    zh: `多个URL支持英文逗号“,”分隔`,
+    zh: `1、支持星号(*)通配符。2、多个URL支持英文逗号“,”分隔。`,
-    en: `Multiple URLs can be separated by English commas ","`,
+    en: `1. The asterisk (*) wildcard is supported. 2. Multiple URLs can be separated by English commas ",".`,
   },
   selector_helper: {
-    zh: `1、遵循CSS选择器规则，但不同浏览器，支持写法不尽相同。2、留空表示采用全局设置。`,
+    zh: `1、遵循CSS选择器规则。2、留空表示采用全局设置。`,
-    en: `1. Follow CSS selector rules, but different browsers support different writing methods. 2. Leave blank to adopt the global setting.`,
+    en: `1. Follow CSS selector rules. 2. Leave blank to adopt the global setting.`,
   },
   translate_switch: {
     zh: `开启翻译`,

src/config/index.js

@@ -1,5 +1,11 @@
-import { DEFAULT_SELECTOR, RULES } from "./rules";
+import {
+  DEFAULT_SELECTOR,
+  GLOBAL_KEY,
+  DEFAULT_RULE,
+  BUILTIN_RULES,
+} from "./rules";
 export { I18N, UI_LANGS } from "./i18n";
+export { GLOBAL_KEY, DEFAULT_RULE, BUILTIN_RULES };
 
 const APP_NAME = process.env.REACT_APP_NAME.trim().split(/\s+/).join("-");
 
@@ -11,8 +17,6 @@ export const STOKEY_RULES = `${APP_NAME}_rules`;
 export const STOKEY_SYNC = `${APP_NAME}_sync`;
 export const STOKEY_FAB = `${APP_NAME}_fab`;
 
-export const GLOBAL_KEY = "*";
-
 export const CLIENT_WEB = "web";
 export const CLIENT_CHROME = "chrome";
 export const CLIENT_EDGE = "edge";
@@ -143,24 +147,13 @@ export const GLOBLA_RULE = {
   bgColor: "",
 };
 
-// 默认规则
-export const DEFAULT_RULE = {
-  pattern: "",
-  selector: "",
-  translator: GLOBAL_KEY,
-  fromLang: GLOBAL_KEY,
-  toLang: GLOBAL_KEY,
-  textStyle: GLOBAL_KEY,
-  transOpen: GLOBAL_KEY,
-  bgColor: "",
-};
-
 export const DEFAULT_SETTING = {
   darkMode: false, // 深色模式
   uiLang: "en", // 界面语言
   fetchLimit: DEFAULT_FETCH_LIMIT, // 最大任务数量
   fetchInterval: DEFAULT_FETCH_INTERVAL, // 任务间隔时间
   clearCache: false, // 是否在浏览器下次启动时清除缓存
+  injectRules: true, // 是否注入内置规则
   googleUrl: "https://translate.googleapis.com/translate_a/single", // 谷歌翻译接口
   openaiUrl: "https://api.openai.com/v1/chat/completions",
   openaiKey: "",
@@ -168,14 +161,7 @@ export const DEFAULT_SETTING = {
   openaiPrompt: `You will be provided with a sentence in ${PROMPT_PLACE_FROM}, and your task is to translate it into ${PROMPT_PLACE_TO}.`,
 };
 
-export const DEFAULT_RULES = [
+export const DEFAULT_RULES = [GLOBLA_RULE];
-  ...RULES.map((item) => ({
-    ...DEFAULT_RULE,
-    ...item,
-    transOpen: "true",
-  })),
-  GLOBLA_RULE,
-];
 
 export const TRANS_MIN_LENGTH = 5; // 最短翻译长度
 export const TRANS_MAX_LENGTH = 5000; // 最长翻译长度

src/config/rules.js

@@ -2,15 +2,32 @@ const els = `li, p, h1, h2, h3, h4, h5, h6, dd`;
 
 export const DEFAULT_SELECTOR = `:is(${els})`;
 
-export const RULES = [
+export const GLOBAL_KEY = "*";
+
+export const DEFAULT_RULE = {
+  pattern: "",
+  selector: "",
+  translator: GLOBAL_KEY,
+  fromLang: GLOBAL_KEY,
+  toLang: GLOBAL_KEY,
+  textStyle: GLOBAL_KEY,
+  transOpen: GLOBAL_KEY,
+  bgColor: "",
+};
+
+const RULES = [
   {
-    pattern: `bearblog.dev, www.theverge.com, www.tampermonkey.net/documentation.php`,
+    pattern: `www.google.com/search`,
-    selector: DEFAULT_SELECTOR,
+    selector: `h3, .IsZvec, .VwiC3b`,
   },
   {
     pattern: `https://news.google.com/`,
     selector: `h4`,
   },
+  {
+    pattern: `bearblog.dev, www.theverge.com, www.tampermonkey.net/documentation.php`,
+    selector: DEFAULT_SELECTOR,
+  },
   {
     pattern: `themessenger.com`,
     selector: `.leading-tight, .leading-tighter, .my-2 p, .font-body p, article ${DEFAULT_SELECTOR}`,
@@ -117,7 +134,7 @@ export const RULES = [
   },
   {
     pattern: `https://github.com/`,
-    selector: `.markdown-body ${DEFAULT_SELECTOR}, .repo-description p, .Layout-sidebar .f4, .container-lg .py-4 .f5, .container-lg .my-4 .f5, .Box-row .pr-4, .Box-row article .mt-1, [itemprop='description']`,
+    selector: `.markdown-body ${DEFAULT_SELECTOR}, .repo-description p, .Layout-sidebar .f4, .container-lg .py-4 .f5, .container-lg .my-4 .f5, .Box-row .pr-4, .Box-row article .mt-1, [itemprop='description'], .markdown-title, bdi`,
   },
   {
     pattern: `twitter.com`,
@@ -127,8 +144,10 @@ export const RULES = [
     pattern: `youtube.com`,
     selector: `h1, #video-title, #content-text, #title, yt-attributed-string>span>span`,
   },
-  {
-    pattern: `www.google.com/search`,
-    selector: `h3, .IsZvec, .VwiC3b`,
-  },
 ];
+
+export const BUILTIN_RULES = RULES.map((item) => ({
+  ...DEFAULT_RULE,
+  ...item,
+  transOpen: "true",
+}));

src/content.js

@@ -13,7 +13,7 @@ import { Translator } from "./libs/translator";
 (async () => {
   const setting = await getSetting();
   const rules = await getRules();
-  const rule = matchRule(rules, document.location.href);
+  const rule = matchRule(rules, document.location.href, setting);
   const translator = new Translator(rule, setting);
 
   // 监听消息

src/hooks/Rules.js

@@ -25,11 +25,7 @@ export function useRules() {
     const updateAt = sync.opt?.rulesUpdateAt ? Date.now() : 0;
     await storage.setObj(STOKEY_RULES, rules);
     await sync.update({ rulesUpdateAt: updateAt });
-    try {
+    syncRules();
-      await syncRules();
-    } catch (err) {
-      console.log("[sync rules]", err);
-    }
   };
 
   const add = async (rule) => {

src/hooks/Setting.js

@@ -2,6 +2,7 @@ import { STOKEY_SETTING } from "../config";
 import storage from "../libs/storage";
 import { useStorages } from "./Storage";
 import { useSync } from "./Sync";
+import { syncSetting } from "../libs/sync";
 
 /**
  * 设置hook
@@ -22,5 +23,6 @@ export function useSettingUpdate() {
     const updateAt = sync.opt?.settingUpdateAt ? Date.now() : 0;
     await storage.putObj(STOKEY_SETTING, obj);
     await sync.update({ settingUpdateAt: updateAt });
+    syncSetting();
   };
 }

src/hooks/Storage.js

@@ -3,7 +3,6 @@ import { browser, isExt, isGm, isWeb } from "../libs/browser";
 import {
   STOKEY_SETTING,
   STOKEY_RULES,
-  STOKEY_MSAUTH,
   STOKEY_SYNC,
   DEFAULT_SETTING,
   DEFAULT_RULES,
@@ -15,12 +14,13 @@ import storage from "../libs/storage";
  * 默认配置
  */
 export const defaultStorage = {
-  [STOKEY_MSAUTH]: null,
   [STOKEY_SETTING]: DEFAULT_SETTING,
   [STOKEY_RULES]: DEFAULT_RULES,
   [STOKEY_SYNC]: DEFAULT_SYNC,
 };
 
+const activeKeys = Object.keys(defaultStorage);
+
 const StoragesContext = createContext(null);
 
 export function StoragesProvider({ children }) {
@@ -38,7 +38,10 @@ export function StoragesProvider({ children }) {
     }
     const newStorages = {};
     Object.entries(changes)
-      .filter(([_, { oldValue, newValue }]) => oldValue !== newValue)
+      .filter(
+        ([key, { oldValue, newValue }]) =>
+          activeKeys.includes(key) && oldValue !== newValue
+      )
       .forEach(([key, { newValue }]) => {
         newStorages[key] = JSON.parse(newValue);
       });
@@ -51,8 +54,7 @@ export function StoragesProvider({ children }) {
     // 首次从storage同步配置到内存
     (async () => {
       const curStorages = {};
-      const keys = Object.keys(defaultStorage);
+      for (const key of activeKeys) {
-      for (const key of keys) {
         const val = await storage.get(key);
         if (val) {
           curStorages[key] = JSON.parse(val);

src/index.js

@@ -1,6 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import CircularProgress from "@mui/material/CircularProgress";
+import Divider from "@mui/material/Divider";
 import ReactMarkdown from "react-markdown";
 import Paper from "@mui/material/Paper";
 import { useFetch } from "./hooks/Fetch";
@@ -12,6 +13,7 @@ function App() {
   );
   return (
     <Paper sx={{ padding: 2, margin: 2 }}>
+      <Divider>{`KISS Translator v${process.env.REACT_APP_VERSION}`}</Divider>
       {loading ? (
         <center>
           <CircularProgress />

src/libs/index.js

@@ -6,8 +6,10 @@ import {
   STOKEY_FAB,
   GLOBLA_RULE,
   GLOBAL_KEY,
+  BUILTIN_RULES,
 } from "../config";
 import { browser } from "./browser";
+import { isMatch } from "./utils";
 
 /**
  * 获取节点列表并转为数组
@@ -47,14 +49,17 @@ export const setFab = async (obj) => await storage.setObj(STOKEY_FAB, obj);
 
 /**
  * 根据href匹配规则
- * TODO: 支持通配符（*）匹配
  * @param {*} rules
  * @param {string} href
  * @returns
  */
-export const matchRule = (rules, href) => {
+export const matchRule = (rules, href, { injectRules }) => {
+  if (injectRules) {
+    rules.splice(-1, 0, ...BUILTIN_RULES);
+  }
+
   const rule = rules.find((rule) =>
-    rule.pattern.split(",").some((p) => href.includes(p.trim()))
+    rule.pattern.split(",").some((p) => isMatch(href, p.trim()))
   );
   const globalRule =
     rules.find((rule) =>

src/libs/sync.js

@@ -13,62 +13,66 @@ import { apiSyncData } from "../apis";
 const loadOpt = async () => (await storage.getObj(STOKEY_SYNC)) || DEFAULT_SYNC;
 
 export const syncSetting = async () => {
-  const { syncUrl, syncKey, settingUpdateAt } = await loadOpt();
+  try {
-  if (!syncUrl || !syncKey) {
+    const { syncUrl, syncKey, settingUpdateAt } = await loadOpt();
-    return;
+    if (!syncUrl || !syncKey) {
-  }
+      return;
+    }
 
-  const setting = await getSetting();
+    const setting = await getSetting();
-  const res = await apiSyncData(syncUrl, syncKey, {
+    const res = await apiSyncData(syncUrl, syncKey, {
-    key: KV_SETTING_KEY,
+      key: KV_SETTING_KEY,
-    value: setting,
+      value: setting,
-    updateAt: settingUpdateAt,
+      updateAt: settingUpdateAt,
-  });
+    });
 
-  if (res && res.updateAt > settingUpdateAt) {
+    if (res && res.updateAt > settingUpdateAt) {
-    await storage.putObj(STOKEY_SYNC, {
+      await storage.putObj(STOKEY_SYNC, {
-      settingUpdateAt: res.updateAt,
+        settingUpdateAt: res.updateAt,
-      settingSyncAt: res.updateAt,
+        settingSyncAt: res.updateAt,
-    });
+      });
-    await storage.setObj(STOKEY_SETTING, res.value);
+      await storage.setObj(STOKEY_SETTING, res.value);
-  } else {
+    } else {
-    await storage.putObj(STOKEY_SYNC, {
+      await storage.putObj(STOKEY_SYNC, {
-      settingSyncAt: res.updateAt,
+        settingSyncAt: res.updateAt,
-    });
+      });
+    }
+  } catch (err) {
+    console.log("[sync setting]", err);
   }
 };
 
 export const syncRules = async () => {
-  const { syncUrl, syncKey, rulesUpdateAt } = await loadOpt();
+  try {
-  if (!syncUrl || !syncKey) {
+    const { syncUrl, syncKey, rulesUpdateAt } = await loadOpt();
-    return;
+    if (!syncUrl || !syncKey) {
-  }
+      return;
+    }
 
-  const rules = await getRules();
+    const rules = await getRules();
-  const res = await apiSyncData(syncUrl, syncKey, {
+    const res = await apiSyncData(syncUrl, syncKey, {
-    key: KV_RULES_KEY,
+      key: KV_RULES_KEY,
-    value: rules,
+      value: rules,
-    updateAt: rulesUpdateAt,
+      updateAt: rulesUpdateAt,
-  });
+    });
 
-  if (res && res.updateAt > rulesUpdateAt) {
+    if (res && res.updateAt > rulesUpdateAt) {
-    await storage.putObj(STOKEY_SYNC, {
+      await storage.putObj(STOKEY_SYNC, {
-      rulesUpdateAt: res.updateAt,
+        rulesUpdateAt: res.updateAt,
-      rulesSyncAt: res.updateAt,
+        rulesSyncAt: res.updateAt,
-    });
+      });
-    await storage.setObj(STOKEY_RULES, res.value);
+      await storage.setObj(STOKEY_RULES, res.value);
-  } else {
+    } else {
-    await storage.putObj(STOKEY_SYNC, {
+      await storage.putObj(STOKEY_SYNC, {
-      rulesSyncAt: res.updateAt,
+        rulesSyncAt: res.updateAt,
-    });
+      });
+    }
+  } catch (err) {
+    console.log("[sync rules]", err);
   }
 };
 
 export const syncAll = async () => {
-  try {
+  await syncSetting();
-    await syncSetting();
+  await syncRules();
-    await syncRules();
-  } catch (err) {
-    console.log("[sync all]", err);
-  }
 };

src/libs/translator.js

@@ -6,7 +6,6 @@ import {
   EVENT_KISS,
   MSG_TRANS_CURRULE,
 } from "../config";
-import { StoragesProvider } from "../hooks/Storage";
 import { queryEls } from ".";
 import Content from "../views/Content";
 import { fetchUpdate, fetchClear } from "./fetch";
@@ -144,10 +143,6 @@ export class Translator {
       "-webkit-line-clamp: unset; max-height: none; height: auto;";
 
     const root = createRoot(span);
-    root.render(
+    root.render(<Content q={q} translator={this} />);
-      <StoragesProvider>
-        <Content q={q} translator={this} />
-      </StoragesProvider>
-    );
   };
 }

src/libs/utils.js

@@ -51,3 +51,40 @@ export const debounce = (func, delay = 200) => {
     }, delay);
   };
 };
+
+/**
+ * 字符串通配符(*)匹配
+ * @param {*} s
+ * @param {*} p
+ * @returns
+ */
+export const isMatch = (s, p) => {
+  if (s.length === 0 || p.length === 0) {
+    return false;
+  }
+
+  p = `*${p}*`;
+
+  let [sIndex, pIndex] = [0, 0];
+  let [sRecord, pRecord] = [-1, -1];
+  while (sIndex < s.length && pRecord < p.length) {
+    if (p[pIndex] === "*") {
+      pIndex++;
+      [sRecord, pRecord] = [sIndex, pIndex];
+    } else if (s[sIndex] === p[pIndex]) {
+      sIndex++;
+      pIndex++;
+    } else if (sRecord + 1 < s.length) {
+      sRecord++;
+      [sIndex, pIndex] = [sRecord, pRecord];
+    } else {
+      return false;
+    }
+  }
+
+  if (p.length === pIndex) {
+    return true;
+  }
+
+  return p.slice(pIndex).replaceAll("*", "") === "";
+};

src/rules.js

@@ -0,0 +1,17 @@
+import fs from "fs";
+import path from "path";
+import { BUILTIN_RULES } from "./config/rules";
+
+(() => {
+  try {
+    const data = JSON.stringify(BUILTIN_RULES, null, "  ");
+    const file = path.resolve(
+      __dirname,
+      "../build/web/kiss-translator-rules.json"
+    );
+    fs.writeFileSync(file, data);
+    console.info(`Built-in rules generated: ${file}`);
+  } catch (err) {
+    console.error(err);
+  }
+})();

src/userscript.js

@@ -29,7 +29,7 @@ import { Translator } from "./libs/translator";
   // 翻译页面
   const setting = await getSetting();
   const rules = await getRules();
-  const rule = matchRule(rules, document.location.href);
+  const rule = matchRule(rules, document.location.href, setting);
   const translator = new Translator(rule, setting);
 
   // 浮球按钮

src/views/Action/Draggable.js

@@ -30,6 +30,8 @@ const getEdgePosition = (
       edge = "top";
       top = 0;
   }
+  left = limitNumber(left, 0, windowWidth - width);
+  top = limitNumber(top, 0, windowHeight - height);
   return { x: left, y: top, edge, hide: false };
 };
 

src/views/Action/index.js

@@ -76,7 +76,7 @@ export default function Action({ translator, fab }) {
     windowSize,
     width: fabWidth,
     height: fabWidth,
-    left: fab.x ?? windowSize.w - fabWidth,
+    left: fab.x ?? 0,
     top: fab.y ?? windowSize.h / 2,
   };
 

src/views/Options/Layout.js

@@ -6,7 +6,6 @@ import Box from "@mui/material/Box";
 import Navigator from "./Navigator";
 import Header from "./Header";
 import { useTheme } from "@mui/material/styles";
-import { syncAll } from "../../libs/sync";
 
 export default function Layout() {
   const navWidth = 256;
@@ -21,7 +20,6 @@ export default function Layout() {
 
   useEffect(() => {
     setOpen(false);
-    syncAll();
   }, [location]);
 
   return (

src/views/Options/Rules.js

@@ -9,6 +9,7 @@ import {
   OPT_LANGS_TO,
   OPT_TRANS_ALL,
   OPT_STYLE_ALL,
+  BUILTIN_RULES,
 } from "../../config";
 import { useState, useRef } from "react";
 import { useI18n } from "../../hooks/I18n";
@@ -22,6 +23,9 @@ import MenuItem from "@mui/material/MenuItem";
 import Grid from "@mui/material/Grid";
 import FileDownloadIcon from "@mui/icons-material/FileDownload";
 import FileUploadIcon from "@mui/icons-material/FileUpload";
+import { useSetting, useSettingUpdate } from "../../hooks/Setting";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Switch from "@mui/material/Switch";
 
 function RuleFields({ rule, rules, setShow }) {
   const initFormValues = rule || { ...DEFAULT_RULE, transOpen: "true" };
@@ -122,6 +126,7 @@ function RuleFields({ rule, rules, setShow }) {
           disabled={rule?.pattern === "*" || disabled}
           onChange={handleChange}
           onFocus={handleFocus}
+          multiline
         />
         <TextField
           size="small"
@@ -134,8 +139,6 @@ function RuleFields({ rule, rules, setShow }) {
           onChange={handleChange}
           onFocus={handleFocus}
           multiline
-          minRows={2}
-          maxRows={10}
         />
 
         <Box>
@@ -246,61 +249,91 @@ function RuleFields({ rule, rules, setShow }) {
           </Grid>
         </Box>
 
-        {editMode ? (
+        {rules &&
-          // 编辑
+          (editMode ? (
-          <Stack direction="row" spacing={2}>
+            // 编辑
-            {disabled ? (
+            <Stack direction="row" spacing={2}>
-              <>
+              {disabled ? (
-                <Button
+                <>
-                  size="small"
+                  <Button
-                  variant="contained"
+                    size="small"
-                  onClick={(e) => {
+                    variant="contained"
-                    e.preventDefault();
+                    onClick={(e) => {
-                    setDisabled(false);
+                      e.preventDefault();
-                  }}
+                      setDisabled(false);
-                >
+                    }}
-                  {i18n("edit")}
+                  >
-                </Button>
+                    {i18n("edit")}
-                {rule?.pattern !== "*" && (
+                  </Button>
+                  {rule?.pattern !== "*" && (
+                    <Button
+                      size="small"
+                      variant="outlined"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        rules.del(rule.pattern);
+                      }}
+                    >
+                      {i18n("delete")}
+                    </Button>
+                  )}
+                </>
+              ) : (
+                <>
+                  <Button size="small" variant="contained" type="submit">
+                    {i18n("save")}
+                  </Button>
                   <Button
                     size="small"
                     variant="outlined"
-                    onClick={(e) => {
+                    onClick={handleCancel}
-                      e.preventDefault();
-                      rules.del(rule.pattern);
-                    }}
                   >
-                    {i18n("delete")}
+                    {i18n("cancel")}
                   </Button>
-                )}
+                </>
-              </>
+              )}
-            ) : (
+            </Stack>
-              <>
+          ) : (
-                <Button size="small" variant="contained" type="submit">
+            // 添加
-                  {i18n("save")}
+            <Stack direction="row" spacing={2}>
-                </Button>
+              <Button size="small" variant="contained" type="submit">
-                <Button size="small" variant="outlined" onClick={handleCancel}>
+                {i18n("save")}
-                  {i18n("cancel")}
+              </Button>
-                </Button>
+              <Button size="small" variant="outlined" onClick={handleCancel}>
-              </>
+                {i18n("cancel")}
-            )}
+              </Button>
-          </Stack>
+            </Stack>
-        ) : (
+          ))}
-          // 添加
-          <Stack direction="row" spacing={2}>
-            <Button size="small" variant="contained" type="submit">
-              {i18n("save")}
-            </Button>
-            <Button size="small" variant="outlined" onClick={handleCancel}>
-              {i18n("cancel")}
-            </Button>
-          </Stack>
-        )}
       </Stack>
     </form>
   );
 }
 
+function RuleAccordion({ rule, rules }) {
+  const [expanded, setExpanded] = useState(false);
+
+  const handleChange = (e) => {
+    setExpanded((pre) => !pre);
+  };
+
+  return (
+    <Accordion expanded={expanded} onChange={handleChange}>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <Typography
+          style={{
+            opacity: rules ? 1 : 0.5,
+          }}
+        >
+          {rule.pattern}
+        </Typography>
+      </AccordionSummary>
+      <AccordionDetails>
+        {expanded && <RuleFields rule={rule} rules={rules} />}
+      </AccordionDetails>
+    </Accordion>
+  );
+}
+
 function DownloadButton({ data, text, fileName }) {
   const handleClick = (e) => {
     e.preventDefault();
@@ -355,6 +388,9 @@ export default function Rules() {
   const i18n = useI18n();
   const rules = useRules();
   const [showAdd, setShowAdd] = useState(false);
+  const setting = useSetting();
+  const updateSetting = useSettingUpdate();
+  const injectRules = !!setting?.injectRules;
 
   const handleImport = (e) => {
     const file = e.target.files[0];
@@ -378,6 +414,12 @@ export default function Rules() {
     reader.readAsText(file);
   };
 
+  const handleInject = () => {
+    updateSetting({
+      injectRules: !injectRules,
+    });
+  };
+
   return (
     <Box>
       <Stack spacing={3}>
@@ -399,22 +441,34 @@ export default function Rules() {
             data={JSON.stringify([...rules.list].reverse(), null, "\t")}
             text={i18n("export")}
           />
+
+          <FormControlLabel
+            control={
+              <Switch
+                size="small"
+                checked={injectRules}
+                onChange={handleInject}
+              />
+            }
+            label={i18n("inject_rules")}
+          />
         </Stack>
 
         {showAdd && <RuleFields rules={rules} setShow={setShowAdd} />}
 
         <Box>
           {rules.list.map((rule) => (
-            <Accordion key={rule.pattern}>
+            <RuleAccordion key={rule.pattern} rule={rule} rules={rules} />
-              <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-                <Typography>{rule.pattern}</Typography>
-              </AccordionSummary>
-              <AccordionDetails>
-                <RuleFields rule={rule} rules={rules} />
-              </AccordionDetails>
-            </Accordion>
           ))}
         </Box>
+
+        {injectRules && (
+          <Box>
+            {BUILTIN_RULES.map((rule) => (
+              <RuleAccordion key={rule.pattern} rule={rule} />
+            ))}
+          </Box>
+        )}
       </Stack>
     </Box>
   );

src/views/Options/Setting.js

@@ -6,15 +6,37 @@ import MenuItem from "@mui/material/MenuItem";
 import FormControl from "@mui/material/FormControl";
 import Select from "@mui/material/Select";
 import { useSetting, useSettingUpdate } from "../../hooks/Setting";
-import { limitNumber } from "../../libs/utils";
+import { limitNumber, debounce } from "../../libs/utils";
 import { useI18n } from "../../hooks/I18n";
 import { UI_LANGS } from "../../config";
+import { useMemo } from "react";
 
 export default function Settings() {
   const i18n = useI18n();
   const setting = useSetting();
   const updateSetting = useSettingUpdate();
 
+  const handleChange = useMemo(
+    () =>
+      debounce((e) => {
+        e.preventDefault();
+        let { name, value } = e.target;
+        switch (name) {
+          case "fetchLimit":
+            value = limitNumber(value, 1, 100);
+            break;
+          case "fetchInterval":
+            value = limitNumber(value, 0, 5000);
+            break;
+          default:
+        }
+        updateSetting({
+          [name]: value,
+        });
+      }, 500),
+    [updateSetting]
+  );
+
   if (!setting) {
     return;
   }
@@ -37,13 +59,10 @@ export default function Settings() {
         <FormControl size="small">
           <InputLabel>{i18n("ui_lang")}</InputLabel>
           <Select
+            name="uiLang"
             value={uiLang}
             label={i18n("ui_lang")}
-            onChange={(e) => {
+            onChange={handleChange}
-              updateSetting({
-                uiLang: e.target.value,
-              });
-            }}
           >
             {UI_LANGS.map(([lang, name]) => (
               <MenuItem key={lang} value={lang}>
@@ -57,36 +76,27 @@ export default function Settings() {
           size="small"
           label={i18n("fetch_limit")}
           type="number"
+          name="fetchLimit"
           defaultValue={fetchLimit}
-          onChange={(e) => {
+          onChange={handleChange}
-            updateSetting({
-              fetchLimit: limitNumber(e.target.value, 1, 100),
-            });
-          }}
         />
 
         <TextField
           size="small"
           label={i18n("fetch_interval")}
           type="number"
+          name="fetchInterval"
           defaultValue={fetchInterval}
-          onChange={(e) => {
+          onChange={handleChange}
-            updateSetting({
-              fetchInterval: limitNumber(e.target.value, 0, 5000),
-            });
-          }}
         />
 
         <FormControl size="small">
           <InputLabel>{i18n("clear_cache")}</InputLabel>
           <Select
+            name="clearCache"
             value={clearCache}
             label={i18n("clear_cache")}
-            onChange={(e) => {
+            onChange={handleChange}
-              updateSetting({
-                clearCache: e.target.value,
-              });
-            }}
           >
             <MenuItem value={false}>{i18n("clear_cache_never")}</MenuItem>
             <MenuItem value={true}>{i18n("clear_cache_restart")}</MenuItem>
@@ -96,60 +106,43 @@ export default function Settings() {
         <TextField
           size="small"
           label={i18n("google_api")}
+          name="googleUrl"
           defaultValue={googleUrl}
-          onChange={(e) => {
+          onChange={handleChange}
-            updateSetting({
-              googleUrl: e.target.value,
-            });
-          }}
         />
 
         <TextField
           size="small"
           label={i18n("openai_api")}
+          name="openaiUrl"
           defaultValue={openaiUrl}
-          onChange={(e) => {
+          onChange={handleChange}
-            updateSetting({
-              openaiUrl: e.target.value,
-            });
-          }}
         />
 
         <TextField
           size="small"
           type="password"
           label={i18n("openai_key")}
+          name="openaiKey"
           defaultValue={openaiKey}
-          onChange={(e) => {
+          onChange={handleChange}
-            updateSetting({
-              openaiKey: e.target.value,
-            });
-          }}
         />
 
         <TextField
           size="small"
           label={i18n("openai_model")}
+          name="openaiModel"
           defaultValue={openaiModel}
-          onChange={(e) => {
+          onChange={handleChange}
-            updateSetting({
-              openaiModel: e.target.value,
-            });
-          }}
         />
 
         <TextField
           size="small"
           label={i18n("openai_prompt")}
+          name="openaiPrompt"
           defaultValue={openaiPrompt}
-          onChange={(e) => {
+          onChange={handleChange}
-            updateSetting({
-              openaiPrompt: e.target.value,
-            });
-          }}
           multiline
-          minRows={2}
-          maxRows={10}
         />
       </Stack>
     </Box>

src/views/Options/SyncSetting.js

@@ -3,23 +3,33 @@ import Stack from "@mui/material/Stack";
 import TextField from "@mui/material/TextField";
 import { useI18n } from "../../hooks/I18n";
 import { useSync } from "../../hooks/Sync";
-import { syncAll } from "../../libs/sync";
 import Alert from "@mui/material/Alert";
 import Link from "@mui/material/Link";
 import { URL_KISS_WORKER } from "../../config";
+import { debounce } from "../../libs/utils";
+import { useMemo } from "react";
 
 export default function SyncSetting() {
   const i18n = useI18n();
   const sync = useSync();
 
+  const handleChange = useMemo(
+    () =>
+      debounce((e) => {
+        e.preventDefault();
+        const { name, value } = e.target;
+        sync.update({
+          [name]: value,
+        });
+      }, 500),
+    [sync]
+  );
+
   if (!sync.opt) {
     return;
   }
 
   const { syncUrl, syncKey } = sync.opt;
-  const handleSyncBlur = () => {
-    syncAll();
-  };
 
   return (
     <Box>
@@ -29,13 +39,9 @@ export default function SyncSetting() {
         <TextField
           size="small"
           label={i18n("data_sync_url")}
+          name="syncUrl"
           defaultValue={syncUrl}
-          onChange={(e) => {
+          onChange={handleChange}
-            sync.update({
-              syncUrl: e.target.value,
-            });
-          }}
-          onBlur={handleSyncBlur}
           helperText={
             <Link href={URL_KISS_WORKER}>{i18n("about_sync_api")}</Link>
           }
@@ -45,13 +51,9 @@ export default function SyncSetting() {
           size="small"
           type="password"
           label={i18n("data_sync_key")}
+          name="syncKey"
           defaultValue={syncKey}
-          onChange={(e) => {
+          onChange={handleChange}
-            sync.update({
-              syncKey: e.target.value,
-            });
-          }}
-          onBlur={handleSyncBlur}
         />
       </Stack>
     </Box>

src/views/Options/index.js

@@ -10,31 +10,34 @@ import { useEffect, useState } from "react";
 import { isGm } from "../../libs/browser";
 import { sleep } from "../../libs/utils";
 import CircularProgress from "@mui/material/CircularProgress";
+import { syncAll } from "../../libs/sync";
 
 export default function Options() {
   const [error, setError] = useState(false);
   const [ready, setReady] = useState(false);
 
   useEffect(() => {
-    if (!isGm) {
-      return;
-    }
-
     (async () => {
-      let i = 0;
+      if (isGm) {
-      for (;;) {
+        // 等待GM注入
-        if (window.APP_NAME === process.env.REACT_APP_NAME) {
+        let i = 0;
-          setReady(true);
+        for (;;) {
-          break;
+          if (window.APP_NAME === process.env.REACT_APP_NAME) {
-        }
+            setReady(true);
+            break;
+          }
 
-        if (++i > 8) {
+          if (++i > 8) {
-          setError(true);
+            setError(true);
-          break;
+            break;
-        }
+          }
 
-        await sleep(1000);
+          await sleep(1000);
+        }
       }
+
+      // 同步数据
+      syncAll();
     })();
   }, []);