Fix badge display error with mutiple monitors open (#398)

Author: sheepzh

package.json

@@ -32,12 +32,12 @@
         "@rsdoctor/webpack-plugin": "^0.4.13",
         "@swc/core": "^1.10.18",
         "@swc/jest": "^0.2.37",
-        "@types/chrome": "0.0.305",
+        "@types/chrome": "0.0.306",
         "@types/decompress": "^4.2.7",
         "@types/echarts": "^5.0.0",
         "@types/generate-json-webpack-plugin": "^0.3.7",
         "@types/jest": "^29.5.14",
-        "@types/node": "^22.13.4",
+        "@types/node": "^22.13.5",
         "@types/psl": "^1.1.3",
         "@types/punycode": "^2.1.4",
         "@types/webpack": "^5.28.5",
@@ -46,7 +46,7 @@
         "copy-webpack-plugin": "^12.0.2",
         "css-loader": "^7.1.2",
         "decompress": "^4.2.1",
-        "eslint": "^9.20.1",
+        "eslint": "^9.21.0",
         "filemanager-webpack-plugin": "^8.0.0",
         "generate-json-webpack-plugin": "^2.0.0",
         "html-webpack-plugin": "^5.6.3",

src/api/chrome/action.ts

@@ -3,8 +3,8 @@ import { handleError } from "./common"
 
 const action = IS_MV3 ? chrome.action : chrome.browserAction
 
-export function setBadgeText(text: string): Promise<void> {
-    return new Promise(resolve => action?.setBadgeText({ text }, () => {
+export function setBadgeText(text: string, tabId: number): Promise<void> {
+    return new Promise(resolve => action?.setBadgeText({ text, tabId }, () => {
         handleError('setBadgeText')
         resolve()
     }))

src/background/badge-manager.ts

@@ -43,7 +43,7 @@ function mill2Str(milliseconds: number) {
 
 function setBadgeTextOfMills(milliseconds: number | undefined, tabId: number | undefined) {
     const text = milliseconds === undefined ? '' : mill2Str(milliseconds)
-    setBadgeText(text)
+    setBadgeText(text, tabId)
 }
 
 async function findActiveTab(): Promise<BadgeLocation> {
@@ -61,6 +61,14 @@ async function findActiveTab(): Promise<BadgeLocation> {
     return { tabId: tab.id, url: tab.url }
 }
 
+async function clearAllBadge(): Promise<void> {
+    const tabs = await listTabs()
+    if (!tabs?.length) return
+    for (const tab of tabs) {
+        await setBadgeText('', tab?.id)
+    }
+}
+
 type BadgeState = 'HIDDEN' | 'NOT_SUPPORTED' | 'PAUSED' | 'TIME' | 'WHITELIST'
 
 class BadgeManager {
@@ -106,8 +114,9 @@ class BadgeManager {
 
     private processOption(option: timer.option.AppearanceOption) {
         const { displayBadgeText, badgeBgColor } = option || {}
+        const before = this.visible
         this.visible = !!displayBadgeText
-        this.render()
+        !this.visible && before && clearAllBadge()
         setBadgeBgColor(badgeBgColor)
     }
 
@@ -118,20 +127,20 @@ class BadgeManager {
     private async processState(): Promise<BadgeState> {
         const { url, tabId, focus } = this.current || {}
         if (!this.visible || !url) {
-            this.state !== 'HIDDEN' && setBadgeText('')
+            this.state !== 'HIDDEN' && setBadgeText('', tabId)
             return 'HIDDEN'
         }
         if (isBrowserUrl(url)) {
-            this.state !== 'NOT_SUPPORTED' && setBadgeText('∅')
+            this.state !== 'NOT_SUPPORTED' && setBadgeText('∅', tabId)
             return 'NOT_SUPPORTED'
         }
         const host = extractHostname(url)?.host
         if (whitelistHolder.contains(host, url)) {
-            this.state !== 'WHITELIST' && setBadgeText('W')
+            this.state !== 'WHITELIST' && setBadgeText('W', tabId)
             return 'WHITELIST'
         }
         if (this.pausedTabId === tabId) {
-            this.state !== 'PAUSED' && setBadgeText('P')
+            this.state !== 'PAUSED' && setBadgeText('P', tabId)
             return 'PAUSED'
         }
         const milliseconds = focus || (host ? (await statDatabase.get(host, new Date())).focus : undefined)