优化提示

src/chrome/background.ts

@@ -1,8 +1,23 @@
 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_INJECT_TOGGLE_DISPLAY} from '@/const'
+import {MESSAGE_TARGET_INJECT, MESSAGE_TO_EXTENSION_ADD_TASK, MESSAGE_TO_EXTENSION_GET_TASK, MESSAGE_TO_EXTENSION_SHOW_FLAG, MESSAGE_TO_INJECT_TOGGLE_DISPLAY} from '@/const'
 import ExtensionMessage from '@/messaging/ExtensionMessage'
 
+const setBadgeOk = async (tabId: number, ok: boolean) => {
+  await chrome.action.setBadgeText({
+    text: ok ? '✓' : '',
+    tabId,
+  })
+  await chrome.action.setBadgeBackgroundColor({
+    color: '#3245e8',
+    tabId,
+  })
+  await chrome.action.setBadgeTextColor({
+    color: '#ffffff',
+    tabId,
+  })
+}
+
 const methods: {
   [key: string]: (params: any, context: MethodContext) => Promise<any>
 } = {
@@ -42,6 +57,9 @@ const methods: {
       task,
     }
   },
+  [MESSAGE_TO_EXTENSION_SHOW_FLAG]: async (params, context) => {
+    await setBadgeOk(context.sender?.tab?.id!, params.show)
+  },
 }
 // 初始化backgroundMessage
 const extensionMessage = new ExtensionMessage()

src/const.ts

@@ -4,6 +4,7 @@ export const MESSAGE_TARGET_APP = 'BilibiliAPP'
 
 export const MESSAGE_TO_EXTENSION_ADD_TASK = 'addTask'
 export const MESSAGE_TO_EXTENSION_GET_TASK = 'getTask'
+export const MESSAGE_TO_EXTENSION_SHOW_FLAG = 'showFlag'
 
 export const MESSAGE_TO_INJECT_TOGGLE_DISPLAY = 'toggleDisplay'
 export const MESSAGE_TO_INJECT_FOLD = 'fold'

src/inject/inject.ts

@@ -1,4 +1,4 @@
-import { TOTAL_HEIGHT_DEF, HEADER_HEIGHT, TOTAL_HEIGHT_MIN, TOTAL_HEIGHT_MAX, IFRAME_ID, MESSAGE_TO_INJECT_DOWNLOAD_AUDIO, MESSAGE_TARGET_INJECT, MESSAGE_TO_APP_SET_INFOS, MESSAGE_TO_INJECT_TOGGLE_DISPLAY, STORAGE_ENV } from '@/const'
+import { TOTAL_HEIGHT_DEF, HEADER_HEIGHT, TOTAL_HEIGHT_MIN, TOTAL_HEIGHT_MAX, IFRAME_ID, MESSAGE_TO_INJECT_DOWNLOAD_AUDIO, MESSAGE_TARGET_INJECT, MESSAGE_TO_APP_SET_INFOS, MESSAGE_TO_INJECT_TOGGLE_DISPLAY, STORAGE_ENV, MESSAGE_TO_EXTENSION_SHOW_FLAG } from '@/const'
 import { MESSAGE_TO_INJECT_FOLD, MESSAGE_TO_INJECT_MOVE, MESSAGE_TO_APP_SET_VIDEO_INFO, MESSAGE_TO_INJECT_GET_SUBTITLE, MESSAGE_TO_INJECT_GET_VIDEO_STATUS, MESSAGE_TO_INJECT_GET_VIDEO_ELEMENT_INFO, MESSAGE_TO_INJECT_UPDATETRANSRESULT, MESSAGE_TO_INJECT_PLAY, MESSAGE_TO_INJECT_HIDE_TRANS, MESSAGE_TO_INJECT_REFRESH_VIDEO_INFO } from '@/const'
 import InjectMessage from '@/messaging/InjectMessage'
 
@@ -95,6 +95,11 @@ const debug = (...args: any[]) => {
       //insert before first child
       danmukuBox?.insertBefore(iframe, danmukuBox?.firstChild)
 
+      // show badge
+      runtime.injectMessage.sendExtension(MESSAGE_TO_EXTENSION_SHOW_FLAG, {
+        show: true
+      })
+
       debug('iframe inserted')
 
       return iframe
@@ -233,6 +238,9 @@ const debug = (...args: any[]) => {
       const iframe = document.getElementById(IFRAME_ID) as HTMLIFrameElement | undefined
       if (iframe != null) {
         iframe.style.display = iframe.style.display === 'none' ? 'block' : 'none'
+        runtime.injectMessage.sendExtension(MESSAGE_TO_EXTENSION_SHOW_FLAG, {
+          show: iframe.style.display !== 'none'
+        })
       } else {
         createIframe()
       }