Reactive popup updates via port connection

Previously the popup would show "No Data / No CDN headers found" when
opened before page load completed, and had no way to update once open.

Changes:
- Popup now connects via port and subscribes to updates for the active tab
- Background pushes updates when headers or performance metrics arrive
- "No Data" message changed to "Navigate or reload to capture headers"
  which better explains the situation (vs implying no CDN)

This replaces polling with event-driven updates: no wasted re-renders,
scroll position preserved, and metrics appear as soon as available.

Author: bartTC

CF Cache Status/CF Cache Status Extension/Resources/background.js

@@ -18,6 +18,20 @@ const tabData = new Map();
 /** Tracks tabs with pending navigations to capture only the first main request */
 const pendingNavigations = new Set();
 
+/** Connected popup ports, keyed by tab ID they're watching */
+const popupPorts = new Map();
+
+/**
+ * Notifies the popup if one is connected and watching this tab.
+ * @param {number} tabId - Tab ID that was updated
+ */
+function notifyPopup(tabId) {
+  const port = popupPorts.get(tabId);
+  if (port) {
+    port.postMessage({ type: 'update', data: tabData.get(tabId) || null });
+  }
+}
+
 // =============================================================================
 // Badge Management
 // =============================================================================
@@ -115,6 +129,7 @@ browser.webRequest.onHeadersReceived.addListener(
     });
 
     updateBadge(details.tabId, status, cdn);
+    notifyPopup(details.tabId);
   },
   { urls: ['<all_urls>'] },
   ['responseHeaders']
@@ -175,7 +190,31 @@ browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
         timestamp: Date.now()
       });
     }
+    notifyPopup(sender.tab.id);
   }
 
   return true;
 });
+
+// Handle popup connections for reactive updates
+browser.runtime.onConnect.addListener((port) => {
+  if (port.name !== 'popup') return;
+
+  port.onMessage.addListener((msg) => {
+    if (msg.type === 'subscribe' && msg.tabId) {
+      popupPorts.set(msg.tabId, port);
+      // Send initial data immediately
+      port.postMessage({ type: 'update', data: tabData.get(msg.tabId) || null });
+    }
+  });
+
+  port.onDisconnect.addListener(() => {
+    // Remove port from map when popup closes
+    for (const [tabId, p] of popupPorts) {
+      if (p === port) {
+        popupPorts.delete(tabId);
+        break;
+      }
+    }
+  });
+});

CF Cache Status/CF Cache Status Extension/Resources/popup.js

@@ -12,23 +12,6 @@ const ICONS = {
   DASH: '<path d="M7,11h10c0.6,0,1,0.4,1,1s-0.4,1-1,1H7c-0.6,0-1-0.4-1-1S6.4,11,7,11z"/>'
 };
 
-// =============================================================================
-// Initialization
-// =============================================================================
-
-async function init() {
-  try {
-    const tabs = await browser.tabs.query({ active: true, currentWindow: true });
-    if (!tabs?.length) return;
-
-    const data = await browser.runtime.sendMessage({ type: 'getTabData', tabId: tabs[0].id });
-    updateUI(data);
-  } catch (error) {
-    console.error('Error loading data:', error);
-    renderHero('ERROR', 'Error loading data', 'neutral');
-  }
-}
-
 // =============================================================================
 // UI Updates
 // =============================================================================
@@ -296,5 +279,32 @@ function formatHeaderValue(key, value) {
   return value;
 }
 
-// Bootstrap
-document.addEventListener('DOMContentLoaded', init);
+/**
+ * Bootstrap with reactive updates via port connection.
+ *
+ * Instead of polling, the popup subscribes to updates from background.js.
+ * When data changes (headers received, performance metrics arrive), the
+ * background pushes the update through the port.
+ *
+ * The port auto-disconnects when the popup closes.
+ */
+document.addEventListener('DOMContentLoaded', async () => {
+  try {
+    const tabs = await browser.tabs.query({ active: true, currentWindow: true });
+    if (!tabs?.length) return;
+
+    const port = browser.runtime.connect({ name: 'popup' });
+
+    port.onMessage.addListener((msg) => {
+      if (msg.type === 'update') {
+        updateUI(msg.data);
+      }
+    });
+
+    // Subscribe to updates for this tab (also triggers initial data send)
+    port.postMessage({ type: 'subscribe', tabId: tabs[0].id });
+  } catch (error) {
+    console.error('Error connecting:', error);
+    renderHero('ERROR', 'Error loading data', 'neutral');
+  }
+});