feat: update storage data when switching page or updating url

src/background.ts

@@ -1,5 +1,13 @@
-chrome.action.onClicked.addListener(tab => {
-    if (tab.id) {
-        chrome.tabs.sendMessage(tab.id, { toggleVisible: true });
-    }
+// trigger then clicking the extension logo
+chrome.action.onClicked.addListener((tab) => {
+  if (tab.id) {
+    chrome.tabs.sendMessage(tab.id, { toggleVisible: true });
+  }
+});
+
+// trigger when active tab switches
+chrome.tabs.onActivated.addListener(function(activeInfo) {
+  if (activeInfo?.tabId) {
+    chrome.tabs.sendMessage(activeInfo?.tabId, { updateStorage: true });
+  }
 });

src/content-scripts/main.ts

@@ -38,11 +38,16 @@ const vm = createApp(Popup)
   .directive("clickoutside", ClickOutside)
   .mount(mountEl);
 
-// listen `click` event of extension logo to trigger popup's visibility
+// listen messages from `background.ts`
 chrome.runtime.onMessage.addListener((message: any) => {
   if (message.toggleVisible) {
+    // open the popup by clicking the extension logo
     (vm as any).visible = !(vm as any).visible;
   }
+  if (message.updateStorage) {
+    // emit to update the storage data by switching tab
+    mitt.emit("update-storage");
+  }
 });
 
 // listen `mouseup` event to judge if any text is selected.
@@ -100,7 +105,7 @@ async function initializeExtension() {
   // render the rects of this page
   await renderNoteHighlightRects();
   // jump to the rect if this page is opened from an item of the notebook
-  const { noteId = '' } = getUrlQuery(window.location.href) as Query;
+  const { noteId = "" } = getUrlQuery(window.location.href) as Query;
   if (noteId) {
     await sendEmitAndWait("select-note", noteId);
     (vm as any).visible = true;
@@ -122,6 +127,9 @@ setTimeout(() => {
   }).observe(document, { subtree: true, childList: true });
 
   function onUrlChange() {
+    // reinitialize the extension
     initializeExtension();
+    // emit to update the storage data
+    mitt.emit("update-storage");
   }
 });

src/content-scripts/renderer/popup/index.vue

@@ -11,6 +11,7 @@ import { Note } from "@/types/note";
 import { Tag } from "@/types/tag";
 import { Storage } from "@/types/storage";
 import { get } from "@/utils/storage";
+import mitt from '@/utils/mitt';
 import { StorageKeys } from "@/utils/constant";
 
 export default defineComponent({
@@ -28,12 +29,20 @@ export default defineComponent({
       [StorageKeys.notes]: [],
       [StorageKeys.tags]: [],
     });
-    get(StorageKeys.notes).then((res) => {
-      storage.notes = (res as Note[]) || [];
-    });
-    get(StorageKeys.tags).then((res) => {
-      storage.tags = (res as Tag[]) || [];
-    });
+
+    const updateStorage = () => {
+      get(StorageKeys.notes).then((res) => {
+        storage.notes = (res as Note[]) || [];
+      });
+      get(StorageKeys.tags).then((res) => {
+        storage.tags = (res as Tag[]) || [];
+      });
+    }
+    updateStorage();
+    mitt.on('update-storage', () => {
+      updateStorage();
+    })
+
     provide("storage", storage);
 
     return {