fix: timeline duplicated (#662)

Author: sheepzh

package.json

@@ -32,9 +32,9 @@
         "@emotion/babel-plugin": "^11.13.5",
         "@emotion/css": "^11.13.5",
         "@rsdoctor/rspack-plugin": "^1.4.0",
-        "@rspack/cli": "^1.6.8",
-        "@rspack/core": "^1.6.8",
-        "@swc/core": "^1.15.7",
+        "@rspack/cli": "^1.7.1",
+        "@rspack/core": "^1.7.1",
+        "@swc/core": "^1.15.8",
         "@swc/jest": "^0.2.39",
         "@types/chrome": "0.1.32",
         "@types/decompress": "^4.2.7",
@@ -43,7 +43,7 @@
         "@types/punycode": "^2.1.4",
         "@vue/babel-plugin-jsx": "^2.0.1",
         "babel-loader": "^10.0.0",
-        "commitlint": "^20.2.0",
+        "commitlint": "^20.3.1",
         "css-loader": "^7.1.2",
         "decompress": "^4.2.1",
         "husky": "^9.1.7",
@@ -63,7 +63,7 @@
     "dependencies": {
         "@element-plus/icons-vue": "^2.3.2",
         "echarts": "^6.0.0",
-        "element-plus": "2.13.0",
+        "element-plus": "2.13.1",
         "punycode": "^2.3.1",
         "vue": "^3.5.26",
         "vue-router": "^4.6.4"

src/content-script/timeline.ts

@@ -7,29 +7,32 @@ class TimelineCollector {
      * Bind page visibility and focus events
      */
     init(): void {
-        document.addEventListener('visibilitychange', () => {
-            if (document.hidden) {
-                this.collect()
-            } else {
+        const onStateChange = () => {
+            if (!document.hidden && document.hasFocus()) {
                 this.startTracking()
+            } else {
+                this.collect()
             }
-        })
+        }
 
-        window.addEventListener('focus', () => this.startTracking())
-        window.addEventListener('blur', () => this.collect())
+        document.addEventListener('visibilitychange', onStateChange)
+        window.addEventListener('focus', onStateChange)
+        window.addEventListener('blur', onStateChange)
         window.addEventListener('beforeunload', () => this.collect())
 
         if (document.readyState === 'complete') {
-            this.startTracking()
+            onStateChange()
         } else {
-            window.addEventListener('load', () => this.startTracking())
+            window.addEventListener('load', onStateChange)
         }
     }
 
     /**
      * Start tracking current page
      */
     public startTracking(): void {
+        if (document.hidden || !document.hasFocus()) return
+        if (this.startTime !== null) return
         this.startTime = Date.now()
     }