feat: add confirmBrowserExtensionAsync function and integrate it into DataSetting and SyncSetting components

src/containers/settings/dataSetting/component.tsx

@@ -3,6 +3,7 @@ import { SettingInfoProps, SettingInfoState } from "./interface";
 import { Trans } from "react-i18next";
 import {
   clearAllData,
+  confirmBrowserExtensionAsync,
   generateSyncRecord,
   getStorageLocation,
   getWebsiteUrl,
@@ -98,6 +99,12 @@ class DataSetting extends React.Component<SettingInfoProps, SettingInfoState> {
       return;
     }
 
+    if (!isElectron) {
+      if (!(await confirmBrowserExtensionAsync())) {
+        return;
+      }
+    }
+
     const savedConfig =
       ConfigService.getObjectConfig(
         "koReaderSyncConfig",
@@ -207,6 +214,12 @@ class DataSetting extends React.Component<SettingInfoProps, SettingInfoState> {
     const currentlyEnabled = this.state[item.propName];
 
     if (!currentlyEnabled && item.requiresAuth) {
+      if (!isElectron) {
+        if (!(await confirmBrowserExtensionAsync())) {
+          return;
+        }
+      }
+
       // Special case: Markdown sync uses a folder picker in Electron
       if (item.propName === "isEnableMarkdownSync" && isElectron) {
         const { ipcRenderer } = window.require("electron");

src/containers/settings/syncSetting/component.tsx

@@ -9,6 +9,7 @@ import { syncSettingList } from "../../../constants/settingList";
 
 import toast from "react-hot-toast";
 import {
+  confirmBrowserExtensionAsync,
   generateSyncRecord,
   getICloudDrivePath,
   getServerRegion,
@@ -99,20 +100,7 @@ class SyncSetting extends React.Component<SettingInfoProps, SettingInfoState> {
       !isElectron &&
       driveList.find((item) => item.value === targetDrive)?.needExtension
     ) {
-      let result = await vexComfirmAsync(
-        "Due to browser security restrictions, you may not be able to use this data source properly. If you encounter any issues, you can resolve them by installing our browser extension.",
-        "Confirm",
-        "Install extension"
-      );
-      if (!result) {
-        if (
-          ConfigService.getReaderConfig("lang") &&
-          ConfigService.getReaderConfig("lang").startsWith("zh")
-        ) {
-          openExternalUrl(getWebsiteUrl() + "/zh/use-extension");
-        } else {
-          openExternalUrl(getWebsiteUrl() + "/en/use-extension");
-        }
+      if (!(await confirmBrowserExtensionAsync())) {
         return;
       }
     }

src/utils/common.ts

@@ -137,6 +137,22 @@ export const vexComfirmAsync = (
     });
   });
 };
+export const confirmBrowserExtensionAsync = async (): Promise<boolean> => {
+  const result = await vexComfirmAsync(
+    "Due to browser security restrictions, you may not be able to use this data source properly. If you encounter any issues, you can resolve them by installing our browser extension.",
+    "Confirm",
+    "Install extension"
+  );
+  if (!result) {
+    const lang = ConfigService.getReaderConfig("lang");
+    openExternalUrl(
+      getWebsiteUrl() +
+        (lang?.startsWith("zh") ? "/zh/use-extension" : "/en/use-extension")
+    );
+    return false;
+  }
+  return true;
+};
 export const vexOpenAsync = (
   config: Record<string, any>,
   message: string,