refactor(tracking): refactor tab states monitoring and tracking options (#415)

Author: sheepzh

package.json

@@ -34,7 +34,7 @@
         "@rsdoctor/rspack-plugin": "^1.3.8",
         "@rspack/cli": "^1.6.1",
         "@rspack/core": "^1.6.1",
-        "@swc/core": "^1.15.0",
+        "@swc/core": "^1.15.1",
         "@swc/jest": "^0.2.39",
         "@types/chrome": "0.1.27",
         "@types/decompress": "^4.2.7",
@@ -54,7 +54,7 @@
         "postcss": "^8.5.6",
         "postcss-loader": "^8.2.0",
         "postcss-rtlcss": "^5.7.1",
-        "puppeteer": "^24.29.0",
+        "puppeteer": "^24.29.1",
         "ts-loader": "^9.5.4",
         "ts-node": "^10.9.2",
         "tsconfig-paths": "^4.2.0",
@@ -65,7 +65,7 @@
         "echarts": "^6.0.0",
         "element-plus": "2.11.7",
         "punycode": "^2.3.1",
-        "vue": "^3.5.23",
+        "vue": "^3.5.24",
         "vue-router": "^4.6.3"
     },
     "engines": {

src/api/chrome/runtime.ts

@@ -40,6 +40,18 @@ export function sendMsg2Runtime<T = any, R = any>(code: timer.mq.ReqCode, data?:
     })
 }
 
+/**
+ * Wrap for hooks, after the extension reloaded or upgraded, the context of current content script will be invalid
+ * And sending messages to the runtime will be failed
+ */
+export async function trySendMsg2Runtime<Req, Res>(code: timer.mq.ReqCode, data?: Req): Promise<Res | undefined> {
+    try {
+        return await sendMsg2Runtime(code, data)
+    } catch {
+        // ignored
+    }
+}
+
 export function onRuntimeMessage<T = any, R = any>(handler: ChromeMessageHandler<T, R>): void {
     // Be careful!!!
     // Can't use await/async in callback parameter

src/api/chrome/tab.ts

@@ -92,25 +92,31 @@ export function sendMsg2Tab<T = any, R = any>(tabId: number, code: timer.mq.ReqC
     })
 }
 
-type TabHandler<Event> = (tabId: number, ev: Event, tab?: ChromeTab) => void
+export async function trySendMsg2Tab<T = any, R = any>(
+    tabId: number,
+    code: timer.mq.ReqCode,
+    data?: T
+): Promise<R | undefined> {
+    try {
+        return await sendMsg2Tab<T, R>(tabId, code, data)
+    } catch (e) {
+        console.warn(`Errored to send message to tab: tabId=${tabId}, code=${code}, data=${JSON.stringify(data)}`, e)
+        return Promise.resolve(undefined)
+    }
+}
+
+type TabHandler<Event> = (tabId: number, ev: Event, tab: ChromeTab) => void
 
-export function onTabActivated(handler: TabHandler<ChromeTabActiveInfo>): void {
-    chrome.tabs.onActivated.addListener((activeInfo: chrome.tabs.OnActivatedInfo) => {
+export function onTabActivated(handler: (tabId: number, info: ChromeTabActiveInfo) => void): void {
+    chrome.tabs.onActivated.addListener(activeInfo => {
         handleError("tabActivated")
-        handler(activeInfo?.tabId, activeInfo)
+        handler(activeInfo.tabId, activeInfo)
     })
 }
 
-export function onTabUpdated(handler: TabHandler<ChromeTabChangeInfo>): void {
-    chrome.tabs.onUpdated.addListener((tabId: number, changeInfo: ChromeTabChangeInfo, tab: ChromeTab) => {
+export function onTabUpdated(handler: TabHandler<ChromeTabUpdatedInfo>): void {
+    chrome.tabs.onUpdated.addListener((tabId: number, changeInfo: ChromeTabUpdatedInfo, tab: ChromeTab) => {
         handleError("tabUpdated")
         handler(tabId, changeInfo, tab)
     })
-}
-
-export function onTabRemoved(handler: (tabId: number) => void): void {
-    chrome.tabs.onRemoved.addListener((tabId: number) => {
-        handleError("tabRemoved")
-        handler(tabId)
-    })
 }

src/background/active-tab-listener.ts

@@ -74,5 +74,6 @@ export default function init(dispatcher: MessageDispatcher) {
             const exist = await siteService.get(site)
             return exist?.run ? site : null
         })
+        .register<void, boolean>('cs.getAudible', async (_, sender) => !!sender.tab?.audible)
         .register<timer.timeline.Event, void>('cs.timelineEv', ev => timelineThrottler.saveEvent(ev))
 }

src/background/audio-tab-listener.ts

@@ -5,15 +5,11 @@
  * https://opensource.org/licenses/MIT
  */
 
-import { listTabs } from "@api/chrome/tab"
+import { listTabs, trySendMsg2Tab } from "@api/chrome/tab"
 import { isNoneWindowId, onNormalWindowFocusChanged } from "@api/chrome/window"
 import optionHolder from "@service/components/option-holder"
-import itemService from "@service/item-service"
-import whitelistHolder from "@service/whitelist/holder"
 import { isBrowserUrl } from "@util/pattern"
 import { openLog } from "../common/logger"
-import ActiveTabListener from "./active-tab-listener"
-import AudioTabListener from "./audio-tab-listener"
 import BackupScheduler from "./backup-scheduler"
 import badgeTextManager from "./badge-manager"
 import initBrowserAction from "./browser-action-manager"
@@ -24,6 +20,7 @@ import initLimitProcessor from "./limit-processor"
 import MessageDispatcher from "./message-dispatcher"
 import VersionMigrator from "./migrator"
 import initSidePanel from "./side-panel"
+import TabListener from './tab-listener'
 import initTrackServer from "./track-server"
 import initWhitelistMenuManager from "./whitelist-menu-manager"
 
@@ -62,32 +59,11 @@ initWhitelistMenuManager()
 // Badge manager
 badgeTextManager.init(messageDispatcher)
 
-// Track the currently active tab
-let activeTabId: number | null = null
-const audioTabListener = new AudioTabListener()
-
-// Listen to tab active changed
-new ActiveTabListener()
-    .register(({ url, tabId }) => {
-        activeTabId = tabId
-        audioTabListener.onActiveTabChanged(tabId)
-        badgeTextManager.updateFocus({ url, tabId })
-    })
-    .listen()
-
-// Listen to audio playback in background tabs
-audioTabListener
-    .register(async ({ host, url, duration, tabId }) => {
-        if (whitelistHolder.contains(host, url)) return
-
-        const focusTimeMs = duration * 1000
-        await itemService.addFocusTime({ host, url }, focusTimeMs)
-
-        badgeTextManager.updateFocus({ url, tabId })
-    })
-
-// Make this async since listen() is now async
-audioTabListener.listen(() => activeTabId)
+// Listen to tab changed
+new TabListener()
+    .onActivated(({ url, tabId }) => badgeTextManager.updateFocus({ url, tabId }))
+    .onUpdated((tabId, { audible }) => audible !== undefined && trySendMsg2Tab(tabId, 'syncAudible', audible))
+    .start()
 
 handleInstall()
 
@@ -101,8 +77,6 @@ onNormalWindowFocusChanged(async windowId => {
     tabs.forEach(tab => {
         const { url, id: tabId } = tab
         if (!url || isBrowserUrl(url) || !tabId) return
-        activeTabId = tabId
-        audioTabListener.onActiveTabChanged(tabId)
         badgeTextManager.updateFocus({ url, tabId })
     })
 })