refactor(firefox): tab storage handling for Firefox compatibility

Author: tonyhu-012

README.md

@@ -1,6 +1,6 @@
 <div align="center">
 
-<img src="assets/icon.png" alt="NativeMind Logo" width="32" height="32">
+<img src="docs/images/icon.png" alt="NativeMind Logo" width="32" height="32">
 
 # NativeMind - Private, on-device AI Assistant, no cloud dependencies
 
@@ -13,7 +13,7 @@
 
 **Vote to help more people discover private, convenient AI** 🙏
 
-<img src="assets/images/demo-screenshot.png" alt="NativeMind in Action" width="800">
+<img src="docs/images/demo-screenshot.png" alt="NativeMind in Action" width="800">
 
 [![Privacy First](https://img.shields.io/badge/Privacy-First-brightgreen?style=flat-square&logo=security&logoColor=white)]()
 [![No Tracking](https://img.shields.io/badge/Tracking-None-success?style=flat-square&logo=shield&logoColor=white)]()
@@ -49,7 +49,7 @@ Install directly from the [Chrome Web Store](https://chromewebstore.google.com/d
 3. **Start Using**: Click the NativeMind icon in your browser toolbar
 
 <div align="center">
-<img src="assets/images/extension-popup.png" alt="NativeMind Extension Interface" width="600">
+<img src="docs/images/extension-popup.png" alt="NativeMind Extension Interface" width="600">
 <br>
 <em>For more details, visit our official website: <strong><a href="https://nativemind.app/?utm_source=github">nativemind.app</a></strong></em>
 </div>

docs/images/chrome-web-store.png

@@ -3,12 +3,14 @@ import '@/utils/rpc'
 
 import { browser } from 'wxt/browser'
 import { defineBackground } from 'wxt/utils/define-background'
+import { storage } from 'wxt/utils/storage'
 
 import { INVALID_URLS } from '@/utils/constants'
 import { CONTEXT_MENU, CONTEXT_MENU_ITEM_TRANSLATE_PAGE, ContextMenuManager } from '@/utils/context-menu'
 import logger from '@/utils/logger'
 import { bgBroadcastRpc } from '@/utils/rpc'
 import { isTabValid } from '@/utils/tab'
+import { getTabKeys } from '@/utils/tab-store'
 import { registerDeclarativeNetRequestRule } from '@/utils/web-request'
 
 export default defineBackground(() => {
@@ -61,12 +63,18 @@ export default defineBackground(() => {
   })
 
   browser.tabs.onRemoved.addListener(async (tabId, removeInfo) => {
-    logger.info('tab removed', { tabId })
+    logger.info('tab removed', { tabId, removeInfo, isFirefox: import.meta.env.FIREFOX })
     tabsWaitingForOpen.delete(tabId)
     bgBroadcastRpc.emit('tabRemoved', {
       tabId,
       ...removeInfo,
     })
+    if (import.meta.env.FIREFOX) {
+      // Firefox does not support session storage in content scripts, so we need to clean up the tab store
+      const keys = getTabKeys(tabId)
+      logger.info('Cleaning up tab store for removed tab', { tabId, keys })
+      await storage.removeItems(keys)
+    }
   })
 
   browser.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {

docs/images/demo-screenrecord.gif

@@ -6,6 +6,7 @@ export const NATIVEMIND_HOMEPAGE_URL = 'https://nativemind.app'
 export const OLLAMA_SITE_DOWNLOAD_BUTTON_CLASS = 'nativemind-ollama-download-button'
 export const CONTEXT_MENU_STORAGE_KEY = 'local:context-menu-map_1'
 export const MIN_SELECTION_LENGTH_TO_SHOW_WRITING_TOOLS = 10
+export const TAB_STORE_STORAGE_KEY_PREFIX = 'tab-store-'
 
 export const INVALID_URLS = [
   /^https:\/\/chromewebstore\.google\.com/,

assets/images/demo-screenshot.png renamed to docs/images/demo-screenshot.png

@@ -1,6 +1,7 @@
 import { customRef, ref, toRaw, watch } from 'vue'
 import { storage } from 'wxt/utils/storage'
 
+import { TAB_STORE_STORAGE_KEY_PREFIX } from '../constants'
 import { debounce } from '../debounce'
 import { Base64ImageData } from '../image'
 import { lazyInitialize } from '../memo'
@@ -10,12 +11,15 @@ import type { HistoryItemV1 } from './history'
 
 export { HistoryItemV1 }
 
-async function defineTabValue<T>(key: string, defaultValue: T) {
-  let sessionKey = `session:tab-store-${key}` as `${'local' | 'session'}:tab-store-${string}`
-  if (import.meta.env.FIREFOX) {
-    // Firefox does not support session storage in content scripts
-    sessionKey = `local:tab-store-${key}` as `local:tab-store-${string}`
-  }
+function constructStorageKey(tabId: number, key: string) {
+  const scope = import.meta.env.FIREFOX
+    ? 'local'
+    : 'session'
+  return `${scope}:${TAB_STORE_STORAGE_KEY_PREFIX}${tabId}-${key}` as `${'local' | 'session'}:${string}`
+}
+
+async function defineTabValue<T>(tabId: number, key: string, defaultValue: T) {
+  const sessionKey = constructStorageKey(tabId, key)
   const valueInStorageStr = await storage.getItem<string>(sessionKey)
   const valueInStorage = valueInStorageStr ? JSON.parse(valueInStorageStr) : defaultValue
   const v = ref(valueInStorage)
@@ -59,14 +63,14 @@ async function _getTabStore() {
   const { tabId, faviconUrl, url, title } = await c2bRpc.getTabInfo()
   if (!tabId) throw new Error('no tab id')
   return {
-    currentTabId: await defineTabValue('currentTabId', tabId),
-    showContainer: await defineTabValue(`showContainer-${tabId}`, false),
-    showSetting: await defineTabValue<ShowSettingsParams>(`showSetting-${tabId}`, { show: false }),
-    chatHistory: await defineTabValue(`chatHistory-${tabId}`, [] as ChatHistory),
-    pageSummary: await defineTabValue(`summary-${tabId}`, { content: '', summary: '' } as PageSummary),
-    contextTabIds: await defineTabValue(`contextTabs-${tabId}`, [tabId] as number[]),
-    contextImages: await defineTabValue(`contextImages-${tabId}`, [] as Base64ImageData[]),
-    tabInfo: await defineTabValue(`tabInfo-${tabId}`, {
+    currentTabId: await defineTabValue(tabId, 'currentTabId', tabId),
+    showContainer: await defineTabValue(tabId, `showContainer`, false),
+    showSetting: await defineTabValue<ShowSettingsParams>(tabId, `showSetting`, { show: false }),
+    chatHistory: await defineTabValue(tabId, `chatHistory`, [] as ChatHistory),
+    pageSummary: await defineTabValue(tabId, `summary`, { content: '', summary: '' } as PageSummary),
+    contextTabIds: await defineTabValue(tabId, `contextTabs`, [tabId] as number[]),
+    contextImages: await defineTabValue(tabId, `contextImages`, [] as Base64ImageData[]),
+    tabInfo: await defineTabValue(tabId, `tabInfo`, {
       url,
       title,
       faviconUrl,
@@ -75,3 +79,18 @@ async function _getTabStore() {
 }
 
 export const getTabStore = lazyInitialize(_getTabStore)
+
+// this is a workaround for firefox to clear the tab store when the tab is closed
+export const getTabKeys = (tabId: number) => {
+  const keys = [
+    'currentTabId',
+    'showContainer',
+    'showSetting',
+    'chatHistory',
+    'summary',
+    'contextTabs',
+    'contextImages',
+    'tabInfo',
+  ]
+  return keys.map((key) => constructStorageKey(tabId, key))
+}