v1.7.0

.env

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

README.en.md

@@ -16,7 +16,34 @@ If you also like a little more simplicity, welcome to pick it up.
 
 ## Features
 
-- Keep it simple, smart
+- [x] Keep it simple, smart
+- [x] Open source
+- [x] Adapt to common browsers
+  - [x] Chrome/Edge/Firefox/Kiwi
+  - [ ] Safari
+- [x] Supports multiple translation services
+  - [x] Google/Microsoft/DeepL/OpenAI
+  - [x] Custom translation interface
+- [x] Data synchronization function
+- [x] Custom rules + rule subscription
+- [x] Custom style
+- [x] Custom shortcut keys
+  - `Alt+Q` Toggle Translation
+  - `Alt+C` Toggle Styles
+  - `Alt+K` Open Popup
+  - `Alt+O` Open Options
+
+## Download
+
+- [x] Browser extension
+  - [x] Chrome [Installation address](https://chrome.google.com/webstore/detail/kiss-translator/bdiifdefkgmcblbcghdlonllpjhhjgof?hl=zh-CN)
+  - [x] Edge [Installation address](https://microsoftedge.microsoft.com/addons/detail/%E7%AE%80%E7%BA%A6%E7%BF%BB%E8%AF%91/jemckldkclkinpjighnoilpbldbdmmlh?hl=zh-CN)
+  - [x] Firefox [Installation address](https://addons.mozilla.org/zh-CN/firefox/addon/kiss-translator/)
+  - [ ] Safari
+- [x] GreaseMonkey Script
+  - [x] Chrome/Edge/Firefox ([Tampermonkey](https://www.tampermonkey.net/)/[Violentmonkey](https://violentmonkey.github.io/)) [Installation link 1](https://fishjar.github.io/kiss-translator/kiss-translator.user.js)、 [Installation link 2](https://kiss-translator.rayjar.com/kiss-translator.user.js)
+    - Greasy Fork [Installation address](https://greasyfork.org/zh-CN/scripts/472840-kiss-translator)
+  - [x] iOS Safari ([Userscripts Safari](https://github.com/quoid/userscripts)) [Installation link 1](https://fishjar.github.io/kiss-translator/kiss-translator-ios-safari.user.js)、 [Installation link 2](https://kiss-translator.rayjar.com/kiss-translator.user-ios-safari.js)
 
 ## Associated ProjectS
 
@@ -38,43 +65,7 @@ If you also like a little more simplicity, welcome to pick it up.
   - Supports query of English words, sentences and Chinese characters.
   - Supports history records and word collections.
 
-## Description
-
-### Support shortcut keys
-
-- `Alt+Q` Toggle Translation
-- `Alt+C` Toggle Styles
-- `Alt+K` Open Popup
-- `Alt+O` Open Options
-
-## 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,34 @@
 
 ## 特点
 
-- 保持简约
+- [x] 保持简约
+- [x] 开放源代码
+- [x] 适配常见浏览器
+  - [x] Chrome/Edge/Firefox/Kiwi
+  - [ ] Safari
+- [x] 支持多种翻译服务
+  - [x] Google/Microsoft/DeepL/OpenAI
+  - [x] 自定义翻译接口
+- [x] 数据同步功能
+- [x] 自定义规则 + 规则订阅
+- [x] 自定义样式
+- [x] 自定义快捷键
+  - `Alt+Q` 开启翻译
+  - `Alt+C` 切换样式
+  - `Alt+K` 打开弹窗
+  - `Alt+O` 打开设置
+
+## 下载
+
+- [x] 浏览器扩展
+  - [x] Chrome [安装地址](https://chrome.google.com/webstore/detail/kiss-translator/bdiifdefkgmcblbcghdlonllpjhhjgof?hl=zh-CN)
+  - [x] Edge [安装地址](https://microsoftedge.microsoft.com/addons/detail/%E7%AE%80%E7%BA%A6%E7%BF%BB%E8%AF%91/jemckldkclkinpjighnoilpbldbdmmlh?hl=zh-CN)
+  - [x] Firefox [安装地址](https://addons.mozilla.org/zh-CN/firefox/addon/kiss-translator/)
+  - [ ] Safari
+- [x] 油猴脚本
+  - [x] Chrome/Edge/Firefox ([Tampermonkey](https://www.tampermonkey.net/)/[Violentmonkey](https://violentmonkey.github.io/)) [安装链接 1](https://fishjar.github.io/kiss-translator/kiss-translator.user.js)、 [安装链接 2](https://kiss-translator.rayjar.com/kiss-translator.user.js)
+    - Greasy Fork [安装地址](https://greasyfork.org/zh-CN/scripts/472840-kiss-translator)
+  - [x] iOS Safari ([Userscripts Safari](https://github.com/quoid/userscripts)) [安装链接 1](https://fishjar.github.io/kiss-translator/kiss-translator-ios-safari.user.js)、 [安装链接 2](https://kiss-translator.rayjar.com/kiss-translator.user-ios-safari.js)
 
 ## 关联项目
 
@@ -38,43 +65,7 @@
   - 支持英文单词、句子、汉字的查询。
   - 支持历史记录、单词收藏。
 
-## 简要说明
-
-### 支持快捷键
-
-- `Alt+Q` 开启翻译
-- `Alt+C` 切换样式
-- `Alt+K` 打开弹窗
-- `Alt+O` 打开设置
-
-## 进度
-
-- [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.11",
+  "version": "1.7.0",
   "author": "Gabe<yugang2002@gmail.com>",
   "private": true,
   "dependencies": {

public/manifest.firefox.json

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

public/manifest.json

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

src/config/i18n.js

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

src/config/index.js

@@ -285,4 +285,5 @@ export const DEFAULT_SYNC = {
   rulesUpdateAt: 0,
   rulesSyncAt: 0,
   subRulesSyncAt: 0, // 订阅规则同步时间
+  dataCaches: {}, // 缓存同步时间
 };

src/hooks/Rules.js

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

src/hooks/Setting.js

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

src/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/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();
+  trySyncRules(false, true);
 };

src/libs/subRules.js

@@ -10,6 +10,16 @@ import { apiFetch } from "../apis";
 import { checkRules } from "./rules";
 import { isAllchar } from "./utils";
 
+/**
+ * 更新缓存同步时间
+ * @param {*} url
+ */
+const updateSyncDataCache = async (url) => {
+  const { dataCaches = {} } = await getSyncWithDefault();
+  dataCaches[url] = Date.now();
+  await updateSync({ dataCaches });
+};
+
 /**
  * 同步订阅规则
  * @param {*} url
@@ -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);
     }
@@ -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/sync.js

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

src/libs/webfix.js

@@ -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;
       }

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 || {
@@ -624,8 +625,9 @@ function SubRulesItem({
   syncAt,
   selectedUrl,
   delSub,
-  updateSub,
   setSelectedRules,
+  updateDataCache,
+  deleteDataCache,
 }) {
   const [loading, setLoading] = useState(false);
 
@@ -633,6 +635,7 @@ function SubRulesItem({
     try {
       await delSub(url);
       await delSubRules(url);
+      await deleteDataCache(url);
     } catch (err) {
       console.log("[del subrules]", err);
     }
@@ -645,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 {
@@ -680,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("");
@@ -715,6 +718,7 @@ function SubRulesEdit({ subList, addSub }) {
         throw new Error("empty rules");
       }
       await addSub(url);
+      await updateDataCache(url);
       setShowInput(false);
       setInputText("");
     } catch (err) {
@@ -787,7 +791,6 @@ function SubRules({ subRules }) {
   const {
     subList,
     selectSub,
-    updateSub,
     addSub,
     delSub,
     selectedUrl,
@@ -795,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/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