优化提示

package.json

@@ -47,7 +47,7 @@
   "devDependencies": {
     "@tailwindcss/line-clamp": "^0.4.2",
     "@tailwindcss/typography": "^0.5.8",
-    "@types/chrome": "^0.0.203",
+    "@types/chrome": "^0.0.277",
     "@types/js-search": "^1.4.0",
     "@types/lodash-es": "^4.17.6",
     "@types/node": "^20.8.10",

pnpm-lock.yaml

@@ -106,8 +106,8 @@ importers:
         specifier: ^0.5.8
         version: 0.5.8(tailwindcss@3.2.4(postcss@8.4.19))
       '@types/chrome':
-        specifier: ^0.0.203
+        specifier: ^0.0.277
-        version: 0.0.203
+        version: 0.0.277
       '@types/js-search':
         specifier: ^1.4.0
         version: 1.4.0
@@ -468,8 +468,8 @@ packages:
       react: '>=16.8'
       react-dom: '>=16.8'
 
-  '@types/chrome@0.0.203':
+  '@types/chrome@0.0.277':
-    resolution: {integrity: sha512-JlQNebwpBETVc8U1Rr2inDFuOTtn0lahRAhnddx1dd0S5RrLAFJEEsyIu7AXI14mkCgSunksnuLGioH8kvBqRA==}
+    resolution: {integrity: sha512-qoTgBcDWblSsX+jvFnpUlLUE3LAuOhZfBh9MyMWMQHDsQiYVgBvdZWu9COrdB9+aNnInEyXcFgfc2HE16sdSYQ==}
 
   '@types/debug@4.1.7':
     resolution: {integrity: sha512-9AonUzyTjXXhEOa0DnqpzZi6VHlqKMswga9EXjpXnnqxwLtdvPPtlO8evrI5D9S6asFRCQ6v+wpiUKbw+vKqyg==}
@@ -2922,7 +2922,7 @@ snapshots:
       react-dom: 18.2.0(react@18.2.0)
       tippy.js: 6.3.7
 
-  '@types/chrome@0.0.203':
+  '@types/chrome@0.0.277':
     dependencies:
       '@types/filesystem': 0.0.32
       '@types/har-format': 1.2.8

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()
       }