fix(extension): Fix extension setting hook not firing on setting change. #10

3 files changed, 37 insertions, 23 deletions

diff --git a/apps/browser-extension/package.json b/apps/browser-extension/package.json
index 499f26ee..344d2814 100644
--- a/apps/browser-extension/package.json
+++ b/apps/browser-extension/package.json
@@ -37,7 +37,6 @@
     "superjson": "^2.2.1",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",
-    "use-chrome-storage": "^1.2.2",
     "zod": "^3.22.4"
   },
   "devDependencies": {
diff --git a/apps/browser-extension/src/utils/settings.ts b/apps/browser-extension/src/utils/settings.ts
index 76ff0f61..6d51acde 100644
--- a/apps/browser-extension/src/utils/settings.ts
+++ b/apps/browser-extension/src/utils/settings.ts
@@ -1,4 +1,4 @@
-import { useChromeStorageSync } from "use-chrome-storage";
+import React from "react";
 
 export interface Settings {
   apiKey: string;
@@ -6,20 +6,47 @@ export interface Settings {
   address: string;
 }
 
+const STORAGE = chrome.storage.sync;
+
 export default function usePluginSettings() {
-  const [settings, setSettings, _1, _2, isInit] = useChromeStorageSync(
-    "settings",
-    {
-      apiKey: "",
-      address: "",
-    } as Settings,
-  );
+  const [settings, setSettingsInternal] = React.useState<Settings>({
+    apiKey: "",
+    address: "",
+  });
+
+  const [isInit, setIsInit] = React.useState(false);
+
+  React.useEffect(() => {
+    if (!isInit) {
+      getPluginSettings().then((settings) => {
+        setSettingsInternal(settings);
+        setIsInit(true);
+      });
+    }
+    const onChange = (
+      changes: Record<string, chrome.storage.StorageChange>,
+    ) => {
+      if (changes.settings === undefined) {
+        return;
+      }
+      setSettingsInternal(changes.settings.newValue as Settings);
+    };
+    STORAGE.onChanged.addListener(onChange);
+    return () => {
+      STORAGE.onChanged.removeListener(onChange);
+    };
+  }, []);
+
+  const setSettings = async (s: (_: Settings) => Settings) => {
+    const newVal = s(settings);
+    await STORAGE.set({ settings: newVal });
+  };
 
   return { settings, setSettings, isPending: isInit };
 }
 
 export async function getPluginSettings() {
-  return (await chrome.storage.sync.get("settings")).settings as Settings;
+  return (await STORAGE.get("settings")).settings as Settings;
 }
 
 export function subscribeToSettingsChanges(
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a8a143c2..0e1334c5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -115,9 +115,6 @@ importers:
       tailwindcss-animate:
         specifier: ^1.0.7
         version: 1.0.7(tailwindcss@3.4.1)
-      use-chrome-storage:
-        specifier: ^1.2.2
-        version: 1.3.0(react@18.3.1)
       zod:
         specifier: ^3.22.4
         version: 3.22.4
@@ -8130,6 +8127,7 @@ packages:
   gm@1.25.0:
     resolution: {integrity: sha512-4kKdWXTtgQ4biIo7hZA396HT062nDVVHPjQcurNZ3o/voYN+o5FUC5kOwuORbpExp3XbTJ3SU7iRipiIhQtovw==}
     engines: {node: '>=14'}
+    deprecated: The gm module has been sunset. Please migrate to an alternative. https://github.com/aheckmann/gm?tab=readme-ov-file#2025-02-24-this-project-is-not-maintained
 
   gopd@1.0.1:
     resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
@@ -13074,11 +13072,6 @@ packages:
       '@types/react':
         optional: true
 
-  use-chrome-storage@1.3.0:
-    resolution: {integrity: sha512-zdeAAHU1zsjNSy78I8GCtcWJkbpG0Iqwiiv42c2sDQ0HXTGGZHh7pAsFiHdZFEBYBIJM+ENkpGOQ06MNouBRoA==}
-    peerDependencies:
-      react: ^16.9.0 || ^17.0.0 || ^18.0.0
-
   use-debounce@10.0.0:
     resolution: {integrity: sha512-XRjvlvCB46bah9IBXVnq/ACP2lxqXyZj0D9hj4K5OzNroMDpTEBg8Anuh1/UfRTRs7pLhQ+RiNxxwZu9+MVl1A==}
     engines: {node: '>= 16.0.0'}
@@ -30279,11 +30272,6 @@ snapshots:
       tslib: 2.6.2
     dev: false
 
-  use-chrome-storage@1.3.0(react@18.3.1):
-    dependencies:
-      react: 18.3.1
-    dev: false
-
   use-debounce@10.0.0(react@18.3.1):
     dependencies:
       react: 18.3.1