From 03cb3ca70c9fb6260dceea78f5dab884356005c9 Mon Sep 17 00:00:00 2001 From: Ted Werbel Date: Tue, 11 Mar 2025 02:04:48 +0900 Subject: [PATCH] edited prompts + added toggle for autopaste screenshots --- browser-tools-mcp/mcp-server.ts | 9 +++ browser-tools-server/browser-connector.ts | 95 ++++++++++++++--------- chrome-extension/devtools.js | 3 + chrome-extension/panel.html | 9 +++ chrome-extension/panel.js | 11 +++ 5 files changed, 91 insertions(+), 36 deletions(-) diff --git a/browser-tools-mcp/mcp-server.ts b/browser-tools-mcp/mcp-server.ts index 9916891..9ee5e4f 100644 --- a/browser-tools-mcp/mcp-server.ts +++ b/browser-tools-mcp/mcp-server.ts @@ -1272,6 +1272,13 @@ server.tool("runNextJSAudit", {}, async () => ({ Remember to use a CDN to serve your media (images, videos, etc.) to improve the loading speed. For the image format, use WebP if possible because it has a smaller size than PNG and JPEG. + + Given the provided procedures, begin by analyzing all of our Next.js pages. + Check to see what metadata already exists, look for any robot.txt files, and take a closer look at some of the other aspects of our project to determine areas of improvement. + Once you've performed this comprehensive analysis, return back a report on what we can do to improve our application. + Do not actually make the code changes yet, just return a comprehensive plan that you will ask for approval for. + If feedback is provided, adjust the plan accordingly and ask for approval again. + If the user approves of the plan, go ahead and proceed to implement all the necessary code changes to completely optimize our application. `, }, ], @@ -1295,6 +1302,8 @@ server.tool( 6. Deeply reflect on what could be wrong + produce a comprehensive analysis of the issue 7. Suggest additional logs if the issue persists or if the source is not yet clear 8. Once a fix is implemented, ask for approval to remove the previously added logs + + Note: DO NOT run any of our audits (runAccessibilityAudit, runPerformanceAudit, runBestPracticesAudit, runSEOAudit, runNextJSAudit) when in debugging mode unless explicitly asked to do so or unless you switch to audit mode. `, }, ], diff --git a/browser-tools-server/browser-connector.ts b/browser-tools-server/browser-connector.ts index fa9f10c..1d6cda4 100644 --- a/browser-tools-server/browser-connector.ts +++ b/browser-tools-server/browser-connector.ts @@ -171,7 +171,11 @@ let selectedElement: any = null; // Add new state for tracking screenshot requests interface ScreenshotCallback { - resolve: (value: { data: string; path?: string }) => void; + resolve: (value: { + data: string; + path?: string; + autoPaste?: boolean; + }) => void; reject: (reason: Error) => void; } @@ -592,6 +596,7 @@ interface ScreenshotMessage { data?: string; path?: string; error?: string; + autoPaste?: boolean; } export class BrowserConnector { @@ -708,13 +713,18 @@ export class BrowserConnector { if (data.type === "screenshot-data" && data.data) { console.log("Received screenshot data"); console.log("Screenshot path from extension:", data.path); + console.log("Auto-paste setting from extension:", data.autoPaste); // Get the most recent callback since we're not using requestId anymore const callbacks = Array.from(screenshotCallbacks.values()); if (callbacks.length > 0) { const callback = callbacks[0]; console.log("Found callback, resolving promise"); - // Pass both the data and path to the resolver - callback.resolve({ data: data.data, path: data.path }); + // Pass both the data, path and autoPaste to the resolver + callback.resolve({ + data: data.data, + path: data.path, + autoPaste: data.autoPaste, + }); screenshotCallbacks.clear(); // Clear all callbacks } else { console.log("No callbacks found for screenshot"); @@ -945,34 +955,36 @@ export class BrowserConnector { console.log("Browser Connector: Generated requestId:", requestId); // Create promise that will resolve when we get the screenshot data - const screenshotPromise = new Promise<{ data: string; path?: string }>( - (resolve, reject) => { - console.log( - `Browser Connector: Setting up screenshot callback for requestId: ${requestId}` - ); - // Store callback in map - screenshotCallbacks.set(requestId, { resolve, reject }); - console.log( - "Browser Connector: Current callbacks:", - Array.from(screenshotCallbacks.keys()) - ); + const screenshotPromise = new Promise<{ + data: string; + path?: string; + autoPaste?: boolean; + }>((resolve, reject) => { + console.log( + `Browser Connector: Setting up screenshot callback for requestId: ${requestId}` + ); + // Store callback in map + screenshotCallbacks.set(requestId, { resolve, reject }); + console.log( + "Browser Connector: Current callbacks:", + Array.from(screenshotCallbacks.keys()) + ); - // Set timeout to clean up if we don't get a response - setTimeout(() => { - if (screenshotCallbacks.has(requestId)) { - console.log( - `Browser Connector: Screenshot capture timed out for requestId: ${requestId}` - ); - screenshotCallbacks.delete(requestId); - reject( - new Error( - "Screenshot capture timed out - no response from Chrome extension" - ) - ); - } - }, 10000); - } - ); + // Set timeout to clean up if we don't get a response + setTimeout(() => { + if (screenshotCallbacks.has(requestId)) { + console.log( + `Browser Connector: Screenshot capture timed out for requestId: ${requestId}` + ); + screenshotCallbacks.delete(requestId); + reject( + new Error( + "Screenshot capture timed out - no response from Chrome extension" + ) + ); + } + }, 10000); + }); // Send screenshot request to extension const message = JSON.stringify({ @@ -987,9 +999,14 @@ export class BrowserConnector { // Wait for screenshot data console.log("Browser Connector: Waiting for screenshot data..."); - const { data: base64Data, path: customPath } = await screenshotPromise; + const { + data: base64Data, + path: customPath, + autoPaste, + } = await screenshotPromise; console.log("Browser Connector: Received screenshot data, saving..."); console.log("Browser Connector: Custom path from extension:", customPath); + console.log("Browser Connector: Auto-paste setting:", autoPaste); // Always prioritize the path from the Chrome extension let targetPath = customPath; @@ -1049,9 +1066,9 @@ export class BrowserConnector { } // Check if running on macOS before executing AppleScript - if (os.platform() === "darwin") { + if (os.platform() === "darwin" && autoPaste === true) { console.log( - "Browser Connector: Running on macOS, executing AppleScript to paste into Cursor" + "Browser Connector: Running on macOS with auto-paste enabled, executing AppleScript to paste into Cursor" ); // Create the AppleScript to copy the image to clipboard and paste into Cursor @@ -1203,9 +1220,15 @@ export class BrowserConnector { } }); } else { - console.log( - `Browser Connector: Not running on macOS, skipping AppleScript execution` - ); + if (os.platform() === "darwin" && !autoPaste) { + console.log( + `Browser Connector: Running on macOS but auto-paste is disabled, skipping AppleScript execution` + ); + } else { + console.log( + `Browser Connector: Not running on macOS, skipping AppleScript execution` + ); + } } res.json({ diff --git a/chrome-extension/devtools.js b/chrome-extension/devtools.js index 5e1a316..39b53bb 100644 --- a/chrome-extension/devtools.js +++ b/chrome-extension/devtools.js @@ -11,6 +11,7 @@ let settings = { screenshotPath: "", // Add new setting for screenshot path serverHost: "localhost", // Default server host serverPort: 3025, // Default server port + allowAutoPaste: false, // Default auto-paste setting }; // Keep track of debugger state @@ -978,6 +979,8 @@ async function setupWebSocket() { 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", { diff --git a/chrome-extension/panel.html b/chrome-extension/panel.html index a141bfa..5dd04a9 100644 --- a/chrome-extension/panel.html +++ b/chrome-extension/panel.html @@ -51,6 +51,9 @@ .checkbox-group { margin-bottom: 8px; } + .checkbox-group-2 { + margin-bottom: 6px; + } input[type="number"], input[type="text"] { padding: 4px; @@ -123,6 +126,12 @@ Wipe All Logs +
+ +
diff --git a/chrome-extension/panel.js b/chrome-extension/panel.js index 33884ad..528df11 100644 --- a/chrome-extension/panel.js +++ b/chrome-extension/panel.js @@ -10,6 +10,7 @@ let settings = { // Add server connection settings serverHost: "localhost", serverPort: 3025, + allowAutoPaste: false, // Default auto-paste setting }; // Track connection status @@ -340,6 +341,9 @@ advancedSettingsHeader.addEventListener("click", () => { chevronIcon.classList.toggle("open"); }); +// Get all inputs by ID +const allowAutoPasteCheckbox = document.getElementById("allow-auto-paste"); + // Update UI from settings function updateUIFromSettings() { logLimitInput.value = settings.logLimit; @@ -351,6 +355,7 @@ function updateUIFromSettings() { screenshotPathInput.value = settings.screenshotPath; serverHostInput.value = settings.serverHost; serverPortInput.value = settings.serverPort; + allowAutoPasteCheckbox.checked = settings.allowAutoPaste; } // Save settings @@ -414,6 +419,12 @@ serverPortInput.addEventListener("change", (e) => { testConnection(settings.serverHost, settings.serverPort); }); +// Add event listener for auto-paste checkbox +allowAutoPasteCheckbox.addEventListener("change", (e) => { + settings.allowAutoPaste = e.target.checked; + saveSettings(); +}); + // Function to cancel any ongoing discovery operations function cancelOngoingDiscovery() { if (isDiscoveryInProgress) {