v1.6.12

.env

@@ -2,7 +2,7 @@ GENERATE_SOURCEMAP=false
 
 REACT_APP_NAME=KISS Translator
 REACT_APP_NAME_CN=简约翻译
-REACT_APP_VERSION=1.6.10
+REACT_APP_VERSION=1.6.12
 
 REACT_APP_HOMEPAGE=https://github.com/fishjar/kiss-translator
 

README.en.md

@@ -16,7 +16,34 @@ If you also like a little more simplicity, welcome to pick it up.
 
 ## Features
 
-- Keep it simple, smart
+- [x] Keep it simple, smart
+- [x] Open source
+- [x] Adapt to common browsers
+  - [x] Chrome/Edge/Firefox/Kiwi
+  - [ ] Safari
+- [x] Supports multiple translation services
+  - [x] Google/Microsoft/DeepL/OpenAI
+  - [x] Custom translation interface
+- [x] Data synchronization function
+- [x] Custom rules + rule subscription
+- [x] Custom style
+- [x] Custom shortcut keys
+  - `Alt+Q` Toggle Translation
+  - `Alt+C` Toggle Styles
+  - `Alt+K` Open Popup
+  - `Alt+O` Open Options
+
+## Download
+
+- [x] Browser extension
+  - [x] Chrome [Installation address](https://chrome.google.com/webstore/detail/kiss-translator/bdiifdefkgmcblbcghdlonllpjhhjgof?hl=zh-CN)
+  - [x] Edge [Installation address](https://microsoftedge.microsoft.com/addons/detail/%E7%AE%80%E7%BA%A6%E7%BF%BB%E8%AF%91/jemckldkclkinpjighnoilpbldbdmmlh?hl=zh-CN)
+  - [x] Firefox [Installation address](https://addons.mozilla.org/zh-CN/firefox/addon/kiss-translator/)
+  - [ ] Safari
+- [x] GreaseMonkey Script
+  - [x] Chrome/Edge/Firefox ([Tampermonkey](https://www.tampermonkey.net/)/[Violentmonkey](https://violentmonkey.github.io/)) [Installation link 1](https://fishjar.github.io/kiss-translator/kiss-translator.user.js)、 [Installation link 2](https://kiss-translator.rayjar.com/kiss-translator.user.js)
+    - Greasy Fork [Installation address](https://greasyfork.org/zh-CN/scripts/472840-kiss-translator)
+  - [x] iOS Safari ([Userscripts Safari](https://github.com/quoid/userscripts)) [Installation link 1](https://fishjar.github.io/kiss-translator/kiss-translator-ios-safari.user.js)、 [Installation link 2](https://kiss-translator.rayjar.com/kiss-translator.user-ios-safari.js)
 
 ## Associated ProjectS
 
@@ -38,42 +65,7 @@ If you also like a little more simplicity, welcome to pick it up.
   - Supports query of English words, sentences and Chinese characters.
   - Supports history records and word collections.
 
-## Description
+## Development Guidelines
-
-### Support shortcut keys
-
-- `Alt+Q` Toggle Translation
-- `Alt+C` Toggle Styles
-- `Alt+K` Open Menu
-
-## Schedule
-
-- [x] Provide trial installation package
-- [x] Adapt browser
-  - [x] Chrome
-  - [x] Edge
-  - [x] Firefox
-  - [ ] Safari
-  - [x] Kiwi
-- [x] Support translation services
-  - [x] Google
-  - [x] Microsoft
-  - [x] DeepL
-  - [x] OpenAI
-- [x] Upload to app Store
-  - [x] Chrome [Install Link](https://chrome.google.com/webstore/detail/kiss-translator/bdiifdefkgmcblbcghdlonllpjhhjgof)
-  - [x] Edge [Install Link](https://microsoftedge.microsoft.com/addons/detail/kiss-translator/jemckldkclkinpjighnoilpbldbdmmlh)
-  - [x] Firefox [Install Link](https://addons.mozilla.org/en-US/firefox/addon/kiss-translator/)
-  - [ ] Safari
-  - [x] Greasy Fork [Install Link](https://greasyfork.org/en/scripts/472840-kiss-translator)
-- [x] Open source
-- [x] Data Synchronization Function
-- [x] Greasemonkey Script ([Setting Page 1](https://fishjar.github.io/kiss-translator/options.html)、[Setting Page 2](https://kiss-translator.rayjar.com/options))
-  - [x] [Tampermonkey](https://www.tampermonkey.net/) (Chrome/Edge/Firefox) [Install Link 1](https://fishjar.github.io/kiss-translator/kiss-translator.user.js)、[Install Link 2](https://kiss-translator.rayjar.com/kiss-translator.user.js)
-  - [x] [Violentmonkey](https://violentmonkey.github.io/) (Chrome/Edge/Firefox) [Install Link 1](https://fishjar.github.io/kiss-translator/kiss-translator.user.js)、[Install Link 2](https://kiss-translator.rayjar.com/kiss-translator.user.js)
-  - [x] [Userscripts Safari](https://github.com/quoid/userscripts) (iOS Safari) [Install Link 1](https://fishjar.github.io/kiss-translator/kiss-translator-ios-safari.user.js)、[Install Link 2](https://kiss-translator.rayjar.com/kiss-translator.user-ios-safari.js)
-
-## Guide
 
 ```sh
 git clone https://github.com/fishjar/kiss-translator.git

README.md

@@ -16,7 +16,34 @@
 
 ## 特点
 
-- 保持简约
+- [x] 保持简约
+- [x] 开放源代码
+- [x] 适配常见浏览器
+  - [x] Chrome/Edge/Firefox/Kiwi
+  - [ ] Safari
+- [x] 支持多种翻译服务
+  - [x] Google/Microsoft/DeepL/OpenAI
+  - [x] 自定义翻译接口
+- [x] 数据同步功能
+- [x] 自定义规则 + 规则订阅
+- [x] 自定义样式
+- [x] 自定义快捷键
+  - `Alt+Q` 开启翻译
+  - `Alt+C` 切换样式
+  - `Alt+K` 打开弹窗
+  - `Alt+O` 打开设置
+
+## 下载
+
+- [x] 浏览器扩展
+  - [x] Chrome [安装地址](https://chrome.google.com/webstore/detail/kiss-translator/bdiifdefkgmcblbcghdlonllpjhhjgof?hl=zh-CN)
+  - [x] Edge [安装地址](https://microsoftedge.microsoft.com/addons/detail/%E7%AE%80%E7%BA%A6%E7%BF%BB%E8%AF%91/jemckldkclkinpjighnoilpbldbdmmlh?hl=zh-CN)
+  - [x] Firefox [安装地址](https://addons.mozilla.org/zh-CN/firefox/addon/kiss-translator/)
+  - [ ] Safari
+- [x] 油猴脚本
+  - [x] Chrome/Edge/Firefox ([Tampermonkey](https://www.tampermonkey.net/)/[Violentmonkey](https://violentmonkey.github.io/)) [安装链接 1](https://fishjar.github.io/kiss-translator/kiss-translator.user.js)、 [安装链接 2](https://kiss-translator.rayjar.com/kiss-translator.user.js)
+    - Greasy Fork [安装地址](https://greasyfork.org/zh-CN/scripts/472840-kiss-translator)
+  - [x] iOS Safari ([Userscripts Safari](https://github.com/quoid/userscripts)) [安装链接 1](https://fishjar.github.io/kiss-translator/kiss-translator-ios-safari.user.js)、 [安装链接 2](https://kiss-translator.rayjar.com/kiss-translator.user-ios-safari.js)
 
 ## 关联项目
 
@@ -38,42 +65,7 @@
   - 支持英文单词、句子、汉字的查询。
   - 支持历史记录、单词收藏。
 
-## 简要说明
+## 开发指引
-
-### 支持快捷键
-
-- `Alt+Q` 开启翻译
-- `Alt+C` 切换样式
-- `Alt+K` 打开菜单
-
-## 进度
-
-- [x] 提供试用安装包
-- [x] 适配浏览器
-  - [x] Chrome
-  - [x] Edge
-  - [x] Firefox
-  - [ ] Safari
-  - [x] Kiwi
-- [x] 支持翻译服务
-  - [x] Google
-  - [x] Microsoft
-  - [x] DeepL
-  - [x] OpenAI
-- [x] 上架应用市场
-  - [x] Chrome [安装地址](https://chrome.google.com/webstore/detail/kiss-translator/bdiifdefkgmcblbcghdlonllpjhhjgof?hl=zh-CN)
-  - [x] Edge [安装地址](https://microsoftedge.microsoft.com/addons/detail/%E7%AE%80%E7%BA%A6%E7%BF%BB%E8%AF%91/jemckldkclkinpjighnoilpbldbdmmlh?hl=zh-CN)
-  - [x] Firefox [安装地址](https://addons.mozilla.org/zh-CN/firefox/addon/kiss-translator/)
-  - [ ] Safari
-  - [x] Greasy Fork [安装地址](https://greasyfork.org/zh-CN/scripts/472840-kiss-translator)
-- [x] 开放源代码
-- [x] 数据同步功能
-- [x] 油猴脚本 ([设置页面 1](https://fishjar.github.io/kiss-translator/options.html)、[设置页面 2](https://kiss-translator.rayjar.com/options))
-  - [x] [Tampermonkey](https://www.tampermonkey.net/) (Chrome/Edge/Firefox) [安装链接 1](https://fishjar.github.io/kiss-translator/kiss-translator.user.js)、[安装链接 2](https://kiss-translator.rayjar.com/kiss-translator.user.js)
-  - [x] [Violentmonkey](https://violentmonkey.github.io/) (Chrome/Edge/Firefox) [安装链接 1](https://fishjar.github.io/kiss-translator/kiss-translator.user.js)、[安装链接 2](https://kiss-translator.rayjar.com/kiss-translator.user.js)
-  - [x] [Userscripts Safari](https://github.com/quoid/userscripts) (iOS Safari) [安装链接 1](https://fishjar.github.io/kiss-translator/kiss-translator-ios-safari.user.js)、[安装链接 2](https://kiss-translator.rayjar.com/kiss-translator.user-ios-safari.js)
-
-## 指引
 
 ```sh
 git clone https://github.com/fishjar/kiss-translator.git

package.json

@@ -1,7 +1,7 @@
 {
   "name": "kiss-translator",
   "description": "A minimalist bilingual translation Extension & Greasemonkey Script",
-  "version": "1.6.10",
+  "version": "1.6.12",
   "author": "Gabe<yugang2002@gmail.com>",
   "private": true,
   "dependencies": {

public/_locales/en/messages.json

@@ -10,5 +10,8 @@
   },
   "toggle_style": {
     "message": "Toggle Style"
+  },
+  "open_options": {
+    "message": "Open Options"
   }
 }

public/_locales/zh_CN/messages.json

@@ -6,9 +6,12 @@
     "message": "一个简约的双语网页翻译扩展 & 油猴脚本"
   },
   "toggle_translate": {
-    "message": "切换翻译"
+    "message": "开启翻译"
   },
   "toggle_style": {
     "message": "切换样式"
+  },
+  "open_options": {
+    "message": "打开设置"
   }
 }

public/manifest.firefox.json

@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "__MSG_app_name__",
   "description": "__MSG_app_description__",
-  "version": "1.6.10",
+  "version": "1.6.12",
   "default_locale": "en",
   "author": "Gabe<yugang2002@gmail.com>",
   "homepage_url": "https://github.com/fishjar/kiss-translator",
@@ -33,6 +33,12 @@
         "default": "Alt+C"
       },
       "description": "__MSG_toggle_style__"
+    },
+    "openOptions": {
+      "suggested_key": {
+        "default": "Alt+O"
+      },
+      "description": "__MSG_open_options__"
     }
   },
   "permissions": ["<all_urls>", "storage"],

public/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "__MSG_app_name__",
   "description": "__MSG_app_description__",
-  "version": "1.6.10",
+  "version": "1.6.12",
   "default_locale": "en",
   "author": "Gabe<yugang2002@gmail.com>",
   "homepage_url": "https://github.com/fishjar/kiss-translator",
@@ -34,6 +34,12 @@
         "default": "Alt+C"
       },
       "description": "__MSG_toggle_style__"
+    },
+    "openOptions": {
+      "suggested_key": {
+        "default": "Alt+O"
+      },
+      "description": "__MSG_open_options__"
     }
   },
   "permissions": ["storage"],

src/background.js

@@ -7,6 +7,7 @@ import {
   MSG_TRANS_TOGGLE_STYLE,
   CMD_TOGGLE_TRANSLATE,
   CMD_TOGGLE_STYLE,
+  CMD_OPEN_OPTIONS,
 } from "./config";
 import { getSettingWithDefault, tryInitDefaultData } from "./libs/storage";
 import { trySyncSettingAndRules } from "./libs/sync";
@@ -85,6 +86,9 @@ browser.commands.onCommand.addListener((command) => {
     case CMD_TOGGLE_STYLE:
       sendTabMsg(MSG_TRANS_TOGGLE_STYLE);
       break;
+    case CMD_OPEN_OPTIONS:
+      browser.runtime.openOptionsPage();
+      break;
     default:
   }
 });

src/config/i18n.js

@@ -43,6 +43,7 @@ const customApiLangs = `["en", "English - English"],
 `;
 
 const customApiHelpZH = `/// 自定义翻译源接口说明
+
 // 请求（Request）数据将按下面规范发送
 {
   url: {{YOUR_URL}},
@@ -70,6 +71,7 @@ ${customApiLangs}
 `;
 
 const customApiHelpEN = `/// Custom translation source interface description
+
 // Request data will be sent according to the following specifications
 {
   url: {{YOUR_URL}},
@@ -342,8 +344,8 @@ export const I18N = {
     en: `Follow the syntax of "CSS"`,
   },
   setting: {
-    zh: `设置`,
+    zh: `设置 (Alt+O)`,
-    en: `Setting`,
+    en: `Setting (Alt+O)`,
   },
   pattern: {
     zh: `匹配网址`,
@@ -527,14 +529,22 @@ export const I18N = {
   },
   hide_fab_button: {
     zh: `隐藏悬浮按钮`,
-    en: `"Hide Fab Button`,
+    en: `Hide Fab Button`,
   },
   show: {
     zh: `显示`,
-    en: `"Show`,
+    en: `Show`,
   },
   hide: {
     zh: `隐藏`,
-    en: `"Hide`,
+    en: `Hide`,
+  },
+  save_rule: {
+    zh: `保存规则`,
+    en: `Save Rule`,
+  },
+  global_rule: {
+    zh: `全局规则`,
+    en: `Global Rule`,
   },
 };

src/config/index.js

@@ -29,6 +29,7 @@ export const STOKEY_WEBFIXCACHE_PREFIX = `${APP_NAME}_webfixcache_`;
 
 export const CMD_TOGGLE_TRANSLATE = "toggleTranslate";
 export const CMD_TOGGLE_STYLE = "toggleStyle";
+export const CMD_OPEN_OPTIONS = "openOptions";
 
 export const CLIENT_WEB = "web";
 export const CLIENT_CHROME = "chrome";

src/hooks/Rules.js

@@ -14,7 +14,7 @@ export function useRules() {
   const updateRules = useCallback(
     async (rules) => {
       await save(rules);
-      trySyncRules();
+      trySyncRules(false, true);
     },
     [save]
   );

src/hooks/Setting.js

@@ -19,7 +19,7 @@ export function SettingProvider({ children }) {
   const syncSetting = useMemo(
     () =>
       debounce(() => {
-        trySyncSetting();
+        trySyncSetting(false, true);
       }, [2000]),
     []
   );

src/libs/msg.js

@@ -19,3 +19,12 @@ export const sendTabMsg = async (action, args) => {
   const tabs = await browser.tabs.query({ active: true, currentWindow: true });
   return browser.tabs.sendMessage(tabs[0].id, { action, args });
 };
+
+/**
+ * 获取当前tab信息
+ * @returns
+ */
+export const getTabInfo = async () => {
+  const tabs = await browser.tabs.query({ active: true, currentWindow: true });
+  return tabs[0];
+};

src/libs/rules.js

@@ -11,6 +11,8 @@ import {
   DEFAULT_OW_RULE,
 } from "../config";
 import { loadOrFetchSubRules } from "./subRules";
+import { getRulesWithDefault, setRules } from "./storage";
+import { trySyncRules } from "./sync";
 
 /**
  * 根据href匹配规则
@@ -134,3 +136,19 @@ export const checkRules = (rules) => {
 
   return rules;
 };
+
+/**
+ * 保存或更新rule
+ * @param {*} newRule
+ */
+export const saveRule = async (newRule) => {
+  const rules = await getRulesWithDefault();
+  const rule = rules.find((item) => isMatch(newRule.pattern, item.pattern));
+  if (rule && rule.pattern !== GLOBAL_KEY) {
+    Object.assign(rule, { ...newRule, pattern: rule.pattern });
+  } else {
+    rules.unshift(newRule);
+  }
+  await setRules(rules);
+  trySyncRules(false, true);
+};

src/libs/sync.js

@@ -19,12 +19,21 @@ import { sha256 } from "./utils";
  * 同步设置
  * @returns
  */
-const syncSetting = async (isBg = false) => {
+const syncSetting = async (isBg = false, isForce = false) => {
-  const { syncUrl, syncKey, settingUpdateAt = 0 } = await getSyncWithDefault();
+  let {
+    syncUrl,
+    syncKey,
+    settingUpdateAt = 0,
+    settingSyncAt = 0,
+  } = await getSyncWithDefault();
   if (!syncUrl || !syncKey) {
     return;
   }
 
+  if (isForce) {
+    settingUpdateAt = Date.now();
+  }
+
   const setting = await getSettingWithDefault();
   const res = await apiSyncData(
     syncUrl,
@@ -32,7 +41,7 @@ const syncSetting = async (isBg = false) => {
     {
       key: KV_SETTING_KEY,
       value: setting,
-      updateAt: settingUpdateAt,
+      updateAt: settingSyncAt === 0 ? 0 : settingUpdateAt,
     },
     isBg
   );
@@ -48,9 +57,9 @@ const syncSetting = async (isBg = false) => {
   return res.value;
 };
 
-export const trySyncSetting = async (isBg = false) => {
+export const trySyncSetting = async (isBg = false, isForce = false) => {
   try {
-    return await syncSetting(isBg);
+    return await syncSetting(isBg, isForce);
   } catch (err) {
     console.log("[sync setting]", err);
   }
@@ -60,12 +69,21 @@ export const trySyncSetting = async (isBg = false) => {
  * 同步规则
  * @returns
  */
-const syncRules = async (isBg = false) => {
+const syncRules = async (isBg = false, isForce = false) => {
-  const { syncUrl, syncKey, rulesUpdateAt } = await getSyncWithDefault();
+  let {
+    syncUrl,
+    syncKey,
+    rulesUpdateAt = 0,
+    rulesSyncAt = 0,
+  } = await getSyncWithDefault();
   if (!syncUrl || !syncKey) {
     return;
   }
 
+  if (isForce) {
+    rulesUpdateAt = Date.now();
+  }
+
   const rules = await getRulesWithDefault();
   const res = await apiSyncData(
     syncUrl,
@@ -73,7 +91,7 @@ const syncRules = async (isBg = false) => {
     {
       key: KV_RULES_KEY,
       value: rules,
-      updateAt: rulesUpdateAt,
+      updateAt: rulesSyncAt === 0 ? 0 : rulesUpdateAt,
     },
     isBg
   );
@@ -89,9 +107,9 @@ const syncRules = async (isBg = false) => {
   return res.value;
 };
 
-export const trySyncRules = async (isBg = false) => {
+export const trySyncRules = async (isBg = false, isForce = false) => {
   try {
-    return await syncRules(isBg);
+    return await syncRules(isBg, isForce);
   } catch (err) {
     console.log("[sync user rules]", err);
   }

src/libs/webfix.js

@@ -5,7 +5,8 @@ import { apiFetch } from "../apis";
 /**
  * 修复程序类型
  */
-const WEBFIX_BR = "br";
+const FIXER_BR = "br";
+const FIXER_FONTSIZE = "fontSize";
 
 /**
  * 需要修复的站点列表
@@ -19,13 +20,19 @@ const DEFAULT_SITES = [
     pattern: "www.phoronix.com",
     selector: ".content",
     rootSlector: "",
-    fixer: WEBFIX_BR,
+    fixer: FIXER_BR,
   },
   {
-    pattern: "t.me/s/*",
+    pattern: "t.me/s/",
     selector: ".tgme_widget_message_text",
     rootSlector: ".tgme_channel_history",
-    fixer: WEBFIX_BR,
+    fixer: FIXER_BR,
+  },
+  {
+    pattern: "baidu.com",
+    selector: "html",
+    rootSlector: "",
+    fixer: FIXER_FONTSIZE,
   },
 ];
 
@@ -87,11 +94,20 @@ function brFixer(node) {
   node.innerHTML = html;
 }
 
+/**
+ * 修复字体大小问题，如 baidu.com
+ * @param {*} node
+ */
+function fontSizeFixer(node) {
+  node.style.cssText += "font-size:1em;";
+}
+
 /**
  * 修复程序映射
  */
 const fixerMap = {
-  [WEBFIX_BR]: brFixer,
+  [FIXER_BR]: brFixer,
+  [FIXER_FONTSIZE]: fontSizeFixer,
 };
 
 /**

src/views/Options/Rules.js

@@ -362,6 +362,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
 }
 
 function RuleAccordion({ rule, rules }) {
+  const i18n = useI18n();
   const [expanded, setExpanded] = useState(false);
 
   const handleChange = (e) => {
@@ -376,7 +377,9 @@ function RuleAccordion({ rule, rules }) {
             opacity: rules ? 1 : 0.5,
           }}
         >
-          {rule.pattern}
+          {rule.pattern === GLOBAL_KEY
+            ? `[${i18n("global_rule")}] ${rule.pattern}`
+            : rule.pattern}
         </Typography>
       </AccordionSummary>
       <AccordionDetails>

src/views/Options/Webfix.js

@@ -1,6 +1,6 @@
 import Stack from "@mui/material/Stack";
 import TextField from "@mui/material/TextField";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useI18n } from "../../hooks/I18n";
 import Typography from "@mui/material/Typography";
 import Accordion from "@mui/material/Accordion";
@@ -75,11 +75,17 @@ export default function Webfix() {
   const alert = useAlert();
   const { setting, updateSetting } = useSetting();
 
+  const loadSites = useCallback(async () => {
+    const sites = await loadOrFetchWebfix(process.env.REACT_APP_WEBFIXURL);
+    setSites(sites);
+  }, []);
+
   const handleSyncTest = async (e) => {
     e.preventDefault();
     try {
       setLoading(true);
       await syncWebfix(process.env.REACT_APP_WEBFIXURL);
+      await loadSites();
       alert.success(i18n("sync_success"));
     } catch (err) {
       console.log("[sync webfix]", err);
@@ -93,15 +99,14 @@ export default function Webfix() {
     (async () => {
       try {
         setLoading(true);
-        const sites = await loadOrFetchWebfix(process.env.REACT_APP_WEBFIXURL);
+        await loadSites();
-        setSites(sites);
       } catch (err) {
         console.log("[load webfix]", err.message);
       } finally {
         setLoading(false);
       }
     })();
-  }, []);
+  }, [loadSites]);
 
   return (
     <Box>

src/views/Options/index.js

@@ -36,7 +36,7 @@ export default function Options() {
             // 检查版本是否一致
             if (version !== process.env.REACT_APP_VERSION) {
               setError(
-                `The version of the script(v${version}) and this page(v${process.env.REACT_APP_VERSION}) are inconsistent.`
+                `The version is inconsistent, please check whether the script(v${version}) is the latest version(v${process.env.REACT_APP_VERSION}). (版本不一致，请检查脚本(v${version})是否为最新版(v${process.env.REACT_APP_VERSION}))`
               );
               break;
             }
@@ -53,7 +53,7 @@ export default function Options() {
           }
 
           if (++i > 8) {
-            setError("Time out.");
+            setError("Time out. (连接超时)");
             break;
           }
 
@@ -78,26 +78,26 @@ export default function Options() {
         </Divider>
         <h2>
           Please confirm whether to install or enable KISS Translator
-          GreaseMonkey script?
+          GreaseMonkey script? (请检查是否安装或启用简约翻译油猴脚本)
         </h2>
         <Stack spacing={2}>
           <Link href={process.env.REACT_APP_USERSCRIPT_DOWNLOADURL}>
-            Install Userscript 1
+            Install Userscript for Tampermonkey/Violentmonkey 1 (油猴脚本 安装地址 1)
           </Link>
           <Link href={process.env.REACT_APP_USERSCRIPT_DOWNLOADURL2}>
-            Install Userscript 2
+            Install Userscript for Tampermonkey/Violentmonkey 2 (油猴脚本 安装地址 2)
           </Link>
           <Link href={process.env.REACT_APP_USERSCRIPT_IOS_DOWNLOADURL}>
-            Install Userscript Safari 1
+            Install Userscript for iOS Safari 1 (油猴脚本 iOS Safari专用 安装地址 1)
           </Link>
           <Link href={process.env.REACT_APP_USERSCRIPT_IOS_DOWNLOADURL2}>
-            Install Userscript Safari 2
+            Install Userscript for iOS Safari 2 (油猴脚本 iOS Safari专用 安装地址 2)
           </Link>
           <Link href={process.env.REACT_APP_OPTIONSPAGE}>
-            Open Options Page 1
+            Open Options Page 1 (打开设置页面 1)
           </Link>
           <Link href={process.env.REACT_APP_OPTIONSPAGE2}>
-            Open Options Page 2
+            Open Options Page 2 (打开设置页面 2)
           </Link>
         </Stack>
       </center>

src/views/Popup/index.js

@@ -5,7 +5,7 @@ import MenuItem from "@mui/material/MenuItem";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import Switch from "@mui/material/Switch";
 import Button from "@mui/material/Button";
-import { sendTabMsg } from "../../libs/msg";
+import { sendTabMsg, getTabInfo } from "../../libs/msg";
 import { browser } from "../../libs/browser";
 import { isExt } from "../../libs/client";
 import { useI18n } from "../../hooks/I18n";
@@ -24,6 +24,7 @@ import {
   CACHE_NAME,
 } from "../../config";
 import { sendIframeMsg } from "../../libs/iframe";
+import { saveRule } from "../../libs/rules";
 
 export default function Popup({ setShowPopup, translator: tran }) {
   const i18n = useI18n();
@@ -77,6 +78,20 @@ export default function Popup({ setShowPopup, translator: tran }) {
     }
   };
 
+  const handleSaveRule = async () => {
+    try {
+      let host = window.location.host;
+      if (isExt) {
+        const tab = await getTabInfo();
+        const url = new URL(tab.url);
+        host = url.host;
+      }
+      saveRule({ ...rule, pattern: host });
+    } catch (err) {
+      console.log("[save rule]", err);
+    }
+  };
+
   useEffect(() => {
     if (!isExt) {
       return;
@@ -218,9 +233,19 @@ export default function Popup({ setShowPopup, translator: tran }) {
           />
         )}
 
-        <Button variant="text" onClick={handleOpenSetting}>
+        <Stack
-          {i18n("setting")}
+          direction="row"
-        </Button>
+          justifyContent="space-between"
+          alignItems="center"
+          spacing={2}
+        >
+          <Button variant="text" onClick={handleSaveRule}>
+            {i18n("save_rule")}
+          </Button>
+          <Button variant="text" onClick={handleOpenSetting}>
+            {i18n("setting")}
+          </Button>
+        </Stack>
       </Stack>
     </Box>
   );