Not display icons of website in Safari (#152)

Author: sheepzh

src/app/components/common/host-alert.ts

@@ -5,6 +5,7 @@
  * https://opensource.org/licenses/MIT
  */
 
+import { IS_SAFARI } from "@util/constant/environment"
 import { ElLink } from "element-plus"
 import { computed, ComputedRef, defineComponent, h } from "vue"
 
@@ -39,20 +40,27 @@ const _default = defineComponent({
         const href: ComputedRef<string> = computed(() => props.clickable ? `http://${props.host}` : '')
         const target: ComputedRef<string> = computed(() => props.clickable ? '_blank' : '')
         const cursor: ComputedRef<string> = computed(() => props.clickable ? "cursor" : "default")
-        return () => h('div', [
-            h(ElLink,
-                {
-                    href: href.value,
-                    target: target.value,
-                    underline: props.clickable,
-                    style: { cursor: cursor.value }
-                },
-                () => props.host
-            ), h('span',
-                { style: HOST_ICON_STYLE },
-                h('img', { src: props.iconUrl, width: 12, height: 12 })
-            )
-        ])
+        return IS_SAFARI
+            ? () => h(ElLink, {
+                href: href.value,
+                target: target.value,
+                underline: props.clickable,
+                style: { cursor: cursor.value }
+            }, () => props.host)
+            : () => h('div', [
+                h(ElLink,
+                    {
+                        href: href.value,
+                        target: target.value,
+                        underline: props.clickable,
+                        style: { cursor: cursor.value }
+                    },
+                    () => props.host
+                ), h('span',
+                    { style: HOST_ICON_STYLE },
+                    h('img', { src: props.iconUrl, width: 12, height: 12 })
+                )
+            ])
     }
 })
 

src/app/components/report/index.ts

@@ -27,6 +27,7 @@ import { useRoute, useRouter } from "vue-router"
 import { groupBy, sum } from "@util/array"
 import { formatTime } from "@util/time"
 import TimerDatabase from "@db/timer-database"
+import { IS_SAFARI } from "@util/constant/environment"
 
 const timerDatabase = new TimerDatabase(chrome.storage.local)
 
@@ -38,7 +39,7 @@ async function queryData(
 ) {
     const loading = ElLoadingService({ target: `.container-card>.el-card__body`, text: "LOADING..." })
     const pageInfo = { size: page.size, num: page.num }
-    const fillFlag = { alias: true, iconUrl: true }
+    const fillFlag = { alias: true, iconUrl: !IS_SAFARI }
     const param = {
         ...queryParam.value,
         inclusiveRemote: readRemote.value

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

@@ -8,7 +8,7 @@
 import HostAliasDatabase from "@db/host-alias-database"
 import IconUrlDatabase from "@db/icon-url-database"
 import OptionDatabase from "@db/option-database"
-import { IS_CHROME } from "@util/constant/environment"
+import { IS_CHROME, IS_SAFARI } from "@util/constant/environment"
 import { iconUrlOfBrowser } from "@util/constant/url"
 import { extractHostname, isBrowserUrl, isHomepage } from "@util/pattern"
 import { defaultStatistics } from "@util/constant/option"
@@ -51,7 +51,7 @@ async function processTabInfo(tab: chrome.tabs.Tab): Promise<void> {
     // localhost hosts with Chrome use cache, so keep the favIcon url undefined
     IS_CHROME && /^localhost(:.+)?/.test(host) && (favIconUrl = undefined)
     const iconUrl = favIconUrl || iconUrlOfBrowser(protocol, host)
-    iconUrlDatabase.put(host, iconUrl)
+    iconUrl && iconUrlDatabase.put(host, iconUrl)
     collectAliasEnabled && !isBrowserUrl(url) && isHomepage(url) && collectAlias(host, tab.title)
 }
 
@@ -67,7 +67,7 @@ function handleWebNavigationCompleted(detail: chrome.webNavigation.WebNavigation
 }
 
 function listen() {
-    chrome.webNavigation.onCompleted.addListener(handleWebNavigationCompleted)
+    !IS_SAFARI && chrome.webNavigation.onCompleted.addListener(handleWebNavigationCompleted)
 }
 
 /**

src/popup/components/chart/option.ts

@@ -18,6 +18,7 @@ import { formatPeriodCommon, formatTime } from "@util/time"
 import { t } from "@popup/locale"
 import { getPrimaryTextColor, getSecondaryTextColor } from "@util/style"
 import { generateSiteLabel } from "@util/site"
+import { IS_SAFARI } from "@util/constant/environment"
 
 type EcOption = ComposeOption<
     | PieSeriesOption
@@ -75,7 +76,10 @@ function labelFormatter({ mergeHost }: timer.popup.QueryResult, params: any): st
     const format = params instanceof Array ? params[0] : params
     const { name } = format
     const data = format.data as timer.popup.Row
-    return mergeHost || data.isOther ? name : `{${legend2LabelStyle(name)}|} {a|${name}}`
+    // Un-supported to get favicon url in Safari
+    return mergeHost || data.isOther || IS_SAFARI
+        ? name
+        : `{${legend2LabelStyle(name)}|} {a|${name}}`
 }
 
 const staticOptions: EcOption = {

src/popup/components/footer/index.ts

@@ -20,12 +20,13 @@ import { t } from "@popup/locale"
 import { locale } from "@util/i18n"
 import { getDayLenth, getMonthTime, getWeekDay, getWeekTime, MILL_PER_DAY } from "@util/time"
 import optionService from "@service/option-service"
+import { IS_SAFARI } from "@util/constant/environment"
 
 type FooterParam = TimerQueryParam & {
     chartTitle: string
 }
 
-const FILL_FLAG_PARAM: FillFlagParam = { iconUrl: true, alias: true }
+const FILL_FLAG_PARAM: FillFlagParam = { iconUrl: !IS_SAFARI, alias: true }
 
 function calculateDateRange(duration: timer.popup.Duration, weekStart: timer.option.WeekStartOption): Date | Date[] {
     const now = new Date()

webpack/webpack.prod.safari.ts

@@ -0,0 +1,47 @@
+import path from "path"
+import optionGenerator from "./webpack.common"
+import FileManagerWebpackPlugin from "filemanager-webpack-plugin"
+import webpack from "webpack"
+
+const { name, version } = require(path.join(__dirname, '..', 'package.json'))
+
+const outputDir = path.join(__dirname, '..', 'dist_prod_safari')
+const normalZipFilePath = path.resolve(__dirname, '..', 'market_packages', `${name}-${version}-safari.zip`)
+
+function removeUnsupportedProperties(manifest: Partial<chrome.runtime.ManifestV2>) {
+    // 1. permissions. 'idle' is not supported
+    const originPermissions = manifest.permissions || []
+    const unsupported = ['idle']
+    const supported = []
+    originPermissions.forEach(perm => !unsupported.includes(perm) && supported.push(perm))
+    manifest.permissions = supported
+}
+
+const options = optionGenerator(
+    outputDir,
+    baseManifest => {
+        baseManifest.name = 'Timer'
+        // Remove unsupported properties in Safari
+        removeUnsupportedProperties(baseManifest)
+    }
+)
+
+const filemanagerWebpackPlugin = new FileManagerWebpackPlugin({
+    events: {
+        // Archive at the end
+        onEnd: [
+            { delete: [path.join(outputDir, '*.LICENSE.txt')] },
+            // Define plugin to archive zip for different markets
+            {
+                delete: [normalZipFilePath],
+                archive: [{ source: outputDir, destination: normalZipFilePath }]
+            }
+        ]
+    }
+})
+
+options.mode = 'production'
+options.plugins.push(filemanagerWebpackPlugin as webpack.WebpackPluginInstance)
+options.output.path = outputDir
+
+export default options