From 2ee271007504311cb0938a0bf37a1fe1e7822691 Mon Sep 17 00:00:00 2001 From: Geczy Date: Wed, 19 Feb 2025 09:56:59 -0600 Subject: [PATCH] fix: screenshot capture functionality in background script and update messaging between components --- chrome-extension/background.js | 81 ++++++++++++++++++++++++++++++++++ chrome-extension/devtools.js | 44 +----------------- chrome-extension/manifest.json | 12 +++-- chrome-extension/panel.js | 14 ++++-- 4 files changed, 101 insertions(+), 50 deletions(-) create mode 100644 chrome-extension/background.js diff --git a/chrome-extension/background.js b/chrome-extension/background.js new file mode 100644 index 0000000..94d8c1e --- /dev/null +++ b/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 + } +}); diff --git a/chrome-extension/devtools.js b/chrome-extension/devtools.js index 8c48d7d..ded131c 100644 --- a/chrome-extension/devtools.js +++ b/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, diff --git a/chrome-extension/manifest.json b/chrome-extension/manifest.json index 35db178..5a6b06b 100644 --- a/chrome-extension/manifest.json +++ b/chrome-extension/manifest.json @@ -8,10 +8,14 @@ "activeTab", "debugger", "storage", - "tabs" + "tabs", + "tabCapture", + "windows" ], "host_permissions": [ "" - ] - } - \ No newline at end of file + ], + "background": { + "service_worker": "background.js" + } +} diff --git a/chrome-extension/panel.js b/chrome-extension/panel.js index d535fde..0cc2326 100644 --- a/chrome-extension/panel.js +++ b/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 - chrome.runtime.sendMessage({ type: "CAPTURE_SCREENSHOT" }, (response) => { + // Send message to background script to capture screenshot + 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";