feat(browser-ext): implement createChromeStorageAdapter and refactor storage usage

- Added createChromeStorageAdapter function to provide a consistent interface for Chrome extension storage.
- Refactored existing storage usage in hooks to utilize the new adapter.
- Removed legacy storage utilities for cleaner codebase.
- Enhanced storage functionality with real-time change watching and batch operations in the Storage class.
- Updated imports to reflect the new storage structure.

Author: 0x5457

packages/browser-ext/src/adapters/storage-adapter.ts

@@ -1,4 +1,5 @@
 import type { KeyValueStorage } from "@aipexstudio/aipex-core";
+import type { StorageAdapter } from "../types/adapter";
 
 /**
  * ChromeStorageAdapter - Implements KeyValueStorage interface using Chrome Storage API
@@ -46,8 +47,83 @@ export class ChromeStorageAdapter<T> implements KeyValueStorage<T> {
 }
 
 /**
- * Simple Chrome Storage wrapper for non-core usage
- * This is a convenience wrapper for browser-ext specific storage needs
+ * Create a StorageAdapter implementation for Chrome extension storage
+ * This implements the StorageAdapter interface used by hooks
+ */
+export function createChromeStorageAdapter(
+  area: "local" | "sync" = "local",
+): StorageAdapter {
+  return {
+    async get<T>(key: string): Promise<T | undefined> {
+      return new Promise((resolve) => {
+        if (typeof chrome !== "undefined" && chrome.storage?.[area]) {
+          chrome.storage[area].get(key, (result) => {
+            resolve((result[key] as T | undefined) ?? undefined);
+          });
+        } else {
+          // Fallback to localStorage in non-extension environments
+          try {
+            const value = localStorage.getItem(key);
+            resolve(value ? (JSON.parse(value) as T) : undefined);
+          } catch {
+            resolve(undefined);
+          }
+        }
+      });
+    },
+    async set<T>(key: string, value: T): Promise<void> {
+      return new Promise((resolve) => {
+        if (typeof chrome !== "undefined" && chrome.storage?.[area]) {
+          chrome.storage[area].set({ [key]: value }, () => resolve());
+        } else {
+          // Fallback to localStorage
+          localStorage.setItem(key, JSON.stringify(value));
+          resolve();
+        }
+      });
+    },
+    async remove(key: string): Promise<void> {
+      return new Promise((resolve) => {
+        if (typeof chrome !== "undefined" && chrome.storage?.[area]) {
+          chrome.storage[area].remove(key, () => resolve());
+        } else {
+          // Fallback to localStorage
+          localStorage.removeItem(key);
+          resolve();
+        }
+      });
+    },
+    async clear(): Promise<void> {
+      return new Promise((resolve) => {
+        if (typeof chrome !== "undefined" && chrome.storage?.[area]) {
+          chrome.storage[area].clear(() => resolve());
+        } else {
+          // Fallback to localStorage
+          localStorage.clear();
+          resolve();
+        }
+      });
+    },
+  };
+}
+
+/**
+ * Storage - A feature-rich Chrome Storage wrapper
+ *
+ * This class provides additional features beyond the StorageAdapter interface:
+ * - Real-time change watching (watch method)
+ * - Batch operations (getAll)
+ * - Direct Chrome Storage API access
+ *
+ * Use this class when you need:
+ * 1. To watch for storage changes in real-time
+ * 2. Browser-extension specific storage needs
+ * 3. More direct control over Chrome Storage API
+ *
+ * Use StorageAdapter (createChromeStorageAdapter) when:
+ * 1. You need a simple get/set/remove interface
+ * 2. You want consistent interface for testing
+ * 3. You're working with hook-based configuration (like useChatConfig)
  */
 export class Storage {
   private area: chrome.storage.StorageArea;
@@ -81,6 +157,10 @@ export class Storage {
     });
   }
 
+  /**
+   * Watch for changes to a specific key
+   * Returns an unwatch function to stop listening
+   */
   watch<T = any>(
     key: string,
     callback: (change: { newValue?: T; oldValue?: T }) => void,

packages/browser-ext/src/hooks/use-chat-config.ts

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useState } from "react";
+import { createChromeStorageAdapter } from "../adapters/storage-adapter";
 import type { ChatSettings, StorageAdapter } from "../types";
 
 /**
@@ -43,47 +44,10 @@ const defaultStorageAdapter: StorageAdapter = {
 
 /**
  * Chrome extension storage adapter
+ * Exported for use in other hooks and components
  */
-export const chromeStorageAdapter: StorageAdapter = {
-  async get<T>(key: string): Promise<T | undefined> {
-    return new Promise((resolve) => {
-      if (typeof chrome !== "undefined" && chrome.storage?.local) {
-        chrome.storage.local.get(key, (result) => {
-          resolve((result[key] as T | undefined) ?? undefined);
-        });
-      } else {
-        void defaultStorageAdapter.get<T>(key).then(resolve);
-      }
-    });
-  },
-  async set<T>(key: string, value: T): Promise<void> {
-    return new Promise((resolve) => {
-      if (typeof chrome !== "undefined" && chrome.storage?.local) {
-        chrome.storage.local.set({ [key]: value }, () => resolve());
-      } else {
-        void defaultStorageAdapter.set(key, value).then(resolve);
-      }
-    });
-  },
-  async remove(key: string): Promise<void> {
-    return new Promise((resolve) => {
-      if (typeof chrome !== "undefined" && chrome.storage?.local) {
-        chrome.storage.local.remove(key, () => resolve());
-      } else {
-        void defaultStorageAdapter.remove(key).then(resolve);
-      }
-    });
-  },
-  async clear(): Promise<void> {
-    return new Promise((resolve) => {
-      if (typeof chrome !== "undefined" && chrome.storage?.local) {
-        chrome.storage.local.clear(() => resolve());
-      } else {
-        void defaultStorageAdapter.clear().then(resolve);
-      }
-    });
-  },
-};
+export const chromeStorageAdapter: StorageAdapter =
+  createChromeStorageAdapter();
 
 export interface UseChatConfigOptions {
   /** Initial settings (will be overridden by stored values) */

packages/browser-ext/src/hooks/use-storage.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Storage } from "../adapters/storage-adapter";
 
 /**
@@ -11,9 +11,10 @@ export function useStorage<T = any>(
   const [value, setValue] = useState<T | undefined>(defaultValue);
   const [isLoading, setIsLoading] = useState(true);
 
-  useEffect(() => {
-    const storage = new Storage();
+  // Create storage instance once
+  const storage = useMemo(() => new Storage(), []);
 
+  useEffect(() => {
     // Load initial value
     void storage.get<T>(key).then((storedValue: T | undefined) => {
       setValue(storedValue ?? defaultValue);
@@ -26,10 +27,9 @@ export function useStorage<T = any>(
     });
 
     return unwatch;
-  }, [key, defaultValue]);
+  }, [key, defaultValue, storage]);
 
   const setStoredValue = async (newValue: T) => {
-    const storage = new Storage();
     await storage.set(key, newValue);
     setValue(newValue);
   };

packages/browser-ext/src/i18n/index.ts

@@ -1,4 +1,4 @@
-import { Storage } from "~/lib/storage";
+import { Storage } from "~/adapters/storage-adapter";
 // Language resource imports
 import enTranslations from "./locales/en.json";
 import zhTranslations from "./locales/zh.json";

packages/browser-ext/src/lib/context-providers.ts

@@ -279,7 +279,7 @@ export function searchContexts(
   const lowerQuery = query.toLowerCase();
   return contexts.filter(
     (ctx) =>
-      ctx.label.toLowerCase().includes(lowerQuery) ??
+      ctx.label.toLowerCase().includes(lowerQuery) ||
       ctx.value.toLowerCase().includes(lowerQuery),
   );
 }

packages/browser-ext/src/lib/services/host-access-manager.ts

@@ -1,4 +1,4 @@
-import { Storage } from "~/lib/storage";
+import { Storage } from "~/adapters/storage-adapter";
 
 export type HostAccessMode = "whitelist" | "blocklist" | "include-all";
 

packages/browser-ext/src/lib/storage.ts

@@ -1,5 +1,6 @@
 import { tool } from "@aipexstudio/aipex-core";
 import { z } from "zod/v3";
+import { executeScriptInActiveTab, getActiveTab } from "./utils";
 
 /**
  * Get information about the current active page
@@ -10,14 +11,7 @@ export const getPageInfoTool = tool({
     "Get information about the current active page (URL, title, etc.)",
   parameters: z.object({}),
   execute: async () => {
-    const [tab] = await chrome.tabs.query({
-      active: true,
-      currentWindow: true,
-    });
-
-    if (!tab) {
-      throw new Error("No active tab found");
-    }
+    const tab = await getActiveTab();
 
     return {
       url: tab.url,
@@ -45,18 +39,8 @@ export const scrollPageTool = tool({
       .describe("Number of pixels to scroll (for up/down)"),
   }),
   execute: async ({ direction, pixels = 500 }) => {
-    const [tab] = await chrome.tabs.query({
-      active: true,
-      currentWindow: true,
-    });
-
-    if (!tab?.id) {
-      throw new Error("No active tab found");
-    }
-
-    await chrome.scripting.executeScript({
-      target: { tabId: tab.id },
-      func: (dir: string, px: number) => {
+    await executeScriptInActiveTab(
+      (dir: string, px: number) => {
         switch (dir) {
           case "up":
             window.scrollBy({ top: -px, behavior: "smooth" });
@@ -75,8 +59,8 @@ export const scrollPageTool = tool({
             break;
         }
       },
-      args: [direction, pixels],
-    });
+      [direction, pixels],
+    );
 
     return { success: true, direction, scrolled: pixels };
   },
@@ -125,25 +109,14 @@ export const getPageContentTool = tool({
       .describe("CSS selector to get content from (default: body)"),
   }),
   execute: async ({ selector = "body" }) => {
-    const [tab] = await chrome.tabs.query({
-      active: true,
-      currentWindow: true,
-    });
-
-    if (!tab?.id) {
-      throw new Error("No active tab found");
-    }
-
-    const results = await chrome.scripting.executeScript({
-      target: { tabId: tab.id },
-      func: (sel: string) => {
+    const content = await executeScriptInActiveTab(
+      (sel: string) => {
         const element = document.querySelector(sel);
         return element ? element.textContent : null;
       },
-      args: [selector],
-    });
+      [selector],
+    );
 
-    const content = results[0]?.result;
     if (!content) {
       throw new Error(`No content found for selector: ${selector}`);
     }
@@ -162,18 +135,8 @@ export const clickElementTool = tool({
     selector: z.string().describe("CSS selector of the element to click"),
   }),
   execute: async ({ selector }) => {
-    const [tab] = await chrome.tabs.query({
-      active: true,
-      currentWindow: true,
-    });
-
-    if (!tab?.id) {
-      throw new Error("No active tab found");
-    }
-
-    const results = await chrome.scripting.executeScript({
-      target: { tabId: tab.id },
-      func: (sel: string) => {
+    const result = await executeScriptInActiveTab(
+      (sel: string) => {
         const element = document.querySelector(sel);
         if (!element) {
           return { success: false, error: "Element not found" };
@@ -184,10 +147,9 @@ export const clickElementTool = tool({
         }
         return { success: false, error: "Element is not clickable" };
       },
-      args: [selector],
-    });
+      [selector],
+    );
 
-    const result = results[0]?.result;
     if (!result?.success) {
       throw new Error(result?.error ?? "Failed to click element");
     }
@@ -207,18 +169,8 @@ export const fillFormFieldTool = tool({
     value: z.string().describe("Value to fill in the field"),
   }),
   execute: async ({ selector, value }) => {
-    const [tab] = await chrome.tabs.query({
-      active: true,
-      currentWindow: true,
-    });
-
-    if (!tab?.id) {
-      throw new Error("No active tab found");
-    }
-
-    const results = await chrome.scripting.executeScript({
-      target: { tabId: tab.id },
-      func: (sel: string, val: string) => {
+    const result = await executeScriptInActiveTab(
+      (sel: string, val: string) => {
         const element = document.querySelector(sel);
         if (!element) {
           return { success: false, error: "Element not found" };
@@ -234,10 +186,9 @@ export const fillFormFieldTool = tool({
         }
         return { success: false, error: "Element is not an input field" };
       },
-      args: [selector, value],
-    });
+      [selector, value],
+    );
 
-    const result = results[0]?.result;
     if (!result?.success) {
       throw new Error(result?.error ?? "Failed to fill form field");
     }