Add host info views and network error handling

Introduce modular host info UI components: Header, InfoRow,
CopyButton, and Browser/Local/Public views. Refactor ServerInfo to
compose these components.

Add network error handling: background listens for webRequest
onErrorOccurred and forwards errors to Tab.handleError. Implement
Tab.handleError to store friendly error info and Tab.processSystemPage
to handle browser/system pages.

components/Browser.tsx

@@ -0,0 +1,32 @@
+import { CpuChipIcon, GlobeAltIcon } from '@heroicons/react/24/outline';
+import { Header } from './Header';
+import { InfoRow } from './Info';
+import type { HostInfo } from '@/utils/types';
+
+export const BrowserResourceView = ({ data }: { data: HostInfo }) => {
+  return (
+    <div className="w-80 bg-white dark:bg-gray-950 font-sans">
+      <Header
+        title="System Resource"
+        flagCode="unknown"
+      />
+      <div className="p-5">
+        <InfoRow
+          icon={CpuChipIcon}
+          label="Type"
+          value="Local Browser Page"
+          iconColor="text-orange-500"
+        />
+        <InfoRow
+          icon={GlobeAltIcon}
+          label="URL"
+          value={data.url}
+          iconColor="text-gray-400"
+        />
+      </div>
+      <div className="px-5 pb-5 text-xs text-gray-400 text-center">
+        This page is generated locally by your browser.
+      </div>
+    </div>
+  );
+};

components/CopyButton.tsx

@@ -0,0 +1,24 @@
+import { useState } from 'react';
+import { CheckIcon, ClipboardDocumentIcon } from '@heroicons/react/24/outline';
+
+export const CopyButton = ({ text }: { text: string }) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    await navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <button
+      onClick={handleCopy}
+      className="ml-2 p-1 rounded-md text-gray-400 hover:text-gray-600 hover:bg-gray-100 dark:hover:text-gray-200 dark:hover:bg-gray-800 transition-all opacity-0 group-hover:opacity-100 focus:opacity-100 cursor-pointer"
+      title="Copy to clipboard"
+    >
+      {copied ? <CheckIcon className="w-3.5 h-3.5 text-green-500" /> : <ClipboardDocumentIcon className="w-3.5 h-3.5" />}
+    </button>
+  );
+};

components/Error.tsx

@@ -1,16 +1,13 @@
+import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
+
 export default function Error({ error }: { error: string }) {
   return (
-    <div className="min-w-[300px] bg-gray-900 shadow-2xl p-6 text-white font-sans">
+    <div className="w-[320px] bg-white dark:bg-gray-950 flex flex-col items-center justify-center p-8 text-center font-sans">
-      <div className="flex items-center justify-between mb-6">
+      <div className="p-3 bg-red-50 dark:bg-red-900/20 rounded-full mb-4">
-        <h2 className="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">
+        <ExclamationTriangleIcon className="w-6 h-6 text-red-600 dark:text-red-400" />
-          Error
-        </h2>
-      </div>
-      <div className="flex items-center space-x-3">
-        <div>
-          <p className="text-sm text-gray-300">{error}</p>
-        </div>
       </div>
+      <h3 className="text-sm font-bold text-gray-900 dark:text-white mb-1">Unable to Load</h3>
+      <p className="text-sm text-gray-500 dark:text-gray-400">{error}</p>
     </div>
   );
 }

components/Header.tsx

@@ -0,0 +1,31 @@
+import { browser } from 'wxt/browser';
+
+export const Header = ({ title, flagCode }: { title: string, flagCode?: string | null }) => {
+  const getFlagUrl = (code?: string | null) => {
+    if (!code) return '';
+    try {
+      const path = `/${code.toLowerCase()}.webp`;
+      return browser.runtime.getURL(path as any);
+    } catch {
+      return '';
+    }
+  };
+
+  return (
+    <div className="px-5 py-4 bg-gray-50/50 dark:bg-gray-900/50 border-b border-gray-200 dark:border-gray-800 flex items-center justify-between">
+      <div className="min-w-0 pr-3">
+        <h1 className="text-base font-bold text-gray-900 dark:text-white truncate" title={title}>
+          {title}
+        </h1>
+      </div>
+      {flagCode && (
+        <img
+          src={getFlagUrl(flagCode)}
+          alt={flagCode}
+          className="w-8 h-auto rounded shadow-sm border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800"
+          onError={(e) => (e.currentTarget.style.display = 'none')}
+        />
+      )}
+    </div>
+  );
+};

components/Info.tsx

@@ -0,0 +1,45 @@
+import { CopyButton } from './CopyButton';
+
+export const InfoRow = ({
+  icon: Icon,
+  label,
+  value,
+  href,
+  canCopy,
+  iconColor = "text-gray-400 dark:text-gray-500"
+}: {
+  icon: any,
+  label: string,
+  value: string | null,
+  href?: string,
+  canCopy?: boolean,
+  iconColor?: string
+}) => {
+  if (!value) return null;
+
+  return (
+    <div className="group flex items-start py-3 border-b border-gray-100 dark:border-gray-800 last:border-0">
+      <div className={`mt-0.5 mr-3 ${iconColor}`}>
+        <Icon className="w-4 h-4" />
+      </div>
+      <div className="flex-1 min-w-0">
+        <p className="text-[10px] uppercase tracking-wider text-gray-400 dark:text-gray-500 font-semibold mb-0.5">{label}</p>
+        <div className="flex items-center">
+          {href ? (
+            <a
+              href={href}
+              target="_blank"
+              rel="noreferrer"
+              className="text-sm font-medium text-gray-900 dark:text-gray-100 hover:text-blue-600 dark:hover:text-blue-400 truncate transition-colors flex items-center gap-1.5"
+            >
+              <span className="truncate">{value}</span>
+            </a>
+          ) : (
+            <span className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate select-all">{value}</span>
+          )}
+          {canCopy && <CopyButton text={value} />}
+        </div>
+      </div>
+    </div>
+  );
+};

components/Local.tsx

@@ -0,0 +1,30 @@
+import { CpuChipIcon, ServerIcon } from '@heroicons/react/24/outline';
+import { Header } from './Header';
+import { InfoRow } from './Info';
+import type { HostInfo } from '@/utils/types';
+
+export const LocalNetworkView = ({ data }: { data: HostInfo }) => {
+  return (
+    <div className="w-80 bg-white dark:bg-gray-950 font-sans">
+      <Header
+        title={data.domain}
+        flagCode="unknown"
+      />
+      <div className="p-5">
+        <InfoRow
+          icon={CpuChipIcon}
+          label="Type"
+          value="Local / Private Network"
+          iconColor="text-orange-500"
+        />
+        <InfoRow
+          icon={ServerIcon}
+          label="IP Address"
+          value={data.network?.ip || null}
+          canCopy
+          iconColor="text-blue-500"
+        />
+      </div>
+    </div>
+  );
+};

components/Public.tsx

@@ -0,0 +1,67 @@
+import {
+  ServerIcon,
+  MapPinIcon,
+  GlobeAltIcon,
+  BuildingOfficeIcon
+} from '@heroicons/react/24/outline';
+import { Header } from './Header';
+import { InfoRow } from './Info';
+import type { HostInfo } from '@/utils/types';
+
+export const PublicNetworkView = ({ data }: { data: HostInfo }) => {
+  const { network, location, domain } = data;
+
+  if (!network) return null;
+
+  return (
+    <div className="w-80 bg-white dark:bg-gray-950 font-sans text-gray-900 dark:text-gray-100">
+      <Header
+        title="Host Information"
+        flagCode={location?.countryCode || 'unknown'}
+      />
+
+      <div className="p-5 space-y-0.5">
+        <InfoRow
+          icon={ServerIcon}
+          label="IP Address"
+          value={network.ip}
+          href={`https://ip.albert.lol/${network.ip}`}
+          canCopy
+          iconColor="text-blue-500"
+        />
+        <InfoRow
+          icon={GlobeAltIcon}
+          label="Hostname"
+          value={network.hostname}
+          canCopy
+          iconColor="text-indigo-500"
+        />
+        <InfoRow
+          icon={MapPinIcon}
+          label="Location"
+          value={location?.countryName || 'Unknown Location'}
+          iconColor="text-emerald-500"
+        />
+        <InfoRow
+          icon={BuildingOfficeIcon}
+          label="Organization / ASN"
+          value={network.org}
+          href={network.asn ? `https://bgp.he.net/${network.asn}` : undefined}
+          iconColor="text-violet-500"
+        />
+      </div>
+
+      <div className="px-5 pb-5 pt-2">
+        <a
+          href={`https://platform.censys.io/search?q=${network.hostname || domain}`}
+          target="_blank"
+          rel="noreferrer"
+          className="flex items-center justify-center w-full py-2 px-4 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300 rounded-md transition-all text-xs font-medium shadow-sm hover:shadow cursor-pointer"
+        >
+          <GlobeAltIcon className="w-3.5 h-3.5 mr-2 text-gray-400" />
+          Analyze on Censys
+        </a>
+      </div>
+    </div>
+  );
+};

components/ServerInfo.tsx

@@ -1,110 +1,27 @@
-import { LinkIcon, ServerIcon, IdentificationIcon, MapPinIcon } from '@heroicons/react/24/outline';
+import type { HostInfo } from '@/utils/types';
-import { codes } from '@/utils/codes';
+import Error from './Error';
+import { BrowserResourceView } from './Browser';
+import { LocalNetworkView } from './Local';
+import { PublicNetworkView } from './Public';
 
-export default function ServerInfo({ data }: { data: ServerData }) {
+export default function ServerInfo({ data }: { data: HostInfo }) {
+  const { network, isBrowserResource } = data;
 
-  const countryName = data.country
+  // Browser Resource View
-    ? codes[data.country.toLowerCase()] || "N/A"
+  if (isBrowserResource) {
-    : "N/A";
+    return <BrowserResourceView data={data} />;
-
-  if (data.isBrowserResource) {
-    return (
-      <div className="min-w-[300px] bg-gray-900 shadow-2xl p-6 text-white font-sans">
-        <div className="flex items-center justify-between mb-6">
-          <h2 className="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">
-            Browser Resource
-          </h2>
-        </div>
-        <div className="flex items-center space-x-3">
-          <div>
-            <p className="text-sm text-gray-300">The requested document was obtained from the local computer</p>
-          </div>
-        </div>
-      </div>
-    );
   }
 
-  if (data.isLocal) {
+  // Fallback if network data is missing
-    return (
+  if (!network) {
-      <div className="min-w-[300px] bg-gray-900 shadow-2xl p-6 text-white font-sans">
+    return <Error error="Host information unavailable." />;
-        <div className="flex items-center justify-between mb-6">
-          <h2 className="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">
-            Internal Network
-          </h2>
-        </div>
-
-        {data.ip && (
-          <div className="flex items-center space-x-3">
-            <ServerIcon className="w-6 h-6 text-yellow-400 flex-shrink-0" />
-            <div>
-              <p className="text-sm text-gray-400">IP Address</p>
-              <p className="font-medium">{data.ip}</p>
-            </div>
-          </div>
-        )}
-
-        {data.hostname && (
-          <div className="flex items-center space-x-3">
-            <LinkIcon className="w-6 h-6 text-green-400 flex-shrink-0" />
-            <div>
-              <p className="text-sm text-gray-400">Hostname</p>
-              <p className="font-medium break-all">{data.hostname}</p>
-            </div>
-          </div>
-        )}
-      </div>
-    );
   }
 
-  return (
+  // Local Network View
-    <div className="min-w-[300px] bg-gray-900 shadow-2xl p-6 text-white font-sans">
+  if (network.isLocal) {
-      <div className="flex items-center justify-between mb-6">
+    return <LocalNetworkView data={data} />;
-        <h2 className="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">
+  }
-          Host Information
-        </h2>
-      </div>
-      <div className="space-y-4">
 
-        <div className="flex items-center space-x-3">
+  // Public Internet View
-          <ServerIcon className="w-6 h-6 text-yellow-400 flex-shrink-0" />
+  return <PublicNetworkView data={data} />;
-          <div>
-            <p className="text-sm text-gray-400">IP Address</p>
-            <p className="font-medium hover:underline"><a href={`https://ip.albert.lol/${data.ip}`} target='_blank'>{data.ip}</a></p>
-          </div>
-        </div>
-
-        <div className="flex items-center space-x-3">
-          <LinkIcon className="w-6 h-6 text-green-400 flex-shrink-0" />
-          <div>
-            <p className="text-sm text-gray-400">Hostname</p>
-            <p className="font-medium break-all">{data.hostname}</p>
-          </div>
-        </div>
-
-        <div className="flex items-center space-x-3">
-          <MapPinIcon className="w-6 h-6 text-blue-400 flex-shrink-0" />
-          <div>
-            <p className="text-sm text-gray-400">Location</p>
-            <p className="font-medium">{countryName}</p>
-          </div>
-        </div>
-
-        <div className="flex items-center space-x-3">
-          <IdentificationIcon className="w-6 h-6 text-red-400 flex-shrink-0" />
-          <div>
-            <p className="text-sm text-gray-400">Org</p>
-            <p className="font-medium hover:underline">
-              <a href={`https://bgp.he.net/${data.org.split(' ')[0]}`} target='_blank'>{data.org}</a>
-            </p>
-          </div>
-        </div>
-      </div>
-
-      <div className="mt-6 pt-4 border-t border-gray-700">
-        <p className="text-xs text-gray-400 text-center hover:underline">
-          <a href={`https://search.censys.io/search?resource=hosts&sort=RELEVANCE&per_page=25&virtual_hosts=EXCLUDE&q=${data.origin}`} target='_blank'>Search on Censys</a>
-        </p>
-      </div>
-    </div>
-  );
 }

entrypoints/background.ts

@@ -1,177 +1,51 @@
-import psl from 'psl'
+import { browser } from 'wxt/browser';
-
+import { Tab } from '@/services/tab';
-let currentTabUrl: string | null = null
+import { StorageService } from '@/utils/storage';
-
-async function resolveARecord(hostname: string): Promise<string | null> {
-  try {
-    let dnsResponse = await fetch(
-      `https://cloudflare-dns.com/dns-query?name=${hostname}&type=A`,
-      { headers: { Accept: 'application/dns-json' } }
-    )
-    if (dnsResponse.ok) {
-      const dnsData = await dnsResponse.json()
-      const aRecord = dnsData.Answer?.find(
-        (entry: DNSEntry) => entry.type === 1
-      )?.data
-      if (aRecord) return aRecord
-    }
-
-    dnsResponse = await fetch(
-      `https://cloudflare-dns.com/dns-query?name=${hostname}&type=AAAA`,
-      { headers: { Accept: 'application/dns-json' } }
-    )
-    if (dnsResponse.ok) {
-      const dnsData = await dnsResponse.json()
-      const aaaaRecord = dnsData.Answer?.find(
-        (entry: DNSEntry) => entry.type === 28
-      )?.data
-      if (aaaaRecord) return aaaaRecord
-    }
-
-    return null
-  } catch (error) {
-    console.error('Failed to fetch DNS data:', error)
-    return null
-  }
-}
-
-function isIP(host: string): boolean {
-  const cleanedHost = host.replace(/^\[|\]$/g, '')
-
-  const ipv4Regex =
-    /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/
-
-  const ipv6Regex =
-    /(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))/
-
-  return ipv4Regex.test(cleanedHost) || ipv6Regex.test(cleanedHost)
-}
-
-async function getIPInfo(host: string): Promise<any | null> {
-  const cleanedHost = host.replace(/^\[|\]$/g, '')
-
-  if (isIP(cleanedHost)) {
-    const response = await fetch(`https://ip.albert.lol/${cleanedHost}`)
-    const data = await response.json()
-    return data.ip ? data : null
-  }
-
-  const resolvedIp = await resolveARecord(cleanedHost)
-  if (!resolvedIp) return null
-
-  const response = await fetch(`https://ip.albert.lol/${resolvedIp}`)
-  return await response.json()
-}
-
-async function handleTabUpdate(url: string) {
-  if (url === currentTabUrl) return
-  currentTabUrl = url
-
-  try {
-    const hostname = new URL(url).hostname
-    const apiData = await getIPInfo(hostname)
-    if (!apiData || !apiData.ip) {
-      await updateIcon(null)
-      return
-    }
-
-    if (apiData.bogon === true) {
-      await updateIcon(null)
-      return
-    }
-    const country = apiData.country || null
-    const asn = apiData.org?.split(' ')[0]
-    let iconCode = country
-    if (!iconCode && asn === 'AS13335') {
-      iconCode = 'cloudflare'
-    }
-    await updateIcon(iconCode)
-  } catch (error) {
-    console.error('Failed to handle tab update:', error)
-    await updateIcon(null)
-  }
-}
-
-browser.tabs.onActivated.addListener(async activeInfo => {
-  const tab = await browser.tabs.get(activeInfo.tabId)
-  if (tab.url) await handleTabUpdate(tab.url)
-})
-
-browser.tabs.onUpdated.addListener(async (_tabId, changeInfo) => {
-  if (changeInfo.url) await handleTabUpdate(changeInfo.url)
-})
 
 export default defineBackground({
   main() {
-    browser.runtime.onMessage.addListener(
+    // Listen for Network Responses
-      (request: any, _sender, sendResponse) => {
+    browser.webRequest.onResponseStarted.addListener(
-        if (request.type === 'FETCH_SERVER_INFO') {
+      async (details) => {
-          ;(async () => {
+        if (details.tabId === -1 || details.type !== 'main_frame' || !details.ip) return;
+        await Tab.process(details.tabId, details.url, details.ip);
+      },
+      { urls: ['<all_urls>'] }
+    );
+
+    // Listen for Network Errors (DNS, Connection Refused, etc.)
+    browser.webRequest.onErrorOccurred.addListener(
+      async (details) => {
+        if (details.tabId === -1 || details.type !== 'main_frame') return;
+        await Tab.handleError(details.tabId, details.url, details.error);
+      },
+      { urls: ['<all_urls>'] }
+    );
+
+    // Listen for Navigation
+    browser.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
+      if (changeInfo.status === 'complete' && tab.url) {
+        const urlObj = new URL(tab.url);
+        const isSystemPage = ['chrome:', 'about:', 'edge:', 'moz-extension:', 'chrome-extension:', 'file:'].includes(urlObj.protocol);
+
+        if (isSystemPage) {
+          await Tab.processSystemPage(tabId);
+        } else if (tab.url.startsWith('http')) {
+          // We might not have the IP yet if it was cached, so we trigger a process
+          // If IP is missing, Tab waits or we can force a HEAD request here
+          await Tab.process(tabId, tab.url);
+
+          // Force connection to ensure webRequest fires if cached
           try {
-              const cleanHostname =
+            await fetch(tab.url, { method: 'HEAD', cache: 'no-store', mode: 'no-cors' });
-                request.hostname.startsWith('[') &&
+          } catch { /* ignore */ }
-                request.hostname.endsWith(']')
+        }
-                  ? request.hostname.slice(1, -1)
+      }
-                  : request.hostname
+    });
 
-              const apiData = await getIPInfo(cleanHostname)
+    // Cleanup
-              if (!apiData || !apiData.ip) {
+    browser.tabs.onRemoved.addListener(async (tabId) => {
-                sendResponse({ error: 'DNS resolution failed', data: null })
+      await StorageService.remove(tabId);
-                return
+    });
-              }
-              if (apiData.bogon === true) {
-                await updateIcon(null)
-                sendResponse({
-                  error: null,
-                  data: {
-                    origin: '',
-                    ip: cleanHostname,
-                    hostname: '',
-                    country: '',
-                    city: '',
-                    org: '',
-                    isLocal: true,
-                    isBrowserResource: false,
   },
-                })
+});
-                return
-              }
-
-              const parsed = psl.parse(cleanHostname)
-              const origin = 'domain' in parsed ? parsed.domain : null
-              const country = apiData.country || null
-              const asn = apiData.org?.split(' ')[0]
-              let iconCode = country
-              if (!iconCode && asn === 'AS13335') {
-                iconCode = 'cloudflare'
-              }
-              await updateIcon(iconCode)
-              sendResponse({
-                error: null,
-                data: {
-                  origin,
-                  ip: apiData.ip,
-                  hostname: apiData.hostname || 'N/A',
-                  country: apiData.country || null,
-                  city: apiData.city || null,
-                  org: apiData.org,
-                  isLocal: false,
-                  isBrowserResource: false,
-                },
-              })
-            } catch (error) {
-              await updateIcon(null)
-              sendResponse({
-                error: error instanceof Error ? error.message : 'Unknown error',
-                data: null,
-              })
-            }
-          })()
-          return true
-        }
-        sendResponse({ error: 'Unknown request type', data: null })
-        return true
-      }
-    )
-  },
-})

entrypoints/popup/Popup.tsx

@@ -1,20 +1,26 @@
 import ServerInfo from '@/components/ServerInfo';
 import Error from '@/components/Error';
+import { useHostInfo } from '@/hooks/useHostInfo';
 
 export default function Popup() {
-  const { data, error } = useTabData();
+  const { info, loading } = useHostInfo();
 
-  if (error) {
+  if (loading) {
     return (
-      <Error error={error} />
+      <div className="w-80 h-75 bg-white dark:bg-gray-950 flex flex-col items-center justify-center space-y-4 font-sans">
+        <div className="w-6 h-6 border-2 border-gray-200 dark:border-gray-700 border-t-blue-600 rounded-full animate-spin"></div>
+        <p className="text-gray-400 text-xs font-medium">Loading host info...</p>
+      </div>
     );
   }
 
-  if (!data) {
+  if (!info) {
-    return (
+    return <Error error="No active page found" />;
-      <Error error="No data found" />
-    );
   }
 
-  return <ServerInfo data={data} />;
+  if (info.error) {
+    return <Error error={info.error} />;
+  }
+
+  return <ServerInfo data={info} />;
 }

hooks/useHostInfo.ts

@@ -0,0 +1,80 @@
+import { useState, useEffect } from 'react';
+import { browser } from 'wxt/browser';
+import { StorageService } from '@/utils/storage';
+import { IconService } from '@/services/icon';
+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 systemProtocols = [
+        'chrome:',
+        'about:',
+        'edge:',
+        'moz-extension:',
+        'chrome-extension:',
+        'edge-extension:',
+        'extension:',
+        'file:',
+        'view-source:',
+        'resource:',
+        'blob:',
+        'data:'
+      ];
+
+      const isSystemPage = systemProtocols.includes(urlObj.protocol);
+
+      if (isSystemPage) {
+        await IconService.update(tab.id, null, true);
+
+        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 StorageService.get(tab.id);
+      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 }
-}

package.json

@@ -2,7 +2,7 @@
   "name": "hostinfo",
   "description": "Receive information of a domain directly in the browser when browsing a website",
   "private": true,
-  "version": "1.7",
+  "version": "2.0.0",
   "type": "module",
   "scripts": {
     "dev": "wxt",
@@ -16,22 +16,19 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.2.0",
-    "@tailwindcss/vite": "^4.0.15",
+    "@tailwindcss/vite": "^4.1.18",
-    "@types/psl": "^1.1.3",
+    "clsx": "^2.1.1",
-    "@types/webextension-polyfill": "^0.12.3",
+    "react": "^19.2.4",
-    "react": "^19.0.0",
+    "react-dom": "^19.2.4",
-    "react-dom": "^19.0.0",
+    "tailwind-merge": "^3.4.0",
-    "tailwindcss": "^4.0.15"
+    "tailwindcss": "^4.1.18"
   },
   "devDependencies": {
-    "@types/chrome": "^0.0.310",
+    "@types/chrome": "^0.1.36",
-    "@types/react": "^19.0.12",
+    "@types/react": "^19.2.10",
-    "@types/react-dom": "^19.0.4",
+    "@types/react-dom": "^19.2.3",
-    "@wxt-dev/module-react": "^1.1.3",
+    "@wxt-dev/module-react": "^1.1.5",
-    "typescript": "^5.8.2",
+    "typescript": "^5.9.3",
-    "wxt": "^0.19.29"
+    "wxt": "^0.20.13"
-  },
+  }
-  "trustedDependencies": [
-    "spawn-sync"
-  ]
 }