Add getContext

src/composables/useWebExtensionStorage.ts

@@ -46,6 +46,13 @@ const storageInterface: StorageLikeAsync = {
   },
 };
 
+/**
+ * Get page app context
+ */
+function getContext() {
+  return document.location.pathname.split('/')[2] as 'sidepanel' | 'options';
+}
+
 /**
  * https://github.com/vueuse/vueuse/blob/658444bf9f8b96118dbd06eba411bb6639e24e88/packages/core/useStorageAsync/index.ts
  *
@@ -73,8 +80,8 @@ export function useWebExtensionStorage<T>(
   initialValue: MaybeRef<T>,
   options: Pick<
     WebExtensionStorageOptions<T>,
-    'shallow' | 'serializer' | 'listenToStorageChanges' | 'flush' | 'deep' | 'eventFilter'
+    'shallow' | 'serializer' | 'flush' | 'deep' | 'eventFilter'
-  > = {},
+  > & { listenToStorageChanges?: boolean | 'sidepanel' | 'options' } = {},
 ): RemovableRef<T> {
   const {
     shallow = false,
@@ -119,6 +126,12 @@ export function useWebExtensionStorage<T>(
       if (!(key in changes)) {
         return;
       }
+      if (typeof listenToStorageChanges === 'string') {
+        const context = getContext();
+        if (listenToStorageChanges !== context) {
+          return;
+        }
+      }
       try {
         pauseWatch();
         await pullFromStorage();

src/logic/common-setup.ts

@@ -5,9 +5,11 @@ import type { App } from 'vue';
  * @param app Vue app
  */
 export function setupApp(app: App) {
+  const context = document.location.pathname.split('/')[2];
+
   // Inject a globally available `$app` object in template
   app.config.globalProperties.$app = {
-    context: '',
+    context,
   };
 
   // Provide access to `app` in script setup with `const app = inject('app')`

src/logic/storage.ts

@@ -18,7 +18,7 @@ export const detailItems = useWebExtensionStorage<Map<string, AmazonDetailItem>>
   'detailItems',
   new Map(),
   {
-    listenToStorageChanges: false,
+    listenToStorageChanges: 'options',
   },
 );
 
@@ -26,7 +26,7 @@ export const reviewItems = useWebExtensionStorage<Map<string, AmazonReview[]>>(
   'reviewItems',
   new Map(),
   {
-    listenToStorageChanges: false,
+    listenToStorageChanges: 'options',
   },
 );