Support to build for Safari (#148)

Author: sheepzh

.gitignore

@@ -1,9 +1,12 @@
 node_modules
 dist
 dist_dev
+dist_dev_safari
 dist_prod
 dist_analyze
 
+Timer_Safari_DEV
+
 firefox_dev
 
 market_packages

package.json

@@ -5,6 +5,7 @@
   "homepage": "https://github.com/sheepzh/timer",
   "scripts": {
     "dev": "webpack --config=webpack/webpack.dev.ts --watch",
+    "dev:safari": "webpack --config=webpack/webpack.dev.safari.ts --watch",
     "build": "webpack --config=webpack/webpack.prod.ts",
     "analyze": "webpack --config=webpack/webpack.analyze.ts",
     "test": "jest --env=jsdom",

src/app/components/option/components/statistics.ts

@@ -13,6 +13,7 @@ import { defaultStatistics } from "@util/constant/option"
 import { defineComponent, h, reactive, unref } from "vue"
 import { t } from "@app/locale"
 import { renderOptionItem, tagText, tooltip } from "../common"
+import { IS_SAFARI } from "@util/constant/environment"
 
 function updateOptionVal(key: keyof timer.option.StatisticsOption, newVal: boolean, option: UnwrapRef<timer.option.StatisticsOption>) {
     option[key] = newVal
@@ -40,6 +41,35 @@ function copy(target: timer.option.StatisticsOption, source: timer.option.Statis
     target.countLocalFiles = source.countLocalFiles
 }
 
+function renderOptionItems(option: timer.option.StatisticsOption) {
+    const result = []
+    if (!IS_SAFARI) {
+        // chrome.idle does not work in Safari, so not to display this option
+        result.push(
+            renderOptionItem({
+                input: countWhenIdle(option),
+                idleTime: tagText(msg => msg.option.statistics.idleTime),
+                info: tooltip(msg => msg.option.statistics.idleTimeInfo)
+            }, msg => msg.statistics.countWhenIdle, t(msg => msg.option.no)),
+            h(ElDivider)
+        )
+    }
+    result.push(
+        renderOptionItem({
+            input: countLocalFiles(option),
+            localFileTime: tagText(msg => msg.option.statistics.localFileTime),
+            info: tooltip(msg => msg.option.statistics.localFilesInfo)
+        }, msg => msg.statistics.countLocalFiles, t(msg => msg.option.no)),
+        h(ElDivider),
+        renderOptionItem({
+            input: collectSiteName(option),
+            siteName: tagText(msg => msg.option.statistics.siteName),
+            siteNameUsage: tooltip(msg => msg.option.statistics.siteNameUsage)
+        }, msg => msg.statistics.collectSiteName, t(msg => msg.option.yes))
+    )
+    return result
+}
+
 const _default = defineComponent({
     name: "StatisticsOptionContainer",
     setup(_props, ctx) {
@@ -51,25 +81,7 @@ const _default = defineComponent({
                 await optionService.setStatisticsOption(unref(option))
             }
         })
-        return () => h('div', [
-            renderOptionItem({
-                input: countWhenIdle(option),
-                idleTime: tagText(msg => msg.option.statistics.idleTime),
-                info: tooltip(msg => msg.option.statistics.idleTimeInfo)
-            }, msg => msg.statistics.countWhenIdle, t(msg => msg.option.no)),
-            h(ElDivider),
-            renderOptionItem({
-                input: countLocalFiles(option),
-                localFileTime: tagText(msg => msg.option.statistics.localFileTime),
-                info: tooltip(msg => msg.option.statistics.localFilesInfo)
-            }, msg => msg.statistics.countLocalFiles, t(msg => msg.option.no)),
-            h(ElDivider),
-            renderOptionItem({
-                input: collectSiteName(option),
-                siteName: tagText(msg => msg.option.statistics.siteName),
-                siteNameUsage: tooltip(msg => msg.option.statistics.siteNameUsage)
-            }, msg => msg.statistics.collectSiteName, t(msg => msg.option.yes))
-        ])
+        return () => h('div', renderOptionItems(option))
     }
 })
 

src/background/timer/idle-listener.ts

@@ -5,6 +5,7 @@
  * https://opensource.org/licenses/MIT
  */
 
+import { IS_SAFARI } from "@util/constant/environment"
 import { formatTime } from "@util/time"
 import TimerContext from "./context"
 
@@ -24,6 +25,9 @@ export default class IdleListener {
     }
 
     listen() {
-        chrome.idle.onStateChanged.addListener(newState => listen(this.context, newState))
+        if (!IS_SAFARI) {
+            // Idle does not work in macOs
+            chrome.idle.onStateChanged.addListener(newState => listen(this.context, newState))
+        }
     }
 }

src/manifest.ts

@@ -34,13 +34,13 @@ const _default: chrome.runtime.ManifestV2 = {
   },
   content_scripts: [
     {
-      "matches": [
+      matches: [
         "<all_urls>"
       ],
-      "js": [
+      js: [
         "content_scripts.js"
       ],
-      "run_at": "document_start"
+      run_at: "document_start"
     }
   ],
   permissions: [

src/util/constant/environment.ts

@@ -10,6 +10,7 @@ let isFirefox = false
 let isChrome = false
 let isEdge = false
 let isOpera = false
+let isSafari = false
 
 if (/Firefox[\/\s](\d+\.\d+)/.test(userAgent)) {
     isFirefox = true
@@ -19,6 +20,8 @@ if (/Firefox[\/\s](\d+\.\d+)/.test(userAgent)) {
 } else if (userAgent.includes("Opera") || userAgent.includes("OPR")) {
     // The Opera implements the chrome
     isOpera = true
+} else if (userAgent.includes('Safari')) {
+    isSafari = true
 } else if (userAgent.includes('Chrome')) {
     isChrome = true
 }
@@ -32,4 +35,9 @@ export const IS_CHROME: boolean = isChrome
 /**
  * @since 0.8.0
  */
-export const IS_OPERA: boolean = isOpera
+export const IS_OPERA: boolean = isOpera
+
+/**
+ * @since 1.3.0
+ */
+export const IS_SAFARI: boolean = isSafari

webpack/webpack.dev.safari.ts

@@ -0,0 +1,33 @@
+import path from "path"
+import optionGenerator from "./webpack.common"
+
+const outputDir = path.join(__dirname, '..', 'dist_dev_safari')
+
+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_Safari_DEV'
+    // Remove unsupported properties in Safari
+    removeUnsupportedProperties(baseManifest)
+  }
+)
+
+options.mode = 'development'
+options.output.path = outputDir
+
+// no eval with development, but generate *.map.js
+options.devtool = 'cheap-module-source-map'
+
+// Use cache with filesystem
+options.cache = { type: 'filesystem' }
+
+export default options

webpack/webpack.dev.ts

@@ -56,4 +56,4 @@ options.devtool = 'cheap-module-source-map'
 // Use cache with filesystem
 options.cache = { type: 'filesystem' }
 
-module.exports = options
+export default options