half way there

hooks/useHostInfo.ts

@@ -0,0 +1,61 @@
+import { useState, useEffect } from 'react';
+import { browser } from 'wxt/browser';
+import { StorageService } from '@/utils/storage';
+import type { HostInfo } from '@/utils/types';
+
+export function useHostInfo() {
+  const [info, setInfo] = useState<HostInfo | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let unwatch: (() => void) | undefined;
+
+    const init = async () => {
+      // Get Current Tab
+      const [tab] = await browser.tabs.query({ active: true, currentWindow: true });
+      if (!tab?.id || !tab?.url) {
+        setLoading(false);
+        return;
+      }
+
+      // Handle System/Browser Pages immediately
+      const urlObj = new URL(tab.url);
+      const isSystemPage = ['chrome:', 'about:', 'edge:', 'moz-extension:', 'chrome-extension:', 'file:'].includes(urlObj.protocol);
+
+      if (isSystemPage) {
+        setInfo({
+          url: tab.url,
+          domain: 'System Resource',
+          loading: false,
+          error: null,
+          network: null,
+          location: null,
+          isBrowserResource: true
+        });
+        setLoading(false);
+        return;
+      }
+
+      // Handle Network Pages via Storage
+      const key = StorageService.getKey(tab.id);
+
+      // Initial Load
+      const current = await storage.getItem<HostInfo>(key);
+      setInfo(current);
+      setLoading(false);
+
+      // Watch for changes
+      unwatch = storage.watch<HostInfo>(key, (newValue) => {
+        setInfo(newValue);
+      });
+    };
+
+    init();
+
+    return () => {
+      if (unwatch) unwatch();
+    };
+  }, []);
+
+  return { info, loading };
+}

hooks/useTabData.ts

@@ -1,75 +0,0 @@
-export function useTabData() {
-  const [data, setData] = useState<ServerData | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const [tab] = await browser.tabs.query({
-          active: true,
-          currentWindow: true,
-        })
-
-        if (!tab?.url) throw new Error('No active tab found')
-
-        const url = new URL(tab.url)
-        const hostname = url.hostname
-
-        if (['chrome:', 'about:', 'file:'].includes(url.protocol)) {
-          return setData({
-            origin: '',
-            ip: '',
-            hostname: url.href,
-            country: '',
-            city: '',
-            org: '',
-            isLocal: false,
-            isBrowserResource: true,
-          })
-        }
-
-        const response = await browser.runtime.sendMessage<
-          FetchServerInfoRequest,
-          FetchServerInfoResponse
-        >({
-          type: 'FETCH_SERVER_INFO',
-          hostname: hostname,
-        })
-
-        if (!response) {
-          throw new Error('No response from background script')
-        }
-
-        if (response.error) {
-          return setData({
-            origin: '',
-            ip: '',
-            hostname: hostname,
-            country: '',
-            city: '',
-            org: '',
-            isLocal: true,
-            isBrowserResource: false,
-          })
-        }
-
-        if (!response.data?.ip) {
-          throw new Error('Invalid server data received')
-        }
-
-        setData(response.data)
-        setError(null)
-      } catch (err) {
-        setError(err instanceof Error ? err.message : 'No data found')
-        setData(null)
-      } finally {
-        setLoading(false)
-      }
-    }
-
-    fetchData()
-  }, [])
-
-  return { data, loading, error }
-}