Update showcase image in README

Updated the showcase image and adjusted its width.

README.md

@@ -2,9 +2,10 @@
 
 A browser extension built with [WXT.dev](https://wxt.dev) and React that lets you discover the origin of the website you're visiting. With a single click, you can view detailed information such as the **country of origin**, **IP address**, **ASN (Autonomous System Number)**, and more. You can also quickly search for the website's details on [Censys](https://censys.io) for deeper insights.
 
-<img src="https://github.com/user-attachments/assets/83a6316c-54b8-41a8-8d43-c794a5f62696" alt="Showcase" width="200"/>
+<img width="420" alt="Showcase" src="https://github.com/user-attachments/assets/7248747d-3216-4d48-8060-f7627bfd8762" />
 
 <a href="https://addons.mozilla.org/addon/hostinfo/"><img src="https://github.com/user-attachments/assets/4e69214c-c11a-4202-919a-fac7d58dbb55" alt="Get hostinfo for Firefox"></a>
+<a href="https://chromewebstore.google.com/detail/hostinfo/ehleblniighmnfhfimcbfhmdpdhamcbp"><img src="https://github.com/user-attachments/assets/4bf31178-6244-467c-916d-79e926dec379" alt="Get hostinfo for Chrome"></a>
 
 ---
 

components/Browser.tsx

@@ -0,0 +1,28 @@
+import { CpuChipIcon, GlobeAltIcon } from '@heroicons/react/24/outline';
+import { Header } from './Header';
+import { InfoRow } from './Info';
+
+export const BrowserResourceView = ({ url }: { url: string }) => {
+  return (
+    <div className="w-80 bg-white dark:bg-gray-950 font-sans">
+      <Header title="System Resource" flagCode={null} />
+      <div className="p-5">
+        <InfoRow
+          icon={CpuChipIcon}
+          label="Type"
+          value="Local Browser Page"
+          iconColor="text-orange-500"
+        />
+        <InfoRow
+          icon={GlobeAltIcon}
+          label="URL"
+          value={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,23 @@
+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="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">
-          Error
-        </h2>
-      </div>
-      <div className="flex items-center space-x-3">
-        <div>
-          <p className="text-sm text-gray-300">{error}</p>
-        </div>
+    <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="p-3 bg-red-50 dark:bg-red-900/20 rounded-full mb-4">
+        <ExclamationTriangleIcon className="w-6 h-6 text-red-600 dark:text-red-400" />
       </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,29 @@
+export const Header = ({ title, flagCode }: { title: string, flagCode?: string | null }) => {
+  const getFlagUrl = (code?: string | null) => {
+    if (!code) return '';
+    try {
+      const path = `/${code.toLowerCase()}.png`;
+      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 { GeoData } from '@/utils/types';
+
+export const LocalNetworkView = ({ data, domain }: { data: GeoData, domain: string }) => {
+  return (
+    <div className="w-80 bg-white dark:bg-gray-950 font-sans">
+      <Header
+        title={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.ip}
+          canCopy
+          iconColor="text-blue-500"
+        />
+      </div>
+    </div>
+  );
+};

components/Public.tsx

@@ -0,0 +1,58 @@
+import { ServerIcon, MapPinIcon, GlobeAltIcon, BuildingOfficeIcon } from '@heroicons/react/24/outline';
+import { Header } from './Header';
+import { InfoRow } from './Info';
+import type { GeoData } from '@/utils/types';
+
+export const PublicNetworkView = ({ data, domain }: { data: GeoData, domain: string }) => {
+  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={data.countryCode}
+      />
+
+      <div className="p-5 space-y-0.5">
+        <InfoRow
+          icon={ServerIcon}
+          label="IP Address"
+          value={data.ip}
+          href={`https://ip.albert.lol/${data.ip}`}
+          canCopy
+          iconColor="text-blue-500"
+        />
+        <InfoRow
+          icon={GlobeAltIcon}
+          label="Hostname"
+          value={domain}
+          canCopy
+          iconColor="text-indigo-500"
+        />
+        <InfoRow
+          icon={MapPinIcon}
+          label="Location"
+          value={data.countryName || 'Unknown Location'}
+          iconColor="text-emerald-500"
+        />
+        <InfoRow
+          icon={BuildingOfficeIcon}
+          label="Organization / ASN"
+          value={data.org}
+          href={data.asn ? `https://bgp.he.net/${data.asn}` : undefined}
+          iconColor="text-violet-500"
+        />
+      </div>
+
+      <div className="px-5 pb-5 pt-2">
+        <a
+          href={`https://search.censys.io/hosts/${data.ip}`}
+          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,97 +1,31 @@
-import { LinkIcon, ServerIcon, IdentificationIcon, MapPinIcon } from '@heroicons/react/24/outline';
-import { codes } from '@/utils/codes';
+import type { TabState } from '@/utils/types';
+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({ state }: { state: TabState }) {
 
-  const countryName = data.country
-  ? codes[data.country.toLowerCase()] || "N/A"
-  : "N/A";
+  if (state.status === 'error') {
+    return <Error error={state.errorMessage || 'Unknown Error'} />;
+  }
 
-  if (data.isBrowserResource) {
+  if (state.status === 'success' && !state.data) {
+    return <BrowserResourceView url={state.url} />;
+  }
+
+  if (state.status === 'loading' || !state.data) {
     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 className="w-80 h-64 flex flex-col items-center justify-center space-y-3 bg-white dark:bg-gray-950">
+        <div className="w-6 h-6 border-2 border-gray-200 dark:border-gray-700 border-t-blue-600 rounded-full animate-spin"></div>
+        <span className="text-xs text-gray-400 font-medium">Analyzing Network...</span>
       </div>
     );
   }
 
-  if (data.isLocal) {
-    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">
-            Internal Network
-          </h2>
-        </div>
-        <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>
-      </div>
-    );
+  if (state.data.isLocal || state.data.isBogon) {
+    return <LocalNetworkView data={state.data} domain={state.domain} />;
   }
 
-  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">
-          Host Information
-        </h2>
-      </div>
-      <div className="space-y-4">
-
-        <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 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>
-  );
+  return <PublicNetworkView data={state.data} domain={state.domain} />;
 }

entrypoints/background.ts

@@ -1,122 +1,253 @@
-import psl from 'psl'
+import { StorageService } from '@/utils/storage';
+import { GeoService } from '@/services/geo';
+import { IconService } from '@/services/icon';
+import { DnsService } from '@/services/dns';
 
-let currentTabUrl: string | null = null
+const SYSTEM_PROTOCOLS = [
+  'chrome:', 'about:', 'edge:', 'moz-extension:',
+  'chrome-extension:', 'file:', 'view-source:', 'data:', 'devtools:'
+];
 
-async function resolveARecord(hostname: string): Promise<string | null> {
+const tabStates = new Map<number, TabState>();
+
+function getDomain(url: string) {
   try {
-    const dnsResponse = await fetch(
-      `https://cloudflare-dns.com/dns-query?name=${hostname}&type=A`,
-      {
-        headers: { Accept: 'application/dns-json' },
-      }
-    )
-
-    if (!dnsResponse.ok) {
-      console.error(`DNS query failed: ${dnsResponse.status}`)
-      return null
-    }
-
-    const dnsData = await dnsResponse.json()
-    return (
-      dnsData.Answer?.find((entry: DNSEntry) => entry.type === 1)?.data || null
-    )
-  } catch (error) {
-    console.error('Failed to fetch DNS data:', error)
-    return null
+    return new URL(url).hostname;
+  } catch {
+    return url;
   }
 }
 
-async function handleTabUpdate(url: string) {
-  if (url === currentTabUrl) return
-  currentTabUrl = url
-
-  try {
-    const hostname = new URL(url).hostname
-    const ip = await resolveARecord(hostname)
-
-    if (!ip) {
-      await updateIcon(null)
-      return
-    }
-
-    const apiResponse = await fetch(`https://ip.albert.lol/${ip}`)
-    const apiData = await apiResponse.json()
-
-    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)
+function applyIconForState(tabId: number, state: TabState) {
+  const isSystem = SYSTEM_PROTOCOLS.some(p => state.url.startsWith(p));
+  if (isSystem) {
+    IconService.updateIcon(tabId, null, true);
+  } else if (state.status === 'success' && state.data) {
+    let code = state.data.countryCode;
+    if (state.data.asn === 'AS13335') code = 'cloudflare';
+    IconService.updateIcon(tabId, code, state.data.isLocal);
+  } else {
+    IconService.updateIcon(tabId, null, false);
   }
 }
 
-browser.tabs.onActivated.addListener(async activeInfo => {
-  const tab = await browser.tabs.get(activeInfo.tabId)
-  if (tab.url) await handleTabUpdate(tab.url)
-})
+async function initTab(tabId: number, url: string, resolveDns = false) {
+  if (!url) return;
+  const isSystem = SYSTEM_PROTOCOLS.some(p => url.startsWith(p));
+  const domain = getDomain(url);
 
-browser.tabs.onUpdated.addListener(async (_tabId, changeInfo) => {
-  if (changeInfo.url) await handleTabUpdate(changeInfo.url)
-})
+  let currentState = tabStates.get(tabId);
+
+  if (!currentState || currentState.url !== url) {
+    tabStates.set(tabId, {
+      url,
+      domain,
+      status: 'loading',
+      data: null,
+      errorMessage: null,
+      lastUpdated: Date.now()
+    });
+  }
+
+  if (!currentState) {
+    currentState = await StorageService.getTabState(tabId) || undefined;
+  }
+
+  const latestState = tabStates.get(tabId);
+  if (latestState && latestState.url !== url) return;
+  if (latestState && latestState.status === 'success' && latestState.data) return;
+
+  const isSameDomain = currentState?.domain === domain;
+  const hasExistingData = isSameDomain && !!currentState?.data;
+
+  const newState: TabState = {
+    url,
+    domain,
+    status: isSystem || hasExistingData ? 'success' : 'loading',
+    data: hasExistingData ? currentState!.data : null,
+    errorMessage: null,
+    lastUpdated: Date.now()
+  };
+
+  tabStates.set(tabId, newState);
+  StorageService.setTabState(tabId, newState).catch(() => { });
+
+  applyIconForState(tabId, newState);
+
+  if (!isSystem && !hasExistingData && resolveDns) {
+    const ip = await DnsService.resolve(domain);
+    if (ip) {
+      await processIp(tabId, url, ip);
+    } else {
+      await updateState(tabId, {
+        status: 'error',
+        errorMessage: 'Could not resolve host'
+      });
+    }
+  }
+}
+
+async function processIp(tabId: number, url: string, ip: string) {
+  let current = tabStates.get(tabId);
+  if (!current) {
+    current = await StorageService.getTabState(tabId) || undefined;
+  }
+
+  const latestState1 = tabStates.get(tabId);
+  if (latestState1) {
+    try {
+      if (new URL(latestState1.url).hostname !== new URL(url).hostname) return;
+    } catch {
+      return;
+    }
+  }
+
+  if (current?.status === 'success' && current.data?.ip === ip) {
+    return;
+  }
+
+  const geoData = await GeoService.getGeoData(ip);
+
+  const stateAfterFetch = tabStates.get(tabId);
+  if (stateAfterFetch) {
+    try {
+      if (new URL(stateAfterFetch.url).hostname !== new URL(url).hostname) return;
+    } catch {
+      return;
+    }
+  }
+
+  const newState: TabState = {
+    url: stateAfterFetch?.url || url,
+    domain: stateAfterFetch?.domain || getDomain(url),
+    status: 'success',
+    data: geoData,
+    errorMessage: null,
+    lastUpdated: Date.now()
+  };
+
+  tabStates.set(tabId, newState);
+  await StorageService.setTabState(tabId, newState);
+
+  applyIconForState(tabId, newState);
+}
+
+async function updateState(tabId: number, updates: Partial<TabState>) {
+  let current = tabStates.get(tabId);
+  if (!current) {
+    current = await StorageService.getTabState(tabId) || undefined;
+  }
+
+  if (current) {
+    const newState = { ...current, ...updates };
+    tabStates.set(tabId, newState);
+    await StorageService.setTabState(tabId, newState);
+    applyIconForState(tabId, newState);
+  }
+}
 
 export default defineBackground({
   main() {
-    browser.runtime.onMessage.addListener(
-      (request: any, _sender, sendResponse) => {
-        if (request.type === 'FETCH_SERVER_INFO') {
-          ;(async () => {
-            try {
-              const ip = await resolveARecord(request.hostname)
-              if (!ip) {
-                sendResponse({ error: 'DNS resolution failed', data: null })
-                return
-              }
+    browser.webNavigation.onBeforeNavigate.addListener((details) => {
+      if (details.frameId !== 0) return;
+      initTab(details.tabId, details.url, false);
+    });
 
-              const apiResponse = await fetch(`https://ip.albert.lol/${ip}`)
-              const apiData = await apiResponse.json()
+    browser.webNavigation.onHistoryStateUpdated.addListener((details) => {
+      if (details.frameId !== 0) return;
+      initTab(details.tabId, details.url, true);
+    });
 
-              const parsed = psl.parse(request.hostname)
-              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,
-                },
-              })
-            } 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
+    browser.webNavigation.onCommitted.addListener((details) => {
+      if (details.frameId !== 0) return;
+      const state = tabStates.get(details.tabId);
+      if (state) {
+        applyIconForState(details.tabId, state);
       }
-    )
+    });
+
+    browser.webRequest.onResponseStarted.addListener(
+      (details) => {
+        if (details.tabId === -1 || details.type !== 'main_frame') return;
+        if (details.ip) {
+          processIp(details.tabId, details.url, details.ip);
+        }
+      },
+      { urls: ['<all_urls>'] }
+    );
+
+    browser.webNavigation.onCompleted.addListener(async (details) => {
+      if (details.frameId !== 0) return;
+
+      const state = tabStates.get(details.tabId);
+
+      if (state) {
+        applyIconForState(details.tabId, state);
+      }
+
+      if (state && state.status === 'loading' && !state.data) {
+        let hostname = '';
+        try {
+          hostname = new URL(details.url).hostname;
+        } catch {
+          return;
+        }
+        const ip = await DnsService.resolve(hostname);
+
+        if (ip) {
+          await processIp(details.tabId, details.url, ip);
+        } else {
+          await updateState(details.tabId, {
+            status: 'error',
+            errorMessage: 'Could not resolve host'
+          });
+        }
+      }
+    });
+
+    browser.webRequest.onErrorOccurred.addListener(
+      async (details) => {
+        if (details.type !== 'main_frame') return;
+        if (details.error === 'net::ERR_ABORTED') return;
+
+        await updateState(details.tabId, {
+          status: 'error',
+          errorMessage: details.error
+        });
+      },
+      { urls: ['<all_urls>'] }
+    );
+
+    browser.tabs.onRemoved.addListener((tabId) => {
+      tabStates.delete(tabId);
+      StorageService.removeTabState(tabId);
+    });
+
+    browser.tabs.onActivated.addListener(async (activeInfo) => {
+      const tab = await browser.tabs.get(activeInfo.tabId);
+      if (tab.url) {
+        const state = tabStates.get(tab.id!);
+        if (state) {
+          applyIconForState(tab.id!, state);
+        } else {
+          initTab(tab.id!, tab.url, true);
+        }
+      }
+    });
+
+    browser.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
+      if (changeInfo.status && tab.url) {
+        const state = tabStates.get(tabId);
+        if (state) {
+          applyIconForState(tabId, state);
+        }
+      }
+    });
+
+    browser.runtime.onMessage.addListener((message) => {
+      if (message.type === 'INIT_TAB' && message.tabId && message.url) {
+        initTab(message.tabId, message.url, true);
+      }
+    });
   },
-})
+});

entrypoints/popup/Popup.tsx

@@ -1,20 +1,21 @@
 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-64 bg-white dark:bg-gray-950 flex flex-col items-center justify-center 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>
+      </div>
     );
   }
 
-  if (!data) {
-    return (
-      <Error error="No data found" />
-    );
+  if (!info) {
+    return <Error error="No active page found" />;
   }
 
-  return <ServerInfo data={data} />;
+  return <ServerInfo state={info} />;
 }

entrypoints/popup/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Host Info</title>
-    <meta name="manifest.type" content="browser_action" />
+    <meta name="manifest.type" content="action" />
   </head>
   <body>
     <div id="root"></div>

hooks/useHostInfo.ts

@@ -0,0 +1,48 @@
+export function useHostInfo() {
+  const [info, setInfo] = useState<TabState | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const fetchInfo = async () => {
+      try {
+        const [tab] = await browser.tabs.query({ active: true, currentWindow: true });
+        if (!tab?.id) return;
+
+        const data = await StorageService.getTabState(tab.id);
+        if (data) {
+          if (isMounted) {
+            setInfo(data);
+            setLoading(false);
+          }
+        } else {
+          if (tab.url) {
+            await browser.runtime.sendMessage({ type: 'INIT_TAB', tabId: tab.id, url: tab.url });
+          } else {
+            if (isMounted) setLoading(false);
+          }
+        }
+      } catch (e) {
+        if (isMounted) setLoading(false);
+      }
+    };
+
+    fetchInfo();
+
+    const listener = (changes: any, areaName: string) => {
+      if (areaName === 'session' || areaName === 'local') {
+        fetchInfo();
+      }
+    };
+
+    browser.storage.onChanged.addListener(listener);
+
+    return () => {
+      isMounted = false;
+      browser.storage.onChanged.removeListener(listener);
+    };
+  }, []);
+
+  return { info, loading };
+}

hooks/useTabData.ts

@@ -1,82 +0,0 @@
-import { useState, useEffect } from 'react';
-import browser from 'webextension-polyfill';
-import { isPrivateIP } from '@/utils';
-import { FetchServerInfoRequest, FetchServerInfoResponse, ServerData } from '@/utils/model';
-
-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 isInternal = isPrivateIP(hostname)
-        if (isInternal) {
-          return setData({
-            origin: '',
-            ip: hostname,
-            hostname: url.href,
-            country: '',
-            city: '',
-            org: '',
-            isLocal: true,
-            isBrowserResource: false,
-          })
-        }
-
-        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) {
-          throw new Error(response.error)
-        }
-
-        if (!response.data?.ip) {
-          throw new Error('Invalid server data received')
-        }
-
-        setData(response.data)
-        setError(null)
-      } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to fetch data')
-        setData(null)
-      } finally {
-        setLoading(false)
-      }
-    }
-
-    fetchData()
-  }, [])
-
-  return { data, loading, error }
-}

package.json

@@ -2,36 +2,31 @@
   "name": "hostinfo",
   "description": "Receive information of a domain directly in the browser when browsing a website",
   "private": true,
-  "version": "1.3",
+  "version": "2.0.0",
   "type": "module",
   "scripts": {
     "dev": "wxt",
     "dev:firefox": "wxt -b firefox",
     "build": "wxt build",
-    "build:firefox": "wxt build -b firefox",
+    "build:firefox": "wxt build -b firefox --mv3",
     "zip": "wxt zip",
-    "zip:firefox": "wxt zip -b firefox",
+    "zip:firefox": "wxt zip -b firefox --mv3",
     "compile": "tsc --noEmit",
     "postinstall": "wxt prepare"
   },
   "dependencies": {
     "@heroicons/react": "^2.2.0",
-    "@tailwindcss/vite": "^4.0.14",
-    "@types/psl": "^1.1.3",
-    "@types/webextension-polyfill": "^0.12.3",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "tailwindcss": "^4.0.14"
+    "@tailwindcss/vite": "^4.2.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "tailwindcss": "^4.2.1"
   },
   "devDependencies": {
-    "@types/chrome": "^0.0.309",
-    "@types/react": "^19.0.10",
-    "@types/react-dom": "^19.0.4",
-    "@wxt-dev/module-react": "^1.1.3",
-    "typescript": "^5.8.2",
-    "wxt": "^0.19.29"
-  },
-  "trustedDependencies": [
-    "spawn-sync"
-  ]
+    "@types/chrome": "^0.1.37",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@wxt-dev/module-react": "^1.1.5",
+    "typescript": "^5.9.3",
+    "wxt": "^0.20.18"
+  }
 }