fix: getting rss data confusion when switching too fast

package.json

@@ -17,6 +17,7 @@
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
+    "async-lock": "^1.4.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "lodash": "^4.17.21",

pnpm-lock.yaml

@@ -26,6 +26,9 @@ dependencies:
   '@radix-ui/react-switch':
     specifier: ^1.0.3
     version: 1.0.3(@types/react-dom@18.2.15)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0)
+  async-lock:
+    specifier: ^1.4.0
+    version: 1.4.0
   class-variance-authority:
     specifier: ^0.7.0
     version: 0.7.0
@@ -3368,6 +3371,10 @@ packages:
       tslib: 2.6.2
     dev: true
 
+  /async-lock@1.4.0:
+    resolution: {integrity: sha512-coglx5yIWuetakm3/1dsX9hxCNox22h7+V80RQOu2XUUMidtArxKoZoOtHUPuR84SycKTXzgGzAUR5hJxujyJQ==}
+    dev: false
+
   /autoprefixer@10.4.16(postcss@8.4.32):
     resolution: {integrity: sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==}
     engines: {node: ^10 || ^12 || >=14}

src/background/index.ts

@@ -2,6 +2,7 @@ import { sendToContentScript } from "@plasmohq/messaging"
 import { setupOffscreenDocument } from "~/lib/offscreen"
 import type { RSSData } from "~/lib/types";
 import { Storage } from "@plasmohq/storage"
+import AsyncLock from "async-lock"
 
 export {}
 console.log("HELLO WORLD FROM BGSCRIPTS")
@@ -28,6 +29,7 @@ const storage = new Storage({
 
 export const getRules = () => storage.get("rules")
 
+const lock = new AsyncLock();
 export const getRSS = async (tabId, url) => {
   console.debug("Get RSS", tabId, url)
 
@@ -36,27 +38,29 @@ export const getRSS = async (tabId, url) => {
     setRSS(tabId, savedRSS[tabId])
     return
   } else {
-    await setupOffscreenDocument("tabs/offscreen.html")
-
-    console.debug("Send to content script requestHTML")
-    const html = await sendToContentScript({
-      name: "requestHTML",
-      tabId,
-    })
+    await lock.acquire(tabId, async () => {
+      await setupOffscreenDocument("tabs/offscreen.html")
   
-    console.debug("Get html", html)
-    console.debug("Send to offscreen")
-    chrome.runtime.sendMessage({
-      target: "offscreen",
-      data: {
-        name: "requestRSS",
-        body: {
-          tabId,
-          html,
-          url,
-          rules: await getRules(),
+      console.debug("Send to content script requestHTML")
+      const html = await sendToContentScript({
+        name: "requestHTML",
+        tabId,
+      })
+
+      console.debug("Get html", html)
+      console.debug("Send to offscreen")
+      chrome.runtime.sendMessage({
+        target: "offscreen",
+        data: {
+          name: "requestRSS",
+          body: {
+            tabId,
+            html,
+            url,
+            rules: await getRules(),
+          }
         }
-      }
+      })
     })
   }
 }
@@ -96,9 +100,15 @@ chrome.tabs.onActivated.addListener((tab) => {
 })
 
 chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
-  if (changeInfo.url && tab.active) {
-    delete savedRSS[tabId];
-    getRSS(tabId, changeInfo.url);
+  if (tab.active) {
+    if (changeInfo.url) {
+      delete savedRSS[tabId];
+      getRSS(tabId, changeInfo.url);
+    } else if (changeInfo.status === "loading") {
+      delete savedRSS[tabId];
+    } else if (changeInfo.status === "complete") {
+      getRSS(tabId, changeInfo.url);
+    }
   }
 })