yujunjun/browser-tools-mcp
1
0
Fork 0
mirror of https://github.com/AgentDeskAI/browser-tools-mcp.git synced 2025-06-27 00:41:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Ted Werbel 2025-03-01 16:11:52 -05:00
commit 5f41767dc9
4 changed files with 101 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
chrome-extension/background.js Normal file
View File

@ -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
}
});

44
chrome-extension/devtools.js
View File

@ -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,

12
chrome-extension/manifest.json
View File

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

14
chrome-extension/panel.js
View File

@ -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";