feat: add toggle-based overlay activation per tab via extension icon

- Removed automatic content script injection from manifest
- Added background script with click handler for toggling overlay
- Overlay is now injected only when extension icon is clicked
- Overlay can be removed by clicking the icon again
- Prevents unintended injection across multiple tabs of same domain
- Per-tab state tracking for clean UX

background.js

@@ -0,0 +1,30 @@
+const tabOverlayStatus = {};
+
+chrome.action.onClicked.addListener(async (tab) => {
+  const tabId = tab.id;
+
+  if (tabOverlayStatus[tabId]) {
+    // Already injected → remove overlay
+    chrome.scripting.executeScript({
+      target: { tabId: tabId },
+      func: () => {
+        const iframe = document.getElementById("overlay-iframe");
+        const panel = document.querySelector(
+          'div[style*="Overlay Controls"]'
+        )?.parentElement;
+        if (iframe) iframe.remove();
+        if (panel) panel.remove();
+      },
+    });
+    tabOverlayStatus[tabId] = false;
+    chrome.action.setIcon({ tabId, path: "icon-off.png" }); // optional
+  } else {
+    // Not injected → inject content.js
+    chrome.scripting.executeScript({
+      target: { tabId: tabId },
+      files: ["content.js"],
+    });
+    tabOverlayStatus[tabId] = true;
+    chrome.action.setIcon({ tabId, path: "icon-on.png" }); // optional
+  }
+});

manifest.json

@@ -1,17 +1,14 @@
 {
   "manifest_version": 3,
   "name": "Live Site Overlay Tool",
-  "version": "1.0",
+  "version": "1.1",
   "description": "Overlay one live site over another for pixel-perfect comparison.",
-  "permissions": ["scripting", "activeTab"],
+  "permissions": ["scripting", "activeTab", "tabs", "storage"],
   "host_permissions": ["<all_urls>"],
   "action": {
-    "default_title": "Overlay a site"
+    "default_title": "Toggle Overlay"
   },
-  "content_scripts": [
-    {
-      "matches": ["<all_urls>"],
-      "js": ["content.js"]
-    }
-  ]
+  "background": {
+    "service_worker": "background.js"
+  }
 }