fix

src/chrome/background.ts

@@ -1,6 +1,6 @@
 import {v4} from 'uuid'
 import {handleTask, initTaskService, tasksMap} from './taskService'
-import {MESSAGE_TARGET_INJECT, MESSAGE_TO_EXTENSION_ADD_TASK, MESSAGE_TO_EXTENSION_GET_TASK, MESSAGE_TO_EXTENSION_SHOW_FLAG, MESSAGE_TO_INJECT_TOGGLE_DISPLAY, STORAGE_ENV} from '@/consts/const'
+import {MESSAGE_TARGET_INJECT, MESSAGE_TO_EXTENSION_ADD_TASK, MESSAGE_TO_EXTENSION_CLOSE_SIDE_PANEL, MESSAGE_TO_EXTENSION_GET_TASK, MESSAGE_TO_EXTENSION_SHOW_FLAG, MESSAGE_TO_INJECT_TOGGLE_DISPLAY, STORAGE_ENV} from '@/consts/const'
 import ExtensionMessage from '@/messaging/ExtensionMessage'
 
 const setBadgeOk = async (tabId: number, ok: boolean) => {
@@ -18,9 +18,21 @@ const setBadgeOk = async (tabId: number, ok: boolean) => {
   })
 }
 
+const closeSidePanel = async () => {
+  chrome.sidePanel.setOptions({
+    enabled: false,
+  })
+  chrome.sidePanel.setPanelBehavior({
+    openPanelOnActionClick: false,
+  })
+}
+
 const methods: {
   [key: string]: (params: any, context: MethodContext) => Promise<any>
 } = {
+  [MESSAGE_TO_EXTENSION_CLOSE_SIDE_PANEL]: async (params, context) => {
+    closeSidePanel()
+  },
   [MESSAGE_TO_EXTENSION_ADD_TASK]: async (params, context) => {
     // 新建任务
     const task: Task = {
@@ -101,12 +113,7 @@ chrome.action.onClicked.addListener(async (tab) => {
         tabId: tab.id!,
       })
     } else {
-      chrome.sidePanel.setOptions({
+      closeSidePanel()
-        enabled: false,
-      })
-      chrome.sidePanel.setPanelBehavior({
-        openPanelOnActionClick: false,
-      })
       extensionMessage.broadcastMessageExact([tab.id!], MESSAGE_TARGET_INJECT, MESSAGE_TO_INJECT_TOGGLE_DISPLAY).catch(console.error)
     }
   })

src/consts/const.ts

@@ -3,6 +3,7 @@ export const MESSAGE_TARGET_INJECT = 'BilibiliInject'
 export const MESSAGE_TARGET_APP = 'BilibiliAPP'
 
 export const MESSAGE_TO_EXTENSION_ROUTE_MSG = 'routeMsg'
+export const MESSAGE_TO_EXTENSION_CLOSE_SIDE_PANEL = 'closeSidePanel'
 export const MESSAGE_TO_EXTENSION_ADD_TASK = 'addTask'
 export const MESSAGE_TO_EXTENSION_GET_TASK = 'getTask'
 export const MESSAGE_TO_EXTENSION_SHOW_FLAG = 'showFlag'

src/pages/OptionsPage.tsx

@@ -9,6 +9,7 @@ import {
   HEADER_HEIGHT,
   LANGUAGE_DEFAULT,
   LANGUAGES,
+  MESSAGE_TO_EXTENSION_CLOSE_SIDE_PANEL,
   MODEL_DEFAULT,
   MODEL_MAP,
   MODEL_TIP,
@@ -28,6 +29,7 @@ import classNames from 'classnames'
 import toast from 'react-hot-toast'
 import {useBoolean, useEventTarget} from 'ahooks'
 import {useEventChecked} from '@kky002/kky-hooks'
+import useMessage from '@/messaging/useMessage'
 
 const Section = (props: {
   title: ShowElement
@@ -59,6 +61,7 @@ const FormItem = (props: {
 const OptionsPage = () => {
   const dispatch = useAppDispatch()
   const envData = useAppSelector(state => state.env.envData)
+  const {sendExtension} = useMessage()
   const {value: sidePanelValue, onChange: setSidePanelValue} = useEventChecked(envData.sidePanel)
   const {value: autoInsertValue, onChange: setAutoInsertValue} = useEventChecked(!envData.manualInsert)
   const {value: autoExpandValue, onChange: setAutoExpandValue} = useEventChecked(envData.autoExpand)
@@ -140,11 +143,12 @@ const OptionsPage = () => {
       askEnabled: askEnabledValue,
     }))
     toast.success('保存成功')
+    sendExtension(MESSAGE_TO_EXTENSION_CLOSE_SIDE_PANEL)
     // 3秒后关闭
     setTimeout(() => {
       window.close()
     }, 3000)
-  }, [dispatch, sidePanelValue, autoInsertValue, autoExpandValue, aiTypeValue, apiKeyValue, serverUrlValue, modelValue, customModelValue, customModelTokensValue, geminiApiKeyValue, translateEnableValue, languageValue, hideOnDisableAutoTranslateValue, themeValue, transDisplayValue, summarizeEnableValue, summarizeFloatValue, summarizeLanguageValue, wordsValue, fetchAmountValue, fontSizeValue, promptsValue, searchEnabledValue, cnSearchEnabledValue, askEnabledValue])
+  }, [dispatch, sendExtension, sidePanelValue, autoInsertValue, autoExpandValue, aiTypeValue, apiKeyValue, serverUrlValue, modelValue, customModelValue, customModelTokensValue, geminiApiKeyValue, translateEnableValue, languageValue, hideOnDisableAutoTranslateValue, themeValue, transDisplayValue, summarizeEnableValue, summarizeFloatValue, summarizeLanguageValue, wordsValue, fetchAmountValue, fontSizeValue, promptsValue, searchEnabledValue, cnSearchEnabledValue, askEnabledValue])
 
   const onCancel = useCallback(() => {
     window.close()