v1.7.1

.env

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

README.en.md

@@ -16,7 +16,37 @@ 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] Support input box translation
+- [x] Support YouTube subtitle translation
+- [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
+  - `Alt+I` Input Box Translation
+
+## 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 +68,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
-
-### 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
+## Development Guidelines
 
 ```sh
 git clone https://github.com/fishjar/kiss-translator.git

README.md

@@ -16,7 +16,37 @@
 
 ## 特点
 
-- 保持简约
+- [x] 保持简约
+- [x] 开放源代码
+- [x] 适配常见浏览器
+  - [x] Chrome/Edge/Firefox/Kiwi
+  - [ ] Safari
+- [x] 支持多种翻译服务
+  - [x] Google/Microsoft/DeepL/OpenAI
+  - [x] 自定义翻译接口
+- [x] 支持输入框翻译
+- [x] 支持 YouTube 字幕翻译
+- [x] 数据同步功能
+- [x] 自定义规则 + 规则订阅
+- [x] 自定义样式
+- [x] 自定义快捷键
+  - `Alt+Q` 开启翻译
+  - `Alt+C` 切换样式
+  - `Alt+K` 打开弹窗
+  - `Alt+O` 打开设置
+  - `Alt+I` 输入框翻译
+
+## 下载
+
+- [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 +68,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.8",
+  "version": "1.7.1",
   "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/content.html

@@ -84,6 +84,11 @@
           >
         </p>
       </h2>
+      <hr />
+      <input id="input1" style="width: 80%;" />
+      <hr />
+      <textarea id="textarea1" style="width: 80%;">test</textarea>
+      <hr />
       <div id="addtitle"></div>
       <h2>Shadow 1</h2>
       <div id="shadow1"></div>

public/manifest.firefox.json

@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "__MSG_app_name__",
   "description": "__MSG_app_description__",
-  "version": "1.6.8",
+  "version": "1.7.1",
   "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.8",
+  "version": "1.7.1",
   "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}},
@@ -271,15 +273,15 @@ export const I18N = {
   },
   personal_rules: {
     zh: `个人规则`,
-    en: `Personal Rules`,
+    en: `Rules`,
   },
   subscribe_rules: {
     zh: `订阅规则`,
-    en: `Subscribe Rules`,
+    en: `Subscribe`,
   },
   overwrite_subscribe_rules: {
     zh: `覆写订阅规则`,
-    en: `Overwrite Subscribe Rules`,
+    en: `Overwrite`,
   },
   subscribe_url: {
     zh: `订阅地址`,
@@ -342,8 +344,8 @@ export const I18N = {
     en: `Follow the syntax of "CSS"`,
   },
   setting: {
-    zh: `设置`,
-    en: `Setting`,
+    zh: `设置 (Alt+O)`,
+    en: `Setting (Alt+O)`,
   },
   pattern: {
     zh: `匹配网址`,
@@ -521,4 +523,68 @@ export const I18N = {
     zh: `"打开弹窗"快捷键`,
     en: `"Open Popup" Shortcut`,
   },
+  open_setting_shortcut: {
+    zh: `"打开设置"快捷键`,
+    en: `"Open Setting" Shortcut`,
+  },
+  hide_fab_button: {
+    zh: `隐藏悬浮按钮`,
+    en: `Hide Fab Button`,
+  },
+  show: {
+    zh: `显示`,
+    en: `Show`,
+  },
+  hide: {
+    zh: `隐藏`,
+    en: `Hide`,
+  },
+  save_rule: {
+    zh: `保存规则`,
+    en: `Save Rule`,
+  },
+  global_rule: {
+    zh: `全局规则`,
+    en: `Global Rule`,
+  },
+  input_setting: {
+    zh: `输入框设置`,
+    en: `Input Box Setting`,
+  },
+  input_box_translation: {
+    zh: `启用输入框翻译`,
+    en: `Input Box Translation`,
+  },
+  input_selector: {
+    zh: `输入框选择器`,
+    en: `Input Selector`,
+  },
+  input_selector_helper: {
+    zh: `用于输入框翻译。`,
+    en: `Used for input box translation.`,
+  },
+  trigger_trans_shortcut: {
+    zh: `触发翻译快捷键`,
+    en: `Trigger Translation Shortcut Keys`,
+  },
+  trigger_trans_shortcut_help: {
+    zh: `默认为单击“Alt+i”`,
+    en: `Default is "Alt+i"`,
+  },
+  shortcut_press_count: {
+    zh: `快捷键连击次数`,
+    en: `Shortcut Press Number`,
+  },
+  combo_timeout: {
+    zh: `连击超时时间 (10-1000ms)`,
+    en: `Combo Timeout (10-1000ms)`,
+  },
+  input_trans_start_sign: {
+    zh: `翻译起始标识`,
+    en: `Translation Start Sign`,
+  },
+  input_trans_start_sign_help: {
+    zh: `标识后面可以加目标语言代码，如： “/en 你好”、“/zh hello”`,
+    en: `The target language code can be added after the sign, such as: "/en 你好", "/zh hello"`,
+  },
 };

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";
@@ -136,6 +137,7 @@ export const OPT_LANGS_SPECIAL = {
   ),
   [OPT_TRANS_CUSTOMIZE]: new Map([["auto", ""]]),
 };
+export const OPT_LANGS_LIST = OPT_LANGS_TO.map(([lang]) => lang);
 
 export const OPT_STYLE_NONE = "style_none"; // 无
 export const OPT_STYLE_LINE = "under_line"; // 下划线
@@ -197,6 +199,20 @@ export const GLOBLA_RULE = {
   textDiyStyle: "",
 };
 
+// 输入框翻译
+export const OPT_INPUT_TRANS_SIGNS = ["/", "//", "\\", "\\\\", ">", ">>"];
+export const DEFAULT_INPUT_SHORTCUT = ["Alt", "i"];
+export const DEFAULT_INPUT_RULE = {
+  transOpen: true,
+  translator: OPT_TRANS_MICROSOFT,
+  fromLang: "auto",
+  toLang: "en",
+  triggerShortcut: DEFAULT_INPUT_SHORTCUT,
+  triggerCount: 1,
+  triggerTime: 200,
+  transSign: OPT_INPUT_TRANS_SIGNS[0],
+};
+
 // 订阅列表
 export const DEFAULT_SUBRULES_LIST = [
   {
@@ -243,10 +259,12 @@ export const DEFAULT_TRANS_APIS = {
 export const OPT_SHORTCUT_TRANSLATE = "toggleTranslate";
 export const OPT_SHORTCUT_STYLE = "toggleStyle";
 export const OPT_SHORTCUT_POPUP = "togglePopup";
+export const OPT_SHORTCUT_SETTING = "openSetting";
 export const DEFAULT_SHORTCUTS = {
   [OPT_SHORTCUT_TRANSLATE]: ["Alt", "q"],
   [OPT_SHORTCUT_STYLE]: ["Alt", "c"],
   [OPT_SHORTCUT_POPUP]: ["Alt", "k"],
+  [OPT_SHORTCUT_SETTING]: ["Alt", "o"],
 };
 
 export const TRANS_MIN_LENGTH = 5; // 最短翻译长度
@@ -269,6 +287,8 @@ export const DEFAULT_SETTING = {
   transApis: DEFAULT_TRANS_APIS, // 翻译接口
   mouseKey: OPT_MOUSEKEY_DISABLE, // 鼠标悬停翻译
   shortcuts: DEFAULT_SHORTCUTS, // 快捷键
+  hideFab: false, // 是否隐藏按钮
+  inputRule: DEFAULT_INPUT_RULE, // 输入框设置
 };
 
 export const DEFAULT_RULES = [GLOBLA_RULE];
@@ -281,4 +301,5 @@ export const DEFAULT_SYNC = {
   rulesUpdateAt: 0,
   rulesSyncAt: 0,
   subRulesSyncAt: 0, // 订阅规则同步时间
+  dataCaches: {}, // 缓存同步时间
 };

src/hooks/InputRule.js

@@ -0,0 +1,18 @@
+import { useCallback } from "react";
+import { DEFAULT_INPUT_RULE } from "../config";
+import { useSetting } from "./Setting";
+
+export function useInputRule() {
+  const { setting, updateSetting } = useSetting();
+  const inputRule = setting?.inputRule || DEFAULT_INPUT_RULE;
+
+  const updateInputRule = useCallback(
+    async (obj) => {
+      Object.assign(inputRule, obj);
+      await updateSetting({ inputRule });
+    },
+    [inputRule, updateSetting]
+  );
+
+  return { inputRule, updateInputRule };
+}

src/hooks/Rules.js

@@ -1,7 +1,6 @@
 import { STOKEY_RULES, DEFAULT_RULES } from "../config";
 import { useStorage } from "./Storage";
 import { trySyncRules } from "../libs/sync";
-import { useSync } from "./Sync";
 import { checkRules } from "../libs/rules";
 import { useCallback } from "react";
 
@@ -11,19 +10,13 @@ import { useCallback } from "react";
  */
 export function useRules() {
   const { data: list, save } = useStorage(STOKEY_RULES, DEFAULT_RULES);
-  const {
-    sync: { rulesUpdateAt },
-    updateSync,
-  } = useSync();
 
   const updateRules = useCallback(
     async (rules) => {
-      const updateAt = rulesUpdateAt ? Date.now() : 0;
       await save(rules);
-      await updateSync({ rulesUpdateAt: updateAt });
-      trySyncRules();
+      trySyncRules(false, true);
     },
-    [rulesUpdateAt, save, updateSync]
+    [save]
   );
 
   const add = useCallback(

src/hooks/Setting.js

@@ -1,6 +1,5 @@
 import { STOKEY_SETTING, DEFAULT_SETTING } from "../config";
 import { useStorage } from "./Storage";
-import { useSync } from "./Sync";
 import { trySyncSetting } from "../libs/sync";
 import { createContext, useCallback, useContext, useMemo } from "react";
 import { debounce } from "../libs/utils";
@@ -16,27 +15,21 @@ export function SettingProvider({ children }) {
     STOKEY_SETTING,
     DEFAULT_SETTING
   );
-  const {
-    sync: { settingUpdateAt },
-    updateSync,
-  } = useSync();
 
   const syncSetting = useMemo(
     () =>
       debounce(() => {
-        trySyncSetting();
+        trySyncSetting(false, true);
       }, [2000]),
     []
   );
 
   const updateSetting = useCallback(
     async (obj) => {
-      const updateAt = settingUpdateAt ? Date.now() : 0;
       await update(obj);
-      await updateSync({ settingUpdateAt: updateAt });
       syncSetting();
     },
-    [settingUpdateAt, update, updateSync, syncSetting]
+    [update, syncSetting]
   );
 
   if (loading) {

src/hooks/Shortcut.js

@@ -5,6 +5,7 @@ import { useSetting } from "./Setting";
 export function useShortcut(action) {
   const { setting, updateSetting } = useSetting();
   const shortcuts = setting?.shortcuts || DEFAULT_SHORTCUTS;
+  const shortcut = shortcuts[action] || [];
 
   const setShortcut = useCallback(
     async (val) => {
@@ -14,5 +15,5 @@ export function useShortcut(action) {
     [action, shortcuts, updateSetting]
   );
 
-  return { shortcut: shortcuts[action] || [], setShortcut };
+  return { shortcut, setShortcut };
 }

src/hooks/Storage.js

@@ -31,6 +31,7 @@ export function useStorage(key, defaultVal = null) {
     if (val) {
       setData(val);
     } else if (defaultVal) {
+      setData(defaultVal);
       await storage.setObj(key, defaultVal);
     }
   }, [key, defaultVal]);

src/hooks/SubRules.js

@@ -48,7 +48,7 @@ export function useSubRules() {
   const addSub = useCallback(
     async (url) => {
       const subrulesList = [...list];
-      subrulesList.push({ url, selected: false, syncAt: Date.now() });
+      subrulesList.push({ url, selected: false });
       await updateSetting({ subrulesList });
     },
     [list, updateSetting]

src/hooks/Sync.js

@@ -1,3 +1,4 @@
+import { useCallback } from "react";
 import { STOKEY_SYNC, DEFAULT_SYNC } from "../config";
 import { useStorage } from "./Storage";
 
@@ -6,6 +7,40 @@ import { useStorage } from "./Storage";
  * @returns
  */
 export function useSync() {
-  const { data, update } = useStorage(STOKEY_SYNC, DEFAULT_SYNC);
-  return { sync: data, updateSync: update };
+  const { data, update, reload } = useStorage(STOKEY_SYNC, DEFAULT_SYNC);
+  return { sync: data, updateSync: update, reloadSync: reload };
+}
+
+/**
+ * caches sync hook
+ * @param {*} url
+ * @returns
+ */
+export function useSyncCaches() {
+  const { sync, updateSync, reloadSync } = useSync();
+
+  const updateDataCache = useCallback(
+    async (url) => {
+      const dataCaches = sync.dataCaches || {};
+      dataCaches[url] = Date.now();
+      await updateSync({ dataCaches });
+    },
+    [sync, updateSync]
+  );
+
+  const deleteDataCache = useCallback(
+    async (url) => {
+      const dataCaches = sync.dataCaches || {};
+      delete dataCaches[url];
+      await updateSync({ dataCaches });
+    },
+    [sync, updateSync]
+  );
+
+  return {
+    dataCaches: sync.dataCaches || {},
+    updateDataCache,
+    deleteDataCache,
+    reloadSync,
+  };
 }

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匹配规则
@@ -47,9 +49,8 @@ export const matchRule = async (
             mixRule[key] = val;
           });
 
-        const subRules = (await loadOrFetchSubRules(selectedSub.url)).map(
-          (item) => ({ ...item, ...mixRule })
-        );
+        let subRules = await loadOrFetchSubRules(selectedSub.url);
+        subRules = subRules.map((item) => ({ ...item, ...mixRule }));
         rules.splice(-1, 0, ...subRules);
       }
     } catch (err) {
@@ -134,3 +135,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/shortcut.js

@@ -39,6 +39,10 @@ export const shortcutListener = (fn, target = document, timeout = 3000) => {
   target.addEventListener("keydown", handleKeydown);
   target.addEventListener("keyup", handleKeyup);
   return () => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
     target.removeEventListener("keydown", handleKeydown);
     target.removeEventListener("keyup", handleKeyup);
   };
@@ -51,10 +55,58 @@ export const shortcutListener = (fn, target = document, timeout = 3000) => {
  * @param {*} target
  * @returns
  */
-export const shortcutRegister = (targetKeys, fn, target = document) => {
+export const shortcutRegister = (targetKeys = [], fn, target = document) => {
   return shortcutListener((curkeys) => {
-    if (isSameSet(new Set(targetKeys), new Set(curkeys))) {
+    if (
+      targetKeys.length > 0 &&
+      isSameSet(new Set(targetKeys), new Set(curkeys))
+    ) {
       fn();
     }
   }, target);
 };
+
+/**
+ * 注册连续快捷键
+ * @param {*} targetKeys
+ * @param {*} fn
+ * @param {*} step
+ * @param {*} timeout
+ * @param {*} target
+ * @returns
+ */
+export const stepShortcutRegister = (
+  targetKeys = [],
+  fn,
+  step = 3,
+  timeout = 500,
+  target = document
+) => {
+  let count = 0;
+  let pre = Date.now();
+  let timer;
+  return shortcutListener((curkeys, allkeys) => {
+    timer && clearTimeout(timer);
+    timer = setTimeout(() => {
+      clearTimeout(timer);
+      count = 0;
+    }, timeout);
+
+    if (targetKeys.length > 0 && curkeys.length === 0) {
+      const now = Date.now();
+      if (
+        (count === 0 || now - pre < timeout) &&
+        isSameSet(new Set(targetKeys), new Set(allkeys))
+      ) {
+        count++;
+        if (count === step) {
+          count = 0;
+          fn();
+        }
+      } else {
+        count = 0;
+      }
+      pre = now;
+    }
+  }, target);
+};

src/libs/subRules.js

@@ -4,11 +4,21 @@ import {
   updateSync,
   setSubRules,
   getSubRules,
-  updateSetting,
 } from "./storage";
 import { apiFetch } from "../apis";
 import { checkRules } from "./rules";
 import { isAllchar } from "./utils";
+import { syncWebfix } from "./webfix";
+
+/**
+ * 更新缓存同步时间
+ * @param {*} url
+ */
+const updateSyncDataCache = async (url) => {
+  const { dataCaches = {} } = await getSyncWithDefault();
+  dataCaches[url] = Date.now();
+  await updateSync({ dataCaches });
+};
 
 /**
  * 同步订阅规则
@@ -35,6 +45,7 @@ export const syncAllSubRules = async (subrulesList, isBg = false) => {
   for (let subrules of subrulesList) {
     try {
       await syncSubRules(subrules.url, isBg);
+      await updateSyncDataCache(subrules.url);
     } catch (err) {
       console.log(`[sync subrule error]: ${subrules.url}`, err);
     }
@@ -52,13 +63,13 @@ export const trySyncAllSubRules = async ({ subrulesList }, isBg = false) => {
     const now = Date.now();
     const interval = 24 * 60 * 60 * 1000; // 间隔一天
     if (now - subRulesSyncAt > interval) {
+      // 同步订阅规则
       await syncAllSubRules(subrulesList, isBg);
       await updateSync({ subRulesSyncAt: now });
+
+      // 同步修复规则
+      await syncWebfix(process.env.REACT_APP_WEBFIXURL);
     }
-    subrulesList.forEach((item) => {
-      item.syncAt = now;
-    });
-    await updateSetting({ subrulesList });
   } catch (err) {
     console.log("[try sync all subrules]", err);
   }
@@ -70,9 +81,10 @@ export const trySyncAllSubRules = async ({ subrulesList }, isBg = false) => {
  * @returns
  */
 export const loadOrFetchSubRules = async (url) => {
-  const rules = await getSubRules(url);
-  if (rules?.length) {
-    return rules;
+  let rules = await getSubRules(url);
+  if (!rules || rules.length === 0) {
+    rules = await syncSubRules(url);
+    await updateSyncDataCache(url);
   }
-  return syncSubRules(url);
+  return rules || [];
 };

src/libs/svg.js

@@ -0,0 +1,34 @@
+export const loadingSvg = `
+<svg viewBox="0 0 100 100" style="display:inline-block; width:100%; height: 100%;">
+    <circle fill="#209CEE" stroke="none" cx="6" cy="50" r="6">
+    <animateTransform
+        attributeName="transform"
+        dur="1s"
+        type="translate"
+        values="0 15 ; 0 -15; 0 15"
+        repeatCount="indefinite"
+        begin="0.1"
+    />
+    </circle>
+    <circle fill="#209CEE" stroke="none" cx="30" cy="50" r="6">
+    <animateTransform
+        attributeName="transform"
+        dur="1s"
+        type="translate"
+        values="0 10 ; 0 -10; 0 10"
+        repeatCount="indefinite"
+        begin="0.2"
+    />
+    </circle>
+    <circle fill="#209CEE" stroke="none" cx="54" cy="50" r="6">
+    <animateTransform
+        attributeName="transform"
+        dur="1s"
+        type="translate"
+        values="0 5 ; 0 -5; 0 5"
+        repeatCount="indefinite"
+        begin="0.3"
+    />
+    </circle>
+</svg>
+`;

src/libs/sync.js

@@ -19,12 +19,21 @@ import { sha256 } from "./utils";
  * 同步设置
  * @returns
  */
-const syncSetting = async (isBg = false) => {
-  const { syncUrl, syncKey, settingUpdateAt } = await getSyncWithDefault();
+const syncSetting = async (isBg = false, isForce = false) => {
+  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,26 +41,25 @@ const syncSetting = async (isBg = false) => {
     {
       key: KV_SETTING_KEY,
       value: setting,
-      updateAt: settingUpdateAt,
+      updateAt: settingSyncAt === 0 ? 0 : settingUpdateAt,
     },
     isBg
   );
 
-  if (res && res.updateAt > settingUpdateAt) {
-    await updateSync({
-      settingUpdateAt: res.updateAt,
-      settingSyncAt: res.updateAt,
-    });
+  if (res.updateAt > settingUpdateAt) {
     await setSetting(res.value);
-    return res.value;
-  } else {
-    await updateSync({ settingSyncAt: res.updateAt });
   }
+  await updateSync({
+    settingUpdateAt: res.updateAt,
+    settingSyncAt: Date.now(),
+  });
+
+  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);
   }
@@ -61,12 +69,21 @@ export const trySyncSetting = async (isBg = false) => {
  * 同步规则
  * @returns
  */
-const syncRules = async (isBg = false) => {
-  const { syncUrl, syncKey, rulesUpdateAt } = await getSyncWithDefault();
+const syncRules = async (isBg = false, isForce = false) => {
+  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,
@@ -74,26 +91,25 @@ const syncRules = async (isBg = false) => {
     {
       key: KV_RULES_KEY,
       value: rules,
-      updateAt: rulesUpdateAt,
+      updateAt: rulesSyncAt === 0 ? 0 : rulesUpdateAt,
     },
     isBg
   );
 
-  if (res && res.updateAt > rulesUpdateAt) {
-    await updateSync({
-      rulesUpdateAt: res.updateAt,
-      rulesSyncAt: res.updateAt,
-    });
+  if (res.updateAt > rulesUpdateAt) {
     await setRules(res.value);
-    return res.value;
-  } else {
-    await updateSync({ rulesSyncAt: res.updateAt });
   }
+  await updateSync({
+    rulesUpdateAt: res.updateAt,
+    rulesSyncAt: Date.now(),
+  });
+
+  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/translator.js

@@ -9,16 +9,101 @@ import {
   SHADOW_KEY,
   OPT_MOUSEKEY_DISABLE,
   OPT_MOUSEKEY_MOUSEOVER,
+  DEFAULT_INPUT_RULE,
+  DEFAULT_TRANS_APIS,
+  DEFAULT_INPUT_SHORTCUT,
+  OPT_LANGS_LIST,
 } from "../config";
 import Content from "../views/Content";
 import { updateFetchPool, clearFetchPool } from "./fetch";
-import { debounce, genEventName } from "./utils";
+import {
+  debounce,
+  genEventName,
+  removeEndchar,
+  matchInputStr,
+  sleep,
+} from "./utils";
+import { stepShortcutRegister } from "./shortcut";
+import { apiTranslate } from "../apis";
+import { tryDetectLang } from ".";
+import { loadingSvg } from "./svg";
+
+function isInputNode(node) {
+  return node.nodeName === "INPUT" || node.nodeName === "TEXTAREA";
+}
+
+function isEditAbleNode(node) {
+  return node.hasAttribute("contenteditable");
+}
+
+function selectContent(node) {
+  node.focus();
+  const range = document.createRange();
+  range.selectNodeContents(node);
+
+  const selection = window.getSelection();
+  selection.removeAllRanges();
+  selection.addRange(range);
+}
+
+function pasteContentEvent(node, text) {
+  node.focus();
+  const data = new DataTransfer();
+  data.setData("text/plain", text);
+
+  const event = new ClipboardEvent("paste", { clipboardData: data });
+  document.dispatchEvent(event);
+  data.clearData();
+}
+
+function pasteContentCommand(node, text) {
+  node.focus();
+  document.execCommand("insertText", false, text);
+}
+
+function collapseToEnd(node) {
+  node.focus();
+  const selection = window.getSelection();
+  selection.collapseToEnd();
+}
+
+function getNodeText(node) {
+  if (isInputNode(node)) {
+    return node.value;
+  }
+  return node.innerText || node.textContent || "";
+}
+
+function addLoading(node, loadingId) {
+  const div = document.createElement("div");
+  div.id = loadingId;
+  div.innerHTML = loadingSvg;
+  div.style.cssText = `
+      width: ${node.offsetWidth}px;
+      height: ${node.offsetHeight}px;
+      line-height: ${node.offsetHeight}px;
+      position: absolute;
+      text-align: center;
+      left: ${node.offsetLeft}px;
+      top: ${node.offsetTop}px;
+      z-index: 2147483647;
+    `;
+  node.offsetParent?.appendChild(div);
+}
+
+function removeLoading(loadingId) {
+  const div = document.getElementById(loadingId);
+  if (div) {
+    div.remove();
+  }
+}
 
 /**
  * 翻译类
  */
 export class Translator {
   _rule = {};
+  _inputRule = {};
   _setting = {};
   _rootNodes = new Set();
   _tranNodes = new Map();
@@ -101,6 +186,11 @@ export class Translator {
     if (rule.transOpen === "true") {
       this._register();
     }
+
+    this._inputRule = setting.inputRule || DEFAULT_INPUT_RULE;
+    if (this._inputRule.transOpen) {
+      this._registerInput();
+    }
   }
 
   get setting() {
@@ -243,6 +333,116 @@ export class Translator {
     });
   };
 
+  _registerInput = () => {
+    const {
+      triggerShortcut: initTriggerShortcut,
+      translator,
+      fromLang,
+      toLang: initToLang,
+      triggerCount: initTriggerCount,
+      triggerTime,
+      transSign,
+    } = this._inputRule;
+    const apiSetting = (this._setting.transApis || DEFAULT_TRANS_APIS)[
+      translator
+    ];
+
+    let triggerShortcut = initTriggerShortcut;
+    let triggerCount = initTriggerCount;
+    if (triggerShortcut.length === 0) {
+      triggerShortcut = DEFAULT_INPUT_SHORTCUT;
+      triggerCount = 1;
+    }
+
+    stepShortcutRegister(
+      triggerShortcut,
+      async () => {
+        const node = document.activeElement;
+        if (!node || !(isInputNode(node) || isEditAbleNode(node))) {
+          return;
+        }
+
+        let initText = getNodeText(node);
+        if (triggerShortcut.length === 1 && triggerShortcut[0].length === 1) {
+          // todo: remove multiple char
+          initText = removeEndchar(initText, triggerShortcut[0], triggerCount);
+        }
+        if (!initText.trim()) {
+          return;
+        }
+
+        let text = initText;
+        let toLang = initToLang;
+        if (transSign) {
+          const res = matchInputStr(text, transSign);
+          if (res) {
+            let lang = res[1];
+            if (lang === "zh" || lang === "cn") {
+              lang = "zh-CN";
+            } else if (lang === "tw" || lang === "hk") {
+              lang = "zh-TW";
+            }
+            if (lang && OPT_LANGS_LIST.includes(lang)) {
+              toLang = lang;
+            }
+            text = res[2];
+          }
+        }
+
+        // console.log("input -->", text);
+
+        const loadingId = "kiss-" + genEventName();
+        try {
+          addLoading(node, loadingId);
+
+          const deLang = await tryDetectLang(text);
+          if (deLang && toLang.includes(deLang)) {
+            return;
+          }
+
+          const [trText, isSame] = await apiTranslate({
+            translator,
+            text,
+            fromLang,
+            toLang,
+            apiSetting,
+          });
+          if (!trText || isSame) {
+            return;
+          }
+
+          if (isInputNode(node)) {
+            node.value = trText;
+            node.dispatchEvent(
+              new Event("input", { bubbles: true, cancelable: true })
+            );
+            return;
+          }
+
+          selectContent(node);
+          await sleep(200);
+
+          pasteContentEvent(node, trText);
+          await sleep(200);
+
+          // todo: use includes?
+          if (getNodeText(node).startsWith(initText)) {
+            pasteContentCommand(node, trText);
+            await sleep(100);
+          } else {
+            collapseToEnd(node);
+          }
+        } catch (err) {
+          console.log("[translate input]", err.message);
+        } finally {
+          removeLoading(loadingId);
+        }
+      },
+      triggerCount,
+      triggerTime
+    );
+  };
+
   _handleMouseover = (e) => {
     const key = this._setting.mouseKey.slice(3);
     if (this._setting.mouseKey === OPT_MOUSEKEY_MOUSEOVER || e[key]) {

src/libs/utils.js

@@ -179,3 +179,47 @@ export const isSameSet = (a, b) => {
   const s = new Set([...a, ...b]);
   return s.size === a.size && s.size === b.size;
 };
+
+/**
+ * 去掉字符串末尾某个字符
+ * @param {*} s
+ * @param {*} c
+ * @param {*} count
+ * @returns
+ */
+export const removeEndchar = (s, c, count = 1) => {
+  let i = s.length;
+  while (i > s.length - count && s[i - 1] === c) {
+    i--;
+  }
+  return s.slice(0, i);
+};
+
+/**
+ * 匹配字符串及语言标识
+ * @param {*} str
+ * @param {*} sign
+ * @returns
+ */
+export const matchInputStr = (str, sign) => {
+  let reg = /\/([\w-]+)\s+([^]+)/;
+  switch (sign) {
+    case "//":
+      reg = /\/\/([\w-]+)\s+([^]+)/;
+      break;
+    case "\\":
+      reg = /\\([\w-]+)\s+([^]+)/;
+      break;
+    case "\\\\":
+      reg = /\\\\([\w-]+)\s+([^]+)/;
+      break;
+    case ">":
+      reg = />([\w-]+)\s+([^]+)/;
+      break;
+    case ">>":
+      reg = />>([\w-]+)\s+([^]+)/;
+      break;
+    default:
+  }
+  return str.match(reg);
+};

src/libs/webfix.js

@@ -5,27 +5,34 @@ import { apiFetch } from "../apis";
 /**
  * 修复程序类型
  */
-const WEBFIX_BR = "br";
+const FIXER_BR = "br";
+const FIXER_FONTSIZE = "fontSize";
 
 /**
  * 需要修复的站点列表
  * - pattern 匹配网址
  * - selector 需要修复的选择器
- * - rootSlector 需要监听的选择器，可留空
+ * - rootSelector 需要监听的选择器，可留空
  * - fixer 修复函数，可针对不同网址，选用不同修复函数
  */
 const DEFAULT_SITES = [
   {
     pattern: "www.phoronix.com",
     selector: ".content",
-    rootSlector: "",
-    fixer: WEBFIX_BR,
+    rootSelector: "",
+    fixer: FIXER_BR,
   },
   {
-    pattern: "t.me/s/*",
+    pattern: "t.me/s/",
     selector: ".tgme_widget_message_text",
-    rootSlector: ".tgme_channel_history",
-    fixer: WEBFIX_BR,
+    rootSelector: ".tgme_channel_history",
+    fixer: FIXER_BR,
+  },
+  {
+    pattern: "baidu.com",
+    selector: "html",
+    rootSelector: "",
+    fixer: FIXER_FONTSIZE,
   },
 ];
 
@@ -87,20 +94,29 @@ 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,
 };
 
 /**
  * 查找、监听节点，并执行修复函数
  * @param {*} selector
  * @param {*} fixer
- * @param {*} rootSlector
+ * @param {*} rootSelector
  */
-function run(selector, fixer, rootSlector) {
+function run(selector, fixer, rootSelector) {
   var mutaObserver = new MutationObserver(function (mutations) {
     mutations.forEach(function (mutation) {
       mutation.addedNodes.forEach(function (addNode) {
@@ -110,8 +126,8 @@ function run(selector, fixer, rootSlector) {
   });
 
   var rootNodes = [document];
-  if (rootSlector) {
-    rootNodes = document.querySelectorAll(rootSlector);
+  if (rootSelector) {
+    rootNodes = document.querySelectorAll(rootSelector);
   }
 
   rootNodes.forEach(function (rootNode) {
@@ -165,7 +181,7 @@ export async function webfix(href, { injectWebfix }) {
       var site = sites[i];
       if (isMatch(href, site.pattern)) {
         if (fixerMap[site.fixer]) {
-          run(site.selector, fixerMap[site.fixer], site.rootSlector);
+          run(site.selector, fixerMap[site.fixer], site.rootSelector);
         }
         break;
       }

src/views/Action/Draggable.js

@@ -1,65 +1,51 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { limitNumber } from "../../libs/utils";
 import { isMobile } from "../../libs/mobile";
 import { setFab } from "../../libs/storage";
+import { debounce } from "../../libs/utils";
+import Paper from "@mui/material/Paper";
 
-const getEdgePosition = (
-  { x: left, y: top, edge },
+const getEdgePosition = ({
+  x: left,
+  y: top,
+  width,
+  height,
   windowWidth,
   windowHeight,
-  width,
-  height
-) => {
+  hover,
+}) => {
   const right = windowWidth - left - width;
   const bottom = windowHeight - top - height;
   const min = Math.min(left, top, right, bottom);
   switch (min) {
     case right:
-      edge = "right";
-      left = windowWidth - width;
+      left = hover ? windowWidth - width : windowWidth - width / 2;
       break;
     case left:
-      edge = "left";
-      left = 0;
+      left = hover ? 0 : -width / 2;
       break;
     case bottom:
-      edge = "bottom";
-      top = windowHeight - height;
+      top = hover ? windowHeight - height : windowHeight - height / 2;
       break;
     default:
-      edge = "top";
-      top = 0;
+      top = hover ? 0 : -height / 2;
   }
-  left = limitNumber(left, 0, windowWidth - width);
-  top = limitNumber(top, 0, windowHeight - height);
-  return { x: left, y: top, edge, hide: false };
+  return { x: left, y: top };
 };
 
-const getHidePosition = (
-  { x: left, y: top, edge },
-  windowWidth,
-  windowHeight,
-  width,
-  height
-) => {
-  switch (edge) {
-    case "right":
-      left = windowWidth - width / 2;
-      break;
-    case "left":
-      left = -width / 2;
-      break;
-    case "bottom":
-      top = windowHeight - height / 2;
-      break;
-    default:
-      top = -height / 2;
+function DraggableWrapper({ children, usePaper, ...props }) {
+  if (usePaper) {
+    return (
+      <Paper {...props} elevation={4}>
+        {children}
+      </Paper>
+    );
   }
-  return { x: left, y: top, edge, hide: true };
-};
+  return <div {...props}>{children}</div>;
+}
 
 export default function Draggable({
-  windowSize,
+  windowSize: { w: windowWidth, h: windowHeight },
   width,
   height,
   left,
@@ -70,66 +56,38 @@ export default function Draggable({
   onMove,
   handler,
   children,
+  usePaper,
 }) {
-  const [origin, setOrigin] = useState({
-    x: left,
-    y: top,
-    px: left,
-    py: top,
-  });
-  const [position, setPosition] = useState({
-    x: left,
-    y: top,
-    edge: null,
-    hide: false,
-  });
-  const [edgeTimer, setEdgeTimer] = useState(null);
-
-  const goEdge = useCallback((w, h, width, height) => {
-    setPosition((pre) => getEdgePosition(pre, w, h, width, height));
-
-    setEdgeTimer(
-      setTimeout(() => {
-        setPosition((pre) => getHidePosition(pre, w, h, width, height));
-      }, 1500)
-    );
-  }, []);
+  const [hover, setHover] = useState(false);
+  const [origin, setOrigin] = useState(null);
+  const [position, setPosition] = useState({ x: left, y: top });
+  const setFabPosition = useMemo(() => debounce(setFab, 500), []);
 
   const handlePointerDown = (e) => {
     !isMobile && e.target.setPointerCapture(e.pointerId);
     onStart && onStart();
-    edgeTimer && clearTimeout(edgeTimer);
+    const { x, y } = position;
     const { clientX, clientY } = isMobile ? e.targetTouches[0] : e;
-    setOrigin({
-      x: position.x,
-      y: position.y,
-      px: clientX,
-      py: clientY,
-    });
+    setOrigin({ x, y, clientX, clientY });
   };
 
   const handlePointerMove = (e) => {
     onMove && onMove();
     const { clientX, clientY } = isMobile ? e.targetTouches[0] : e;
     if (origin) {
-      const dx = clientX - origin.px;
-      const dy = clientY - origin.py;
+      const dx = clientX - origin.clientX;
+      const dy = clientY - origin.clientY;
       let x = origin.x + dx;
       let y = origin.y + dy;
-      const { w, h } = windowSize;
-      x = limitNumber(x, 0, w - width);
-      y = limitNumber(y, 0, h - height);
-      setPosition({ x, y, edge: null, hide: false });
+      x = limitNumber(x, -width / 2, windowWidth - width / 2);
+      y = limitNumber(y, 0, windowHeight - height / 2);
+      setPosition({ x, y });
     }
   };
 
   const handlePointerUp = (e) => {
     e.stopPropagation();
     setOrigin(null);
-    if (!snapEdge) {
-      return;
-    }
-    goEdge(windowSize.w, windowSize.h, width, height);
   };
 
   const handleClick = (e) => {
@@ -138,35 +96,48 @@ export default function Draggable({
 
   const handleMouseEnter = (e) => {
     e.stopPropagation();
-    if (snapEdge && position.hide) {
-      edgeTimer && clearTimeout(edgeTimer);
-      goEdge(windowSize.w, windowSize.h, width, height);
-    }
+    setHover(true);
+  };
+
+  const handleMouseLeave = (e) => {
+    e.stopPropagation();
+    setHover(false);
   };
 
   useEffect(() => {
-    setOrigin(null);
-    if (!snapEdge) {
+    if (!snapEdge || !!origin) {
       return;
     }
-    goEdge(windowSize.w, windowSize.h, width, height);
-  }, [snapEdge, goEdge, windowSize.w, windowSize.h, width, height]);
 
-  useEffect(() => {
-    if (position.hide) {
-      setFab({
-        x: position.x,
-        y: position.y,
+    setPosition((pre) => {
+      const edgePosition = getEdgePosition({
+        ...pre,
+        width,
+        height,
+        windowWidth,
+        windowHeight,
+        hover,
       });
-    }
-  }, [position.x, position.y, position.hide]);
+      setFabPosition(edgePosition);
+      return edgePosition;
+    });
+  }, [
+    origin,
+    hover,
+    width,
+    height,
+    windowWidth,
+    windowHeight,
+    snapEdge,
+    setFabPosition,
+  ]);
 
   const opacity = useMemo(() => {
     if (snapEdge) {
-      return position.hide ? 0.2 : 1;
+      return hover || origin ? 1 : 0.2;
     }
     return origin ? 0.8 : 1;
-  }, [origin, snapEdge, position.hide]);
+  }, [origin, snapEdge, hover]);
 
   const touchProps = isMobile
     ? {
@@ -181,7 +152,8 @@ export default function Draggable({
       };
 
   return (
-    <div
+    <DraggableWrapper
+      usePaper={usePaper}
       style={{
         opacity,
         position: "fixed",
@@ -191,6 +163,7 @@ export default function Draggable({
         display: show ? "block" : "none",
       }}
       onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
       onClick={handleClick}
     >
       <div
@@ -202,6 +175,6 @@ export default function Draggable({
         {handler}
       </div>
       <div>{children}</div>
-    </div>
+    </DraggableWrapper>
   );
 }

src/views/Action/index.js

@@ -1,4 +1,3 @@
-import Paper from "@mui/material/Paper";
 import Fab from "@mui/material/Fab";
 import TranslateIcon from "@mui/icons-material/Translate";
 import ThemeProvider from "../../hooks/Theme";
@@ -9,11 +8,14 @@ import Popup from "../Popup";
 import { debounce } from "../../libs/utils";
 import { isGm } from "../../libs/client";
 import Header from "../Popup/Header";
+import Box from "@mui/material/Box";
+import Divider from "@mui/material/Divider";
 import {
   DEFAULT_SHORTCUTS,
   OPT_SHORTCUT_TRANSLATE,
   OPT_SHORTCUT_STYLE,
   OPT_SHORTCUT_POPUP,
+  OPT_SHORTCUT_SETTING,
 } from "../../config";
 import { shortcutRegister } from "../../libs/shortcut";
 
@@ -64,6 +66,9 @@ export default function Action({ translator, fab }) {
       shortcutRegister(shortcuts[OPT_SHORTCUT_POPUP], () => {
         setShowPopup((pre) => !pre);
       }),
+      shortcutRegister(shortcuts[OPT_SHORTCUT_SETTING], () => {
+        window.open(process.env.REACT_APP_OPTIONSPAGE, "_blank");
+      }),
     ];
 
     return () => {
@@ -74,51 +79,54 @@ export default function Action({ translator, fab }) {
   }, [translator]);
 
   useEffect(() => {
-    // 注册菜单
-    const menuCommandIds = [];
-    if (isGm) {
-      try {
-        menuCommandIds.push(
-          GM.registerMenuCommand(
-            "Toggle Translate",
-            (event) => {
-              translator.toggle();
-              setShowPopup(false);
-            },
-            "Q"
-          ),
-          GM.registerMenuCommand(
-            "Toggle Style",
-            (event) => {
-              translator.toggleStyle();
-              setShowPopup(false);
-            },
-            "C"
-          ),
-          GM.registerMenuCommand(
-            "Open Menu",
-            (event) => {
-              setShowPopup((pre) => !pre);
-            },
-            "K"
-          )
-        );
-      } catch (err) {
-        console.log("[registerMenuCommand]", err);
-      }
+    if (!isGm) {
+      return;
     }
 
-    return () => {
-      if (isGm) {
-        try {
-          menuCommandIds.forEach((id) => {
-            GM.unregisterMenuCommand(id);
-          });
-        } catch (err) {
-          //
-        }
-      }
-    };
+    // 注册菜单
+    try {
+      const menuCommandIds = [];
+      menuCommandIds.push(
+        GM.registerMenuCommand(
+          "Toggle Translate (Alt+q)",
+          (event) => {
+            translator.toggle();
+            setShowPopup(false);
+          },
+          "Q"
+        ),
+        GM.registerMenuCommand(
+          "Toggle Style (Alt+c)",
+          (event) => {
+            translator.toggleStyle();
+            setShowPopup(false);
+          },
+          "C"
+        ),
+        GM.registerMenuCommand(
+          "Open Menu (Alt+k)",
+          (event) => {
+            setShowPopup((pre) => !pre);
+          },
+          "K"
+        ),
+        GM.registerMenuCommand(
+          "Open Setting (Alt+o)",
+          (event) => {
+            window.open(process.env.REACT_APP_OPTIONSPAGE, "_blank");
+          },
+          "O"
+        )
+      );
+
+      return () => {
+        menuCommandIds.forEach((id) => {
+          GM.unregisterMenuCommand(id);
+        });
+      };
+    } catch (err) {
+      console.log("[registerMenuCommand]", err);
+    }
   }, [translator]);
 
   useEffect(() => {
@@ -154,7 +162,7 @@ export default function Action({ translator, fab }) {
     windowSize,
     width: fabWidth,
     height: fabWidth,
-    left: fab.x ?? 0,
+    left: fab.x ?? -fabWidth,
     top: fab.y ?? windowSize.h / 2,
   };
 
@@ -167,23 +175,23 @@ export default function Action({ translator, fab }) {
           show={showPopup}
           onStart={handleStart}
           onMove={handleMove}
+          usePaper
           handler={
-            <Paper style={{ cursor: "move" }} elevation={3}>
+            <Box style={{ cursor: "move" }}>
               <Header setShowPopup={setShowPopup} />
-            </Paper>
+              <Divider />
+            </Box>
           }
         >
-          <Paper>
-            {showPopup && (
-              <Popup setShowPopup={setShowPopup} translator={translator} />
-            )}
-          </Paper>
+          {showPopup && (
+            <Popup setShowPopup={setShowPopup} translator={translator} />
+          )}
         </Draggable>
         <Draggable
           key="fab"
           snapEdge
           {...fabProps}
-          show={!showPopup}
+          show={translator.setting.hideFab ? false : !showPopup}
           onStart={handleStart}
           onMove={handleMove}
           handler={

src/views/Content/LoadingIcon.js

@@ -1,44 +1,14 @@
-import { DEFAULT_COLOR } from "../../config";
+import { loadingSvg } from "../../libs/svg";
 
 export default function LoadingIcon() {
   return (
-    <svg
-      viewBox="0 0 100 100"
+    <div
       style={{
-        maxWidth: "1.2em",
-        maxHeight: "1.2em",
+        display: "inline-block",
+        width: "1.2em",
+        height: "1em",
       }}
-    >
-      <circle fill={DEFAULT_COLOR} stroke="none" cx="6" cy="50" r="6">
-        <animateTransform
-          attributeName="transform"
-          dur="1s"
-          type="translate"
-          values="0 15 ; 0 -15; 0 15"
-          repeatCount="indefinite"
-          begin="0.1"
-        />
-      </circle>
-      <circle fill={DEFAULT_COLOR} stroke="none" cx="30" cy="50" r="6">
-        <animateTransform
-          attributeName="transform"
-          dur="1s"
-          type="translate"
-          values="0 10 ; 0 -10; 0 10"
-          repeatCount="indefinite"
-          begin="0.2"
-        />
-      </circle>
-      <circle fill={DEFAULT_COLOR} stroke="none" cx="54" cy="50" r="6">
-        <animateTransform
-          attributeName="transform"
-          dur="1s"
-          type="translate"
-          values="0 5 ; 0 -5; 0 5"
-          repeatCount="indefinite"
-          begin="0.3"
-        />
-      </circle>
-    </svg>
+      dangerouslySetInnerHTML={{ __html: loadingSvg }}
+    />
   );
 }

src/views/Options/InputSetting.js

@@ -0,0 +1,178 @@
+import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+import TextField from "@mui/material/TextField";
+import MenuItem from "@mui/material/MenuItem";
+import { useI18n } from "../../hooks/I18n";
+import {
+  OPT_TRANS_ALL,
+  OPT_LANGS_FROM,
+  OPT_LANGS_TO,
+  OPT_INPUT_TRANS_SIGNS,
+} from "../../config";
+import ShortcutInput from "./ShortcutInput";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Switch from "@mui/material/Switch";
+import { useInputRule } from "../../hooks/InputRule";
+import { useCallback } from "react";
+import Grid from "@mui/material/Grid";
+import { limitNumber } from "../../libs/utils";
+
+export default function InputSetting() {
+  const i18n = useI18n();
+  const { inputRule, updateInputRule } = useInputRule();
+
+  const handleChange = (e) => {
+    e.preventDefault();
+    let { name, value } = e.target;
+    switch (name) {
+      case "triggerTime":
+        value = limitNumber(value, 10, 1000);
+        break;
+      default:
+    }
+    updateInputRule({
+      [name]: value,
+    });
+  };
+
+  const handleShortcutInput = useCallback(
+    (val) => {
+      updateInputRule({ triggerShortcut: val });
+    },
+    [updateInputRule]
+  );
+
+  const {
+    transOpen,
+    translator,
+    fromLang,
+    toLang,
+    triggerShortcut,
+    triggerCount,
+    triggerTime,
+    transSign,
+  } = inputRule;
+
+  return (
+    <Box>
+      <Stack spacing={3}>
+        <FormControlLabel
+          control={
+            <Switch
+              size="small"
+              name="transOpen"
+              checked={transOpen}
+              onChange={() => {
+                updateInputRule({ transOpen: !transOpen });
+              }}
+            />
+          }
+          label={i18n("input_box_translation")}
+        />
+
+        <TextField
+          select
+          size="small"
+          name="translator"
+          value={translator}
+          label={i18n("translate_service")}
+          onChange={handleChange}
+        >
+          {OPT_TRANS_ALL.map((item) => (
+            <MenuItem key={item} value={item}>
+              {item}
+            </MenuItem>
+          ))}
+        </TextField>
+
+        <TextField
+          select
+          size="small"
+          name="fromLang"
+          value={fromLang}
+          label={i18n("from_lang")}
+          onChange={handleChange}
+        >
+          {OPT_LANGS_FROM.map(([lang, name]) => (
+            <MenuItem key={lang} value={lang}>
+              {name}
+            </MenuItem>
+          ))}
+        </TextField>
+
+        <TextField
+          select
+          size="small"
+          name="toLang"
+          value={toLang}
+          label={i18n("to_lang")}
+          onChange={handleChange}
+        >
+          {OPT_LANGS_TO.map(([lang, name]) => (
+            <MenuItem key={lang} value={lang}>
+              {name}
+            </MenuItem>
+          ))}
+        </TextField>
+
+        <TextField
+          select
+          size="small"
+          name="transSign"
+          value={transSign}
+          label={i18n("input_trans_start_sign")}
+          onChange={handleChange}
+          helperText={i18n("input_trans_start_sign_help")}
+        >
+          <MenuItem value={""}>{i18n("style_none")}</MenuItem>
+          {OPT_INPUT_TRANS_SIGNS.map((item) => (
+            <MenuItem key={item} value={item}>
+              {item}
+            </MenuItem>
+          ))}
+        </TextField>
+
+        <Box>
+          <Grid container spacing={2} columns={12}>
+            <Grid item xs={12} sm={12} md={4} lg={4}>
+              <ShortcutInput
+                value={triggerShortcut}
+                onChange={handleShortcutInput}
+                label={i18n("trigger_trans_shortcut")}
+                helperText={i18n("trigger_trans_shortcut_help")}
+              />
+            </Grid>
+            <Grid item xs={12} sm={12} md={4} lg={4}>
+              <TextField
+                select
+                fullWidth
+                size="small"
+                name="triggerCount"
+                value={triggerCount}
+                label={i18n("shortcut_press_count")}
+                onChange={handleChange}
+              >
+                {[1, 2, 3, 4, 5].map((val) => (
+                  <MenuItem key={val} value={val}>
+                    {val}
+                  </MenuItem>
+                ))}
+              </TextField>
+            </Grid>
+            <Grid item xs={12} sm={12} md={4} lg={4}>
+              <TextField
+                fullWidth
+                size="small"
+                label={i18n("combo_timeout")}
+                type="number"
+                name="triggerTime"
+                defaultValue={triggerTime}
+                onChange={handleChange}
+              />
+            </Grid>
+          </Grid>
+        </Box>
+      </Stack>
+    </Box>
+  );
+}

src/views/Options/Navigator.js

@@ -12,6 +12,7 @@ import { useI18n } from "../../hooks/I18n";
 import SyncIcon from "@mui/icons-material/Sync";
 import ApiIcon from "@mui/icons-material/Api";
 import SendTimeExtensionIcon from "@mui/icons-material/SendTimeExtension";
+import InputIcon from "@mui/icons-material/Input";
 
 function LinkItem({ label, url, icon }) {
   const match = useMatch(url);
@@ -38,6 +39,12 @@ export default function Navigator(props) {
       url: "/rules",
       icon: <DesignServicesIcon />,
     },
+    {
+      id: "input_setting",
+      label: i18n("input_setting"),
+      url: "/input",
+      icon: <InputIcon />,
+    },
     {
       id: "apis_setting",
       label: i18n("apis_setting"),

src/views/Options/Rules.js

@@ -48,6 +48,7 @@ import { delSubRules, getSyncWithDefault } from "../../libs/storage";
 import OwSubRule from "./OwSubRule";
 import ClearAllIcon from "@mui/icons-material/ClearAll";
 import HelpButton from "./HelpButton";
+import { useSyncCaches } from "../../hooks/Sync";
 
 function RuleFields({ rule, rules, setShow, setKeyword }) {
   const initFormValues = rule || {
@@ -362,6 +363,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
 }
 
 function RuleAccordion({ rule, rules }) {
+  const i18n = useI18n();
   const [expanded, setExpanded] = useState(false);
 
   const handleChange = (e) => {
@@ -376,7 +378,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>
@@ -621,8 +625,9 @@ function SubRulesItem({
   syncAt,
   selectedUrl,
   delSub,
-  updateSub,
   setSelectedRules,
+  updateDataCache,
+  deleteDataCache,
 }) {
   const [loading, setLoading] = useState(false);
 
@@ -630,6 +635,7 @@ function SubRulesItem({
     try {
       await delSub(url);
       await delSubRules(url);
+      await deleteDataCache(url);
     } catch (err) {
       console.log("[del subrules]", err);
     }
@@ -642,7 +648,7 @@ function SubRulesItem({
       if (rules.length > 0 && url === selectedUrl) {
         setSelectedRules(rules);
       }
-      await updateSub(url, { syncAt: Date.now() });
+      await updateDataCache(url);
     } catch (err) {
       console.log("[sync sub rules]", err);
     } finally {
@@ -655,7 +661,7 @@ function SubRulesItem({
       <FormControlLabel value={url} control={<Radio />} label={url} />
 
       {syncAt && (
-        <span style={{ marginLeft: "0.5em", opacity: 0.6 }}>
+        <span style={{ marginLeft: "0.5em", opacity: 0.5 }}>
           [{new Date(syncAt).toLocaleString()}]
         </span>
       )}
@@ -677,7 +683,7 @@ function SubRulesItem({
   );
 }
 
-function SubRulesEdit({ subList, addSub }) {
+function SubRulesEdit({ subList, addSub, updateDataCache }) {
   const i18n = useI18n();
   const [inputText, setInputText] = useState("");
   const [inputError, setInputError] = useState("");
@@ -712,6 +718,7 @@ function SubRulesEdit({ subList, addSub }) {
         throw new Error("empty rules");
       }
       await addSub(url);
+      await updateDataCache(url);
       setShowInput(false);
       setInputText("");
     } catch (err) {
@@ -784,7 +791,6 @@ function SubRules({ subRules }) {
   const {
     subList,
     selectSub,
-    updateSub,
     addSub,
     delSub,
     selectedUrl,
@@ -792,27 +798,38 @@ function SubRules({ subRules }) {
     setSelectedRules,
     loading,
   } = subRules;
+  const { dataCaches, updateDataCache, deleteDataCache, reloadSync } =
+    useSyncCaches();
 
   const handleSelect = (e) => {
     const url = e.target.value;
     selectSub(url);
   };
 
+  useEffect(() => {
+    reloadSync();
+  }, [selectedRules, reloadSync]);
+
   return (
     <Stack spacing={3}>
-      <SubRulesEdit subList={subList} addSub={addSub} />
+      <SubRulesEdit
+        subList={subList}
+        addSub={addSub}
+        updateDataCache={updateDataCache}
+      />
 
       <RadioGroup value={selectedUrl} onChange={handleSelect}>
         {subList.map((item, index) => (
           <SubRulesItem
             key={item.url}
             url={item.url}
-            syncAt={item.syncAt}
+            syncAt={dataCaches[item.url]}
             index={index}
             selectedUrl={selectedUrl}
             delSub={delSub}
-            updateSub={updateSub}
             setSelectedRules={setSelectedRules}
+            updateDataCache={updateDataCache}
+            deleteDataCache={deleteDataCache}
           />
         ))}
       </RadioGroup>

src/views/Options/Setting.js

@@ -12,8 +12,6 @@ import { limitNumber } from "../../libs/utils";
 import { useI18n } from "../../hooks/I18n";
 import { useAlert } from "../../hooks/Alert";
 import { isExt } from "../../libs/client";
-import IconButton from "@mui/material/IconButton";
-import EditIcon from "@mui/icons-material/Edit";
 import Grid from "@mui/material/Grid";
 import {
   UI_LANGS,
@@ -24,61 +22,15 @@ import {
   OPT_SHORTCUT_TRANSLATE,
   OPT_SHORTCUT_STYLE,
   OPT_SHORTCUT_POPUP,
+  OPT_SHORTCUT_SETTING,
 } from "../../config";
-import { useEffect, useState, useRef } from "react";
 import { useShortcut } from "../../hooks/Shortcut";
-import { shortcutListener } from "../../libs/shortcut";
+import ShortcutInput from "./ShortcutInput";
 
 function ShortcutItem({ action, label }) {
   const { shortcut, setShortcut } = useShortcut(action);
-  const [disabled, setDisabled] = useState(true);
-  const inputRef = useRef(null);
-  const [formval, setFormval] = useState(shortcut);
-
-  useEffect(() => {
-    if (disabled) {
-      setFormval(shortcut);
-      return;
-    }
-
-    inputRef.current.focus();
-    setFormval([]);
-
-    const clearShortcut = shortcutListener((curkeys, allkeys) => {
-      setFormval(allkeys);
-      if (curkeys.length === 0) {
-        setDisabled(true);
-        setShortcut(allkeys);
-      }
-    }, inputRef.current);
-
-    return () => {
-      clearShortcut();
-    };
-  }, [disabled, setShortcut, shortcut]);
-
   return (
-    <Stack direction="row">
-      <TextField
-        size="small"
-        label={label}
-        name={label}
-        value={formval.join(" + ")}
-        fullWidth
-        inputRef={inputRef}
-        disabled={disabled}
-        onBlur={() => {
-          setDisabled(true);
-        }}
-      />
-      <IconButton
-        onClick={() => {
-          setDisabled(false);
-        }}
-      >
-        {<EditIcon />}
-      </IconButton>
-    </Stack>
+    <ShortcutInput value={shortcut} onChange={setShortcut} label={label} />
   );
 }
 
@@ -131,6 +83,7 @@ export default function Settings() {
     clearCache,
     newlineLength = TRANS_NEWLINE_LENGTH,
     mouseKey = OPT_MOUSEKEY_DISABLE,
+    hideFab = false,
   } = setting;
 
   return (
@@ -157,7 +110,7 @@ export default function Settings() {
           label={i18n("fetch_limit")}
           type="number"
           name="fetchLimit"
-          value={fetchLimit}
+          defaultValue={fetchLimit}
           onChange={handleChange}
         />
 
@@ -166,7 +119,7 @@ export default function Settings() {
           label={i18n("fetch_interval")}
           type="number"
           name="fetchInterval"
-          value={fetchInterval}
+          defaultValue={fetchInterval}
           onChange={handleChange}
         />
 
@@ -175,7 +128,7 @@ export default function Settings() {
           label={i18n("min_translate_length")}
           type="number"
           name="minLength"
-          value={minLength}
+          defaultValue={minLength}
           onChange={handleChange}
         />
 
@@ -184,7 +137,7 @@ export default function Settings() {
           label={i18n("max_translate_length")}
           type="number"
           name="maxLength"
-          value={maxLength}
+          defaultValue={maxLength}
           onChange={handleChange}
         />
 
@@ -193,7 +146,7 @@ export default function Settings() {
           label={i18n("num_of_newline_characters")}
           type="number"
           name="newlineLength"
-          value={newlineLength}
+          defaultValue={newlineLength}
           onChange={handleChange}
         />
 
@@ -232,26 +185,49 @@ export default function Settings() {
             </FormHelperText>
           </FormControl>
         ) : (
-          <Grid container rowSpacing={2} columns={12}>
-            <Grid item xs={12} sm={12} md={4} lg={4}>
-              <ShortcutItem
-                action={OPT_SHORTCUT_TRANSLATE}
-                label={i18n("toggle_translate_shortcut")}
-              />
-            </Grid>
-            <Grid item xs={12} sm={12} md={4} lg={4}>
-              <ShortcutItem
-                action={OPT_SHORTCUT_STYLE}
-                label={i18n("toggle_style_shortcut")}
-              />
-            </Grid>
-            <Grid item xs={12} sm={12} md={4} lg={4}>
-              <ShortcutItem
-                action={OPT_SHORTCUT_POPUP}
-                label={i18n("toggle_popup_shortcut")}
-              />
-            </Grid>
-          </Grid>
+          <>
+            <FormControl size="small">
+              <InputLabel>{i18n("hide_fab_button")}</InputLabel>
+              <Select
+                name="hideFab"
+                value={hideFab}
+                label={i18n("hide_fab_button")}
+                onChange={handleChange}
+              >
+                <MenuItem value={false}>{i18n("show")}</MenuItem>
+                <MenuItem value={true}>{i18n("hide")}</MenuItem>
+              </Select>
+            </FormControl>
+
+            <Box>
+              <Grid container spacing={2} columns={12}>
+                <Grid item xs={12} sm={12} md={3} lg={3}>
+                  <ShortcutItem
+                    action={OPT_SHORTCUT_TRANSLATE}
+                    label={i18n("toggle_translate_shortcut")}
+                  />
+                </Grid>
+                <Grid item xs={12} sm={12} md={3} lg={3}>
+                  <ShortcutItem
+                    action={OPT_SHORTCUT_STYLE}
+                    label={i18n("toggle_style_shortcut")}
+                  />
+                </Grid>
+                <Grid item xs={12} sm={12} md={3} lg={3}>
+                  <ShortcutItem
+                    action={OPT_SHORTCUT_POPUP}
+                    label={i18n("toggle_popup_shortcut")}
+                  />
+                </Grid>
+                <Grid item xs={12} sm={12} md={3} lg={3}>
+                  <ShortcutItem
+                    action={OPT_SHORTCUT_SETTING}
+                    label={i18n("open_setting_shortcut")}
+                  />
+                </Grid>
+              </Grid>
+            </Box>
+          </>
         )}
       </Stack>
     </Box>

src/views/Options/ShortcutInput.js

@@ -0,0 +1,56 @@
+import Stack from "@mui/material/Stack";
+import TextField from "@mui/material/TextField";
+import IconButton from "@mui/material/IconButton";
+import EditIcon from "@mui/icons-material/Edit";
+import { useEffect, useState, useRef } from "react";
+import { shortcutListener } from "../../libs/shortcut";
+
+export default function ShortcutInput({ value, onChange, label, helperText }) {
+  const [disabled, setDisabled] = useState(true);
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    if (disabled) {
+      return;
+    }
+
+    inputRef.current.focus();
+    onChange([]);
+
+    const clearShortcut = shortcutListener((curkeys, allkeys) => {
+      onChange(allkeys);
+      if (curkeys.length === 0) {
+        setDisabled(true);
+      }
+    }, inputRef.current);
+
+    return () => {
+      clearShortcut();
+    };
+  }, [disabled, onChange]);
+
+  return (
+    <Stack direction="row" alignItems="flex-start">
+      <TextField
+        size="small"
+        label={label}
+        name={label}
+        value={value.map((item) => (item === " " ? "Space" : item)).join(" + ")}
+        fullWidth
+        inputRef={inputRef}
+        disabled={disabled}
+        onBlur={() => {
+          setDisabled(true);
+        }}
+        helperText={helperText}
+      />
+      <IconButton
+        onClick={() => {
+          setDisabled(false);
+        }}
+      >
+        {<EditIcon />}
+      </IconButton>
+    </Stack>
+  );
+}

src/views/Options/SyncSetting.js

@@ -44,7 +44,7 @@ export default function SyncSetting() {
     }
   };
 
-  const { syncUrl, syncKey } = sync;
+  const { syncUrl = "", syncKey = "" } = sync;
 
   return (
     <Box>

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";
@@ -21,14 +21,14 @@ import HelpButton from "./HelpButton";
 import { URL_KISS_RULES_NEW_ISSUE } from "../../config";
 
 function ApiFields({ site }) {
-  const { selector, rootSlector, fixer } = site;
+  const { selector, rootSelector, fixer } = site;
   return (
     <Stack spacing={3}>
       <TextField
         size="small"
-        label={"rootSlector"}
-        name="rootSlector"
-        value={rootSlector || "document"}
+        label={"rootSelector"}
+        name="rootSelector"
+        value={rootSelector || "document"}
         disabled
       />
       <TextField
@@ -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);
-        setSites(sites);
+        await loadSites();
       } catch (err) {
         console.log("[load webfix]", err.message);
       } finally {
         setLoading(false);
       }
     })();
-  }, []);
+  }, [loadSites]);
 
   return (
     <Box>

src/views/Options/index.js

@@ -19,6 +19,7 @@ import { adaptScript } from "../../libs/gm";
 import Alert from "@mui/material/Alert";
 import Apis from "./Apis";
 import Webfix from "./Webfix";
+import InputSetting from "./InputSetting";
 
 export default function Options() {
   const [error, setError] = useState("");
@@ -36,7 +37,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 +54,7 @@ export default function Options() {
           }
 
           if (++i > 8) {
-            setError("Time out.");
+            setError("Time out. (连接超时)");
             break;
           }
 
@@ -78,26 +79,30 @@ 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>
@@ -126,6 +131,7 @@ export default function Options() {
               <Route path="/" element={<Layout />}>
                 <Route index element={<Setting />} />
                 <Route path="rules" element={<Rules />} />
+                <Route path="input" element={<InputSetting />} />
                 <Route path="apis" element={<Apis />} />
                 <Route path="sync" element={<SyncSetting />} />
                 <Route path="webfix" element={<Webfix />} />

src/views/Popup/Header.js

@@ -21,7 +21,12 @@ export default function Header({ setShowPopup }) {
         <IconButton onClick={handleHomepage}>
           <HomeIcon />
         </IconButton>
-        <Box>
+        <Box
+          sx={{
+            userSelect: "none",
+            WebkitUserSelect: "none",
+          }}
+        >
           {`${process.env.REACT_APP_NAME} v${process.env.REACT_APP_VERSION}`}
         </Box>
       </Stack>

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,19 @@ export default function Popup({ setShowPopup, translator: tran }) {
     }
   };
 
+  const handleSaveRule = async () => {
+    try {
+      let href = window.location.href;
+      if (isExt) {
+        const tab = await getTabInfo();
+        href = tab.url;
+      }
+      saveRule({ ...rule, pattern: href });
+    } catch (err) {
+      console.log("[save rule]", err);
+    }
+  };
+
   useEffect(() => {
     if (!isExt) {
       return;
@@ -218,9 +232,19 @@ export default function Popup({ setShowPopup, translator: tran }) {
           />
         )}
 
-        <Button variant="text" onClick={handleOpenSetting}>
-          {i18n("setting")}
-        </Button>
+        <Stack
+          direction="row"
+          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>
   );