fix: add context for setting provider

src/hooks/Setting.js

@@ -25,17 +25,15 @@ const SettingContext = createContext({
   reloadSetting: () => {},
 });
 
-export function SettingProvider({ children, isSettingPage = false }) {
+export function SettingProvider({ children, context }) {
+  const isOptionsPage = useMemo(() => context === "options", [context]);
+
   const {
     data: setting,
     isLoading,
     update,
     reload,
-  } = useStorage(
+  } = useStorage(STOKEY_SETTING, DEFAULT_SETTING, KV_SETTING_KEY);
-    STOKEY_SETTING,
-    DEFAULT_SETTING,
-    isSettingPage ? KV_SETTING_KEY : ""
-  );
 
   useEffect(() => {
     if (typeof setting?.darkMode === "boolean") {
@@ -47,7 +45,7 @@ export function SettingProvider({ children, isSettingPage = false }) {
   }, [setting?.darkMode, update]);
 
   useEffect(() => {
-    if (!isSettingPage) return;
+    if (!isOptionsPage) return;
 
     (async () => {
       try {
@@ -59,7 +57,7 @@ export function SettingProvider({ children, isSettingPage = false }) {
         logger.error("Failed to fetch log level, using default.", error);
       }
     })();
-  }, [isSettingPage, setting?.logLevel]);
+  }, [isOptionsPage, setting?.logLevel]);
 
   const updateSetting = useCallback(
     (objOrFn) => {
@@ -81,21 +79,21 @@ export function SettingProvider({ children, isSettingPage = false }) {
 
   const value = useMemo(
     () => ({
-      isSettingPage,
+      context,
       setting,
       updateSetting,
       updateChild,
       reloadSetting: reload,
     }),
-    [isSettingPage, setting, updateSetting, updateChild, reload]
+    [context, setting, updateSetting, updateChild, reload]
   );
 
   if (isLoading) {
-    return isSettingPage ? <Loading /> : null;
+    return isOptionsPage ? <Loading /> : null;
   }
 
   if (!setting) {
-    return isSettingPage ? (
+    return isOptionsPage ? (
       <center>
         <Alert severity="error" sx={{ maxWidth: 600, margin: "60px auto" }}>
           <p>数据加载出错，请刷新页面或卸载后重新安装。</p>

src/hooks/Storage.js

@@ -3,7 +3,7 @@ import { storage } from "../libs/storage";
 import { kissLog } from "../libs/log";
 import { syncData } from "../libs/sync";
 import { useDebouncedCallback } from "./DebouncedCallback";
-import { getContext } from "../libs/browser";
+import { isOptions } from "../libs/browser";
 
 /**
  * 用于将组件状态与 Storage 同步
@@ -80,8 +80,7 @@ export function useStorage(key, defaultVal = null, syncKey = "") {
     });
 
     // 触发远端同步
-    const context = getContext();
+    if (syncKey && isOptions()) {
-    if (syncKey && context === "options") {
       debouncedSync(syncKey, data);
     }
   }, [key, syncKey, isLoading, data, debouncedSync]);

src/libs/browser.js

@@ -37,6 +37,7 @@ export const getContext = () => {
 };
 
 export const isBg = () => getContext() === "background";
+export const isOptions = () => getContext() === "options";
 
 export const isBuiltinAIAvailable =
   "LanguageDetector" in globalThis && "Translator" in globalThis;

src/libs/cache.js

@@ -16,7 +16,7 @@ import { blobToBase64 } from "./utils";
  */
 export const tryClearCaches = async () => {
   try {
-    if (isExt && !isBg) {
+    if (isExt && !isBg()) {
       await sendBgMsg(MSG_CLEAR_CACHES);
     } else {
       await caches.delete(CACHE_NAME);

src/popup.js

@@ -9,7 +9,7 @@ globalThis.__KISS_CONTEXT__ = "popup";
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
-    <SettingProvider>
+    <SettingProvider context="popup">
       <ThemeProvider>
         <Popup />
       </ThemeProvider>

src/views/Action/ContentFab.js

@@ -45,7 +45,7 @@ export default function ContentFab({
   );
 
   return (
-    <SettingProvider>
+    <SettingProvider context="fab">
       <ThemeProvider>
         <Draggable
           key="fab"

src/views/Action/index.js

@@ -70,7 +70,7 @@ export default function Action({ translator, processActions }) {
   }, [windowSize]);
 
   return (
-    <SettingProvider>
+    <SettingProvider context="contentPopup">
       <ThemeProvider>
         {showPopup && (
           <Draggable

src/views/Options/index.js

@@ -99,7 +99,7 @@ export default function Options() {
   }
 
   return (
-    <SettingProvider isSettingPage={true}>
+    <SettingProvider context="options">
       <ThemeProvider>
         <AlertProvider>
           <ConfirmProvider>

src/views/Selection/TranBox.js

@@ -141,7 +141,7 @@ export default function TranBox({
   const [mouseHover, setMouseHover] = useState(false);
   // todo: 这里的 SettingProvider 不应和 background 的共用
   return (
-    <SettingProvider>
+    <SettingProvider context="tranbox">
       <ThemeProvider styles={extStyles}>
         {showBox && (
           <DraggableResizable