Skip to content

fixed screenshots don't if separate dev tools windows opened #85

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+89 −39
Open

fixed screenshots don't if separate dev tools windows opened #85

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 58 additions & 6 deletions chrome-extension/background.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -339,6 +339,42 @@ async function retestConnectionOnRefresh(tabId) {
});
}

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message.type === "DELEGATE_SCREENSHOT" && message.tabId) {
// Get the tab we want to capture
chrome.tabs.get(message.tabId, (tab) => {
if (chrome.runtime.lastError) {
sendResponse({ success: false, error: chrome.runtime.lastError.message });
return;
}

// Get the window containing this tab
chrome.windows.get(tab.windowId, { populate: true }, (window) => {
// Make sure the tab is active in its window
chrome.tabs.update(message.tabId, { active: true }, () => {
// Focus the window
chrome.windows.update(tab.windowId, { focused: true }, () => {
// Wait a moment for the window to focus
setTimeout(() => {
// Capture the visible tab in that window
chrome.tabs.captureVisibleTab(tab.windowId, { format: "png" }, (dataUrl) => {
if (chrome.runtime.lastError) {
sendResponse({ success: false, error: chrome.runtime.lastError.message });
return;
}

sendResponse({ success: true, dataUrl: dataUrl });
});
}, 100);
});
});
});
});

return true; // Keep the message channel open for the async response
}
});

// Function to capture and send screenshot
function captureAndSendScreenshot(message, settings, sendResponse) {
// Get the inspected window's tab
Expand All @@ -352,6 +388,16 @@ function captureAndSendScreenshot(message, settings, sendResponse) {
return;
}

// Skip DevTools tabs
if (tab.url && tab.url.startsWith('devtools://')) {
console.error("Cannot capture DevTools tab:", tab.url);
sendResponse({
success: false,
error: "Cannot capture DevTools tabs. Please capture the actual application tab.",
});
return;
}

// Get all windows to find the one containing our tab
chrome.windows.getAll({ populate: true }, (windows) => {
const targetWindow = windows.find((w) =>
Expand All @@ -367,16 +413,19 @@ function captureAndSendScreenshot(message, settings, sendResponse) {
return;
}

console.log(`Capturing screenshot of window ${targetWindow.id} containing tab ${message.tabId}`);

// First focus the window and activate the tab
chrome.windows.update(targetWindow.id, { focused: true }, () => {
chrome.tabs.update(message.tabId, { active: true }, () => {
// Small delay to ensure the window and tab are focused
setTimeout(() => {
// 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://")
) {
if (chrome.runtime.lastError) {
console.error(
"Error capturing screenshot:",
chrome.runtime.lastError
Expand Down Expand Up @@ -409,7 +458,7 @@ function captureAndSendScreenshot(message, settings, sendResponse) {
sendResponse({ success: false, error: result.error });
} else {
console.log("Screenshot saved successfully:", result.path);
// Send success response even if DevTools capture failed
// Send success response
sendResponse({
success: true,
path: result.path,
Expand All @@ -426,6 +475,9 @@ function captureAndSendScreenshot(message, settings, sendResponse) {
});
}
);
}, 100); // 100ms delay
});
});
});
});
}
64 changes: 31 additions & 33 deletions chrome-extension/devtools.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -965,42 +965,40 @@ async function setupWebSocket() {
// Uncomment the next line for debug purposes only
// console.log("Chrome Extension: Received heartbeat response");
} else if (message.type === "take-screenshot") {
console.log("Chrome Extension: Taking screenshot...");
// Capture screenshot of the current tab
chrome.tabs.captureVisibleTab(null, { format: "png" }, (dataUrl) => {
console.log("DevTools: Delegating screenshot capture to background script");

// Send message to background script to handle the screenshot
chrome.runtime.sendMessage({
type: "DELEGATE_SCREENSHOT",
tabId: chrome.devtools.inspectedWindow.tabId,
requestId: message.requestId
}, (response) => {
if (chrome.runtime.lastError) {
console.error(
"Chrome Extension: Screenshot capture failed:",
chrome.runtime.lastError
);
ws.send(
JSON.stringify({
type: "screenshot-error",
error: chrome.runtime.lastError.message,
requestId: message.requestId,
})
);
console.error("Error delegating screenshot:", chrome.runtime.lastError);
ws.send(JSON.stringify({
type: "screenshot-error",
error: chrome.runtime.lastError.message,
requestId: message.requestId
}));
return;
}

console.log("Chrome Extension: Screenshot captured successfully");
// Just send the screenshot data, let the server handle paths
const response = {
type: "screenshot-data",
data: dataUrl,
requestId: message.requestId,
// Only include path if it's configured in settings
...(settings.screenshotPath && { path: settings.screenshotPath }),
// Include auto-paste setting
autoPaste: settings.allowAutoPaste,
};

console.log("Chrome Extension: Sending screenshot data response", {
...response,
data: "[base64 data]",
});

ws.send(JSON.stringify(response));

if (response && response.success) {
// Forward the response from the background script
ws.send(JSON.stringify({
type: "screenshot-data",
data: response.dataUrl,
requestId: message.requestId,
...(settings.screenshotPath && { path: settings.screenshotPath }),
autoPaste: settings.allowAutoPaste
}));
} else {
ws.send(JSON.stringify({
type: "screenshot-error",
error: response?.error || "Unknown error capturing screenshot",
requestId: message.requestId
}));
}
});
} else if (message.type === "get-current-url") {
console.log("Chrome Extension: Received request for current URL");
Expand Down