Merge PR #4: Fix screenshot capture functionality with background script

chrome-extension/background.js

@@ -0,0 +1,81 @@
+// Listen for messages from the devtools panel
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  if (message.type === "CAPTURE_SCREENSHOT" && message.tabId) {
+    // Get the inspected window's tab
+    chrome.tabs.get(message.tabId, (tab) => {
+      if (chrome.runtime.lastError) {
+        console.error("Error getting tab:", chrome.runtime.lastError);
+        sendResponse({
+          success: false,
+          error: chrome.runtime.lastError.message,
+        });
+        return;
+      }
+
+      // Get all windows to find the one containing our tab
+      chrome.windows.getAll({ populate: true }, (windows) => {
+        const targetWindow = windows.find(w =>
+          w.tabs.some(t => t.id === message.tabId)
+        );
+
+        if (!targetWindow) {
+          console.error("Could not find window containing the inspected tab");
+          sendResponse({
+            success: false,
+            error: "Could not find window containing the inspected tab"
+          });
+          return;
+        }
+
+        // Capture screenshot of the window containing our tab
+        chrome.tabs.captureVisibleTab(targetWindow.id, { format: "png" }, (dataUrl) => {
+          // Ignore DevTools panel capture error if it occurs
+          if (chrome.runtime.lastError &&
+              !chrome.runtime.lastError.message.includes("devtools://")) {
+            console.error("Error capturing screenshot:", chrome.runtime.lastError);
+            sendResponse({
+              success: false,
+              error: chrome.runtime.lastError.message,
+            });
+            return;
+          }
+
+          // Send screenshot data to browser connector
+          fetch("http://127.0.0.1:3025/screenshot", {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              data: dataUrl,
+              path: message.screenshotPath,
+            }),
+          })
+            .then((response) => response.json())
+            .then((result) => {
+              if (result.error) {
+                console.error("Error from server:", result.error);
+                sendResponse({ success: false, error: result.error });
+              } else {
+                console.log("Screenshot saved successfully:", result.path);
+                // Send success response even if DevTools capture failed
+                sendResponse({
+                  success: true,
+                  path: result.path,
+                  title: tab.title || "Current Tab"
+                });
+              }
+            })
+            .catch((error) => {
+              console.error("Error sending screenshot data:", error);
+              sendResponse({
+                success: false,
+                error: error.message || "Failed to save screenshot",
+              });
+            });
+        });
+      });
+    });
+    return true; // Required to use sendResponse asynchronously
+  }
+});

chrome-extension/devtools.js

@@ -25,50 +25,10 @@ chrome.storage.local.get(["browserConnectorSettings"], (result) => {
   }
 });
 
-// Listen for settings updates and screenshot capture requests
+// Listen for settings updates
 chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
   if (message.type === "SETTINGS_UPDATED") {
     settings = message.settings;
-  } else if (message.type === "CAPTURE_SCREENSHOT") {
-    // Capture screenshot of the current tab
-    chrome.tabs.captureVisibleTab(null, { format: "png" }, (dataUrl) => {
-      if (chrome.runtime.lastError) {
-        console.error("Screenshot capture failed:", chrome.runtime.lastError);
-        sendResponse({
-          success: false,
-          error: chrome.runtime.lastError.message,
-        });
-        return;
-      }
-
-      // Send screenshot data to browser connector via HTTP POST
-      fetch("http://127.0.0.1:3025/screenshot", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          data: dataUrl,
-          path: settings.screenshotPath,
-        }),
-      })
-        .then((response) => response.json())
-        .then((result) => {
-          if (result.error) {
-            sendResponse({ success: false, error: result.error });
-          } else {
-            sendResponse({ success: true, path: result.path });
-          }
-        })
-        .catch((error) => {
-          console.error("Failed to save screenshot:", error);
-          sendResponse({
-            success: false,
-            error: error.message || "Failed to save screenshot",
-          });
-        });
-    });
-    return true; // Required to use sendResponse asynchronously
   }
 });
 
@@ -475,7 +435,7 @@ function captureAndSendElement() {
       if (!el) return null;
 
       const rect = el.getBoundingClientRect();
-      
+
       return {
         tagName: el.tagName,
         id: el.id,

chrome-extension/manifest.json

@@ -8,10 +8,14 @@
       "activeTab",
       "debugger",
       "storage",
-      "tabs"
+      "tabs",
+      "tabCapture",
+      "windows"
     ],
     "host_permissions": [
       "<all_urls>"
-    ]
+    ],
-  }
+    "background": {
-  
+      "service_worker": "background.js"
+    }
+}

chrome-extension/panel.js

@@ -102,12 +102,17 @@ screenshotPathInput.addEventListener("change", (e) => {
   saveSettings();
 });
 
-// Add screenshot capture functionality
+// Update screenshot capture functionality
 captureScreenshotButton.addEventListener("click", () => {
   captureScreenshotButton.textContent = "Capturing...";
 
-  // Send message to devtools.js to capture screenshot
+  // Send message to background script to capture screenshot
-  chrome.runtime.sendMessage({ type: "CAPTURE_SCREENSHOT" }, (response) => {
+  chrome.runtime.sendMessage({
+    type: "CAPTURE_SCREENSHOT",
+    tabId: chrome.devtools.inspectedWindow.tabId,
+    screenshotPath: settings.screenshotPath
+  }, (response) => {
+    console.log("Screenshot capture response:", response);
     if (!response) {
       captureScreenshotButton.textContent = "Failed to capture!";
       console.error("Screenshot capture failed: No response received");
@@ -115,7 +120,8 @@ captureScreenshotButton.addEventListener("click", () => {
       captureScreenshotButton.textContent = "Failed to capture!";
       console.error("Screenshot capture failed:", response.error);
     } else {
-      captureScreenshotButton.textContent = "Screenshot captured!";
+      captureScreenshotButton.textContent = `Captured: ${response.title}`;
+      console.log("Screenshot captured successfully:", response.path);
     }
     setTimeout(() => {
       captureScreenshotButton.textContent = "Capture Screenshot";