Feature: Use icon url of browser (#11)

Author: sheepzh

src/app/components/report/index.ts

@@ -125,7 +125,7 @@ const queryWhiteList = async () => {
     return await Promise.resolve()
 }
 
-const host2ElLink = (host: string) => {
+const host2ElLink = (host: string, iconUrl: string) => {
     const link = h(ElLink,
         { href: `https://${host}`, target: '_blank' },
         () => host
@@ -134,7 +134,7 @@ const host2ElLink = (host: string) => {
         { style: 'height:23px;line-height:23px;padding-left:2px;' },
         h('img',
             {
-                src: FAVICON(host),
+                src: iconUrl || FAVICON(host),
                 width: 12,
                 height: 12
             }
@@ -306,7 +306,7 @@ export default defineComponent(() => {
             }, {
                 default: ({ row }: { row: SiteInfo }) => {
                     if (!mergeDomainRef.value) {
-                        return host2ElLink(row.host)
+                        return host2ElLink(row.host, row.iconUrl)
                     } else {
                         return h(ElTooltip,
                             {
@@ -320,7 +320,7 @@ export default defineComponent(() => {
                                     { class: 'el-link el-link--default is-underline' },
                                     h('span', { class: 'el-link--inner' }, row.host)
                                 ),
-                            content: () => h('div', { style: 'margin: 10px' }, row.mergedHosts.map(host => h('p', host2ElLink(host))))
+                            content: () => h('div', { style: 'margin: 10px' }, row.mergedHosts.map(origin => h('p', host2ElLink(origin.host, origin.iconUrl))))
                         })
                     }
                 }

src/background/index.ts

@@ -1,4 +1,5 @@
 import { openLog } from '../common/logger'
+import iconUrlDatabase from '../database/icon-url-database'
 import timerService from '../service/timer-service'
 import { extractHostname, isBrowserUrl } from '../util/pattern'
 import versionManager from './version-manager'
@@ -54,4 +55,17 @@ setInterval(() => {
     timeMap = {}
 }, 2048)
 
-chrome.runtime.onInstalled.addListener(detail => versionManager.onChromeInstalled(detail.reason))
+chrome.runtime.onInstalled.addListener(detail => versionManager.onChromeInstalled(detail.reason))
+
+chrome.webNavigation.onCompleted.addListener((detail) => {
+    if (detail.frameId > 0) {
+        // we don't care about activity occurring within a subframe of a tab
+        return
+    }
+    chrome.tabs.get(detail.tabId, tab => {
+        const domain = extractHostname(tab.url)
+        const iconUrl = tab.favIconUrl
+        if (!domain || !iconUrl) return
+        iconUrlDatabase.put(domain, iconUrl)
+    })
+})

src/database/icon-url-database.ts

@@ -0,0 +1,48 @@
+import { REMAIN_WORD_PREFIX } from "./constant"
+
+const DB_KEY_PREFIX = REMAIN_WORD_PREFIX + "ICON_URL"
+
+const generateKey = (host: string) => DB_KEY_PREFIX + host
+
+const urlOf = (key: string) => key.substring(DB_KEY_PREFIX.length)
+
+/**
+ * The icon url of hosts
+ * 
+ * @since 0.1.7
+ */
+class IconUrlDatabase {
+    private localStorage = chrome.storage.local
+
+    /**
+     * Replace or insert
+     * 
+     * @param host host 
+     * @param iconUrl icon url
+     */
+    put(host: string, iconUrl: string): Promise<void> {
+        const toUpdate = {}
+        toUpdate[generateKey(host)] = iconUrl
+        return new Promise(resolve => this.localStorage.set(toUpdate, resolve))
+    }
+
+    /**
+     * @param hosts hosts
+     */
+    get(...hosts: string[]): Promise<{ [host: string]: string }> {
+        const keys = hosts.map(generateKey)
+        return new Promise(resolve =>
+            this.localStorage.get(keys,
+                items => {
+                    const result = {}
+                    for (const [key, iconUrl] of Object.entries(items)) {
+                        result[urlOf(key)] = iconUrl
+                    }
+                    resolve(result)
+                }
+            )
+        )
+    }
+}
+
+export default new IconUrlDatabase()

src/entity/dto/site-info.ts

@@ -15,7 +15,13 @@ export default class SiteInfo {
      * 
      * @since 0.1.5
      */
-    mergedHosts: string[]
+    mergedHosts: SiteInfo[]
+    /**
+     * Icon url
+     * 
+     * Must be undefined if merged
+     */
+    iconUrl?: string
 
     constructor(host: string, date?: string) {
         this.host = host

src/manifest.js

@@ -37,6 +37,7 @@ module.exports = {
   permissions: [
     'storage',
     'tabs',
+    'webNavigation'
   ],
   browser_action: {
     default_popup: "static/popup.html",

src/popup/app.ts

@@ -49,7 +49,7 @@ const queryDataAndUpdate = () => {
         sortOrder: SortDirect.DESC
     }
     timerService
-        .select(param)
+        .select(param, true)
         .then(rows => {
             const result = []
             const other: SiteInfo = { host: t('popup.otherLabel'), focus: 0, total: 0, date: '0000-00-00', time: 0, mergedHosts: [] }
@@ -138,7 +138,7 @@ const pieOptions: () => any = () => {
             height: LABEL_ICON_SIZE,
             width: LABEL_ICON_SIZE,
             fontSize: LABEL_ICON_SIZE,
-            backgroundColor: { image: FAVICON(host) }
+            backgroundColor: { image: d.iconUrl || FAVICON(host) }
         }
     })
     options.legend.data = legendData

src/service/timer-service.ts

@@ -7,6 +7,7 @@ import CustomizedDOmainMergeRuler from './domain-merge-ruler'
 import DomainMergeRuleItem from '../entity/dto/domain-merge-rule-item'
 import mergeRuleDatabase from '../database/merge-rule-database'
 import WastePerDay from '../entity/dao/waste-per-day'
+import iconUrlDatabase from '../database/icon-url-database'
 
 declare type PageParam = {
     pageNum?: number
@@ -88,8 +89,18 @@ class TimeService {
         return timerDatabase.delete(rows)
     }
 
-    async select(param?: TimerQueryParam): Promise<SiteInfo[]> {
+    private async fillIconUrl(siteInfos: SiteInfo[]): Promise<void> {
+        const hosts = siteInfos.map(o => o.host)
+        const iconUrlMap = await iconUrlDatabase.get(...hosts)
+        siteInfos.forEach(siteInfo => {
+            siteInfo.iconUrl = iconUrlMap[siteInfo.host]
+        })
+        return Promise.resolve()
+    }
+
+    async select(param?: TimerQueryParam, needIconUrl?: boolean): Promise<SiteInfo[]> {
         log("service: select:{param}", param)
+        param = param || {}
         let origin = await timerDatabase.select(param as TimerCondition)
         // Process after select
         // 1st merge
@@ -112,6 +123,10 @@ class TimeService {
                 return order * (aa > bb ? 1 : -1)
             })
         }
+        // 3rd get icon url if need
+        if (!param.mergeDomain && needIconUrl) {
+            await this.fillIconUrl(origin)
+        }
         return Promise.resolve(origin)
     }
 
@@ -128,6 +143,7 @@ class TimeService {
         const endIndex = (pageNum) * pageSize
         const total = origin.length
         const list: SiteInfo[] = startIndex >= total ? [] : origin.slice(startIndex, Math.min(endIndex, total))
+        await this.fillIconUrl(list)
         return Promise.resolve({ total, list })
     }
 
@@ -151,7 +167,7 @@ class TimeService {
             const merged = this.merge(map, o, domain + date)
             merged.host = domain
             const mergedHosts = merged.mergedHosts || (merged.mergedHosts = [])
-            mergedHosts.push(host)
+            mergedHosts.push(o)
         })
         for (let key in map) {
             newSiteInfos.push(map[key])