feat: support track the time of tab groups (sheepzh#481) (sheepzh#482)

Author: sheepzh

package.json

@@ -61,7 +61,9 @@
         "ts-node": "^10.9.2",
         "tsconfig-paths": "^4.2.0",
         "typescript": "5.8.3",
-        "url-loader": "^4.1.1",
+        "url-loader": "^4.1.1"
+    },
+    "optionalDependencies": {
         "web-ext": "^8.7.1"
     },
     "dependencies": {

src/api/chrome/permission.ts

@@ -0,0 +1,40 @@
+import { IS_MV3 } from "@util/constant/environment"
+import { handleError } from "./common"
+
+export async function hasPerm(perm: chrome.runtime.ManifestPermissions): Promise<boolean> {
+    if (IS_MV3) {
+        try {
+            return await chrome.permissions.contains({ permissions: [perm] })
+        } catch {
+            return false
+        }
+    } else {
+        return new Promise(resolve => {
+            chrome.permissions.contains({ permissions: [perm] }, res => {
+                handleError('hasPerm')
+                resolve(!!res)
+            })
+        })
+    }
+}
+
+export async function requestPerm(perm: chrome.runtime.ManifestPermissions): Promise<boolean> {
+    if (IS_MV3) {
+        try {
+            return await chrome.permissions.request({ permissions: [perm] })
+        } catch {
+            return false
+        }
+    } else {
+        return new Promise(resolve => {
+            chrome.permissions.request({ permissions: [perm] }, granted => {
+                handleError("requestPerm")
+                resolve(!!granted)
+            })
+        })
+    }
+}
+
+export async function onPermRemoved(callback: ArgCallback<chrome.permissions.Permissions>) {
+    chrome.permissions.onRemoved.addListener(callback)
+}

src/api/chrome/tabGroups.ts

@@ -0,0 +1,80 @@
+import { IS_MV3 } from "@util/constant/environment"
+import { handleError } from "./common"
+
+export async function listAllGroups(): Promise<chrome.tabGroups.TabGroup[]> {
+    if (IS_MV3) {
+        try {
+            return chrome.tabGroups.query({})
+        } catch (e) {
+            return []
+        }
+    } else {
+        return new Promise(resolve => {
+            chrome.tabGroups.query({}, arr => {
+                handleError('listAllGroups')
+                resolve(arr ?? [])
+            })
+        })
+    }
+}
+
+export async function getGroup(id: number | undefined): Promise<chrome.tabGroups.TabGroup | undefined> {
+    if (!id) return undefined
+    try {
+        if (IS_MV3) {
+            const group = await chrome.tabGroups.get(id)
+            return group
+        } else {
+            return new Promise(resolve => chrome.tabGroups.get(id, g => {
+                handleError('getGroup')
+                resolve(g)
+            }))
+        }
+    } catch (e) {
+        return undefined
+    }
+}
+
+export function onChanged(handler: ArgCallback<chrome.tabGroups.TabGroup>): void {
+    try {
+        chrome.tabGroups.onCreated.addListener(handler)
+        chrome.tabGroups.onRemoved.addListener(handler)
+        chrome.tabGroups.onUpdated.addListener(handler)
+    } catch (e) {
+        // ignored
+    }
+}
+
+export function removeChangedHandler(handler: ArgCallback<chrome.tabGroups.TabGroup>): void {
+    try {
+        chrome.tabGroups.onCreated.removeListener(handler)
+        chrome.tabGroups.onRemoved.removeListener(handler)
+        chrome.tabGroups.onUpdated.removeListener(handler)
+    } catch (e) {
+        // ignored
+    }
+}
+
+export function isValidGroup(groupId?: number): groupId is number {
+    if (!groupId) return false
+    try {
+        return !!groupId && groupId !== chrome.tabGroups.TAB_GROUP_ID_NONE
+    } catch {
+        return false
+    }
+}
+
+export const cvtGroupColor = (color?: `${chrome.tabGroups.Color}`): string => {
+    switch (color) {
+        case 'grey': return '#5F6369'
+        case 'blue': return '#1974E8'
+        case 'yellow': return '#F9AB03'
+        case 'red': return '#DA3025'
+        case 'green': return '#198139'
+        case 'pink': return '#D01984'
+        case 'purple': return '#A143F5'
+        case 'cyan': return '#027B84'
+        case 'orange': return '#FA913E'
+        default: return '#000'
+    }
+}

src/background/badge-manager.ts

@@ -8,16 +8,14 @@
 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"
+import statDatabase from "@db/stat-database"
 import optionHolder from "@service/components/option-holder"
 import whitelistHolder from "@service/components/whitelist-holder"
 import { IS_ANDROID } from "@util/constant/environment"
 import { extractHostname, isBrowserUrl } from "@util/pattern"
 import { MILL_PER_HOUR, MILL_PER_MINUTE, MILL_PER_SECOND } from "@util/time"
 import MessageDispatcher from "./message-dispatcher"
 
-const statDatabase: StatDatabase = new StatDatabase(chrome.storage.local)
-
 export type BadgeLocation = {
     /**
      * The tab id of badge text show display with

src/background/icon-and-alias-collector.ts

@@ -6,15 +6,14 @@
  */
 
 import { getTab } from "@api/chrome/tab"
-import OptionDatabase from "@db/option-database"
+import optionDatabase from "@db/option-database"
 import siteService from "@service/site-service"
 import { IS_ANDROID, IS_CHROME, IS_SAFARI } from "@util/constant/environment"
 import { defaultStatistics } from "@util/constant/option"
 import { extractHostname, isBrowserUrl, isHomepage } from "@util/pattern"
 import { extractSiteName } from "@util/site"
 
 const storage: chrome.storage.StorageArea = chrome.storage.local
-const optionDatabase = new OptionDatabase(storage)
 
 let collectAliasEnabled = defaultStatistics().collectSiteName
 const setCollectAliasEnabled = (opt: timer.option.AllOption) => collectAliasEnabled = opt.collectSiteName

src/background/migrator/host-merge-initializer.ts

@@ -5,11 +5,9 @@
  * https://opensource.org/licenses/MIT
  */
 
-import MergeRuleDatabase from "@db/merge-rule-database"
+import mergeRuleDatabase from "@db/merge-rule-database"
 import { type Migrator } from "./common"
 
-const mergeRuleDatabase = new MergeRuleDatabase(chrome.storage.local)
-
 /**
  * v0.1.2
  *

src/background/migrator/local-file-initializer.ts

@@ -5,14 +5,12 @@
  * https://opensource.org/licenses/MIT
  */
 
-import MergeRuleDatabase from "@db/merge-rule-database"
+import mergeRuleDatabase from "@db/merge-rule-database"
 import { t2Chrome } from "@i18n/chrome/t"
 import siteService from "@service/site-service"
 import { JSON_HOST, LOCAL_HOST_PATTERN, MERGED_HOST, PDF_HOST, PIC_HOST, TXT_HOST } from "@util/constant/remain-host"
 import { type Migrator } from "./common"
 
-const mergeRuleDatabase = new MergeRuleDatabase(chrome.storage.local)
-
 /**
  * Process the host of local files
  *

src/background/track-server.ts

@@ -1,7 +1,8 @@
 import { getTab, listTabs, sendMsg2Tab } from "@api/chrome/tab"
 import { getWindow } from "@api/chrome/window"
 import optionHolder from "@service/components/option-holder"
-import itemService from "@service/item-service"
+import whitelistHolder from "@service/components/whitelist-holder"
+import itemService, { type ItemIncContext } from "@service/item-service"
 import limitService from "@service/limit-service"
 import periodService from "@service/period-service"
 import { IS_ANDROID } from "@util/constant/environment"
@@ -10,11 +11,12 @@ import { formatTimeYMD, getStartOfDay, MILL_PER_DAY } from "@util/time"
 import badgeManager from "./badge-manager"
 import MessageDispatcher from "./message-dispatcher"
 
-async function handleTime(host: string, url: string, dateRange: [number, number], tabId: number | undefined): Promise<number> {
-    const [start, end] = dateRange
+async function handleTime(context: ItemIncContext, timeRange: [number, number], tabId: number | undefined): Promise<number> {
+    const { host, url } = context
+    const [start, end] = timeRange
     const focusTime = end - start
     // 1. Save async
-    await itemService.addFocusTime(host, url, focusTime)
+    await itemService.addFocusTime(context, focusTime)
     // 2. Process limit
     const { limited, reminder } = await limitService.addFocusTime(host, url, focusTime)
     // If time limited after this operation, send messages
@@ -28,15 +30,18 @@ async function handleTime(host: string, url: string, dateRange: [number, number]
 
 async function handleTrackTimeEvent(event: timer.core.Event, sender: ChromeMessageSender): Promise<void> {
     const { url, start, end, ignoreTabCheck } = event
-    const { id: tabId, windowId } = sender?.tab || {}
+    const { id: tabId, windowId, groupId } = sender?.tab || {}
     if (!ignoreTabCheck) {
         if (await windowNotFocused(windowId)) return
         if (await tabNotActive(tabId)) return
     }
     const { protocol, host } = extractHostname(url) || {}
     const option = await optionHolder.get()
+
     if (protocol === "file" && !option?.countLocalFiles) return
-    await handleTime(host, url, [start, end], tabId)
+    if (whitelistHolder.contains(host, url)) return
+
+    await handleTime({ host, url, groupId }, [start, end], tabId)
     if (tabId) {
         const winTabs = await listTabs({ active: true, windowId })
         const firstActiveTab = winTabs?.[0]
@@ -73,19 +78,21 @@ async function sendLimitedMessage(items: timer.limit.Item[]) {
     }
 }
 
-async function handleVisit(host: string, url: string) {
-    await itemService.increaseVisit(host, url)
+async function handleVisit(context: ItemIncContext) {
+    await itemService.increaseVisit(context)
+    const { host, url } = context
     const metLimits = await limitService.incVisit(host, url)
     // If time limited after this operation, send messages
     metLimits?.length && sendLimitedMessage(metLimits)
 }
 
-async function handleIncVisitEvent(param: { host: string, url: string }): Promise<void> {
+async function handleIncVisitEvent(param: { host: string, url: string }, sender: ChromeMessageSender): Promise<void> {
     const { host, url } = param || {}
+    const { groupId } = sender?.tab ?? {}
     const { protocol } = extractHostname(url) || {}
     const option = await optionHolder.get()
     if (protocol === "file" && !option.countLocalFiles) return
-    await handleVisit(host, url)
+    await handleVisit({ host, url, groupId })
 }
 
 function splitRunTime(start: number, end: number): Record<string, number> {
@@ -108,14 +115,28 @@ async function handleTrackRunTimeEvent(event: timer.core.Event): Promise<void> {
     const realStart = Math.max(RUN_TIME_END_CACHE[host] ?? 0, start)
     const byDate = splitRunTime(realStart, end)
     if (!Object.keys(byDate).length) return
-    await itemService.addRunTime(host, url, byDate)
+    await itemService.addRunTime(host, byDate)
     RUN_TIME_END_CACHE[host] = Math.max(end, realStart)
 }
 
+function handleTabGroupRemove(group: chrome.tabGroups.TabGroup) {
+    itemService.batchDeleteGroupById(group.id)
+}
+
+function handleTabGroupEnabled() {
+    try {
+        chrome.tabGroups.onRemoved.removeListener(handleTabGroupRemove)
+        chrome.tabGroups.onRemoved.addListener(handleTabGroupRemove)
+    } catch (e) {
+        console.warn('failed to handle event: enableTabGroup', e)
+    }
+}
+
 export default function initTrackServer(messageDispatcher: MessageDispatcher) {
     messageDispatcher
         .register<timer.core.Event, void>('cs.trackTime', handleTrackTimeEvent)
         .register<timer.core.Event, void>('cs.trackRunTime', handleTrackRunTimeEvent)
         .register<{ host: string, url: string }, void>('cs.incVisitCount', handleIncVisitEvent)
         .register<string, timer.core.Result>('cs.getTodayInfo', host => itemService.getResult(host, new Date()))
+        .register<void, void>('enableTabGroup', handleTabGroupEnabled)
 }

src/background/whitelist-menu-manager.ts

@@ -8,15 +8,13 @@
 import { createContextMenu, updateContextMenu } from "@api/chrome/context-menu"
 import { getRuntimeId } from "@api/chrome/runtime"
 import { getTab, onTabActivated, onTabUpdated } from "@api/chrome/tab"
-import WhitelistDatabase from "@db/whitelist-database"
+import db from "@db/whitelist-database"
 import { t2Chrome } from "@i18n/chrome/t"
 import { type ContextMenusMessage } from "@i18n/message/common/context-menus"
 import optionHolder from "@service/components/option-holder"
 import { IS_ANDROID } from "@util/constant/environment"
 import { extractHostname, isBrowserUrl } from "@util/pattern"
 
-const db = new WhitelistDatabase(chrome.storage.local)
-
 const menuId = '_timer_menu_item_' + getRuntimeId()
 let currentActiveId: number
 

src/content-script/limit/modal/components/Footer.tsx

@@ -52,7 +52,7 @@ const _default = defineComponent(() => {
         <div class='footer-container'>
             <ElButton
                 round
-                icon={<Trend />}
+                icon={Trend}
                 type="success"
                 onClick={() => sendMsg2Runtime('cs.openAnalysis')}
             >
@@ -62,14 +62,14 @@ const _default = defineComponent(() => {
                 v-show={showDelay.value}
                 type="primary"
                 round
-                icon={<Plus />}
+                icon={Plus}
                 onClick={() => handleMore5Minutes(rule.value, delayHandler)}
             >
                 {t(msg => msg.modal.more5Minutes)}
             </ElButton>
             <ElButton
                 round
-                icon={<Timer />}
+                icon={Timer}
                 onClick={() => sendMsg2Runtime('cs.openLimit')}
             >
                 {t(msg => msg.modal.ruleDetail)}