Support to change the backgound color of badge (#279)

Author: sheepzh

src/api/chrome/action.ts

@@ -1,4 +1,4 @@
-import { IS_MV3 } from "@util/constant/environment"
+import { IS_FIREFOX, IS_MV3 } from "@util/constant/environment"
 import { handleError } from "./common"
 
 const action = IS_MV3 ? chrome.action : chrome.browserAction
@@ -8,4 +8,19 @@ export function setBadgeText(text: string, tabId: number): Promise<void> {
         handleError('setBadgeText')
         resolve()
     }))
+}
+
+export function setBadgeBgColor(color: string | chrome.action.ColorArray): Promise<void> {
+    if (!color) {
+        if (IS_FIREFOX) {
+            // Use null to clear bg color for Firefox
+            color = null
+        } else {
+            color = [0, 0, 0, 0]
+        }
+    }
+    return new Promise(resolve => action?.setBadgeBackgroundColor({ color }, () => {
+        handleError('setBadgeColor')
+        resolve()
+    }))
 }

src/app/components/Option/components/AppearanceOption/index.tsx

@@ -7,7 +7,7 @@
 
 import type { UnwrapRef } from "vue"
 
-import { ElMessageBox, ElOption, ElSelect, ElSwitch } from "element-plus"
+import { ElColorPicker, ElMessageBox, ElOption, ElSelect, ElSwitch } from "element-plus"
 import { defineComponent, reactive, unref, watch } from "vue"
 import optionService from "@service/option-service"
 import { defaultAppearance } from "@util/constant/option"
@@ -26,6 +26,7 @@ const allLocaleOptions: timer.option.LocaleOption[] = ["default", ...SORTED_LOCA
 function copy(target: timer.option.AppearanceOption, source: timer.option.AppearanceOption) {
     target.displayWhitelistMenu = source.displayWhitelistMenu
     target.displayBadgeText = source.displayBadgeText
+    target.badgeBgColor = source.badgeBgColor
     target.locale = source.locale
     target.printInConsole = source.printInConsole
     target.darkMode = source.darkMode
@@ -119,6 +120,16 @@ const _default = defineComponent((_props, ctx) => {
                     onChange={(val: boolean) => option.displayBadgeText = val}
                 />
             </OptionItem>
+            <OptionItem
+                v-show={option.displayBadgeText}
+                label={msg => msg.option.appearance.badgeBgColor}
+            >
+                <ElColorPicker
+                    size="small"
+                    modelValue={option.badgeBgColor}
+                    onChange={val => option.badgeBgColor = val}
+                />
+            </OptionItem>
             <OptionItem
                 label={msg => msg.option.appearance.printInConsole.label}
                 defaultValue={t(msg => msg.option.yes)}

src/app/components/Option/style/index.sass

@@ -61,6 +61,8 @@
                     margin-left: 5px
             .el-switch
                 margin-right: 6px
+            .el-color-picker
+                margin-left: 6px
             .option-tag
                 color: #F56C6C
                 margin: 0 3px

src/background/badge-text-manager.ts src/background/badge-manager.tssrc/background/badge-text-manager.ts renamed to src/background/badge-manager.ts

@@ -5,7 +5,7 @@
  * https://opensource.org/licenses/MIT
  */
 
-import { setBadgeText } from "@api/chrome/action"
+import { setBadgeBgColor, setBadgeText } from "@api/chrome/action"
 import { listTabs } from "@api/chrome/tab"
 import { getFocusedNormalWindow } from "@api/chrome/window"
 import StatDatabase from "@db/stat-database"
@@ -82,14 +82,14 @@ async function updateFocus(badgeLocation?: BadgeLocation, lastLocation?: BadgeLo
     return badgeLocation
 }
 
-class BadgeTextManager {
+class BadgeManager {
     isPaused: boolean
     lastLocation: BadgeLocation
 
     async init() {
-        const option: Partial<timer.option.AllOption> = await optionService.getAllOption()
-        this.pauseOrResumeAccordingToOption(!!option.displayBadgeText)
-        optionService.addOptionChangeListener(({ displayBadgeText }) => this.pauseOrResumeAccordingToOption(displayBadgeText))
+        const option: timer.option.AllOption = await optionService.getAllOption()
+        this.processOption(option)
+        optionService.addOptionChangeListener(opt => this.processOption(opt))
         whitelistHolder.addPostHandler(updateFocus)
     }
 
@@ -116,9 +116,11 @@ class BadgeTextManager {
         this.lastLocation = await updateFocus(badgeLocation, this.lastLocation)
     }
 
-    private pauseOrResumeAccordingToOption(displayBadgeText: boolean) {
+    private processOption(option: timer.option.AppearanceOption) {
+        const { displayBadgeText, badgeBgColor } = option || {}
         displayBadgeText ? this.resume() : this.pause()
+        setBadgeBgColor(badgeBgColor)
     }
 }
 
-export default new BadgeTextManager()
+export default new BadgeManager()

src/background/index.ts

@@ -11,7 +11,7 @@ import BrowserActionMenuManager from "./browser-action-menu-manager"
 import IconAndAliasCollector from "./icon-and-alias-collector"
 import VersionManager from "./version-manager"
 import ActiveTabListener from "./active-tab-listener"
-import badgeTextManager from "./badge-text-manager"
+import badgeTextManager from "./badge-manager"
 import MessageDispatcher from "./message-dispatcher"
 import initLimitProcessor from "./limit-processor"
 import initCsHandler from "./content-script-handler"

src/background/timer/server.ts

@@ -4,7 +4,7 @@ import limitService from "@service/limit-service"
 import periodService from "@service/period-service"
 import statService from "@service/stat-service"
 import { extractHostname } from "@util/pattern"
-import badgeTextManager from "../badge-text-manager"
+import badgeManager from "../badge-manager"
 import MessageDispatcher from "../message-dispatcher"
 import optionService from "@service/option-service"
 
@@ -46,7 +46,7 @@ async function handleEvent(event: timer.stat.Event, sender: ChromeMessageSender)
         // Cause there is no way to determine whether this tab is selected in screen-split mode
         // So only show badge for first tab for screen-split mode
         // @see #246
-        firstActiveTab?.id === tabId && badgeTextManager.forceUpdate({ tabId, url })
+        firstActiveTab?.id === tabId && badgeManager.forceUpdate({ tabId, url })
     }
 }
 

src/i18n/message/app/option-resource.json

@@ -17,6 +17,7 @@
             "whitelistItem": "白名单",
             "contextMenu": "浏览器的右键菜单",
             "displayBadgeText": "{input}  是否在 {icon} 上，显示 {timeInfo}",
+            "badgeBgColor": "图标上文本的背景色 {input}",
             "icon": "扩展图标",
             "badgeTextContent": "当前网站的今日浏览时长",
             "locale": {
@@ -253,6 +254,7 @@
             "whitelistItem": "whitelist related shortcuts",
             "contextMenu": "the context menu",
             "displayBadgeText": "{input}  Whether to display {timeInfo} in {icon}",
+            "badgeBgColor": "The background color of the text on the icon {input}",
             "icon": "the icon of extension",
             "badgeTextContent": "the browsing time of current website",
             "locale": {

src/i18n/message/app/option.ts

@@ -27,6 +27,7 @@ export type OptionMessage = {
         contextMenu: string
         // badge text
         displayBadgeText: string
+        badgeBgColor: string
         icon: string
         badgeTextContent: string
         locale: {

types/timer/option.d.ts

@@ -75,6 +75,12 @@ declare namespace timer.option {
          * @since 0.3.3
          */
         displayBadgeText: boolean
+        /**
+         * The background color of badge text
+         *
+         * @since 2.3.0
+         */
+        badgeBgColor?: string
         /**
          * The language of this extension
          *