v1.7.3

change shortcut e.key to e.code
Solve the problem of multi-layer shadowroot selector and input box translation
2023-09-22 15:40:02 +08:00 · 2023-09-22 15:33:37 +08:00 · 2023-09-22 15:33:02 +08:00 · 2023-09-22 11:21:38 +08:00 · 2023-09-21 16:58:49 +08:00 · 2023-09-21 16:48:51 +08:00
50 changed files with 12128 additions and 15819 deletions
--- a/.env
+++ b/.env
@@ -2,7 +2,7 @@ GENERATE_SOURCEMAP=false

 REACT_APP_NAME=KISS Translator
 REACT_APP_NAME_CN=简约翻译
-REACT_APP_VERSION=1.6.12
+REACT_APP_VERSION=1.7.3

 REACT_APP_HOMEPAGE=https://github.com/fishjar/kiss-translator

--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -10,12 +10,15 @@ jobs:
    runs-on: ubuntu-22.04
    steps:
      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8.7.6
      - uses: actions/setup-node@v3
        with:
          node-version: "18.17.0"
-          cache: "yarn"
-      - run: yarn install
-      - run: yarn build
+          cache: "pnpm"
+      - run: pnpm install
+      - run: pnpm build
      - uses: actions/upload-artifact@v3
        with:
          name: build-artifacts
--- a/.yarnrc.yml
+++ b/.yarnrc.yml
@@ -1 +0,0 @@
-nodeLinker: node-modules
--- a/README.en.md
+++ b/README.en.md
@@ -24,16 +24,30 @@ If you also like a little more simplicity, welcome to pick it up.
 - [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] Covers common translation scenarios
+  - [x] Web bilingual translation
+  - [x] Input box translation
+  - [x] Mouseover translation
+  - [x] YouTube subtitle translation
+- [x] Cross-client data synchronization
+  - [x] KISS-Worker（cloudflare/docker）
+  - [x] WebDAV
+- [x] Custom translation rules
+  - [x] Rule subscription/rule sharing
+- [x] Custom translation 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
+## Install
+
+> Note: For the following reasons, it is recommended to use browser extensions first
+>
+> - Browser extension can use local language recognition
+> - Grease Monkey script will encounter more usage problems

 - [x] Browser extension
  - [x] Chrome [Installation address](https://chrome.google.com/webstore/detail/kiss-translator/bdiifdefkgmcblbcghdlonllpjhhjgof?hl=zh-CN)
@@ -70,8 +84,8 @@ If you also like a little more simplicity, welcome to pick it up.
 ```sh
 git clone https://github.com/fishjar/kiss-translator.git
 cd kiss-translator
-yarn install
-yarn build
+pnpm install
+pnpm build
 ```

 ## Discussion
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # 简约翻译

-一个简约的 [双语网页翻译扩展 & 油猴脚本](https://github.com/fishjar/kiss-translator)。
+一个简约的 [网页双语翻译扩展 & 油猴脚本](https://github.com/fishjar/kiss-translator)。

 [kiss-translator.webm](https://github.com/fishjar/kiss-translator/assets/1157624/f7ba8a5c-e4a8-4d5a-823a-5c5c67a0a47f)

@@ -14,7 +14,7 @@

 如果你也喜欢简约一点的，欢迎自取。

-## 特点
+## 特性

 - [x] 保持简约
 - [x] 开放源代码
@@ -24,16 +24,30 @@
 - [x] 支持多种翻译服务
  - [x] Google/Microsoft/DeepL/OpenAI
  - [x] 自定义翻译接口
- [x] 数据同步功能
- [x] 自定义规则 + 规则订阅
- [x] 自定义样式
+- [x] 覆盖常见翻译场景
+  - [x] 网页双语翻译
+  - [x] 输入框翻译
+  - [x] 鼠标悬停翻译
+  - [x] YouTube 字幕翻译
+- [x] 跨客户端数据同步
+  - [x] KISS-Worker（cloudflare/docker）
+  - [x] WebDAV
+- [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)
@@ -70,8 +84,8 @@
 ```sh
 git clone https://github.com/fishjar/kiss-translator.git
 cd kiss-translator
-yarn install
-yarn build
+pnpm install
+pnpm build
 ```

 ## 交流
--- a/config-overrides.js
+++ b/config-overrides.js
@@ -75,7 +75,7 @@ const userscriptWebpack = (config, env) => {
 // @name          ${process.env.REACT_APP_NAME}
 // @namespace     ${process.env.REACT_APP_HOMEPAGE}
 // @version       ${process.env.REACT_APP_VERSION}
-// @description   A minimalist bilingual translation Extension & Greasemonkey Script (一个简约的双语网页翻译扩展 & 油猴脚本)
+// @description   A minimalist bilingual translation Extension & Greasemonkey Script (一个简约的网页双语翻译扩展 & 油猴脚本)
 // @author        Gabe<yugang2002@gmail.com>
 // @homepageURL   ${process.env.REACT_APP_HOMEPAGE}
 // @license       GPL-3.0
@@ -102,6 +102,7 @@ const userscriptWebpack = (config, env) => {
 // @connect       githubusercontent.com
 // @connect       kiss-translator.rayjar.com
 // @connect       ghproxy.com
+// @connect       dav.jianguoyun.com
 // @connect       localhost:3000
 // @run-at        document-end
 // ==/UserScript==
--- a/package.json
+++ b/package.json
@@ -1,10 +1,11 @@
 {
  "name": "kiss-translator",
  "description": "A minimalist bilingual translation Extension & Greasemonkey Script",
-  "version": "1.6.12",
+  "version": "1.7.3",
  "author": "Gabe<yugang2002@gmail.com>",
  "private": true,
  "dependencies": {
+    "@emotion/cache": "^11.11.0",
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.10.8",
    "@mui/icons-material": "^5.11.11",
@@ -15,6 +16,7 @@
    "react-markdown": "^8.0.7",
    "react-router-dom": "^6.10.0",
    "react-scripts": "5.0.1",
+    "webdav": "^5.3.0",
    "webextension-polyfill": "^0.10.0"
  },
  "scripts": {
@@ -27,7 +29,7 @@
    "build:userscript-ios": "file1=build/web/kiss-translator.user.js file2=build/web/kiss-translator-ios-safari.user.js && cp $file1 $file2 && sed -i 's|// @grant         unsafeWindow|// @inject-into   content|g' $file2",
    "build:userscript": "rm -rf build/userscript && mkdir build/userscript && cp build/web/*.user.js build/userscript/",
    "build:rules": "babel-node src/rules.js",
-    "build": "yarn build:chrome && yarn build:edge && yarn build:firefox && yarn build:web && yarn build:userscript-ios && yarn build:userscript && yarn build:rules",
+    "build": "pnpm build:chrome && pnpm build:edge && pnpm build:firefox && pnpm build:web && pnpm build:userscript-ios && pnpm build:userscript && pnpm build:rules",
    "deploy:web": "wrangler pages deploy ./build/web --project-name kiss-translator",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
@@ -39,7 +41,8 @@
    ],
    "globals": {
      "GM": true,
-      "unsafeWindow": true
+      "unsafeWindow": true,
+      "globalThis": true
    }
  },
  "browserslist": {
@@ -61,5 +64,6 @@
    "@babel/preset-env": "^7.22.10",
    "react-app-rewired": "^2.2.1",
    "wrangler": "^3.4.0"
-  }
+  },
+  "packageManager": "yarn@3.6.3"
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/_locales/zh_CN/messages.json
+++ b/public/_locales/zh_CN/messages.json
@@ -3,7 +3,7 @@
    "message": "简约翻译"
  },
  "app_description": {
-    "message": "一个简约的双语网页翻译扩展 & 油猴脚本"
+    "message": "一个简约的网页双语翻译扩展 & 油猴脚本"
  },
  "toggle_translate": {
    "message": "开启翻译"
--- a/public/content.html
+++ b/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>
--- a/public/manifest.firefox.json
+++ b/public/manifest.firefox.json
@@ -2,7 +2,7 @@
  "manifest_version": 2,
  "name": "__MSG_app_name__",
  "description": "__MSG_app_description__",
-  "version": "1.6.12",
+  "version": "1.7.3",
  "default_locale": "en",
  "author": "Gabe<yugang2002@gmail.com>",
  "homepage_url": "https://github.com/fishjar/kiss-translator",
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -2,7 +2,7 @@
  "manifest_version": 3,
  "name": "__MSG_app_name__",
  "description": "__MSG_app_description__",
-  "version": "1.6.12",
+  "version": "1.7.3",
  "default_locale": "en",
  "author": "Gabe<yugang2002@gmail.com>",
  "homepage_url": "https://github.com/fishjar/kiss-translator",
--- a/src/apis/index.js
+++ b/src/apis/index.js
@@ -21,7 +21,7 @@ import { sha256 } from "../libs/utils";
 * @param {*} data
 * @returns
 */
-export const apiSyncData = async (url, key, data, isBg = false) =>
+export const apiSyncData = async (url, key, data) =>
  fetchPolyfill(url, {
    headers: {
      "Content-type": "application/json",
@@ -29,16 +29,14 @@ export const apiSyncData = async (url, key, data, isBg = false) =>
    },
    method: "POST",
    body: JSON.stringify(data),
-    isBg,
  });

 /**
 * 下载数据
 * @param {*} url
- * @param {*} isBg
 * @returns
 */
-export const apiFetch = (url, isBg = false) => fetchPolyfill(url, { isBg });
+export const apiFetch = (url) => fetchPolyfill(url);

 /**
 * 谷歌翻译
--- a/src/background.js
+++ b/src/background.js
@@ -16,6 +16,8 @@ import { sendTabMsg } from "./libs/msg";
 import { trySyncAllSubRules } from "./libs/subRules";
 import { tryClearCaches } from "./libs";

+globalThis.ContextType = "BACKGROUND";
+
 /**
 * 插件安装
 */
@@ -30,7 +32,7 @@ browser.runtime.onStartup.addListener(async () => {
  console.log("browser onStartup");

  // 同步数据
-  await trySyncSettingAndRules(true);
+  await trySyncSettingAndRules();

  // 清除缓存
  const setting = await getSettingWithDefault();
@@ -39,7 +41,7 @@ browser.runtime.onStartup.addListener(async () => {
  }

  // 同步订阅规则
-  trySyncAllSubRules(setting, true);
+  trySyncAllSubRules(setting);
 });

 /**
--- a/src/config/i18n.js
+++ b/src/config/i18n.js
@@ -435,10 +435,18 @@ export const I18N = {
    zh: `重启浏览器时清除缓存`,
    en: `Clear cache when restarting browser`,
  },
+  data_sync_type: {
+    zh: `数据同步方式`,
+    en: `Data Sync Type`,
+  },
  data_sync_url: {
    zh: `数据同步接口`,
    en: `Data Sync API`,
  },
+  data_sync_user: {
+    zh: `数据同步账户`,
+    en: `Data Sync User`,
+  },
  data_sync_key: {
    zh: `数据同步密钥`,
    en: `Data Sync Key`,
@@ -460,8 +468,8 @@ export const I18N = {
    en: `Sorry, something went wrong!`,
  },
  error_sync_setting: {
-    zh: `您的同步设置未填写，无法在线分享。`,
-    en: `Your sync settings are missing and cannot be shared online.`,
+    zh: `您的同步类型必须为“KISS-Worker”，且需填写完整`,
+    en: `Your sync type must be "KISS-Worker" and must be filled in completely`,
  },
  click_test: {
    zh: `点击测试`,
@@ -547,4 +555,44 @@ export const I18N = {
    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: `默认为单击“AltLeft+KeyI”`,
+    en: `Default is "AltLeft+KeyI"`,
+  },
+  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"`,
+  },
 };
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -38,9 +38,9 @@ export const CLIENT_FIREFOX = "firefox";
 export const CLIENT_USERSCRIPT = "userscript";
 export const CLIENT_EXTS = [CLIENT_CHROME, CLIENT_EDGE, CLIENT_FIREFOX];

-export const KV_RULES_KEY = "KT_RULES";
-export const KV_RULES_SHARE_KEY = "KT_RULES_SHARE";
-export const KV_SETTING_KEY = "KT_SETTING";
+export const KV_RULES_KEY = "kiss-rules.json";
+export const KV_RULES_SHARE_KEY = "kiss-rules-share.json";
+export const KV_SETTING_KEY = "kiss-setting.json";
 export const KV_SALT_SYNC = "KISS-Translator-SYNC";
 export const KV_SALT_SHARE = "KISS-Translator-SHARE";

@@ -137,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"; // 下划线
@@ -198,6 +199,20 @@ export const GLOBLA_RULE = {
  textDiyStyle: "",
 };

+// 输入框翻译
+export const OPT_INPUT_TRANS_SIGNS = ["/", "//", "\\", "\\\\", ">", ">>"];
+export const DEFAULT_INPUT_SHORTCUT = ["AltLeft", "KeyI"];
+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 = [
  {
@@ -246,10 +261,10 @@ 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"],
+  [OPT_SHORTCUT_TRANSLATE]: ["AltLeft", "KeyQ"],
+  [OPT_SHORTCUT_STYLE]: ["AltLeft", "KeyC"],
+  [OPT_SHORTCUT_POPUP]: ["AltLeft", "KeyK"],
+  [OPT_SHORTCUT_SETTING]: ["AltLeft", "KeyN"],
 };

 export const TRANS_MIN_LENGTH = 5; // 最短翻译长度
@@ -273,16 +288,25 @@ export const DEFAULT_SETTING = {
  mouseKey: OPT_MOUSEKEY_DISABLE, // 鼠标悬停翻译
  shortcuts: DEFAULT_SHORTCUTS, // 快捷键
  hideFab: false, // 是否隐藏按钮
+  inputRule: DEFAULT_INPUT_RULE, // 输入框设置
 };

 export const DEFAULT_RULES = [GLOBLA_RULE];

+export const OPT_SYNCTYPE_WORKER = "KISS-Worker";
+export const OPT_SYNCTYPE_WEBDAV = "WebDAV";
+export const OPT_SYNCTYPE_ALL = [OPT_SYNCTYPE_WORKER, OPT_SYNCTYPE_WEBDAV];
+
 export const DEFAULT_SYNC = {
+  syncType: OPT_SYNCTYPE_WORKER, // 同步方式
  syncUrl: "", // 数据同步接口
+  syncUser: "", // 数据同步用户名
  syncKey: "", // 数据同步密钥
-  settingUpdateAt: 0,
-  settingSyncAt: 0,
-  rulesUpdateAt: 0,
-  rulesSyncAt: 0,
+  syncMeta: {}, // 数据更新及同步信息
+  // settingUpdateAt: 0,
+  // settingSyncAt: 0,
+  // rulesUpdateAt: 0,
+  // rulesSyncAt: 0,
  subRulesSyncAt: 0, // 订阅规则同步时间
+  dataCaches: {}, // 缓存同步时间
 };
--- a/src/content.js
+++ b/src/content.js
@@ -7,7 +7,7 @@ import {
 } from "./config";
 import { getSettingWithDefault, getRulesWithDefault } from "./libs/storage";
 import { Translator } from "./libs/translator";
-import { isIframe } from "./libs/iframe";
+import { isIframe, sendIframeMsg, sendPrentMsg } from "./libs/iframe";
 import { matchRule } from "./libs/rules";
 import { webfix } from "./libs/webfix";

@@ -15,8 +15,34 @@ import { webfix } from "./libs/webfix";
 * 入口函数
 */
 const init = async () => {
-  const href = isIframe ? document.referrer : document.location.href;
  const setting = await getSettingWithDefault();
+
+  if (isIframe) {
+    let translator;
+    window.addEventListener("message", (e) => {
+      const { action, args } = e.data || {};
+      switch (action) {
+        case MSG_TRANS_TOGGLE:
+          translator?.toggle();
+          break;
+        case MSG_TRANS_TOGGLE_STYLE:
+          translator?.toggleStyle();
+          break;
+        case MSG_TRANS_PUTRULE:
+          if (!translator) {
+            translator = new Translator(args, setting);
+          } else {
+            translator.updateRule(args || {});
+          }
+          break;
+        default:
+      }
+    });
+    sendPrentMsg(MSG_TRANS_GETRULE);
+    return;
+  }
+
+  const href = document.location.href;
  const rules = await getRulesWithDefault();
  const rule = await matchRule(rules, href, setting);
  const translator = new Translator(rule, setting);
@@ -27,20 +53,32 @@ const init = async () => {
    switch (action) {
      case MSG_TRANS_TOGGLE:
        translator.toggle();
+        sendIframeMsg(MSG_TRANS_TOGGLE);
        break;
      case MSG_TRANS_TOGGLE_STYLE:
        translator.toggleStyle();
+        sendIframeMsg(MSG_TRANS_TOGGLE_STYLE);
        break;
      case MSG_TRANS_GETRULE:
        break;
      case MSG_TRANS_PUTRULE:
        translator.updateRule(args);
+        sendIframeMsg(MSG_TRANS_PUTRULE, args);
        break;
      default:
        return { error: `message action is unavailable: ${action}` };
    }
    return { data: translator.rule };
  });
+  window.addEventListener("message", (e) => {
+    const { action } = e.data || {};
+    switch (action) {
+      case MSG_TRANS_GETRULE:
+        sendIframeMsg(MSG_TRANS_PUTRULE, rule);
+        break;
+      default:
+    }
+  });
 };

 (async () => {
--- a/src/hooks/InputRule.js
+++ b/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 };
+}
--- a/src/hooks/Rules.js
+++ b/src/hooks/Rules.js
@@ -1,8 +1,9 @@
-import { STOKEY_RULES, DEFAULT_RULES } from "../config";
+import { STOKEY_RULES, DEFAULT_RULES, KV_RULES_KEY } from "../config";
 import { useStorage } from "./Storage";
 import { trySyncRules } from "../libs/sync";
 import { checkRules } from "../libs/rules";
 import { useCallback } from "react";
+import { useSyncMeta } from "./Sync";

 /**
 * 规则 hook
@@ -10,13 +11,15 @@ import { useCallback } from "react";
 */
 export function useRules() {
  const { data: list, save } = useStorage(STOKEY_RULES, DEFAULT_RULES);
+  const { updateSyncMeta } = useSyncMeta();

  const updateRules = useCallback(
    async (rules) => {
      await save(rules);
-      trySyncRules(false, true);
+      await updateSyncMeta(KV_RULES_KEY);
+      trySyncRules();
    },
-    [save]
+    [save, updateSyncMeta]
  );

  const add = useCallback(
--- a/src/hooks/Setting.js
+++ b/src/hooks/Setting.js
@@ -1,25 +1,24 @@
-import { STOKEY_SETTING, DEFAULT_SETTING } from "../config";
+import { STOKEY_SETTING, DEFAULT_SETTING, KV_SETTING_KEY } from "../config";
 import { useStorage } from "./Storage";
 import { trySyncSetting } from "../libs/sync";
 import { createContext, useCallback, useContext, useMemo } from "react";
 import { debounce } from "../libs/utils";
+import { useSyncMeta } from "./Sync";

 const SettingContext = createContext({
-  setting: {},
+  setting: null,
  updateSetting: async () => {},
  reloadSetting: async () => {},
 });

 export function SettingProvider({ children }) {
-  const { data, update, reload, loading } = useStorage(
-    STOKEY_SETTING,
-    DEFAULT_SETTING
-  );
+  const { data, update, reload } = useStorage(STOKEY_SETTING, DEFAULT_SETTING);
+  const { updateSyncMeta } = useSyncMeta();

  const syncSetting = useMemo(
    () =>
      debounce(() => {
-        trySyncSetting(false, true);
+        trySyncSetting();
      }, [2000]),
    []
  );
@@ -27,12 +26,13 @@ export function SettingProvider({ children }) {
  const updateSetting = useCallback(
    async (obj) => {
      await update(obj);
+      await updateSyncMeta(KV_SETTING_KEY);
      syncSetting();
    },
-    [update, syncSetting]
+    [update, syncSetting, updateSyncMeta]
  );

-  if (loading) {
+  if (!data) {
    return;
  }

--- a/src/hooks/Storage.js
+++ b/src/hooks/Storage.js
@@ -1,9 +1,9 @@
 import { useCallback, useEffect, useState } from "react";
 import { storage } from "../libs/storage";

-export function useStorage(key, defaultVal = null) {
-  const [loading, setLoading] = useState(true);
-  const [data, setData] = useState(defaultVal);
+export function useStorage(key, defaultVal) {
+  const [loading, setLoading] = useState(false);
+  const [data, setData] = useState(null);

  const save = useCallback(
    async (val) => {
@@ -15,7 +15,7 @@ export function useStorage(key, defaultVal = null) {

  const update = useCallback(
    async (obj) => {
-      setData((pre) => ({ ...pre, ...obj }));
+      setData((pre = {}) => ({ ...pre, ...obj }));
      await storage.putObj(key, obj);
    },
    [key]
@@ -27,26 +27,37 @@ export function useStorage(key, defaultVal = null) {
  }, [key]);

  const reload = useCallback(async () => {
-    const val = await storage.getObj(key);
-    if (val) {
-      setData(val);
-    } else if (defaultVal) {
-      await storage.setObj(key, defaultVal);
+    try {
+      setLoading(true);
+      const val = await storage.getObj(key);
+      if (val) {
+        setData(val);
+      }
+    } catch (err) {
+      console.log("[storage reload]", err.message);
+    } finally {
+      setLoading(false);
    }
-  }, [key, defaultVal]);
+  }, [key]);

  useEffect(() => {
    (async () => {
      try {
        setLoading(true);
-        await reload();
+        const val = await storage.getObj(key);
+        if (val) {
+          setData(val);
+        } else if (defaultVal) {
+          setData(defaultVal);
+          await storage.setObj(key, defaultVal);
+        }
      } catch (err) {
-        //
+        console.log("[storage load]", err.message);
      } finally {
        setLoading(false);
      }
    })();
-  }, [reload]);
+  }, [key, defaultVal]);

  return { data, save, update, remove, reload, loading };
 }
--- a/src/hooks/SubRules.js
+++ b/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]
--- a/src/hooks/Sync.js
+++ b/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,57 @@ 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 };
+}
+
+/**
+ * update syncmeta hook
+ * @returns
+ */
+export function useSyncMeta() {
+  const { sync, updateSync } = useSync();
+  const updateSyncMeta = useCallback(
+    async (key) => {
+      const syncMeta = sync?.syncMeta || {};
+      syncMeta[key] = { ...(syncMeta[key] || {}), updateAt: Date.now() };
+      await updateSync({ syncMeta });
+    },
+    [sync?.syncMeta, updateSync]
+  );
+  return { updateSyncMeta };
+}
+
+/**
+ * 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,
+  };
 }
--- a/src/libs/browser.js
+++ b/src/libs/browser.js
@@ -13,3 +13,5 @@ function _browser() {
 }

 export const browser = _browser();
+
+export const isBg = () => globalThis?.ContextType === "BACKGROUND";
--- a/src/libs/fetch.js
+++ b/src/libs/fetch.js
@@ -13,6 +13,7 @@ import {
  DEFAULT_FETCH_LIMIT,
 } from "../config";
 import { msAuth } from "./auth";
+import { isBg } from "./browser";

 /**
 * 油猴脚本的请求封装
@@ -28,7 +29,7 @@ export const fetchGM = async (input, { method = "GET", headers, body } = {}) =>
      headers,
      data: body,
      onload: (response) => {
-        if (response.status === 200) {
+        if (response.status < 300) {
          const headers = new Headers();
          response.responseHeaders.split("\n").forEach((line) => {
            const [name, value] = line.split(":").map((item) => item.trim());
@@ -66,7 +67,7 @@ const newCacheReq = async (request) => {
 * @param {*} param0
 * @returns
 */
-const fetchApi = async ({ input, init = {}, translator, token }) => {
+export const fetchApi = async ({ input, init = {}, translator, token }) => {
  if (token) {
    if (translator === OPT_TRANS_DEEPL) {
      init.headers["Authorization"] = `DeepL-Auth-Key ${token}`; // DeepL
@@ -176,13 +177,13 @@ export const fetchData = async (
 * @param {*} opts
 * @returns
 */
-export const fetchPolyfill = async (input, { isBg = false, ...opts } = {}) => {
+export const fetchPolyfill = async (input, opts) => {
  if (!input.trim()) {
    throw new Error("URL is empty");
  }

  // 插件
-  if (isExt && !isBg) {
+  if (isExt && !isBg()) {
    const res = await sendBgMsg(MSG_FETCH, { input, opts });
    if (res.error) {
      throw new Error(res.error);
--- a/src/libs/iframe.js
+++ b/src/libs/iframe.js
@@ -5,3 +5,7 @@ export const sendIframeMsg = (action, args) => {
    iframe.contentWindow.postMessage({ action, args }, "*");
  });
 };
+
+export const sendPrentMsg = (action, args) => {
+  window.parent.postMessage({ action, args }, "*");
+};
--- a/src/libs/rules.js
+++ b/src/libs/rules.js
@@ -49,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) {
@@ -150,5 +149,5 @@ export const saveRule = async (newRule) => {
    rules.unshift(newRule);
  }
  await setRules(rules);
-  trySyncRules(false, true);
+  trySyncRules();
 };
--- a/src/libs/shortcut.js
+++ b/src/libs/shortcut.js
@@ -22,14 +22,14 @@ export const shortcutListener = (fn, target = document, timeout = 3000) => {
    }, timeout);

    if (e.code) {
-      allkeys.add(e.key);
-      curkeys.add(e.key);
+      allkeys.add(e.code);
+      curkeys.add(e.code);
      fn([...curkeys], [...allkeys]);
    }
  };

  const handleKeyup = (e) => {
-    curkeys.delete(e.key);
+    curkeys.delete(e.code);
    if (curkeys.size === 0) {
      fn([...curkeys], [...allkeys]);
      allkeys.clear();
@@ -65,3 +65,48 @@ export const shortcutRegister = (targetKeys = [], fn, target = document) => {
    }
  }, 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);
+};
--- a/src/libs/subRules.js
+++ b/src/libs/subRules.js
@@ -4,19 +4,29 @@ 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 });
+};

 /**
 * 同步订阅规则
 * @param {*} url
 * @returns
 */
-export const syncSubRules = async (url, isBg = false) => {
-  const res = await apiFetch(url, isBg);
+export const syncSubRules = async (url) => {
+  const res = await apiFetch(url);
  const rules = checkRules(res).filter(
    ({ pattern }) => !isAllchar(pattern, GLOBAL_KEY)
  );
@@ -31,10 +41,11 @@ export const syncSubRules = async (url, isBg = false) => {
 * @param {*} url
 * @returns
 */
-export const syncAllSubRules = async (subrulesList, isBg = false) => {
+export const syncAllSubRules = async (subrulesList) => {
  for (let subrules of subrulesList) {
    try {
-      await syncSubRules(subrules.url, isBg);
+      await syncSubRules(subrules.url);
+      await updateSyncDataCache(subrules.url);
    } catch (err) {
      console.log(`[sync subrule error]: ${subrules.url}`, err);
    }
@@ -46,19 +57,19 @@ export const syncAllSubRules = async (subrulesList, isBg = false) => {
 * @param {*} url
 * @returns
 */
-export const trySyncAllSubRules = async ({ subrulesList }, isBg = false) => {
+export const trySyncAllSubRules = async ({ subrulesList }) => {
  try {
    const { subRulesSyncAt } = await getSyncWithDefault();
    const now = Date.now();
    const interval = 24 * 60 * 60 * 1000; // 间隔一天
    if (now - subRulesSyncAt > interval) {
-      await syncAllSubRules(subrulesList, isBg);
+      // 同步订阅规则
+      await syncAllSubRules(subrulesList);
      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 || [];
 };
--- a/src/libs/svg.js
+++ b/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>
+`;
--- a/src/libs/sync.js
+++ b/src/libs/sync.js
@@ -1,8 +1,10 @@
 import {
+  APP_LCNAME,
  KV_SETTING_KEY,
  KV_RULES_KEY,
  KV_RULES_SHARE_KEY,
  KV_SALT_SHARE,
+  OPT_SYNCTYPE_WEBDAV,
 } from "../config";
 import {
  getSyncWithDefault,
@@ -13,53 +15,102 @@ import {
  setRules,
 } from "./storage";
 import { apiSyncData } from "../apis";
-import { sha256 } from "./utils";
+import { sha256, removeEndchar } from "./utils";
+import { createClient, getPatcher } from "webdav";
+import { fetchApi } from "./fetch";
+
+getPatcher().patch("request", (opts) => {
+  return fetchApi({
+    input: opts.url,
+    init: { method: opts.method, headers: opts.headers, body: opts.data },
+  });
+});
+
+const syncByWebdav = async (data, { syncUrl, syncUser, syncKey }) => {
+  const client = createClient(syncUrl, {
+    username: syncUser,
+    password: syncKey,
+  });
+  const pathname = `/${APP_LCNAME}`;
+  const filename = `/${APP_LCNAME}/${data.key}`;
+
+  if ((await client.exists(pathname)) === false) {
+    await client.createDirectory(pathname);
+  }
+
+  const isExist = await client.exists(filename);
+  if (isExist) {
+    const cont = await client.getFileContents(filename, { format: "text" });
+    const webData = JSON.parse(cont);
+    if (webData.updateAt >= data.updateAt) {
+      return webData;
+    }
+  }
+
+  await client.putFileContents(filename, JSON.stringify(data, null, 2));
+  return data;
+};
+
+const syncByWorker = async (data, { syncUrl, syncKey }) => {
+  syncUrl = removeEndchar(syncUrl, "/");
+  return await apiSyncData(`${syncUrl}/sync`, syncKey, data);
+};
+
+const syncData = async (key, valueFn) => {
+  const {
+    syncType,
+    syncUrl,
+    syncUser,
+    syncKey,
+    syncMeta = {},
+  } = await getSyncWithDefault();
+  if (!syncUrl || !syncKey || (syncType === OPT_SYNCTYPE_WEBDAV && !syncUser)) {
+    return;
+  }
+
+  let { updateAt = 0, syncAt = 0 } = syncMeta[key] || {};
+  syncAt === 0 && (updateAt = 0);
+
+  const value = await valueFn();
+  const data = {
+    key,
+    value: JSON.stringify(value),
+    updateAt,
+  };
+  const args = {
+    syncUrl,
+    syncUser,
+    syncKey,
+  };
+
+  const res =
+    syncType === OPT_SYNCTYPE_WEBDAV
+      ? await syncByWebdav(data, args)
+      : await syncByWorker(data, args);
+
+  syncMeta[key] = {
+    updateAt: res.updateAt,
+    syncAt: Date.now(),
+  };
+  await updateSync({ syncMeta });
+
+  return { value: JSON.parse(res.value), isNew: res.updateAt > updateAt };
+};

 /**
 * 同步设置
 * @returns
 */
-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,
-    syncKey,
-    {
-      key: KV_SETTING_KEY,
-      value: setting,
-      updateAt: settingSyncAt === 0 ? 0 : settingUpdateAt,
-    },
-    isBg
-  );
-
-  if (res.updateAt > settingUpdateAt) {
+const syncSetting = async () => {
+  const res = await syncData(KV_SETTING_KEY, getSettingWithDefault);
+  if (res?.isNew) {
    await setSetting(res.value);
  }
-  await updateSync({
-    settingUpdateAt: res.updateAt,
-    settingSyncAt: Date.now(),
-  });
-
-  return res.value;
 };

-export const trySyncSetting = async (isBg = false, isForce = false) => {
+export const trySyncSetting = async () => {
  try {
-    return await syncSetting(isBg, isForce);
+    await syncSetting();
  } catch (err) {
    console.log("[sync setting]", err);
  }
@@ -69,47 +120,16 @@ export const trySyncSetting = async (isBg = false, isForce = false) => {
 * 同步规则
 * @returns
 */
-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,
-    syncKey,
-    {
-      key: KV_RULES_KEY,
-      value: rules,
-      updateAt: rulesSyncAt === 0 ? 0 : rulesUpdateAt,
-    },
-    isBg
-  );
-
-  if (res.updateAt > rulesUpdateAt) {
+const syncRules = async () => {
+  const res = await syncData(KV_RULES_KEY, getRulesWithDefault);
+  if (res?.isNew) {
    await setRules(res.value);
  }
-  await updateSync({
-    rulesUpdateAt: res.updateAt,
-    rulesSyncAt: Date.now(),
-  });
-
-  return res.value;
 };

-export const trySyncRules = async (isBg = false, isForce = false) => {
+export const trySyncRules = async () => {
  try {
-    return await syncRules(isBg, isForce);
+    await syncRules();
  } catch (err) {
    console.log("[sync user rules]", err);
  }
@@ -121,13 +141,18 @@ export const trySyncRules = async (isBg = false, isForce = false) => {
 * @returns
 */
 export const syncShareRules = async ({ rules, syncUrl, syncKey }) => {
-  await apiSyncData(syncUrl, syncKey, {
+  const data = {
    key: KV_RULES_SHARE_KEY,
-    value: rules,
+    value: JSON.stringify(rules, null, 2),
    updateAt: Date.now(),
-  });
+  };
+  const args = {
+    syncUrl,
+    syncKey,
+  };
+  await syncByWorker(data, args);
  const psk = await sha256(syncKey, KV_SALT_SHARE);
-  const shareUrl = `${syncUrl}?psk=${psk}`;
+  const shareUrl = `${syncUrl}/rules?psk=${psk}`;
  return shareUrl;
 };

@@ -135,10 +160,12 @@ export const syncShareRules = async ({ rules, syncUrl, syncKey }) => {
 * 同步个人设置和规则
 * @returns
 */
-export const syncSettingAndRules = async (isBg = false) => {
-  return [await syncSetting(isBg), await syncRules(isBg)];
+export const syncSettingAndRules = async () => {
+  await syncSetting();
+  await syncRules();
 };

-export const trySyncSettingAndRules = async (isBg = false) => {
-  return [await trySyncSetting(isBg), await trySyncRules(isBg)];
+export const trySyncSettingAndRules = async () => {
+  await trySyncSetting();
+  await trySyncRules();
 };
--- a/src/libs/translator.js
+++ b/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(node, loadingId) {
+  const div = node.offsetParent.querySelector(`#${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() {
@@ -169,6 +259,22 @@ export class Translator {
    );
  };

+  _queryShadowNodes = (selector, rootNode) => {
+    this._rootNodes.add(rootNode);
+    this._queryFilter(selector, rootNode).forEach((item) => {
+      if (!this._tranNodes.has(item)) {
+        this._tranNodes.set(item, "");
+      }
+    });
+
+    Array.from(rootNode.querySelectorAll("*"))
+      .map((item) => item.shadowRoot)
+      .filter(Boolean)
+      .forEach((item) => {
+        this._queryShadowNodes(selector, item);
+      });
+  };
+
  _queryNodes = (rootNode = document) => {
    // const childRoots = Array.from(rootNode.querySelectorAll("*"))
    //   .map((item) => item.shadowRoot)
@@ -191,14 +297,15 @@ export class Translator {
            const outNodes = this._querySelectorAll(outSelector, rootNode);
            outNodes.forEach((outNode) => {
              if (outNode.shadowRoot) {
-                this._rootNodes.add(outNode.shadowRoot);
-                this._queryFilter(inSelector, outNode.shadowRoot).forEach(
-                  (item) => {
-                    if (!this._tranNodes.has(item)) {
-                      this._tranNodes.set(item, "");
-                    }
-                  }
-                );
+                // this._rootNodes.add(outNode.shadowRoot);
+                // this._queryFilter(inSelector, outNode.shadowRoot).forEach(
+                //   (item) => {
+                //     if (!this._tranNodes.has(item)) {
+                //       this._tranNodes.set(item, "");
+                //     }
+                //   }
+                // );
+                this._queryShadowNodes(inSelector, outNode.shadowRoot);
              }
            });
          }
@@ -243,6 +350,125 @@ 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 () => {
+        let node = document.activeElement;
+
+        if (!node) {
+          return;
+        }
+
+        while (node.shadowRoot) {
+          node = node.shadowRoot.activeElement;
+        }
+
+        if (!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(node, loadingId);
+        }
+      },
+      triggerCount,
+      triggerTime
+    );
+  };
+
  _handleMouseover = (e) => {
    const key = this._setting.mouseKey.slice(3);
    if (this._setting.mouseKey === OPT_MOUSEKEY_MOUSEOVER || e[key]) {
--- a/src/libs/utils.js
+++ b/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);
+};
--- a/src/libs/webfix.js
+++ b/src/libs/webfix.js
@@ -12,26 +12,26 @@ const FIXER_FONTSIZE = "fontSize";
 * 需要修复的站点列表
 * - pattern 匹配网址
 * - selector 需要修复的选择器
- * - rootSlector 需要监听的选择器，可留空
+ * - rootSelector 需要监听的选择器，可留空
 * - fixer 修复函数，可针对不同网址，选用不同修复函数
 */
 const DEFAULT_SITES = [
  {
    pattern: "www.phoronix.com",
    selector: ".content",
-    rootSlector: "",
+    rootSelector: "",
    fixer: FIXER_BR,
  },
  {
    pattern: "t.me/s/",
    selector: ".tgme_widget_message_text",
-    rootSlector: ".tgme_channel_history",
+    rootSelector: ".tgme_channel_history",
    fixer: FIXER_BR,
  },
  {
    pattern: "baidu.com",
    selector: "html",
-    rootSlector: "",
+    rootSelector: "",
    fixer: FIXER_FONTSIZE,
  },
 ];
@@ -114,9 +114,9 @@ const fixerMap = {
 * 查找、监听节点，并执行修复函数
 * @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) {
@@ -126,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) {
@@ -181,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;
      }
--- a/src/userscript.js
+++ b/src/userscript.js
@@ -10,8 +10,13 @@ import {
 } from "./libs/storage";
 import { Translator } from "./libs/translator";
 import { trySyncAllSubRules } from "./libs/subRules";
-import { MSG_TRANS_TOGGLE, MSG_TRANS_PUTRULE } from "./config";
-import { isIframe } from "./libs/iframe";
+import {
+  MSG_TRANS_TOGGLE,
+  MSG_TRANS_TOGGLE_STYLE,
+  MSG_TRANS_GETRULE,
+  MSG_TRANS_PUTRULE,
+} from "./config";
+import { isIframe, sendIframeMsg, sendPrentMsg } from "./libs/iframe";
 import { handlePing, injectScript } from "./libs/gm";
 import { matchRule } from "./libs/rules";
 import { genEventName } from "./libs/utils";
@@ -46,29 +51,49 @@ const init = async () => {
  }

  // 翻译页面
-  const href = isIframe ? document.referrer : document.location.href;
  const setting = await getSettingWithDefault();
+
+  if (isIframe) {
+    let translator;
+    window.addEventListener("message", (e) => {
+      const { action, args } = e.data || {};
+      switch (action) {
+        case MSG_TRANS_TOGGLE:
+          translator?.toggle();
+          break;
+        case MSG_TRANS_TOGGLE_STYLE:
+          translator?.toggleStyle();
+          break;
+        case MSG_TRANS_PUTRULE:
+          if (!translator) {
+            translator = new Translator(args, setting);
+          } else {
+            translator.updateRule(args || {});
+          }
+          break;
+        default:
+      }
+    });
+    sendPrentMsg(MSG_TRANS_GETRULE);
+    return;
+  }
+
+  const href = isIframe ? document.referrer : document.location.href;
  const rules = await getRulesWithDefault();
  const rule = await matchRule(rules, href, setting);
  const translator = new Translator(rule, setting);
  webfix(href, setting);

-  if (isIframe) {
-    // iframe
-    window.addEventListener("message", (e) => {
-      const action = e?.data?.action;
-      switch (action) {
-        case MSG_TRANS_TOGGLE:
-          translator.toggle();
-          break;
-        case MSG_TRANS_PUTRULE:
-          translator.updateRule(e.data.args || {});
-          break;
-        default:
-      }
-    });
-    return;
-  }
+  // 监听消息
+  window.addEventListener("message", (e) => {
+    const { action } = e.data || {};
+    switch (action) {
+      case MSG_TRANS_GETRULE:
+        sendIframeMsg(MSG_TRANS_PUTRULE, rule);
+        break;
+      default:
+    }
+  });

  // 浮球按钮
  const fab = await getFabWithDefault();
--- a/src/views/Action/Draggable.js
+++ b/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>
  );
 }
--- a/src/views/Action/index.js
+++ b/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,14 +8,19 @@ 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,
+  MSG_TRANS_TOGGLE,
+  MSG_TRANS_TOGGLE_STYLE,
 } from "../../config";
 import { shortcutRegister } from "../../libs/shortcut";
+import { sendIframeMsg } from "../../libs/iframe";

 export default function Action({ translator, fab }) {
  const fabWidth = 40;
@@ -56,10 +60,12 @@ export default function Action({ translator, fab }) {
    const clearShortcuts = [
      shortcutRegister(shortcuts[OPT_SHORTCUT_TRANSLATE], () => {
        translator.toggle();
+        sendIframeMsg(MSG_TRANS_TOGGLE);
        setShowPopup(false);
      }),
      shortcutRegister(shortcuts[OPT_SHORTCUT_STYLE], () => {
        translator.toggleStyle();
+        sendIframeMsg(MSG_TRANS_TOGGLE_STYLE);
        setShowPopup(false);
      }),
      shortcutRegister(shortcuts[OPT_SHORTCUT_POPUP], () => {
@@ -78,58 +84,56 @@ export default function Action({ translator, fab }) {
  }, [translator]);

  useEffect(() => {
-    // 注册菜单
-    const menuCommandIds = [];
-    if (isGm) {
-      try {
-        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"
-          )
-        );
-      } 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();
+            sendIframeMsg(MSG_TRANS_TOGGLE);
+            setShowPopup(false);
+          },
+          "Q"
+        ),
+        GM.registerMenuCommand(
+          "Toggle Style (Alt+c)",
+          (event) => {
+            translator.toggleStyle();
+            sendIframeMsg(MSG_TRANS_TOGGLE_STYLE);
+            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(() => {
@@ -165,7 +169,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,
  };

@@ -178,17 +182,17 @@ 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"
--- a/src/views/Content/LoadingIcon.js
+++ b/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 }}
+    />
  );
 }
--- a/src/views/Options/Header.js
+++ b/src/views/Options/Header.js
@@ -1,4 +1,3 @@
-import PropTypes from "prop-types";
 import AppBar from "@mui/material/AppBar";
 import IconButton from "@mui/material/IconButton";
 import MenuIcon from "@mui/icons-material/Menu";
@@ -45,8 +44,4 @@ function Header(props) {
  );
 }

-Header.propTypes = {
-  onDrawerToggle: PropTypes.func.isRequired,
-};
-
 export default Header;
--- a/src/views/Options/InputSetting.js
+++ b/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>
+  );
+}
--- a/src/views/Options/Navigator.js
+++ b/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"),
--- a/src/views/Options/Rules.js
+++ b/src/views/Options/Rules.js
@@ -14,6 +14,7 @@ import {
  OPT_STYLE_DIY,
  OPT_STYLE_USE_COLOR,
  URL_KISS_RULES_NEW_ISSUE,
+  OPT_SYNCTYPE_WORKER,
 } from "../../config";
 import { useState, useRef, useEffect, useMemo } from "react";
 import { useI18n } from "../../hooks/I18n";
@@ -48,6 +49,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 || {
@@ -444,8 +446,8 @@ function ShareButton({ rules, injectRules, selectedUrl }) {
  const i18n = useI18n();
  const handleClick = async () => {
    try {
-      const { syncUrl, syncKey } = await getSyncWithDefault();
-      if (!syncUrl || !syncKey) {
+      const { syncType, syncUrl, syncKey } = await getSyncWithDefault();
+      if (syncType !== OPT_SYNCTYPE_WORKER || !syncUrl || !syncKey) {
        alert.warning(i18n("error_sync_setting"));
        return;
      }
@@ -525,6 +527,10 @@ function UserRules({ subRules }) {
    }
  }, [showAdd]);

+  if (!rules.list) {
+    return;
+  }
+
  return (
    <Stack spacing={3}>
      <Stack
@@ -624,8 +630,9 @@ function SubRulesItem({
  syncAt,
  selectedUrl,
  delSub,
-  updateSub,
  setSelectedRules,
+  updateDataCache,
+  deleteDataCache,
 }) {
  const [loading, setLoading] = useState(false);

@@ -633,6 +640,7 @@ function SubRulesItem({
    try {
      await delSub(url);
      await delSubRules(url);
+      await deleteDataCache(url);
    } catch (err) {
      console.log("[del subrules]", err);
    }
@@ -645,7 +653,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 {
@@ -680,7 +688,7 @@ function SubRulesItem({
  );
 }

-function SubRulesEdit({ subList, addSub }) {
+function SubRulesEdit({ subList, addSub, updateDataCache }) {
  const i18n = useI18n();
  const [inputText, setInputText] = useState("");
  const [inputError, setInputError] = useState("");
@@ -715,6 +723,7 @@ function SubRulesEdit({ subList, addSub }) {
        throw new Error("empty rules");
      }
      await addSub(url);
+      await updateDataCache(url);
      setShowInput(false);
      setInputText("");
    } catch (err) {
@@ -787,7 +796,6 @@ function SubRules({ subRules }) {
  const {
    subList,
    selectSub,
-    updateSub,
    addSub,
    delSub,
    selectedUrl,
@@ -795,27 +803,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>
--- a/src/views/Options/Setting.js
+++ b/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,
@@ -26,57 +24,13 @@ import {
  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);
-
-  useEffect(() => {
-    if (disabled) {
-      return;
-    }
-
-    inputRef.current.focus();
-    setShortcut([]);
-
-    const clearShortcut = shortcutListener((curkeys, allkeys) => {
-      setShortcut(allkeys);
-      if (curkeys.length === 0) {
-        setDisabled(true);
-      }
-    }, inputRef.current);
-
-    return () => {
-      clearShortcut();
-    };
-  }, [disabled, setShortcut]);
-
  return (
-    <Stack direction="row">
-      <TextField
-        size="small"
-        label={label}
-        name={label}
-        value={shortcut.join(" + ")}
-        fullWidth
-        inputRef={inputRef}
-        disabled={disabled}
-        onBlur={() => {
-          setDisabled(true);
-        }}
-      />
-      <IconButton
-        onClick={() => {
-          setDisabled(false);
-        }}
-      >
-        {<EditIcon />}
-      </IconButton>
-    </Stack>
+    <ShortcutInput value={shortcut} onChange={setShortcut} label={label} />
  );
 }

@@ -156,7 +110,7 @@ export default function Settings() {
          label={i18n("fetch_limit")}
          type="number"
          name="fetchLimit"
-          value={fetchLimit}
+          defaultValue={fetchLimit}
          onChange={handleChange}
        />

@@ -165,7 +119,7 @@ export default function Settings() {
          label={i18n("fetch_interval")}
          type="number"
          name="fetchInterval"
-          value={fetchInterval}
+          defaultValue={fetchInterval}
          onChange={handleChange}
        />

@@ -174,7 +128,7 @@ export default function Settings() {
          label={i18n("min_translate_length")}
          type="number"
          name="minLength"
-          value={minLength}
+          defaultValue={minLength}
          onChange={handleChange}
        />

@@ -183,7 +137,7 @@ export default function Settings() {
          label={i18n("max_translate_length")}
          type="number"
          name="maxLength"
-          value={maxLength}
+          defaultValue={maxLength}
          onChange={handleChange}
        />

@@ -192,7 +146,7 @@ export default function Settings() {
          label={i18n("num_of_newline_characters")}
          type="number"
          name="newlineLength"
-          value={newlineLength}
+          defaultValue={newlineLength}
          onChange={handleChange}
        />

@@ -244,32 +198,35 @@ export default function Settings() {
                <MenuItem value={true}>{i18n("hide")}</MenuItem>
              </Select>
            </FormControl>
-            <Grid container rowSpacing={2} columns={12}>
-              <Grid item xs={12} sm={12} md={3} lg={3}>
-                <ShortcutItem
-                  action={OPT_SHORTCUT_TRANSLATE}
-                  label={i18n("toggle_translate_shortcut")}
-                />
+
+            <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>
-              <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>
--- a/src/views/Options/ShortcutInput.js
+++ b/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>
+  );
+}
--- a/src/views/Options/SyncSetting.js
+++ b/src/views/Options/SyncSetting.js
@@ -5,7 +5,13 @@ import { useI18n } from "../../hooks/I18n";
 import { useSync } from "../../hooks/Sync";
 import Alert from "@mui/material/Alert";
 import Link from "@mui/material/Link";
-import { URL_KISS_WORKER } from "../../config";
+import MenuItem from "@mui/material/MenuItem";
+import {
+  URL_KISS_WORKER,
+  OPT_SYNCTYPE_ALL,
+  OPT_SYNCTYPE_WORKER,
+  OPT_SYNCTYPE_WEBDAV,
+} from "../../config";
 import { useState } from "react";
 import { syncSettingAndRules } from "../../libs/sync";
 import Button from "@mui/material/Button";
@@ -44,13 +50,37 @@ export default function SyncSetting() {
    }
  };

-  const { syncUrl, syncKey } = sync;
+  if (!sync) {
+    return;
+  }
+
+  const {
+    syncType = OPT_SYNCTYPE_WORKER,
+    syncUrl = "",
+    syncUser = "",
+    syncKey = "",
+  } = sync;

  return (
    <Box>
      <Stack spacing={3}>
        <Alert severity="warning">{i18n("sync_warn")}</Alert>

+        <TextField
+          select
+          size="small"
+          name="syncType"
+          value={syncType}
+          label={i18n("data_sync_type")}
+          onChange={handleChange}
+        >
+          {OPT_SYNCTYPE_ALL.map((item) => (
+            <MenuItem key={item} value={item}>
+              {item}
+            </MenuItem>
+          ))}
+        </TextField>
+
        <TextField
          size="small"
          label={i18n("data_sync_url")}
@@ -58,12 +88,24 @@ export default function SyncSetting() {
          value={syncUrl}
          onChange={handleChange}
          helperText={
-            <Link href={URL_KISS_WORKER} target="_blank">
-              {i18n("about_sync_api")}
-            </Link>
+            syncType === OPT_SYNCTYPE_WORKER && (
+              <Link href={URL_KISS_WORKER} target="_blank">
+                {i18n("about_sync_api")}
+              </Link>
+            )
          }
        />

+        {syncType === OPT_SYNCTYPE_WEBDAV && (
+          <TextField
+            size="small"
+            label={i18n("data_sync_user")}
+            name="syncUser"
+            value={syncUser}
+            onChange={handleChange}
+          />
+        )}
+
        <TextField
          size="small"
          type="password"
--- a/src/views/Options/Webfix.js
+++ b/src/views/Options/Webfix.js
@@ -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
--- a/src/views/Options/index.js
+++ b/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("");
@@ -82,16 +83,20 @@ export default function Options() {
        </h2>
        <Stack spacing={2}>
          <Link href={process.env.REACT_APP_USERSCRIPT_DOWNLOADURL}>
-            Install Userscript for Tampermonkey/Violentmonkey 1 (油猴脚本 安装地址 1)
+            Install Userscript for Tampermonkey/Violentmonkey 1 (油猴脚本
+            安装地址 1)
          </Link>
          <Link href={process.env.REACT_APP_USERSCRIPT_DOWNLOADURL2}>
-            Install Userscript for Tampermonkey/Violentmonkey 2 (油猴脚本 安装地址 2)
+            Install Userscript for Tampermonkey/Violentmonkey 2 (油猴脚本
+            安装地址 2)
          </Link>
          <Link href={process.env.REACT_APP_USERSCRIPT_IOS_DOWNLOADURL}>
-            Install Userscript for iOS Safari 1 (油猴脚本 iOS Safari专用 安装地址 1)
+            Install Userscript for iOS Safari 1 (油猴脚本 iOS Safari专用
+            安装地址 1)
          </Link>
          <Link href={process.env.REACT_APP_USERSCRIPT_IOS_DOWNLOADURL2}>
-            Install Userscript for iOS Safari 2 (油猴脚本 iOS Safari专用 安装地址 2)
+            Install Userscript for iOS Safari 2 (油猴脚本 iOS Safari专用
+            安装地址 2)
          </Link>
          <Link href={process.env.REACT_APP_OPTIONSPAGE}>
            Open Options Page 1 (打开设置页面 1)
@@ -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 />} />
--- a/src/views/Popup/Header.js
+++ b/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>
--- a/src/views/Popup/index.js
+++ b/src/views/Popup/index.js
@@ -21,10 +21,10 @@ import {
  OPT_LANGS_TO,
  OPT_STYLE_ALL,
  OPT_STYLE_USE_COLOR,
-  CACHE_NAME,
 } from "../../config";
 import { sendIframeMsg } from "../../libs/iframe";
 import { saveRule } from "../../libs/rules";
+import { tryClearCaches } from "../../libs";

 export default function Popup({ setShowPopup, translator: tran }) {
  const i18n = useI18n();
@@ -71,22 +71,17 @@ export default function Popup({ setShowPopup, translator: tran }) {
  };

  const handleClearCache = () => {
-    try {
-      caches.delete(CACHE_NAME);
-    } catch (err) {
-      console.log("[clear cache]", err);
-    }
+    tryClearCaches();
  };

  const handleSaveRule = async () => {
    try {
-      let host = window.location.host;
+      let href = window.location.href;
      if (isExt) {
        const tab = await getTabInfo();
-        const url = new URL(tab.url);
-        host = url.host;
+        href = tab.url;
      }
-      saveRule({ ...rule, pattern: host });
+      saveRule({ ...rule, pattern: href });
    } catch (err) {
      console.log("[save rule]", err);
    }
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
Gabe Yuan	733ec92c9c	v1.7.3	2023-09-22 15:40:02 +08:00
Gabe Yuan	7c67bb7181	change shortcut e.key to e.code	2023-09-22 15:33:37 +08:00
Gabe Yuan	87f099dd7f	Solve the problem of multi-layer shadowroot selector and input box translation	2023-09-22 15:33:02 +08:00
Gabe Yuan	5306d81284	fix shortcut bug	2023-09-22 11:21:38 +08:00
Gabe Yuan	471a4a3159	fix workflows: replace yarn to pnpm	2023-09-21 16:58:49 +08:00
Gabe Yuan	a2f99da3b4	v1.7.2	2023-09-21 16:48:51 +08:00
Gabe Yuan	accab22d56	update readme	2023-09-21 16:41:49 +08:00
Gabe Yuan	6ea5228a5f	fix sync	2023-09-21 16:13:00 +08:00
Gabe Yuan	a07d2cafb6	fix sync	2023-09-21 11:47:22 +08:00
Gabe Yuan	1b38f19cc1	replace yarn to pnpm	2023-09-21 10:31:45 +08:00
Gabe Yuan	aa5b286e0b	replace yarn to pnpm	2023-09-21 10:15:03 +08:00
Gabe Yuan	6b6bbed330	fix sync	2023-09-20 22:15:09 +08:00
Gabe Yuan	489bc9534b	fix sync	2023-09-20 17:47:23 +08:00
Gabe Yuan	01ebc184ad	add globalThis.ContextType	2023-09-20 16:02:17 +08:00
Gabe Yuan	f591d66365	fix clear cache	2023-09-19 12:18:01 +08:00
Gabe Yuan	80782287d8	sync webdav cors	2023-09-19 11:56:19 +08:00
Gabe Yuan	3494bb1297	sync webdav	2023-09-18 17:36:10 +08:00
Gabe Yuan	92ffda5220	sync by worker	2023-09-18 15:45:32 +08:00
Gabe Yuan	fbaeff6b7b	update api pathname	2023-09-18 13:28:36 +08:00
Gabe Yuan	248d3726dd	fix storage hook	2023-09-17 22:34:28 +08:00
Gabe Yuan	1553559b1a	fix storage hook	2023-09-17 21:50:17 +08:00
Gabe Yuan	8935ced75a	fix iframe bug	2023-09-17 20:45:05 +08:00
Gabe Yuan	a865d6d74f	update readme	2023-09-16 21:16:04 +08:00
Gabe Yuan	6d976554fd	update readme	2023-09-16 20:11:10 +08:00
Gabe Yuan	189b7f480a	v1.7.1	2023-09-15 22:04:30 +08:00
Gabe Yuan	5e3aa7e2d1	update readme	2023-09-15 22:03:50 +08:00
Gabe Yuan	730be678ef	input box trans	2023-09-15 21:39:41 +08:00
Gabe Yuan	9293f422f3	input box trans	2023-09-15 20:44:01 +08:00
Gabe Yuan	6e8158bb34	input box trans	2023-09-15 17:58:00 +08:00
Gabe Yuan	3078d3ca91	input box trans	2023-09-15 17:52:06 +08:00
Gabe Yuan	947e1c7f08	input box trans	2023-09-15 17:29:42 +08:00
Gabe Yuan	938c123412	input box trans	2023-09-15 17:25:58 +08:00
Gabe Yuan	e7a57ad3b2	fix svg	2023-09-15 15:45:51 +08:00
Gabe Yuan	1e40f81bf7	input box trans	2023-09-14 16:35:42 +08:00
Gabe Yuan	72b2f44e32	input box trans	2023-09-14 14:45:22 +08:00
Gabe Yuan	76f54461e7	input box trans	2023-09-14 10:59:50 +08:00
Gabe Yuan	14ca13e31d	input box trans	2023-09-13 23:24:55 +08:00
Gabe Yuan	556fd71275	Merge branch 'dev' of github.com:fishjar/kiss-translator into dev	2023-09-13 22:12:08 +08:00
Gabe Yuan	a8002bba9f	input box trans	2023-09-13 22:11:33 +08:00
Gabe Yuan	ddd9371fbd	sync webfix interval	2023-09-13 18:02:51 +08:00
Gabe Yuan	0ea97b73e3	input box trans	2023-09-13 15:53:40 +08:00
Gabe Yuan	f8c8a4ebeb	ui fix	2023-09-13 11:16:56 +08:00
Gabe Yuan	5f613ab558	sync webfix interval	2023-09-13 10:26:30 +08:00
Gabe Yuan	56281f9e82	fix save rule	2023-09-12 17:20:56 +08:00
Gabe Yuan	5e8743dbb7	change fab ui	2023-09-12 15:44:30 +08:00
Gabe Yuan	f4e4c84712	popup ui	2023-09-12 11:00:54 +08:00
Gabe Yuan	c57a0a11fa	v1.7.0	2023-09-11 23:21:15 +08:00
Gabe Yuan	fa244b2097	subrules sync time	2023-09-11 22:53:04 +08:00
Gabe Yuan	79612f8a1b	subrules sync time	2023-09-11 17:56:31 +08:00
Gabe Yuan	2bf79dbc51	rootSlector -> rootSelector	2023-09-11 16:12:37 +08:00