Skip to content

Commit bae8299

Browse files
tedjamestedjames
authored
Merge pull request #35 from AgentDeskAI/staging
Fix screenshot capture functionality with background script implementation
2 parents 168518c + 5f41767 commit bae8299

File tree

4 files changed

+101
-50
lines changed

4 files changed

+101
-50
lines changed

‎chrome-extension/background.js

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
// Listen for messages from the devtools panel
2+
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
3+
if (message.type === "CAPTURE_SCREENSHOT" && message.tabId) {
4+
// Get the inspected window's tab
5+
chrome.tabs.get(message.tabId, (tab) => {
6+
if (chrome.runtime.lastError) {
7+
console.error("Error getting tab:", chrome.runtime.lastError);
8+
sendResponse({
9+
success: false,
10+
error: chrome.runtime.lastError.message,
11+
});
12+
return;
13+
}
14+
15+
// Get all windows to find the one containing our tab
16+
chrome.windows.getAll({ populate: true }, (windows) => {
17+
const targetWindow = windows.find(w =>
18+
w.tabs.some(t => t.id === message.tabId)
19+
);
20+
21+
if (!targetWindow) {
22+
console.error("Could not find window containing the inspected tab");
23+
sendResponse({
24+
success: false,
25+
error: "Could not find window containing the inspected tab"
26+
});
27+
return;
28+
}
29+
30+
// Capture screenshot of the window containing our tab
31+
chrome.tabs.captureVisibleTab(targetWindow.id, { format: "png" }, (dataUrl) => {
32+
// Ignore DevTools panel capture error if it occurs
33+
if (chrome.runtime.lastError &&
34+
!chrome.runtime.lastError.message.includes("devtools://")) {
35+
console.error("Error capturing screenshot:", chrome.runtime.lastError);
36+
sendResponse({
37+
success: false,
38+
error: chrome.runtime.lastError.message,
39+
});
40+
return;
41+
}
42+
43+
// Send screenshot data to browser connector
44+
fetch("http://127.0.0.1:3025/screenshot", {
45+
method: "POST",
46+
headers: {
47+
"Content-Type": "application/json",
48+
},
49+
body: JSON.stringify({
50+
data: dataUrl,
51+
path: message.screenshotPath,
52+
}),
53+
})
54+
.then((response) => response.json())
55+
.then((result) => {
56+
if (result.error) {
57+
console.error("Error from server:", result.error);
58+
sendResponse({ success: false, error: result.error });
59+
} else {
60+
console.log("Screenshot saved successfully:", result.path);
61+
// Send success response even if DevTools capture failed
62+
sendResponse({
63+
success: true,
64+
path: result.path,
65+
title: tab.title || "Current Tab"
66+
});
67+
}
68+
})
69+
.catch((error) => {
70+
console.error("Error sending screenshot data:", error);
71+
sendResponse({
72+
success: false,
73+
error: error.message || "Failed to save screenshot",
74+
});
75+
});
76+
});
77+
});
78+
});
79+
return true; // Required to use sendResponse asynchronously
80+
}
81+
});

‎chrome-extension/devtools.js

Lines changed: 2 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -25,50 +25,10 @@ chrome.storage.local.get(["browserConnectorSettings"], (result) => {
2525
}
2626
});
2727

28-
// Listen for settings updates and screenshot capture requests
28+
// Listen for settings updates
2929
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
3030
if (message.type === "SETTINGS_UPDATED") {
3131
settings = message.settings;
32-
} else if (message.type === "CAPTURE_SCREENSHOT") {
33-
// Capture screenshot of the current tab
34-
chrome.tabs.captureVisibleTab(null, { format: "png" }, (dataUrl) => {
35-
if (chrome.runtime.lastError) {
36-
console.error("Screenshot capture failed:", chrome.runtime.lastError);
37-
sendResponse({
38-
success: false,
39-
error: chrome.runtime.lastError.message,
40-
});
41-
return;
42-
}
43-
44-
// Send screenshot data to browser connector via HTTP POST
45-
fetch("http://127.0.0.1:3025/screenshot", {
46-
method: "POST",
47-
headers: {
48-
"Content-Type": "application/json",
49-
},
50-
body: JSON.stringify({
51-
data: dataUrl,
52-
path: settings.screenshotPath,
53-
}),
54-
})
55-
.then((response) => response.json())
56-
.then((result) => {
57-
if (result.error) {
58-
sendResponse({ success: false, error: result.error });
59-
} else {
60-
sendResponse({ success: true, path: result.path });
61-
}
62-
})
63-
.catch((error) => {
64-
console.error("Failed to save screenshot:", error);
65-
sendResponse({
66-
success: false,
67-
error: error.message || "Failed to save screenshot",
68-
});
69-
});
70-
});
71-
return true; // Required to use sendResponse asynchronously
7232
}
7333
});
7434

@@ -475,7 +435,7 @@ function captureAndSendElement() {
475435
if (!el) return null;
476436
477437
const rect = el.getBoundingClientRect();
478-
438+
479439
return {
480440
tagName: el.tagName,
481441
id: el.id,

‎chrome-extension/manifest.json

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,14 @@
88
"activeTab",
99
"debugger",
1010
"storage",
11-
"tabs"
11+
"tabs",
12+
"tabCapture",
13+
"windows"
1214
],
1315
"host_permissions": [
1416
"<all_urls>"
15-
]
16-
}
17-
17+
],
18+
"background": {
19+
"service_worker": "background.js"
20+
}
21+
}

‎chrome-extension/panel.js

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -102,20 +102,26 @@ screenshotPathInput.addEventListener("change", (e) => {
102102
saveSettings();
103103
});
104104

105-
// Add screenshot capture functionality
105+
// Update screenshot capture functionality
106106
captureScreenshotButton.addEventListener("click", () => {
107107
captureScreenshotButton.textContent = "Capturing...";
108108

109-
// Send message to devtools.js to capture screenshot
110-
chrome.runtime.sendMessage({ type: "CAPTURE_SCREENSHOT" }, (response) => {
109+
// Send message to background script to capture screenshot
110+
chrome.runtime.sendMessage({
111+
type: "CAPTURE_SCREENSHOT",
112+
tabId: chrome.devtools.inspectedWindow.tabId,
113+
screenshotPath: settings.screenshotPath
114+
}, (response) => {
115+
console.log("Screenshot capture response:", response);
111116
if (!response) {
112117
captureScreenshotButton.textContent = "Failed to capture!";
113118
console.error("Screenshot capture failed: No response received");
114119
} else if (!response.success) {
115120
captureScreenshotButton.textContent = "Failed to capture!";
116121
console.error("Screenshot capture failed:", response.error);
117122
} else {
118-
captureScreenshotButton.textContent = "Screenshot captured!";
123+
captureScreenshotButton.textContent = `Captured: ${response.title}`;
124+
console.log("Screenshot captured successfully:", response.path);
119125
}
120126
setTimeout(() => {
121127
captureScreenshotButton.textContent = "Capture Screenshot";

0 commit comments

Comments
 (0)