feat: implement confirmation before download (#88)

Author: monkeyWie

background/index.ts

@@ -6,13 +6,13 @@ import path from "path"
 import { getPort } from "@plasmohq/messaging/background"
 import { Storage } from "@plasmohq/storage"
 
-import {
-  requestServerSelection
-} from "~background/messages/api/select-server"
+import { requestServerSelection } from "~background/messages/api/select-server"
 import { skip as pressToSkip } from "~background/messages/api/skip"
 import { STORAGE_SETTINGS } from "~constants"
 import { getFullUrl } from "~options/components/RemoteSettings"
 import { defaultSettings, type Settings } from "~options/types"
+import type { Server } from "~types"
+import { getMergedSettings } from "~util/settings"
 
 export { }
 
@@ -78,8 +78,8 @@ const storage = new Storage()
 let settingsCache = defaultSettings
 let isRunningCache = false
 async function refreshSettings(): Promise<Settings> {
-  const settings =
-    (await storage.get<Settings>(STORAGE_SETTINGS)) || defaultSettings
+  const storedSettings = await storage.get<Settings>(STORAGE_SETTINGS)
+  const settings = getMergedSettings(storedSettings)
   settingsCache = settings
   return settings
 }
@@ -292,7 +292,10 @@ function handleRemoteDownload(
   settings: Settings
 ): Function | undefined {
   // If only one server, no servers, or manual selection is disabled, use existing logic
-  if (settings.remote.servers.length <= 1 || !settings.remote.requireManualSelection) {
+  if (
+    settings.remote.servers.length <= 1 ||
+    !settings.remote.requireManualSelection
+  ) {
     const server = settings.remote.servers.find(
       (server) => getFullUrl(server) === settings.remote.selectedServer
     )
@@ -306,7 +309,10 @@ function handleRemoteDownload(
   return async () => {
     try {
       // Show server selector overlay
-      const tabs = await chrome.tabs.query({ active: true, currentWindow: true })
+      const tabs = await chrome.tabs.query({
+        active: true,
+        currentWindow: true
+      })
       if (tabs.length === 0) {
         // Fallback to default server if no active tab
         const defaultServer = settings.remote.servers.find(
@@ -355,8 +361,12 @@ function handleRemoteDownload(
 
       if (selectedServer) {
         // Execute download task and get result
-        const downloadSuccess = await executeDownloadTask(info, selectedServer, settings)
-        
+        const downloadSuccess = await executeDownloadTask(
+          info,
+          selectedServer,
+          settings
+        )
+
         // Send result back to content script to handle popup closure
         await chrome.tabs.sendMessage(tabId, {
           name: "download-result",
@@ -392,7 +402,7 @@ async function executeDownloadTask(
   let notificationTitle: string
   let notificationMessage: string
   let success = false
-  
+
   try {
     await client.createTask({
       req: await toCreateRequest(info)
@@ -411,16 +421,17 @@ async function executeDownloadTask(
     )
     success = false
   }
-  
-  if (settings.remote.notification) {
+
+  // Show notification based on confirmBeforeDownload setting
+  if (settings.confirmBeforeDownload || !success) {
     const port = getPort("notify")
     port.postMessage({
       type: notificationType,
       title: notificationTitle,
       message: notificationMessage
     })
   }
-  
+
   return success
 }
 
@@ -456,7 +467,9 @@ function createDownloadTask(
       )
       success = false
     }
-    if (settings.remote.notification) {
+
+    // Show notification based on confirmBeforeDownload setting or if there's an error
+    if (settings.confirmBeforeDownload || !success) {
       const port = getPort("notify")
       port.postMessage({
         type: notificationType,
@@ -470,6 +483,7 @@ function createDownloadTask(
 
 interface HostRequest<T> {
   method: string
+  meta?: Record<string, any>
   params?: T
 }
 
@@ -496,14 +510,34 @@ function handleNativeDownload(
     try {
       await connectNativeAndPost<string>({
         method: "create",
+        meta: {
+          silent: !settings.confirmBeforeDownload
+        },
         params: btoa(
           JSON.stringify({
             req
           })
         )
       })
+
+      if (!settings.confirmBeforeDownload) {
+        const port = getPort("notify")
+        port.postMessage({
+          type: "success",
+          title: chrome.i18n.getMessage("notification_create_success"),
+          message: chrome.i18n.getMessage("notification_native_success_message")
+        })
+      }
     } catch (e) {
       console.error(e)
+      if (!settings.confirmBeforeDownload) {
+        const port = getPort("notify")
+        port.postMessage({
+          type: "error",
+          title: chrome.i18n.getMessage("notification_create_error"),
+          message: chrome.i18n.getMessage("notification_native_error_message")
+        })
+      }
     }
   }
 }

components/theme.tsx

@@ -2,14 +2,11 @@ import { createTheme, CssBaseline, ThemeProvider } from "@mui/material"
 import type { PropsWithChildren } from "react"
 import { useMemo } from "react"
 
-import { useStorage } from "@plasmohq/storage/hook"
-
-import { STORAGE_SETTINGS } from "~constants"
-import { defaultSettings, type Settings } from "~options/types"
+import { useSettings } from "~hooks/useSettings"
 
 const Theme = ({ children }: PropsWithChildren) => {
-  const [settings] = useStorage<Settings>(STORAGE_SETTINGS, defaultSettings)
-
+  const [settings] = useSettings()
+  
   const theme = useMemo(() => {
     const prefersDarkMode =
       settings.theme === "system"

hooks/useSettings.ts

@@ -0,0 +1,21 @@
+import { useStorage } from "@plasmohq/storage/hook"
+
+import { STORAGE_SETTINGS } from "~constants"
+import { defaultSettings, type Settings } from "~options/types"
+import { getMergedSettings } from "~util/settings"
+
+/**
+ * Custom hook for managing settings with automatic merging of default values
+ * @returns [mergedSettings, setStoredSettings] tuple
+ */
+export function useSettings() {
+  const [storedSettings, setStoredSettings] = useStorage<Settings>(
+    STORAGE_SETTINGS,
+    defaultSettings
+  )
+  
+  // Use merged settings to ensure new fields have default values
+  const settings = getMergedSettings(storedSettings)
+  
+  return [settings, setStoredSettings] as const
+}

locales/en/messages.json

@@ -164,6 +164,18 @@
   "ctrl_disable_capture_desc": {
     "message": "Hold %key% key to temporarily disable download capture"
   },
+  "confirm_before_download": {
+    "message": "Confirm Before Download"
+  },
+  "confirm_before_download_desc": {
+    "message": "Show confirmation dialog before starting download"
+  },
+  "notification_native_success_message": {
+    "message": "Task successfully added to downloader"
+  },
+  "notification_native_error_message": {
+    "message": "Task creation failed, please check if downloader is working properly"
+  },
   "select_server": {
     "message": "Select Server"
   },

locales/zh/messages.json

@@ -152,6 +152,12 @@
   "notification_create_error_message": {
     "message": "任务添加失败，请检查下载服务器是否正常"
   },
+  "notification_native_success_message": {
+    "message": "任务已成功添加到下载器"
+  },
+  "notification_native_error_message": {
+    "message": "任务添加失败，请检查下载器是否正常"
+  },
   "no_servers_tip": {
     "message": "暂无服务器，点击上方按钮添加"
   },
@@ -164,6 +170,12 @@
   "ctrl_disable_capture_desc": {
     "message": "按住 %key% 键时临时禁用下载捕获"
   },
+  "confirm_before_download": {
+    "message": "下载前确认"
+  },
+  "confirm_before_download_desc": {
+    "message": "在开始下载前显示确认对话框"
+  },
   "select_server": {
     "message": "选择服务器"
   },

options/components/BasicSettings.tsx

@@ -10,23 +10,19 @@ import {
   Typography
 } from "@mui/material"
 
-import { useStorage } from "@plasmohq/storage/hook"
 
-import { STORAGE_SETTINGS } from "~constants"
+import { useSettings } from "~hooks/useSettings"
 import { getContrlKey } from "~util"
 
-import { defaultSettings, type Settings } from "../types"
 import SavedTip, { useTip } from "./SavedTip"
 
 const BasicSettings = () => {
-  const [settings, setSettings] = useStorage<Settings>(
-    STORAGE_SETTINGS,
-    defaultSettings
-  )
+  const [settings, setStoredSettings] = useSettings()
+  
   const { showTip, message, setMessage } = useTip()
 
   const handleChange = (field: string, value: any) => {
-    setSettings((prev) => ({ ...prev, [field]: value }))
+    setStoredSettings((prev) => ({ ...prev, [field]: value }))
     showTip()
   }
 
@@ -66,7 +62,20 @@ const BasicSettings = () => {
               onChange={(e) => handleChange("enabled", e.target.checked)}
             />
           </Box>
-
+          
+          <Box sx={{ display: "flex", alignItems: "flex-start", px: 1 }}>
+            {renderLabel(
+              chrome.i18n.getMessage("confirm_before_download"),
+              chrome.i18n.getMessage("confirm_before_download_desc")
+            )}
+            <Switch
+              checked={settings.confirmBeforeDownload}
+              onChange={(e) =>
+                handleChange("confirmBeforeDownload", e.target.checked)
+              }
+            />
+          </Box>
+          
           <Box sx={{ display: "flex", alignItems: "flex-start", px: 1 }}>
             {renderLabel(
               chrome.i18n.getMessage("auto_wakeup"),

options/components/RemoteSettings.tsx

@@ -27,12 +27,11 @@ import {
 import { useState } from "react"
 
 import { sendToBackground } from "@plasmohq/messaging"
-import { useStorage } from "@plasmohq/storage/hook"
 
 import type { CheckResult } from "~background/messages/api/check"
-import { STORAGE_SETTINGS } from "~constants"
+import { useSettings } from "~hooks/useSettings"
+import type { Server } from "~types"
 
-import { defaultSettings, type Settings } from "../types"
 import SavedTip, { useTip } from "./SavedTip"
 
 interface ServerFormData extends Server {
@@ -44,10 +43,8 @@ export const getFullUrl = (server: Server) =>
   `${server.protocol}://${server.url}`
 
 export default function RemoteSettings() {
-  const [settings, setSettings] = useStorage<Settings>(
-    STORAGE_SETTINGS,
-    defaultSettings
-  )
+  const [settings, setStoredSettings] = useSettings()
+  
   const { showTip, message, setMessage } = useTip()
   const [open, setOpen] = useState(false)
   const [editingServerUrl, setEditingServerUrl] = useState<string | null>(null)
@@ -63,15 +60,15 @@ export default function RemoteSettings() {
       showTip("no_server_error", "error")
       return
     }
-    setSettings({
+    setStoredSettings({
       ...settings,
       remote: { ...settings.remote, enabled: checked }
     })
     showTip()
   }
 
   const handleServerSelect = (fullUrl: string) => {
-    setSettings({
+    setStoredSettings({
       ...settings,
       remote: { ...settings.remote, selectedServer: fullUrl }
     })
@@ -107,7 +104,7 @@ export default function RemoteSettings() {
 
     // When deleting the last server, clear selection and disable remote download
     const isLastServer = newServers.length === 0
-    setSettings({
+    setStoredSettings({
       ...settings,
       remote: {
         ...settings.remote,
@@ -154,7 +151,7 @@ export default function RemoteSettings() {
 
     // When adding the first server, automatically select it but don't enable remote download
     const isFirstServer = settings.remote.servers.length === 0
-    setSettings({
+    setStoredSettings({
       ...settings,
       remote: {
         ...settings.remote,
@@ -232,7 +229,7 @@ export default function RemoteSettings() {
         <Switch
           checked={settings.remote.notification}
           onChange={(e) => {
-            setSettings({
+            setStoredSettings({
               ...settings,
               remote: { ...settings.remote, notification: e.target.checked }
             })
@@ -250,7 +247,7 @@ export default function RemoteSettings() {
         <Switch
           checked={settings.remote.requireManualSelection}
           onChange={(e) => {
-            setSettings({
+            setStoredSettings({
               ...settings,
               remote: { ...settings.remote, requireManualSelection: e.target.checked }
             })