diff --git a/README.md b/README.md index a7d615d..7448426 100644 --- a/README.md +++ b/README.md @@ -8,13 +8,23 @@ Read our [docs](https://browsertools.agentdesk.ai/) for the full installation, q ## Updates -v1.1.0 is out! This includes several bug fixes for logging + screenshots. +v1.2.0 is out! Here's a quick breakdown of the update: +- You can now enable "Allow Auto-Paste into Cursor" within the DevTools panel. Screenshots will be automatically pasted into Cursor (just make sure to focus/click into the Agent input field in Cursor, otherwise it won't work!) +- Integrated a suite of SEO, performance, accessibility, and best practice analysis tools via Lighthouse +- Implemented a NextJS specific prompt used to improve SEO for a NextJS application +- Added Debugger Mode as a tool which executes all debugging tools in a particular sequence, along with a prompt to improve reasoning +- Added Audit Mode as a tool to execute all auditing tools in a particular sequence +- Resolved Windows connectivity issues +- Improved networking between BrowserTools server, extension and MCP server with host/port auto-discovery, auto-reconnect, and graceful shutdown mechanisms +- Added ability to more easily exit out of the Browser Tools server with Ctrl+C + + Please make sure to update the version in your IDE / MCP client as so: -`npx @agentdeskai/browser-tools-mcp@1.1.0` +`npx @agentdeskai/browser-tools-mcp@1.2.0` Also make sure to download the latest version of the chrome extension here: -[v1.1.0 BrowserToolsMCP Chrome Extension](https://github.com/AgentDeskAI/browser-tools-mcp/releases/download/v1.1.0/chrome-extension-v1-1-0.zip) +[v1.2.0 BrowserToolsMCP Chrome Extension](https://github.com/AgentDeskAI/browser-tools-mcp/releases/download/v1.1.0/chrome-extension-v1-1-0.zip) From there you can run the local node server as usual like so: `npx @agentdeskai/browser-tools-server` @@ -23,6 +33,122 @@ And once you've opened your chrome dev tools, logs should be getting sent to you If you have any questions or issues, feel free to open an issue ticket! And if you have any ideas to make this better, feel free to reach out or open an issue ticket with an enhancement tag or reach out to me at [@tedx_ai on x](https://x.com/tedx_ai) +## Full Update Notes: + +Coding agents like Cursor can run these audits against the current page seamlessly. By leveraging Puppeteer and the Lighthouse npm library, BrowserTools MCP can now: + +- Evaluate pages for WCAG compliance +- Identify performance bottlenecks +- Flag on-page SEO issues +- Check adherence to web development best practices +- Review NextJS specific issues with SEO + +...all without leaving your IDE 🎉 + +--- + +## 🔑 Key Additions + +| Audit Type | Description | +| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------- | +| **Accessibility** | WCAG-compliant checks for color contrast, missing alt text, keyboard navigation traps, ARIA attributes, and more. | +| **Performance** | Lighthouse-driven analysis of render-blocking resources, excessive DOM size, unoptimized images, and other factors affecting page speed. | +| **SEO** | Evaluates on-page SEO factors (like metadata, headings, and link structure) and suggests improvements for better search visibility. | +| **Best Practices** | Checks for general best practices in web development. | +| **NextJS Audit** | Injects a prompt used to perform a NextJS audit. | +| **Audit Mode** | Runs all audting tools in a sequence. | +| **Debugger Mode** | Runs all debugging tools in a sequence. | + +--- + +## 🛠️ Using Audit Tools + +### ✅ **Before You Start** + +Ensure you have: + +- An **active tab** in your browser +- The **BrowserTools extension enabled** + +### ▶️ **Running Audits** + +**Headless Browser Automation**: + Puppeteer automates a headless Chrome instance to load the page and collect audit data, ensuring accurate results even for SPAs or content loaded via JavaScript. + +The headless browser instance remains active for **60 seconds** after the last audit call to efficiently handle consecutive audit requests. + +**Structured Results**: + Each audit returns results in a structured JSON format, including overall scores and detailed issue lists. This makes it easy for MCP-compatible clients to interpret the findings and present actionable insights. + +The MCP server provides tools to run audits on the current page. Here are example queries you can use to trigger them: + +#### Accessibility Audit (`runAccessibilityAudit`) + +Ensures the page meets accessibility standards like WCAG. + +> **Example Queries:** +> +> - "Are there any accessibility issues on this page?" +> - "Run an accessibility audit." +> - "Check if this page meets WCAG standards." + +#### Performance Audit (`runPerformanceAudit`) + +Identifies performance bottlenecks and loading issues. + +> **Example Queries:** +> +> - "Why is this page loading so slowly?" +> - "Check the performance of this page." +> - "Run a performance audit." + +#### SEO Audit (`runSEOAudit`) + +Evaluates how well the page is optimized for search engines. + +> **Example Queries:** +> +> - "How can I improve SEO for this page?" +> - "Run an SEO audit." +> - "Check SEO on this page." + +#### Best Practices Audit (`runBestPracticesAudit`) + +Checks for general best practices in web development. + +> **Example Queries:** +> +> - "Run a best practices audit." +> - "Check best practices on this page." +> - "Are there any best practices issues on this page?" + +#### Audit Mode (`runAuditMode`) + +Runs all audits in a particular sequence. Will run a NextJS audit if the framework is detected. + +> **Example Queries:** +> +> - "Run audit mode." +> - "Enter audit mode." + +#### NextJS Audits (`runNextJSAudit`) + +Checks for best practices and SEO improvements for NextJS applications + +> **Example Queries:** +> +> - "Run a NextJS audit." +> - "Run a NextJS audit, I'm using app router." +> - "Run a NextJS audit, I'm using page router." + +#### Debugger Mode (`runDebuggerMode`) + +Runs all debugging tools in a particular sequence + +> **Example Queries:** +> +> - "Enter debugger mode." + ## Architecture There are three core components all used to capture and analyze browser data: @@ -86,6 +212,7 @@ Once installed and configured, the system allows any compatible MCP client to: - Take screenshots - Analyze selected elements - Wipe logs stored in our MCP server +- Run accessibility, performance, SEO, and best practices audits ## Compatibility diff --git a/browser-tools-mcp/README.md b/browser-tools-mcp/README.md index 0a4f258..059ec32 100644 --- a/browser-tools-mcp/README.md +++ b/browser-tools-mcp/README.md @@ -10,6 +10,13 @@ A Model Context Protocol (MCP) server that provides AI-powered browser tools int - Screenshot capture capabilities - Element selection and inspection - Real-time browser state monitoring +- Accessibility, performance, SEO, and best practices audits + +## Prerequisites + +- Node.js 14 or higher +- Browser Tools Server running +- Chrome or Chromium browser installed (required for audit functionality) ## Installation @@ -44,6 +51,7 @@ npx @agentdeskai/browser-tools-mcp - Screenshot capture - Element selection - Browser state analysis +- Accessibility and performance audits ## MCP Functions @@ -55,6 +63,10 @@ The server provides the following MCP functions: - `mcp_getNetworkSuccess` - Get successful network requests - `mcp_getNetworkLogs` - Get all network logs - `mcp_getSelectedElement` - Get the currently selected DOM element +- `mcp_runAccessibilityAudit` - Run a WCAG-compliant accessibility audit +- `mcp_runPerformanceAudit` - Run a performance audit +- `mcp_runSEOAudit` - Run an SEO audit +- `mcp_runBestPracticesAudit` - Run a best practices audit ## Integration diff --git a/browser-tools-mcp/mcp-server.ts b/browser-tools-mcp/mcp-server.ts index 0d95689..a7a1272 100644 --- a/browser-tools-mcp/mcp-server.ts +++ b/browser-tools-mcp/mcp-server.ts @@ -2,48 +2,222 @@ import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js"; import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js"; +import path from "path"; +import fs from "fs"; // Create the MCP server const server = new McpServer({ - name: "Browsert Tools MCP", - version: "1.0.9", + name: "Browser Tools MCP", + version: "1.2.0", }); -// Function to get the port from the .port file -// function getPort(): number { -// try { -// const port = parseInt(fs.readFileSync(".port", "utf8")); -// return port; -// } catch (err) { -// console.error("Could not read port file, defaulting to 3000"); -// return 3025; -// } -// } +// Track the discovered server connection +let discoveredHost = "127.0.0.1"; +let discoveredPort = 3025; +let serverDiscovered = false; -// const PORT = getPort(); +// Function to get the default port from environment variable or default +function getDefaultServerPort(): number { + // Check environment variable first + if (process.env.BROWSER_TOOLS_PORT) { + const envPort = parseInt(process.env.BROWSER_TOOLS_PORT, 10); + if (!isNaN(envPort) && envPort > 0) { + return envPort; + } + } + + // Try to read from .port file + try { + const portFilePath = path.join(__dirname, ".port"); + if (fs.existsSync(portFilePath)) { + const port = parseInt(fs.readFileSync(portFilePath, "utf8").trim(), 10); + if (!isNaN(port) && port > 0) { + return port; + } + } + } catch (err) { + console.error("Error reading port file:", err); + } + + // Default port if no configuration found + return 3025; +} + +// Function to get default server host from environment variable or default +function getDefaultServerHost(): string { + // Check environment variable first + if (process.env.BROWSER_TOOLS_HOST) { + return process.env.BROWSER_TOOLS_HOST; + } + + // Default to localhost + return "127.0.0.1"; +} + +// Server discovery function - similar to what you have in the Chrome extension +async function discoverServer(): Promise { + console.log("Starting server discovery process"); -const PORT = 3025; + // Common hosts to try + const hosts = [getDefaultServerHost(), "127.0.0.1", "localhost"]; -// We'll define four "tools" that retrieve data from the aggregator at localhost:3000 + // Ports to try (start with default, then try others) + const defaultPort = getDefaultServerPort(); + const ports = [defaultPort]; + // Add additional ports (fallback range) + for (let p = 3025; p <= 3035; p++) { + if (p !== defaultPort) { + ports.push(p); + } + } + + console.log(`Will try hosts: ${hosts.join(", ")}`); + console.log(`Will try ports: ${ports.join(", ")}`); + + // Try to find the server + for (const host of hosts) { + for (const port of ports) { + try { + console.log(`Checking ${host}:${port}...`); + + // Use the identity endpoint for validation + const response = await fetch(`http://${host}:${port}/.identity`, { + signal: AbortSignal.timeout(1000), // 1 second timeout + }); + + if (response.ok) { + const identity = await response.json(); + + // Verify this is actually our server by checking the signature + if (identity.signature === "mcp-browser-connector-24x7") { + console.log(`Successfully found server at ${host}:${port}`); + + // Save the discovered connection + discoveredHost = host; + discoveredPort = port; + serverDiscovered = true; + + return true; + } + } + } catch (error: any) { + // Ignore connection errors during discovery + console.error(`Error checking ${host}:${port}: ${error.message}`); + } + } + } + + console.error("No server found during discovery"); + return false; +} + +// Wrapper function to ensure server connection before making requests +async function withServerConnection( + apiCall: () => Promise +): Promise { + // Attempt to discover server if not already discovered + if (!serverDiscovered) { + const discovered = await discoverServer(); + if (!discovered) { + return { + content: [ + { + type: "text", + text: "Failed to discover browser connector server. Please ensure it's running.", + }, + ], + isError: true, + }; + } + } + + // Now make the actual API call with discovered host/port + try { + return await apiCall(); + } catch (error: any) { + // If the request fails, try rediscovering the server once + console.error( + `API call failed: ${error.message}. Attempting rediscovery...` + ); + serverDiscovered = false; + + if (await discoverServer()) { + console.error("Rediscovery successful. Retrying API call..."); + try { + // Retry the API call with the newly discovered connection + return await apiCall(); + } catch (retryError: any) { + console.error(`Retry failed: ${retryError.message}`); + return { + content: [ + { + type: "text", + text: `Error after reconnection attempt: ${retryError.message}`, + }, + ], + isError: true, + }; + } + } else { + console.error("Rediscovery failed. Could not reconnect to server."); + return { + content: [ + { + type: "text", + text: `Failed to reconnect to server: ${error.message}`, + }, + ], + isError: true, + }; + } + } +} + +// We'll define our tools that retrieve data from the browser connector server.tool("getConsoleLogs", "Check our browser logs", async () => { - const response = await fetch(`http://127.0.0.1:${PORT}/console-logs`); - const json = await response.json(); - return { - content: [ - { - type: "text", - text: JSON.stringify(json, null, 2), - }, - ], - }; + return await withServerConnection(async () => { + const response = await fetch( + `http://${discoveredHost}:${discoveredPort}/console-logs` + ); + const json = await response.json(); + return { + content: [ + { + type: "text", + text: JSON.stringify(json, null, 2), + }, + ], + }; + }); }); server.tool( "getConsoleErrors", "Check our browsers console errors", async () => { - const response = await fetch(`http://127.0.0.1:${PORT}/console-errors`); + return await withServerConnection(async () => { + const response = await fetch( + `http://${discoveredHost}:${discoveredPort}/console-errors` + ); + const json = await response.json(); + return { + content: [ + { + type: "text", + text: JSON.stringify(json, null, 2), + }, + ], + }; + }); + } +); + +server.tool("getNetworkErrors", "Check our network ERROR logs", async () => { + return await withServerConnection(async () => { + const response = await fetch( + `http://${discoveredHost}:${discoveredPort}/network-errors` + ); const json = await response.json(); return { content: [ @@ -52,45 +226,16 @@ server.tool( text: JSON.stringify(json, null, 2), }, ], + isError: true, }; - } -); - -// Return all HTTP errors (4xx/5xx) -server.tool("getNetworkErrorLogs", "Check our network ERROR logs", async () => { - const response = await fetch(`http://127.0.0.1:${PORT}/network-errors`); - const json = await response.json(); - return { - content: [ - { - type: "text", - text: JSON.stringify(json, null, 2), - }, - ], - }; + }); }); -// // Return all XHR/fetch requests -// // DEPRECATED: Use getNetworkSuccessLogs and getNetworkErrorLogs instead -// server.tool("getNetworkSuccess", "Check our network SUCCESS logs", async () => { -// const response = await fetch(`http://127.0.0.1:${PORT}/all-xhr`); -// const json = await response.json(); -// return { -// content: [ -// { -// type: "text", -// text: JSON.stringify(json, null, 2), -// }, -// ], -// }; -// }); - -// Return network success logs -server.tool( - "getNetworkSuccessLogs", - "Check our network SUCCESS logs", - async () => { - const response = await fetch(`http://127.0.0.1:${PORT}/network-success`); +server.tool("getNetworkLogs", "Check ALL our network logs", async () => { + return await withServerConnection(async () => { + const response = await fetch( + `http://${discoveredHost}:${discoveredPort}/network-success` + ); const json = await response.json(); return { content: [ @@ -100,99 +245,1201 @@ server.tool( }, ], }; - } -); + }); +}); -// Add new tool for taking screenshots server.tool( "takeScreenshot", "Take a screenshot of the current browser tab", async () => { - try { - const response = await fetch( - `http://127.0.0.1:${PORT}/capture-screenshot`, - { - method: "POST", - } - ); + return await withServerConnection(async () => { + try { + const response = await fetch( + `http://${discoveredHost}:${discoveredPort}/capture-screenshot`, + { + method: "POST", + } + ); - const result = await response.json(); + const result = await response.json(); - if (response.ok) { - // Removed path due to bug... will change later anyways - // const message = `Screenshot saved to: ${ - // result.path - // }\nFilename: ${path.basename(result.path)}`; - return { - content: [ - { - type: "text", - text: "Successfully saved screenshot", - }, - ], - }; - } else { + if (response.ok) { + return { + content: [ + { + type: "text", + text: "Successfully saved screenshot", + }, + ], + }; + } else { + return { + content: [ + { + type: "text", + text: `Error taking screenshot: ${result.error}`, + }, + ], + }; + } + } catch (error: any) { + const errorMessage = + error instanceof Error ? error.message : String(error); return { content: [ { type: "text", - text: `Error taking screenshot: ${result.error}`, + text: `Failed to take screenshot: ${errorMessage}`, }, ], }; } - } catch (error) { - const errorMessage = - error instanceof Error ? error.message : String(error); + }); + } +); + +server.tool( + "getSelectedElement", + "Get the selected element from the browser", + async () => { + return await withServerConnection(async () => { + const response = await fetch( + `http://${discoveredHost}:${discoveredPort}/selected-element` + ); + const json = await response.json(); return { content: [ { type: "text", - text: `Failed to take screenshot: ${errorMessage}`, + text: JSON.stringify(json, null, 2), }, ], }; - } + }); } ); -// Add new tool for getting selected element -server.tool( - "getSelectedElement", - "Get the selected element from the browser", - async () => { - const response = await fetch(`http://127.0.0.1:${PORT}/selected-element`); +server.tool("wipeLogs", "Wipe all browser logs from memory", async () => { + return await withServerConnection(async () => { + const response = await fetch( + `http://${discoveredHost}:${discoveredPort}/wipelogs`, + { + method: "POST", + } + ); const json = await response.json(); return { content: [ { type: "text", - text: JSON.stringify(json, null, 2), + text: json.message, }, ], }; + }); +}); + +// Define audit categories as enum to match the server's AuditCategory enum +enum AuditCategory { + ACCESSIBILITY = "accessibility", + PERFORMANCE = "performance", + SEO = "seo", + BEST_PRACTICES = "best-practices", + PWA = "pwa", +} + +// Add tool for accessibility audits, launches a headless browser instance +server.tool( + "runAccessibilityAudit", + "Run an accessibility audit on the current page", + {}, + async () => { + return await withServerConnection(async () => { + try { + // Simplified approach - let the browser connector handle the current tab and URL + console.log( + `Sending POST request to http://${discoveredHost}:${discoveredPort}/accessibility-audit` + ); + const response = await fetch( + `http://${discoveredHost}:${discoveredPort}/accessibility-audit`, + { + method: "POST", + headers: { + "Content-Type": "application/json", + Accept: "application/json", + }, + body: JSON.stringify({ + category: AuditCategory.ACCESSIBILITY, + source: "mcp_tool", + timestamp: Date.now(), + }), + } + ); + + // Log the response status + console.log(`Accessibility audit response status: ${response.status}`); + + if (!response.ok) { + const errorText = await response.text(); + console.error(`Accessibility audit error: ${errorText}`); + throw new Error(`Server returned ${response.status}: ${errorText}`); + } + + const json = await response.json(); + + // flatten it by merging metadata with the report contents + if (json.report) { + const { metadata, report } = json; + const flattened = { + ...metadata, + ...report, + }; + + return { + content: [ + { + type: "text", + text: JSON.stringify(flattened, null, 2), + }, + ], + }; + } else { + // Return as-is if it's not in the new format + return { + content: [ + { + type: "text", + text: JSON.stringify(json, null, 2), + }, + ], + }; + } + } catch (error) { + const errorMessage = + error instanceof Error ? error.message : String(error); + console.error("Error in accessibility audit:", errorMessage); + return { + content: [ + { + type: "text", + text: `Failed to run accessibility audit: ${errorMessage}`, + }, + ], + }; + } + }); } ); -// Add new tool for wiping logs -server.tool("wipeLogs", "Wipe all browser logs from memory", async () => { - const response = await fetch(`http://127.0.0.1:${PORT}/wipelogs`, { - method: "POST", - }); - const json = await response.json(); - return { +// Add tool for performance audits, launches a headless browser instance +server.tool( + "runPerformanceAudit", + "Run a performance audit on the current page", + {}, + async () => { + return await withServerConnection(async () => { + try { + // Simplified approach - let the browser connector handle the current tab and URL + console.log( + `Sending POST request to http://${discoveredHost}:${discoveredPort}/performance-audit` + ); + const response = await fetch( + `http://${discoveredHost}:${discoveredPort}/performance-audit`, + { + method: "POST", + headers: { + "Content-Type": "application/json", + Accept: "application/json", + }, + body: JSON.stringify({ + category: AuditCategory.PERFORMANCE, + source: "mcp_tool", + timestamp: Date.now(), + }), + } + ); + + // Log the response status + console.log(`Performance audit response status: ${response.status}`); + + if (!response.ok) { + const errorText = await response.text(); + console.error(`Performance audit error: ${errorText}`); + throw new Error(`Server returned ${response.status}: ${errorText}`); + } + + const json = await response.json(); + + // flatten it by merging metadata with the report contents + if (json.report) { + const { metadata, report } = json; + const flattened = { + ...metadata, + ...report, + }; + + return { + content: [ + { + type: "text", + text: JSON.stringify(flattened, null, 2), + }, + ], + }; + } else { + // Return as-is if it's not in the new format + return { + content: [ + { + type: "text", + text: JSON.stringify(json, null, 2), + }, + ], + }; + } + } catch (error) { + const errorMessage = + error instanceof Error ? error.message : String(error); + console.error("Error in performance audit:", errorMessage); + return { + content: [ + { + type: "text", + text: `Failed to run performance audit: ${errorMessage}`, + }, + ], + }; + } + }); + } +); + +// Add tool for SEO audits, launches a headless browser instance +server.tool( + "runSEOAudit", + "Run an SEO audit on the current page", + {}, + async () => { + return await withServerConnection(async () => { + try { + console.log( + `Sending POST request to http://${discoveredHost}:${discoveredPort}/seo-audit` + ); + const response = await fetch( + `http://${discoveredHost}:${discoveredPort}/seo-audit`, + { + method: "POST", + headers: { + "Content-Type": "application/json", + Accept: "application/json", + }, + body: JSON.stringify({ + category: AuditCategory.SEO, + source: "mcp_tool", + timestamp: Date.now(), + }), + } + ); + + // Log the response status + console.log(`SEO audit response status: ${response.status}`); + + if (!response.ok) { + const errorText = await response.text(); + console.error(`SEO audit error: ${errorText}`); + throw new Error(`Server returned ${response.status}: ${errorText}`); + } + + const json = await response.json(); + + return { + content: [ + { + type: "text", + text: JSON.stringify(json, null, 2), + }, + ], + }; + } catch (error) { + const errorMessage = + error instanceof Error ? error.message : String(error); + console.error("Error in SEO audit:", errorMessage); + return { + content: [ + { + type: "text", + text: `Failed to run SEO audit: ${errorMessage}`, + }, + ], + }; + } + }); + } +); + +server.tool("runNextJSAudit", {}, async () => ({ + content: [ + { + type: "text", + text: ` + You are an expert in SEO and web development with NextJS. Given the following procedures for analyzing my codebase, please perform a comprehensive - page by page analysis of our NextJS application to identify any issues or areas of improvement for SEO. + + After each iteration of changes, reinvoke this tool to re-fetch our SEO audit procedures and then scan our codebase again to identify additional areas of improvement. + + When no more areas of improvement are found, return "No more areas of improvement found, your NextJS application is optimized for SEO!". + + Start by analyzing each of the following aspects of our codebase: + 1. Meta tags - provides information about your website to search engines and social media platforms. + + Pages should provide the following standard meta tags: + + title + description + keywords + robots + viewport + charSet + Open Graph meta tags: + + og:site_name + og:locale + og:title + og:description + og:type + og:url + og:image + og:image:alt + og:image:type + og:image:width + og:image:height + Article meta tags (actually it's also OpenGraph): + + article:published_time + article:modified_time + article:author + Twitter meta tags: + + twitter:card + twitter:site + twitter:creator + twitter:title + twitter:description + twitter:image + + For applications using the pages router, set up metatags like this in pages/[slug].tsx: + import Head from "next/head"; + + export default function Page() { + return ( + + + Next.js SEO: The Complete Checklist to Boost Your Site Ranking + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); + } + + For applications using the app router, set up metatags like this in layout.tsx: + import type { Viewport, Metadata } from "next"; + + export const viewport: Viewport = { + width: "device-width", + initialScale: 1, + themeColor: "#ffffff" + }; + + export const metadata: Metadata = { + metadataBase: new URL("https://dminhvu.com"), + openGraph: { + siteName: "Blog | Minh Vu", + type: "website", + locale: "en_US" + }, + robots: { + index: true, + follow: true, + "max-image-preview": "large", + "max-snippet": -1, + "max-video-preview": -1, + googleBot: "index, follow" + }, + alternates: { + types: { + "application/rss+xml": "https://dminhvu.com/rss.xml" + } + }, + applicationName: "Blog | Minh Vu", + appleWebApp: { + title: "Blog | Minh Vu", + statusBarStyle: "default", + capable: true + }, + verification: { + google: "YOUR_DATA", + yandex: ["YOUR_DATA"], + other: { + "msvalidate.01": ["YOUR_DATA"], + "facebook-domain-verification": ["YOUR_DATA"] + } + }, + icons: { + icon: [ + { + url: "/favicon.ico", + type: "image/x-icon" + }, + { + url: "/favicon-16x16.png", + sizes: "16x16", + type: "image/png" + } + // add favicon-32x32.png, favicon-96x96.png, android-chrome-192x192.png + ], + shortcut: [ + { + url: "/favicon.ico", + type: "image/x-icon" + } + ], + apple: [ + { + url: "/apple-icon-57x57.png", + sizes: "57x57", + type: "image/png" + }, + { + url: "/apple-icon-60x60.png", + sizes: "60x60", + type: "image/png" + } + // add apple-icon-72x72.png, apple-icon-76x76.png, apple-icon-114x114.png, apple-icon-120x120.png, apple-icon-144x144.png, apple-icon-152x152.png, apple-icon-180x180.png + ] + } + }; + And like this for any page.tsx file: + import { Metadata } from "next"; + + export const metadata: Metadata = { + title: "Elastic Stack, Next.js, Python, JavaScript Tutorials | dminhvu", + description: + "dminhvu.com - Programming blog for everyone to learn Elastic Stack, Next.js, Python, JavaScript, React, Machine Learning, Data Science, and more.", + keywords: [ + "elastic", + "python", + "javascript", + "react", + "machine learning", + "data science" + ], + openGraph: { + url: "https://dminhvu.com", + type: "website", + title: "Elastic Stack, Next.js, Python, JavaScript Tutorials | dminhvu", + description: + "dminhvu.com - Programming blog for everyone to learn Elastic Stack, Next.js, Python, JavaScript, React, Machine Learning, Data Science, and more.", + images: [ + { + url: "https://dminhvu.com/images/home/thumbnail.png", + width: 1200, + height: 630, + alt: "dminhvu" + } + ] + }, + twitter: { + card: "summary_large_image", + title: "Elastic Stack, Next.js, Python, JavaScript Tutorials | dminhvu", + description: + "dminhvu.com - Programming blog for everyone to learn Elastic Stack, Next.js, Python, JavaScript, React, Machine Learning, Data Science, and more.", + creator: "@dminhvu02", + site: "@dminhvu02", + images: [ + { + url: "https://dminhvu.com/images/home/thumbnail.png", + width: 1200, + height: 630, + alt: "dminhvu" + } + ] + }, + alternates: { + canonical: "https://dminhvu.com" + } + }; + + Note that the charSet and viewport are automatically added by Next.js App Router, so you don't need to define them. + + For applications using the app router, dynamic metadata can be defined by using the generateMetadata function, this is useful when you have dynamic pages like [slug]/page.tsx, or [id]/page.tsx: + + import type { Metadata, ResolvingMetadata } from "next"; + + type Params = { + slug: string; + }; + + type Props = { + params: Params; + searchParams: { [key: string]: string | string[] | undefined }; + }; + + export async function generateMetadata( + { params, searchParams }: Props, + parent: ResolvingMetadata + ): Promise { + const { slug } = params; + + const post: Post = await fetch("YOUR_ENDPOINT", { + method: "GET", + next: { + revalidate: 60 * 60 * 24 + } + }).then((res) => res.json()); + + return { + title: "{post.title} | dminhvu", + authors: [ + { + name: post.author || "Minh Vu" + } + ], + description: post.description, + keywords: post.keywords, + openGraph: { + title: "{post.title} | dminhvu", + description: post.description, + type: "article", + url: "https://dminhvu.com/{post.slug}", + publishedTime: post.created_at, + modifiedTime: post.modified_at, + authors: ["https://dminhvu.com/about"], + tags: post.categories, + images: [ + { + url: "https://ik.imagekit.io/dminhvu/assets/{post.slug}/thumbnail.png?tr=f-png", + width: 1024, + height: 576, + alt: post.title, + type: "image/png" + } + ] + }, + twitter: { + card: "summary_large_image", + site: "@dminhvu02", + creator: "@dminhvu02", + title: "{post.title} | dminhvu", + description: post.description, + images: [ + { + url: "https://ik.imagekit.io/dminhvu/assets/{post.slug}/thumbnail.png?tr=f-png", + width: 1024, + height: 576, + alt: post.title + } + ] + }, + alternates: { + canonical: "https://dminhvu.com/{post.slug}" + } + }; + } + + + 2. JSON-LD Schema + + JSON-LD is a format for structured data that can be used by search engines to understand your content. For example, you can use it to describe a person, an event, an organization, a movie, a book, a recipe, and many other types of entities. + + Our current recommendation for JSON-LD is to render structured data as a + + )} + + ); + } + Script Optimization for Common Third-Party Integrations + Next.js App Router introduces a new library called @next/third-parties for: + + Google Tag Manager + Google Analytics + Google Maps Embed + YouTube Embed + To use the @next/third-parties library, you need to install it: + + + npm install @next/third-parties + Then, you can add the following code to your app/layout.tsx: + + app/layout.tsx + + import { GoogleTagManager } from "@next/third-parties/google"; + import { GoogleAnalytics } from "@next/third-parties/google"; + import Head from "next/head"; + + export default function Page() { + return ( + + {process.env.NODE_ENV === "production" && ( + <> + + {/* other scripts */} + + )} + {/* other parts */} + + ); + } + Please note that you don't need to include both GoogleTagManager and GoogleAnalytics if you only use one of them. + 7. Image optimization + Image Optimization + This part can be applied to both Pages Router and App Router. + + Image optimization is also an important part of SEO as it helps your website load faster. + + Faster image rendering speed will contribute to the Google PageSpeed score, which can improve user experience and SEO. + + You can use next/image to optimize images in your Next.js website. + + For example, the following code will optimize this post thumbnail: + + + import Image from "next/image"; + + export default function Page() { + return ( + Next.js SEO + ); + } + 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. + `, + }, + ], +})); + +server.tool( + "runDebuggerMode", + "Run debugger mode to debug an issue in our application", + async () => ({ content: [ { type: "text", - text: json.message, + text: ` + Please follow this exact sequence to debug an issue in our application: + + 1. Reflect on 5-7 different possible sources of the problem + 2. Distill those down to 1-2 most likely sources + 3. Add additional logs to validate your assumptions and track the transformation of data structures throughout the application control flow before we move onto implementing the actual code fix + 4. Use the "getConsoleLogs", "getConsoleErrors", "getNetworkLogs" & "getNetworkErrors" tools to obtain any newly added web browser logs + 5. Obtain the server logs as well if accessible - otherwise, ask me to copy/paste them into the chat + 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. +`, }, ], - }; -}); + }) +); + +server.tool( + "runAuditMode", + "Run audit mode to optimize our application for SEO, accessibility and performance", + async () => ({ + content: [ + { + type: "text", + text: ` + I want you to enter "Audit Mode". Use the following MCP tools one after the other in this exact sequence: + + 1. runAccessibilityAudit + 2. runPerformanceAudit + 3. runBestPracticesAudit + 4. runSEOAudit + 5. runNextJSAudit (only if our application is ACTUALLY using NextJS) + + After running all of these tools, return back a comprehensive analysis of the audit results. + + Do NOT use runNextJSAudit tool unless you see that our application is ACTUALLY using NextJS. + + DO NOT use the takeScreenshot tool EVER during audit mode. ONLY use it if I specifically ask you to take a screenshot of something. + + DO NOT check console or network logs to get started - your main priority is to run the audits in the sequence defined above. + + After returning an in-depth analysis, scan through my code and identify various files/parts of my codebase that we want to modify/improve based on the results of our audits. + + After identifying what changes may be needed, do NOT make the actual changes. Instead, return back a comprehensive, step-by-step plan to address all of these changes and ask for approval to execute this plan. If feedback is received, make a new plan and ask for approval again. If approved, execute the ENTIRE plan and after all phases/steps are complete, re-run the auditing tools in the same 4 step sequence again before returning back another analysis for additional changes potentially needed. + + Keep repeating / iterating through this process with the four tools until our application is as optimized as possible for SEO, accessibility and performance. + +`, + }, + ], + }) +); + +// Add tool for Best Practices audits, launches a headless browser instance +server.tool( + "runBestPracticesAudit", + "Run a best practices audit on the current page", + {}, + async () => { + return await withServerConnection(async () => { + try { + console.log( + `Sending POST request to http://${discoveredHost}:${discoveredPort}/best-practices-audit` + ); + const response = await fetch( + `http://${discoveredHost}:${discoveredPort}/best-practices-audit`, + { + method: "POST", + headers: { + "Content-Type": "application/json", + Accept: "application/json", + }, + body: JSON.stringify({ + source: "mcp_tool", + timestamp: Date.now(), + }), + } + ); + + // Check for errors + if (!response.ok) { + const errorText = await response.text(); + throw new Error(`Server returned ${response.status}: ${errorText}`); + } + + const json = await response.json(); + + // flatten it by merging metadata with the report contents + if (json.report) { + const { metadata, report } = json; + const flattened = { + ...metadata, + ...report, + }; + + return { + content: [ + { + type: "text", + text: JSON.stringify(flattened, null, 2), + }, + ], + }; + } else { + // Return as-is if it's not in the new format + return { + content: [ + { + type: "text", + text: JSON.stringify(json, null, 2), + }, + ], + }; + } + } catch (error) { + const errorMessage = + error instanceof Error ? error.message : String(error); + console.error("Error in Best Practices audit:", errorMessage); + return { + content: [ + { + type: "text", + text: `Failed to run Best Practices audit: ${errorMessage}`, + }, + ], + }; + } + }); + } +); // Start receiving messages on stdio (async () => { try { + // Attempt initial server discovery + console.error("Attempting initial server discovery on startup..."); + await discoverServer(); + if (serverDiscovered) { + console.error( + `Successfully discovered server at ${discoveredHost}:${discoveredPort}` + ); + } else { + console.error( + "Initial server discovery failed. Will try again when tools are used." + ); + } + const transport = new StdioServerTransport(); // Ensure stdout is only used for JSON messages diff --git a/browser-tools-mcp/package-lock.json b/browser-tools-mcp/package-lock.json index 262052e..0784e8f 100644 --- a/browser-tools-mcp/package-lock.json +++ b/browser-tools-mcp/package-lock.json @@ -1,12 +1,12 @@ { "name": "@agentdeskai/browser-tools-mcp", - "version": "1.0.11", + "version": "1.1.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@agentdeskai/browser-tools-mcp", - "version": "1.0.11", + "version": "1.1.0", "license": "MIT", "dependencies": { "@modelcontextprotocol/sdk": "^1.4.1", @@ -14,6 +14,7 @@ "cors": "^2.8.5", "express": "^4.21.2", "llm-cost": "^1.0.5", + "node-fetch": "^2.7.0", "ws": "^8.18.0" }, "bin": { @@ -24,6 +25,7 @@ "@types/cors": "^2.8.17", "@types/express": "^5.0.0", "@types/node": "^22.13.1", + "@types/node-fetch": "^2.6.11", "@types/ws": "^8.5.14", "typescript": "^5.7.3" } @@ -116,6 +118,16 @@ "undici-types": "~6.20.0" } }, + "node_modules/@types/node-fetch": { + "version": "2.6.12", + "resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.6.12.tgz", + "integrity": "sha512-8nneRWKCg3rMtF69nLQJnOYUcbafYeFSjqkw3jCRLsqkWFlHaoQrr5mXmofFGOx3DKn7UfmBMyov8ySvLRVldA==", + "dev": true, + "dependencies": { + "@types/node": "*", + "form-data": "^4.0.0" + } + }, "node_modules/@types/qs": { "version": "6.9.18", "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.18.tgz", @@ -175,6 +187,12 @@ "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==" }, + "node_modules/asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==", + "dev": true + }, "node_modules/body-parser": { "version": "1.20.3", "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz", @@ -247,6 +265,18 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "dev": true, + "dependencies": { + "delayed-stream": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/content-disposition": { "version": "0.5.4", "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz", @@ -299,6 +329,15 @@ "ms": "2.0.0" } }, + "node_modules/delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "dev": true, + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/depd": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz", @@ -369,6 +408,21 @@ "node": ">= 0.4" } }, + "node_modules/es-set-tostringtag": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz", + "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==", + "dev": true, + "dependencies": { + "es-errors": "^1.3.0", + "get-intrinsic": "^1.2.6", + "has-tostringtag": "^1.0.2", + "hasown": "^2.0.2" + }, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/escape-html": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", @@ -463,6 +517,21 @@ "node": ">= 0.8" } }, + "node_modules/form-data": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.2.tgz", + "integrity": "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==", + "dev": true, + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "es-set-tostringtag": "^2.1.0", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/forwarded": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", @@ -544,6 +613,21 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/has-tostringtag": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz", + "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==", + "dev": true, + "dependencies": { + "has-symbols": "^1.0.3" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/hasown": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz", @@ -677,6 +761,25 @@ "node": ">= 0.6" } }, + "node_modules/node-fetch": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz", + "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==", + "dependencies": { + "whatwg-url": "^5.0.0" + }, + "engines": { + "node": "4.x || >=6.0.0" + }, + "peerDependencies": { + "encoding": "^0.1.0" + }, + "peerDependenciesMeta": { + "encoding": { + "optional": true + } + } + }, "node_modules/object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", @@ -947,6 +1050,11 @@ "node": ">=0.6" } }, + "node_modules/tr46": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", + "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==" + }, "node_modules/type-is": { "version": "1.6.18", "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz", @@ -1002,6 +1110,20 @@ "node": ">= 0.8" } }, + "node_modules/webidl-conversions": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", + "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==" + }, + "node_modules/whatwg-url": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", + "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==", + "dependencies": { + "tr46": "~0.0.3", + "webidl-conversions": "^3.0.0" + } + }, "node_modules/ws": { "version": "8.18.0", "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz", diff --git a/browser-tools-mcp/package.json b/browser-tools-mcp/package.json index 823fb7b..3d6e447 100644 --- a/browser-tools-mcp/package.json +++ b/browser-tools-mcp/package.json @@ -1,6 +1,6 @@ { "name": "@agentdeskai/browser-tools-mcp", - "version": "1.1.0", + "version": "1.2.0", "description": "MCP (Model Context Protocol) server for browser tools integration", "main": "dist/mcp-server.js", "bin": { @@ -32,6 +32,7 @@ "cors": "^2.8.5", "express": "^4.21.2", "llm-cost": "^1.0.5", + "node-fetch": "^2.7.0", "ws": "^8.18.0" }, "devDependencies": { @@ -40,6 +41,7 @@ "@types/cors": "^2.8.17", "@types/express": "^5.0.0", "@types/node": "^22.13.1", + "@types/node-fetch": "^2.6.11", "typescript": "^5.7.3" } } diff --git a/browser-tools-server/README.md b/browser-tools-server/README.md index a55aeec..47b59e5 100644 --- a/browser-tools-server/README.md +++ b/browser-tools-server/README.md @@ -10,6 +10,7 @@ A powerful browser tools server for capturing and managing browser events, logs, - Element selection tracking - WebSocket real-time communication - Configurable log limits and settings +- Lighthouse-powered accessibility, performance, SEO, and best practices audits ## Installation @@ -44,6 +45,9 @@ npx @agentdeskai/browser-tools-server - `/all-xhr` - Get all network requests - `/screenshot` - Capture screenshots - `/selected-element` - Get currently selected DOM element +- `/accessibility-audit` - Run accessibility audit on current page +- `/performance-audit` - Run performance audit on current page +- `/seo-audit` - Run SEO audit on current page ## API Documentation @@ -62,7 +66,374 @@ npx @agentdeskai/browser-tools-server - `POST /screenshot` - Capture and save screenshots - `POST /selected-element` - Update the selected element - `POST /wipelogs` - Clear all stored logs +- `POST /accessibility-audit` - Run a WCAG-compliant accessibility audit on the current page +- `POST /performance-audit` - Run a performance audit on the current page +- `POST /seo-audit` - Run a SEO audit on the current page + +# Audit Functionality + +The server provides Lighthouse-powered audit capabilities through four AI-optimized endpoints. These audits have been specifically tailored for AI consumption, with structured data, clear categorization, and smart prioritization. + +## Smart Limit Implementation + +All audit tools implement a "smart limit" approach to provide the most relevant information based on impact severity: + +- **Critical issues**: No limit (all issues are shown) +- **Serious issues**: Up to 15 items per issue +- **Moderate issues**: Up to 10 items per issue +- **Minor issues**: Up to 3 items per issue + +This ensures that the most important issues are always included in the response, while less important ones are limited to maintain a manageable response size for AI processing. + +## Common Audit Response Structure + +All audit responses follow a similar structure: + +```json +{ + "metadata": { + "url": "https://example.com", + "timestamp": "2025-03-06T16:28:30.930Z", + "device": "desktop", + "lighthouseVersion": "11.7.1" + }, + "report": { + "score": 88, + "audit_counts": { + "failed": 2, + "passed": 17, + "manual": 10, + "informative": 0, + "not_applicable": 42 + } + // Audit-specific content + // ... + } +} +``` + +## Accessibility Audit (`/accessibility-audit`) + +The accessibility audit evaluates web pages against WCAG standards, identifying issues that affect users with disabilities. + +### Response Format + +```json +{ + "metadata": { + "url": "https://example.com", + "timestamp": "2025-03-06T16:28:30.930Z", + "device": "desktop", + "lighthouseVersion": "11.7.1" + }, + "report": { + "score": 88, + "audit_counts": { + "failed": 2, + "passed": 17, + "manual": 10, + "informative": 0, + "not_applicable": 42 + }, + "issues": [ + { + "id": "meta-viewport", + "title": "`[user-scalable=\"no\"]` is used in the `` element or the `[maximum-scale]` attribute is less than 5.", + "impact": "critical", + "category": "a11y-best-practices", + "elements": [ + { + "selector": "head > meta", + "snippet": "", + "label": "head > meta", + "issue_description": "Fix any of the following: user-scalable on tag disables zooming on mobile devices" + } + ], + "score": 0 + } + ], + "categories": { + "a11y-navigation": { "score": 0, "issues_count": 0 }, + "a11y-aria": { "score": 0, "issues_count": 1 }, + "a11y-best-practices": { "score": 0, "issues_count": 1 } + }, + "critical_elements": [ + { + "selector": "head > meta", + "snippet": "", + "label": "head > meta", + "issue_description": "Fix any of the following: user-scalable on tag disables zooming on mobile devices" + } + ], + "prioritized_recommendations": [ + "Fix ARIA attributes and roles", + "Fix 1 issues in a11y-best-practices" + ] + } +} +``` + +### Key Features + +- **Issues Categorized by Impact**: Critical, serious, moderate, and minor +- **Element-Specific Information**: Selectors, snippets, and labels for affected elements +- **Issue Categories**: ARIA, navigation, color contrast, forms, keyboard access, etc. +- **Critical Elements List**: Quick access to the most serious issues +- **Prioritized Recommendations**: Actionable advice in order of importance + +## Performance Audit (`/performance-audit`) + +The performance audit analyzes page load speed, Core Web Vitals, and optimization opportunities. + +### Response Format + +```json +{ + "metadata": { + "url": "https://example.com", + "timestamp": "2025-03-06T16:27:44.900Z", + "device": "desktop", + "lighthouseVersion": "11.7.1" + }, + "report": { + "score": 60, + "audit_counts": { + "failed": 11, + "passed": 21, + "manual": 0, + "informative": 20, + "not_applicable": 8 + }, + "metrics": [ + { + "id": "lcp", + "score": 0, + "value_ms": 14149, + "passes_core_web_vital": false, + "element_selector": "div.heading > span", + "element_type": "text", + "element_content": "Welcome to Example" + }, + { + "id": "fcp", + "score": 0.53, + "value_ms": 1542, + "passes_core_web_vital": false + }, + { + "id": "si", + "score": 0, + "value_ms": 6883 + }, + { + "id": "tti", + "score": 0, + "value_ms": 14746 + }, + { + "id": "cls", + "score": 1, + "value_ms": 0.001, + "passes_core_web_vital": true + }, + { + "id": "tbt", + "score": 1, + "value_ms": 43, + "passes_core_web_vital": true + } + ], + "opportunities": [ + { + "id": "render_blocking_resources", + "savings_ms": 1270, + "severity": "serious", + "resources": [ + { + "url": "styles.css", + "savings_ms": 781 + } + ] + } + ], + "page_stats": { + "total_size_kb": 2190, + "total_requests": 108, + "resource_counts": { + "js": 86, + "css": 1, + "img": 3, + "font": 3, + "other": 15 + }, + "third_party_size_kb": 2110, + "main_thread_blocking_time_ms": 693 + }, + "prioritized_recommendations": ["Improve Largest Contentful Paint (LCP)"] + } +} +``` + +### Key Features + +- **Core Web Vitals Analysis**: LCP, FCP, CLS, TBT with pass/fail status +- **Element Information for LCP**: Identifies what's causing the largest contentful paint +- **Optimization Opportunities**: Specific actions to improve performance with estimated time savings +- **Resource Breakdown**: By type, size, and origin (first vs. third party) +- **Main Thread Analysis**: Blocking time metrics to identify JavaScript performance issues +- **Resource-Specific Recommendations**: For each optimization opportunity + +## SEO Audit (`/seo-audit`) + +The SEO audit checks search engine optimization best practices and identifies issues that could affect search ranking. + +### Response Format + +```json +{ + "metadata": { + "url": "https://example.com", + "timestamp": "2025-03-06T16:29:12.455Z", + "device": "desktop", + "lighthouseVersion": "11.7.1" + }, + "report": { + "score": 91, + "audit_counts": { + "failed": 1, + "passed": 10, + "manual": 1, + "informative": 0, + "not_applicable": 3 + }, + "issues": [ + { + "id": "is-crawlable", + "title": "Page is blocked from indexing", + "impact": "critical", + "category": "crawlability", + "score": 0 + } + ], + "categories": { + "content": { "score": 0, "issues_count": 0 }, + "mobile": { "score": 0, "issues_count": 0 }, + "crawlability": { "score": 0, "issues_count": 1 }, + "other": { "score": 0, "issues_count": 0 } + }, + "prioritized_recommendations": [ + "Fix crawlability issues (1 issues): robots.txt, sitemaps, and redirects" + ] + } +} +``` + +### Key Features + +- **Issues Categorized by Impact**: Critical, serious, moderate, and minor +- **SEO Categories**: Content, mobile friendliness, crawlability +- **Issue Details**: Information about what's causing each SEO problem +- **Prioritized Recommendations**: Actionable advice in order of importance + +## Best Practices Audit (`/best-practices-audit`) + +The best practices audit evaluates adherence to web development best practices related to security, trust, user experience, and browser compatibility. + +### Response Format + +```json +{ + "metadata": { + "url": "https://example.com", + "timestamp": "2025-03-06T17:01:38.029Z", + "device": "desktop", + "lighthouseVersion": "11.7.1" + }, + "report": { + "score": 74, + "audit_counts": { + "failed": 4, + "passed": 10, + "manual": 0, + "informative": 2, + "not_applicable": 1 + }, + "issues": [ + { + "id": "deprecations", + "title": "Uses deprecated APIs", + "impact": "critical", + "category": "security", + "score": 0, + "details": [ + { + "value": "UnloadHandler" + } + ] + }, + { + "id": "errors-in-console", + "title": "Browser errors were logged to the console", + "impact": "serious", + "category": "user-experience", + "score": 0, + "details": [ + { + "source": "console.error", + "description": "ReferenceError: variable is not defined" + } + ] + } + ], + "categories": { + "security": { "score": 75, "issues_count": 1 }, + "trust": { "score": 100, "issues_count": 0 }, + "user-experience": { "score": 50, "issues_count": 1 }, + "browser-compat": { "score": 100, "issues_count": 0 }, + "other": { "score": 75, "issues_count": 2 } + }, + "prioritized_recommendations": [ + "Address 1 security issues: vulnerabilities, CSP, deprecations", + "Improve 1 user experience issues: console errors, user interactions" + ] + } +} +``` + +### Key Features + +- **Issues Categorized by Impact**: Critical, serious, moderate, and minor +- **Best Practice Categories**: Security, trust, user experience, browser compatibility +- **Detailed Issue Information**: Specific problems affecting best practices compliance +- **Security Focus**: Special attention to security vulnerabilities and deprecated APIs +- **Prioritized Recommendations**: Actionable advice in order of importance ## License MIT + +# Puppeteer Service + +A comprehensive browser automation service built on Puppeteer to provide reliable cross-platform browser control capabilities. + +## Features + +- **Cross-Platform Browser Support**: + + - Windows, macOS, and Linux support + - Chrome, Edge, Brave, and Firefox detection + - Fallback strategy for finding browser executables + +- **Smart Browser Management**: + + - Singleton browser instance with automatic cleanup + - Connection retry mechanisms + - Temporary user data directories with cleanup + +- **Rich Configuration Options**: + - Custom browser paths + - Network condition emulation + - Device emulation (mobile, tablet, desktop) + - Resource blocking + - Cookies and headers customization + - Locale and timezone emulation diff --git a/browser-tools-server/browser-connector.ts b/browser-tools-server/browser-connector.ts index e8f04cc..a4cc03c 100644 --- a/browser-tools-server/browser-connector.ts +++ b/browser-tools-server/browser-connector.ts @@ -4,12 +4,132 @@ import express from "express"; import cors from "cors"; import bodyParser from "body-parser"; import { tokenizeAndEstimateCost } from "llm-cost"; -import WebSocket from "ws"; +import { WebSocketServer, WebSocket } from "ws"; import fs from "fs"; import path from "path"; import { IncomingMessage } from "http"; import { Socket } from "net"; import os from "os"; +import { exec } from "child_process"; +import { + runPerformanceAudit, + runAccessibilityAudit, + runSEOAudit, + AuditCategory, + LighthouseReport, +} from "./lighthouse/index.js"; +import * as net from "net"; +import { runBestPracticesAudit } from "./lighthouse/best-practices.js"; + +/** + * Converts a file path to the appropriate format for the current platform + * Handles Windows, WSL, macOS and Linux path formats + * + * @param inputPath - The path to convert + * @returns The converted path appropriate for the current platform + */ +function convertPathForCurrentPlatform(inputPath: string): string { + const platform = os.platform(); + + // If no path provided, return as is + if (!inputPath) return inputPath; + + console.log(`Converting path "${inputPath}" for platform: ${platform}`); + + // Windows-specific conversion + if (platform === "win32") { + // Convert forward slashes to backslashes + return inputPath.replace(/\//g, "\\"); + } + + // Linux/Mac-specific conversion + if (platform === "linux" || platform === "darwin") { + // Check if this is a Windows UNC path (starts with \\) + if (inputPath.startsWith("\\\\") || inputPath.includes("\\")) { + // Check if this is a WSL path (contains wsl.localhost or wsl$) + if (inputPath.includes("wsl.localhost") || inputPath.includes("wsl$")) { + // Extract the path after the distribution name + // Handle both \\wsl.localhost\Ubuntu\path and \\wsl$\Ubuntu\path formats + const parts = inputPath.split("\\").filter((part) => part.length > 0); + console.log("Path parts:", parts); + + // Find the index after the distribution name + const distNames = [ + "Ubuntu", + "Debian", + "kali", + "openSUSE", + "SLES", + "Fedora", + ]; + + // Find the distribution name in the path + let distIndex = -1; + for (const dist of distNames) { + const index = parts.findIndex( + (part) => part === dist || part.toLowerCase() === dist.toLowerCase() + ); + if (index !== -1) { + distIndex = index; + break; + } + } + + if (distIndex !== -1 && distIndex + 1 < parts.length) { + // Reconstruct the path as a native Linux path + const linuxPath = "/" + parts.slice(distIndex + 1).join("/"); + console.log( + `Converted Windows WSL path "${inputPath}" to Linux path "${linuxPath}"` + ); + return linuxPath; + } + + // If we couldn't find a distribution name but it's clearly a WSL path, + // try to extract everything after wsl.localhost or wsl$ + const wslIndex = parts.findIndex( + (part) => + part === "wsl.localhost" || + part === "wsl$" || + part.toLowerCase() === "wsl.localhost" || + part.toLowerCase() === "wsl$" + ); + + if (wslIndex !== -1 && wslIndex + 2 < parts.length) { + // Skip the WSL prefix and distribution name + const linuxPath = "/" + parts.slice(wslIndex + 2).join("/"); + console.log( + `Converted Windows WSL path "${inputPath}" to Linux path "${linuxPath}"` + ); + return linuxPath; + } + } + + // For non-WSL Windows paths, just normalize the slashes + const normalizedPath = inputPath + .replace(/\\\\/g, "/") + .replace(/\\/g, "/"); + console.log( + `Converted Windows UNC path "${inputPath}" to "${normalizedPath}"` + ); + return normalizedPath; + } + + // Handle Windows drive letters (e.g., C:\path\to\file) + if (/^[A-Z]:\\/i.test(inputPath)) { + // Convert Windows drive path to Linux/Mac compatible path + const normalizedPath = inputPath + .replace(/^[A-Z]:\\/i, "/") + .replace(/\\/g, "/"); + console.log( + `Converted Windows drive path "${inputPath}" to "${normalizedPath}"` + ); + return normalizedPath; + } + } + + // Return the original path if no conversion was needed or possible + return inputPath; +} // Function to get default downloads folder function getDefaultDownloadsFolder(): string { @@ -26,6 +146,12 @@ const networkErrors: any[] = []; const networkSuccess: any[] = []; const allXhr: any[] = []; +// Store the current URL from the extension +let currentUrl: string = ""; + +// Store the current tab ID from the extension +let currentTabId: string | number | null = null; + // Add settings state let currentSettings = { logLimit: 50, @@ -36,6 +162,8 @@ let currentSettings = { stringSizeLimit: 500, maxLogSize: 20000, screenshotPath: getDefaultDownloadsFolder(), + // Add server host configuration + serverHost: process.env.SERVER_HOST || "0.0.0.0", // Default to all interfaces }; // Add new storage for selected element @@ -43,15 +171,78 @@ 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; } const screenshotCallbacks = new Map(); -const app = express(); -const PORT = 3025; +// Function to get available port starting with the given port +async function getAvailablePort( + startPort: number, + maxAttempts: number = 10 +): Promise { + let currentPort = startPort; + let attempts = 0; + + while (attempts < maxAttempts) { + try { + // Try to create a server on the current port + // We'll use a raw Node.js net server for just testing port availability + await new Promise((resolve, reject) => { + const testServer = net.createServer(); + + // Handle errors (e.g., port in use) + testServer.once("error", (err: any) => { + if (err.code === "EADDRINUSE") { + console.log(`Port ${currentPort} is in use, trying next port...`); + currentPort++; + attempts++; + resolve(); // Continue to next iteration + } else { + reject(err); // Different error, propagate it + } + }); + + // If we can listen, the port is available + testServer.once("listening", () => { + // Make sure to close the server to release the port + testServer.close(() => { + console.log(`Found available port: ${currentPort}`); + resolve(); + }); + }); + + // Try to listen on the current port + testServer.listen(currentPort, currentSettings.serverHost); + }); + + // If we reach here without incrementing the port, it means the port is available + return currentPort; + } catch (error: any) { + console.error(`Error checking port ${currentPort}:`, error); + // For non-EADDRINUSE errors, try the next port + currentPort++; + attempts++; + } + } + + // If we've exhausted all attempts, throw an error + throw new Error( + `Could not find an available port after ${maxAttempts} attempts starting from ${startPort}` + ); +} + +// Start with requested port and find an available one +const REQUESTED_PORT = parseInt(process.env.PORT || "3025", 10); +let PORT = REQUESTED_PORT; +// Create application and initialize middleware +const app = express(); app.use(cors()); // Increase JSON body parser limit to 50MB to handle large screenshots app.use(bodyParser.json({ limit: "50mb" })); @@ -178,6 +369,21 @@ app.post("/extension-log", (req, res) => { console.log(`Processing ${data.type} log entry`); switch (data.type) { + case "page-navigated": + // Handle page navigation event via HTTP POST + // Note: This is also handled in the WebSocket message handler + // as the extension may send navigation events through either channel + console.log("Received page navigation event with URL:", data.url); + currentUrl = data.url; + + // Also update the tab ID if provided + if (data.tabId) { + console.log("Updating tab ID from page navigation event:", data.tabId); + currentTabId = data.tabId; + } + + console.log("Updated current URL:", currentUrl); + break; case "console-log": console.log("Adding console log:", { level: data.level, @@ -306,6 +512,16 @@ app.get("/.port", (req, res) => { res.send(PORT.toString()); }); +// Add new identity endpoint with a unique signature +app.get("/.identity", (req, res) => { + res.json({ + port: PORT, + name: "browser-tools-server", + version: "1.2.0", + signature: "mcp-browser-connector-24x7", + }); +}); + // Add function to clear all logs function clearAllLogs() { console.log("Wiping all logs..."); @@ -324,25 +540,78 @@ app.post("/wipelogs", (req, res) => { res.json({ status: "ok", message: "All logs cleared successfully" }); }); +// Add endpoint for the extension to report the current URL +app.post("/current-url", (req, res) => { + console.log( + "Received current URL update request:", + JSON.stringify(req.body, null, 2) + ); + + if (req.body && req.body.url) { + const oldUrl = currentUrl; + currentUrl = req.body.url; + + // Update the current tab ID if provided + if (req.body.tabId) { + const oldTabId = currentTabId; + currentTabId = req.body.tabId; + console.log(`Updated current tab ID: ${oldTabId} -> ${currentTabId}`); + } + + // Log the source of the update if provided + const source = req.body.source || "unknown"; + const tabId = req.body.tabId || "unknown"; + const timestamp = req.body.timestamp + ? new Date(req.body.timestamp).toISOString() + : "unknown"; + + console.log( + `Updated current URL via dedicated endpoint: ${oldUrl} -> ${currentUrl}` + ); + console.log( + `URL update details: source=${source}, tabId=${tabId}, timestamp=${timestamp}` + ); + + res.json({ + status: "ok", + url: currentUrl, + tabId: currentTabId, + previousUrl: oldUrl, + updated: oldUrl !== currentUrl, + }); + } else { + console.log("No URL provided in current-url request"); + res.status(400).json({ status: "error", message: "No URL provided" }); + } +}); + +// Add endpoint to get the current URL +app.get("/current-url", (req, res) => { + console.log("Current URL requested, returning:", currentUrl); + res.json({ url: currentUrl }); +}); + interface ScreenshotMessage { type: "screenshot-data" | "screenshot-error"; data?: string; path?: string; error?: string; + autoPaste?: boolean; } export class BrowserConnector { - private wss: WebSocket.Server; + private wss: WebSocketServer; private activeConnection: WebSocket | null = null; private app: express.Application; private server: any; + private urlRequestCallbacks: Map void> = new Map(); constructor(app: express.Application, server: any) { this.app = app; this.server = server; // Initialize WebSocket server using the existing HTTP server - this.wss = new WebSocket.Server({ + this.wss = new WebSocketServer({ noServer: true, path: "/extension-ws", }); @@ -363,23 +632,35 @@ export class BrowserConnector { } ); + // Set up accessibility audit endpoint + this.setupAccessibilityAudit(); + + // Set up performance audit endpoint + this.setupPerformanceAudit(); + + // Set up SEO audit endpoint + this.setupSEOAudit(); + + // Set up Best Practices audit endpoint + this.setupBestPracticesAudit(); + // Handle upgrade requests for WebSocket this.server.on( "upgrade", (request: IncomingMessage, socket: Socket, head: Buffer) => { if (request.url === "/extension-ws") { - this.wss.handleUpgrade(request, socket, head, (ws) => { + this.wss.handleUpgrade(request, socket, head, (ws: WebSocket) => { this.wss.emit("connection", ws, request); }); } } ); - this.wss.on("connection", (ws) => { + this.wss.on("connection", (ws: WebSocket) => { console.log("Chrome extension connected via WebSocket"); this.activeConnection = ws; - ws.on("message", (message) => { + ws.on("message", (message: string | Buffer | ArrayBuffer | Buffer[]) => { try { const data = JSON.parse(message.toString()); // Log message without the base64 data @@ -388,17 +669,62 @@ export class BrowserConnector { data: data.data ? "[base64 data]" : undefined, }); + // Handle URL response + if (data.type === "current-url-response" && data.url) { + console.log("Received current URL from browser:", data.url); + currentUrl = data.url; + + // Also update the tab ID if provided + if (data.tabId) { + console.log( + "Updating tab ID from WebSocket message:", + data.tabId + ); + currentTabId = data.tabId; + } + + // Call the callback if exists + if ( + data.requestId && + this.urlRequestCallbacks.has(data.requestId) + ) { + const callback = this.urlRequestCallbacks.get(data.requestId); + if (callback) callback(data.url); + this.urlRequestCallbacks.delete(data.requestId); + } + } + // Handle page navigation event via WebSocket + // Note: This is intentionally duplicated from the HTTP handler in /extension-log + // as the extension may send navigation events through either channel + if (data.type === "page-navigated" && data.url) { + console.log("Page navigated to:", data.url); + currentUrl = data.url; + + // Also update the tab ID if provided + if (data.tabId) { + console.log( + "Updating tab ID from page navigation event:", + data.tabId + ); + currentTabId = data.tabId; + } + } // Handle screenshot response 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"); @@ -494,7 +820,9 @@ export class BrowserConnector { try { const result = await new Promise((resolve, reject) => { // Set up one-time message handler for this screenshot request - const messageHandler = (message: WebSocket.Data) => { + const messageHandler = ( + message: string | Buffer | ArrayBuffer | Buffer[] + ) => { try { const response: ScreenshotMessage = JSON.parse(message.toString()); @@ -562,6 +890,52 @@ export class BrowserConnector { } } + // Updated method to get URL for audits with improved connection tracking and waiting + private async getUrlForAudit(): Promise { + try { + console.log("getUrlForAudit called"); + + // Use the stored URL if available immediately + if (currentUrl && currentUrl !== "" && currentUrl !== "about:blank") { + console.log(`Using existing URL immediately: ${currentUrl}`); + return currentUrl; + } + + // Wait for a URL to become available (retry loop) + console.log("No valid URL available yet, waiting for navigation..."); + + // Wait up to 10 seconds for a URL to be set (20 attempts x 500ms) + const maxAttempts = 50; + const waitTime = 500; // ms + + for (let attempt = 0; attempt < maxAttempts; attempt++) { + // Check if URL is available now + if (currentUrl && currentUrl !== "" && currentUrl !== "about:blank") { + console.log(`URL became available after waiting: ${currentUrl}`); + return currentUrl; + } + + // Wait before checking again + console.log( + `Waiting for URL (attempt ${attempt + 1}/${maxAttempts})...` + ); + await new Promise((resolve) => setTimeout(resolve, waitTime)); + } + + // If we reach here, no URL became available after waiting + console.log("Timed out waiting for URL, returning null"); + return null; + } catch (error) { + console.error("Error in getUrlForAudit:", error); + return null; // Return null to trigger an error + } + } + + // Public method to check if there's an active connection + public hasActiveConnection(): boolean { + return this.activeConnection !== null; + } + // Add new endpoint for programmatic screenshot capture async captureScreenshot(req: express.Request, res: express.Response) { console.log("Browser Connector: Starting captureScreenshot method"); @@ -581,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({ @@ -623,33 +999,237 @@ 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; + + // If no path provided by extension, fall back to defaults + if (!targetPath) { + targetPath = + currentSettings.screenshotPath || getDefaultDownloadsFolder(); + } + + // Convert the path for the current platform + targetPath = convertPathForCurrentPlatform(targetPath); - // Determine target path - const targetPath = - customPath || - currentSettings.screenshotPath || - getDefaultDownloadsFolder(); console.log(`Browser Connector: Using path: ${targetPath}`); if (!base64Data) { throw new Error("No screenshot data received from Chrome extension"); } - fs.mkdirSync(targetPath, { recursive: true }); + try { + fs.mkdirSync(targetPath, { recursive: true }); + console.log(`Browser Connector: Created directory: ${targetPath}`); + } catch (err) { + console.error( + `Browser Connector: Error creating directory: ${targetPath}`, + err + ); + throw new Error( + `Failed to create screenshot directory: ${ + err instanceof Error ? err.message : String(err) + }` + ); + } const timestamp = new Date().toISOString().replace(/[:.]/g, "-"); const filename = `screenshot-${timestamp}.png`; const fullPath = path.join(targetPath, filename); + console.log(`Browser Connector: Full screenshot path: ${fullPath}`); // Remove the data:image/png;base64, prefix if present const cleanBase64 = base64Data.replace(/^data:image\/png;base64,/, ""); // Save the file - fs.writeFileSync(fullPath, cleanBase64, "base64"); - console.log(`Browser Connector: Screenshot saved to: ${fullPath}`); + try { + fs.writeFileSync(fullPath, cleanBase64, "base64"); + console.log(`Browser Connector: Screenshot saved to: ${fullPath}`); + } catch (err) { + console.error( + `Browser Connector: Error saving screenshot to: ${fullPath}`, + err + ); + throw new Error( + `Failed to save screenshot: ${ + err instanceof Error ? err.message : String(err) + }` + ); + } + + // Check if running on macOS before executing AppleScript + if (os.platform() === "darwin" && autoPaste === true) { + console.log( + "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 + // This version is more robust and includes debugging + const appleScript = ` + -- Set path to the screenshot + set imagePath to "${fullPath}" + + -- Copy the image to clipboard + try + set the clipboard to (read (POSIX file imagePath) as «class PNGf») + on error errMsg + log "Error copying image to clipboard: " & errMsg + return "Failed to copy image to clipboard: " & errMsg + end try + + -- Activate Cursor application + try + tell application "Cursor" + activate + end tell + on error errMsg + log "Error activating Cursor: " & errMsg + return "Failed to activate Cursor: " & errMsg + end try + + -- Wait for the application to fully activate + delay 3 + + -- Try to interact with Cursor + try + tell application "System Events" + tell process "Cursor" + -- Get the frontmost window + if (count of windows) is 0 then + return "No windows found in Cursor" + end if + + set cursorWindow to window 1 + + -- Try Method 1: Look for elements of class "Text Area" + set foundElements to {} + + -- Try different selectors to find the text input area + try + -- Try with class + set textAreas to UI elements of cursorWindow whose class is "Text Area" + if (count of textAreas) > 0 then + set foundElements to textAreas + end if + end try + + if (count of foundElements) is 0 then + try + -- Try with AXTextField role + set textFields to UI elements of cursorWindow whose role is "AXTextField" + if (count of textFields) > 0 then + set foundElements to textFields + end if + end try + end if + + if (count of foundElements) is 0 then + try + -- Try with AXTextArea role in nested elements + set allElements to UI elements of cursorWindow + repeat with anElement in allElements + try + set childElements to UI elements of anElement + repeat with aChild in childElements + try + if role of aChild is "AXTextArea" or role of aChild is "AXTextField" then + set end of foundElements to aChild + end if + end try + end repeat + end try + end repeat + end try + end if + + -- If no elements found with specific attributes, try a broader approach + if (count of foundElements) is 0 then + -- Just try to use the Command+V shortcut on the active window + -- This assumes Cursor already has focus on the right element + keystroke "v" using command down + delay 1 + keystroke "here is the screenshot" + delay 1 + -- Try multiple methods to press Enter + key code 36 -- Use key code for Return key + delay 0.5 + keystroke return -- Use keystroke return as alternative + return "Used fallback method: Command+V on active window" + else + -- We found a potential text input element + set inputElement to item 1 of foundElements + + -- Try to focus and paste + try + set focused of inputElement to true + delay 0.5 + + -- Paste the image + keystroke "v" using command down + delay 1 + + -- Type the text + keystroke "here is the screenshot" + delay 1 + -- Try multiple methods to press Enter + key code 36 -- Use key code for Return key + delay 0.5 + keystroke return -- Use keystroke return as alternative + return "Successfully pasted screenshot into Cursor text element" + on error errMsg + log "Error interacting with found element: " & errMsg + -- Fallback to just sending the key commands + keystroke "v" using command down + delay 1 + keystroke "here is the screenshot" + delay 1 + -- Try multiple methods to press Enter + key code 36 -- Use key code for Return key + delay 0.5 + keystroke return -- Use keystroke return as alternative + return "Used fallback after element focus error: " & errMsg + end try + end if + end tell + end tell + on error errMsg + log "Error in System Events block: " & errMsg + return "Failed in System Events: " & errMsg + end try + `; + + // Execute the AppleScript + exec(`osascript -e '${appleScript}'`, (error, stdout, stderr) => { + if (error) { + console.error( + `Browser Connector: Error executing AppleScript: ${error.message}` + ); + console.error(`Browser Connector: stderr: ${stderr}`); + // Don't fail the response; log the error and proceed + } else { + console.log(`Browser Connector: AppleScript executed successfully`); + console.log(`Browser Connector: stdout: ${stdout}`); + } + }); + } else { + 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({ path: fullPath, @@ -667,20 +1247,275 @@ export class BrowserConnector { }); } } + + // Add shutdown method + public shutdown() { + return new Promise((resolve) => { + console.log("Shutting down WebSocket server..."); + + // Send close message to client if connection is active + if ( + this.activeConnection && + this.activeConnection.readyState === WebSocket.OPEN + ) { + console.log("Notifying client to close connection..."); + try { + this.activeConnection.send( + JSON.stringify({ type: "server-shutdown" }) + ); + } catch (err) { + console.error("Error sending shutdown message to client:", err); + } + } + + // Set a timeout to force close after 2 seconds + const forceCloseTimeout = setTimeout(() => { + console.log("Force closing connections after timeout..."); + if (this.activeConnection) { + this.activeConnection.terminate(); // Force close the connection + this.activeConnection = null; + } + this.wss.close(); + resolve(); + }, 2000); + + // Close active WebSocket connection if exists + if (this.activeConnection) { + this.activeConnection.close(1000, "Server shutting down"); + this.activeConnection = null; + } + + // Close WebSocket server + this.wss.close(() => { + clearTimeout(forceCloseTimeout); + console.log("WebSocket server closed gracefully"); + resolve(); + }); + }); + } + + // Sets up the accessibility audit endpoint + private setupAccessibilityAudit() { + this.setupAuditEndpoint( + AuditCategory.ACCESSIBILITY, + "/accessibility-audit", + runAccessibilityAudit + ); + } + + // Sets up the performance audit endpoint + private setupPerformanceAudit() { + this.setupAuditEndpoint( + AuditCategory.PERFORMANCE, + "/performance-audit", + runPerformanceAudit + ); + } + + // Set up SEO audit endpoint + private setupSEOAudit() { + this.setupAuditEndpoint(AuditCategory.SEO, "/seo-audit", runSEOAudit); + } + + // Add a setup method for Best Practices audit + private setupBestPracticesAudit() { + this.setupAuditEndpoint( + AuditCategory.BEST_PRACTICES, + "/best-practices-audit", + runBestPracticesAudit + ); + } + + /** + * Generic method to set up an audit endpoint + * @param auditType The type of audit (accessibility, performance, SEO) + * @param endpoint The endpoint path + * @param auditFunction The audit function to call + */ + private setupAuditEndpoint( + auditType: string, + endpoint: string, + auditFunction: (url: string) => Promise + ) { + // Add server identity validation endpoint + this.app.get("/.identity", (req, res) => { + res.json({ + signature: "mcp-browser-connector-24x7", + version: "1.2.0", + }); + }); + + this.app.post(endpoint, async (req: any, res: any) => { + try { + console.log(`${auditType} audit request received`); + + // Get URL using our helper method + const url = await this.getUrlForAudit(); + + if (!url) { + console.log(`No URL available for ${auditType} audit`); + return res.status(400).json({ + error: `URL is required for ${auditType} audit. Make sure you navigate to a page in the browser first, and the browser-tool extension tab is open.`, + }); + } + + // If we're using the stored URL (not from request body), log it now + if (!req.body?.url && url === currentUrl) { + console.log(`Using stored URL for ${auditType} audit:`, url); + } + + // Check if we're using the default URL + if (url === "about:blank") { + console.log(`Cannot run ${auditType} audit on about:blank`); + return res.status(400).json({ + error: `Cannot run ${auditType} audit on about:blank`, + }); + } + + console.log(`Preparing to run ${auditType} audit for: ${url}`); + + // Run the audit using the provided function + try { + const result = await auditFunction(url); + + console.log(`${auditType} audit completed successfully`); + // Return the results + res.json(result); + } catch (auditError) { + console.error(`${auditType} audit failed:`, auditError); + const errorMessage = + auditError instanceof Error + ? auditError.message + : String(auditError); + res.status(500).json({ + error: `Failed to run ${auditType} audit: ${errorMessage}`, + }); + } + } catch (error) { + console.error(`Error in ${auditType} audit endpoint:`, error); + const errorMessage = + error instanceof Error ? error.message : String(error); + res.status(500).json({ + error: `Error in ${auditType} audit endpoint: ${errorMessage}`, + }); + } + }); + } } -// Move the server creation before BrowserConnector instantiation -const server = app.listen(PORT, () => { - console.log(`Aggregator listening on http://127.0.0.1:${PORT}`); -}); +// Use an async IIFE to allow for async/await in the initial setup +(async () => { + try { + console.log(`Starting Browser Tools Server...`); + console.log(`Requested port: ${REQUESTED_PORT}`); -// Initialize the browser connector with the existing app AND server -const browserConnector = new BrowserConnector(app, server); + // Find an available port + try { + PORT = await getAvailablePort(REQUESTED_PORT); -// Handle shutdown gracefully -process.on("SIGINT", () => { - server.close(() => { - console.log("Server shut down"); - process.exit(0); - }); + if (PORT !== REQUESTED_PORT) { + console.log(`\n====================================`); + console.log(`NOTICE: Requested port ${REQUESTED_PORT} was in use.`); + console.log(`Using port ${PORT} instead.`); + console.log(`====================================\n`); + } + } catch (portError) { + console.error(`Failed to find an available port:`, portError); + process.exit(1); + } + + // Create the server with the available port + const server = app.listen(PORT, currentSettings.serverHost, () => { + console.log(`\n=== Browser Tools Server Started ===`); + console.log( + `Aggregator listening on http://${currentSettings.serverHost}:${PORT}` + ); + + if (PORT !== REQUESTED_PORT) { + console.log( + `NOTE: Using fallback port ${PORT} instead of requested port ${REQUESTED_PORT}` + ); + } + + // Log all available network interfaces for easier discovery + const networkInterfaces = os.networkInterfaces(); + console.log("\nAvailable on the following network addresses:"); + + Object.keys(networkInterfaces).forEach((interfaceName) => { + const interfaces = networkInterfaces[interfaceName]; + if (interfaces) { + interfaces.forEach((iface) => { + if (!iface.internal && iface.family === "IPv4") { + console.log(` - http://${iface.address}:${PORT}`); + } + }); + } + }); + + console.log(`\nFor local access use: http://localhost:${PORT}`); + }); + + // Handle server startup errors + server.on("error", (err: any) => { + if (err.code === "EADDRINUSE") { + console.error( + `ERROR: Port ${PORT} is still in use, despite our checks!` + ); + console.error( + `This might indicate another process started using this port after our check.` + ); + } else { + console.error(`Server error:`, err); + } + process.exit(1); + }); + + // Initialize the browser connector with the existing app AND server + const browserConnector = new BrowserConnector(app, server); + + // Handle shutdown gracefully with improved error handling + process.on("SIGINT", async () => { + console.log("\nReceived SIGINT signal. Starting graceful shutdown..."); + + try { + // First shutdown WebSocket connections + await browserConnector.shutdown(); + + // Then close the HTTP server + await new Promise((resolve, reject) => { + server.close((err) => { + if (err) { + console.error("Error closing HTTP server:", err); + reject(err); + } else { + console.log("HTTP server closed successfully"); + resolve(); + } + }); + }); + + // Clear all logs + clearAllLogs(); + + console.log("Shutdown completed successfully"); + process.exit(0); + } catch (error) { + console.error("Error during shutdown:", error); + // Force exit in case of error + process.exit(1); + } + }); + + // Also handle SIGTERM + process.on("SIGTERM", () => { + console.log("\nReceived SIGTERM signal"); + process.emit("SIGINT"); + }); + } catch (error) { + console.error("Failed to start server:", error); + process.exit(1); + } +})().catch((err) => { + console.error("Unhandled error during server startup:", err); + process.exit(1); }); diff --git a/browser-tools-server/lighthouse/accessibility.ts b/browser-tools-server/lighthouse/accessibility.ts new file mode 100644 index 0000000..3363447 --- /dev/null +++ b/browser-tools-server/lighthouse/accessibility.ts @@ -0,0 +1,330 @@ +import { Result as LighthouseResult } from "lighthouse"; +import { AuditCategory, LighthouseReport } from "./types.js"; +import { runLighthouseAudit } from "./index.js"; + +// === Accessibility Report Types === + +/** + * Accessibility-specific report content structure + */ +export interface AccessibilityReportContent { + score: number; // Overall score (0-100) + audit_counts: { + // Counts of different audit types + failed: number; + passed: number; + manual: number; + informative: number; + not_applicable: number; + }; + issues: AIAccessibilityIssue[]; + categories: { + [category: string]: { + score: number; + issues_count: number; + }; + }; + critical_elements: AIAccessibilityElement[]; + prioritized_recommendations?: string[]; // Ordered list of recommendations +} + +/** + * Full accessibility report implementing the base LighthouseReport interface + */ +export type AIOptimizedAccessibilityReport = + LighthouseReport; + +/** + * AI-optimized accessibility issue + */ +interface AIAccessibilityIssue { + id: string; // e.g., "color-contrast" + title: string; // e.g., "Color contrast is sufficient" + impact: "critical" | "serious" | "moderate" | "minor"; + category: string; // e.g., "contrast", "aria", "forms", "keyboard" + elements?: AIAccessibilityElement[]; // Elements with issues + score: number | null; // 0-1 or null +} + +/** + * Accessibility element with issues + */ +interface AIAccessibilityElement { + selector: string; // CSS selector + snippet?: string; // HTML snippet + label?: string; // Element label + issue_description?: string; // Description of the issue + value?: string | number; // Current value (e.g., contrast ratio) +} + +// Original interfaces for backward compatibility +interface AccessibilityAudit { + id: string; // e.g., "color-contrast" + title: string; // e.g., "Color contrast is sufficient" + description: string; // e.g., "Ensures text is readable..." + score: number | null; // 0-1 (normalized), null for manual/informative + scoreDisplayMode: string; // e.g., "binary", "numeric", "manual" + details?: AuditDetails; // Optional, structured details + weight?: number; // Optional, audit weight for impact calculation +} + +type AuditDetails = { + items?: Array<{ + node?: { + selector: string; // e.g., ".my-class" + snippet?: string; // HTML snippet + nodeLabel?: string; // e.g., "Modify logging size limits / truncation" + explanation?: string; // Explanation of why the node fails the audit + }; + value?: string | number; // Specific value (e.g., contrast ratio) + explanation?: string; // Explanation at the item level + }>; + debugData?: string; // Optional, debug information + [key: string]: any; // Flexible for other detail types (tables, etc.) +}; + +// Original limits were optimized for human consumption +// This ensures we always include critical issues while limiting less important ones +const DETAIL_LIMITS = { + critical: Number.MAX_SAFE_INTEGER, // No limit for critical issues + serious: 15, // Up to 15 items for serious issues + moderate: 10, // Up to 10 items for moderate issues + minor: 3, // Up to 3 items for minor issues +}; + +/** + * Runs an accessibility audit on the specified URL + * @param url The URL to audit + * @returns Promise resolving to AI-optimized accessibility audit results + */ +export async function runAccessibilityAudit( + url: string +): Promise { + try { + const lhr = await runLighthouseAudit(url, [AuditCategory.ACCESSIBILITY]); + return extractAIOptimizedData(lhr, url); + } catch (error) { + throw new Error( + `Accessibility audit failed: ${ + error instanceof Error ? error.message : String(error) + }` + ); + } +} + +/** + * Extract AI-optimized accessibility data from Lighthouse results + */ +const extractAIOptimizedData = ( + lhr: LighthouseResult, + url: string +): AIOptimizedAccessibilityReport => { + const categoryData = lhr.categories[AuditCategory.ACCESSIBILITY]; + const audits = lhr.audits || {}; + + // Add metadata + const metadata = { + url, + timestamp: lhr.fetchTime || new Date().toISOString(), + device: "desktop", // This could be made configurable + lighthouseVersion: lhr.lighthouseVersion, + }; + + // Initialize variables + const issues: AIAccessibilityIssue[] = []; + const criticalElements: AIAccessibilityElement[] = []; + const categories: { + [category: string]: { score: number; issues_count: number }; + } = {}; + + // Count audits by type + let failedCount = 0; + let passedCount = 0; + let manualCount = 0; + let informativeCount = 0; + let notApplicableCount = 0; + + // Process audit refs + const auditRefs = categoryData?.auditRefs || []; + + // First pass: count audits by type and initialize categories + auditRefs.forEach((ref) => { + const audit = audits[ref.id]; + if (!audit) return; + + // Count by scoreDisplayMode + if (audit.scoreDisplayMode === "manual") { + manualCount++; + } else if (audit.scoreDisplayMode === "informative") { + informativeCount++; + } else if (audit.scoreDisplayMode === "notApplicable") { + notApplicableCount++; + } else if (audit.score !== null) { + // Binary pass/fail + if (audit.score >= 0.9) { + passedCount++; + } else { + failedCount++; + } + } + + // Process categories + if (ref.group) { + // Initialize category if not exists + if (!categories[ref.group]) { + categories[ref.group] = { score: 0, issues_count: 0 }; + } + + // Update category score and issues count + if (audit.score !== null && audit.score < 0.9) { + categories[ref.group].issues_count++; + } + } + }); + + // Second pass: process failed audits into AI-friendly format + auditRefs + .filter((ref) => { + const audit = audits[ref.id]; + return audit && audit.score !== null && audit.score < 0.9; + }) + .sort((a, b) => (b.weight || 0) - (a.weight || 0)) + // No limit on number of failed audits - we'll show them all + .forEach((ref) => { + const audit = audits[ref.id]; + + // Determine impact level based on score and weight + let impact: "critical" | "serious" | "moderate" | "minor" = "moderate"; + if (audit.score === 0) { + impact = "critical"; + } else if (audit.score !== null && audit.score <= 0.5) { + impact = "serious"; + } else if (audit.score !== null && audit.score > 0.7) { + impact = "minor"; + } + + // Create elements array + const elements: AIAccessibilityElement[] = []; + + if (audit.details) { + const details = audit.details as any; + if (details.items && Array.isArray(details.items)) { + const items = details.items; + // Apply limits based on impact level + const itemLimit = DETAIL_LIMITS[impact]; + items.slice(0, itemLimit).forEach((item: any) => { + if (item.node) { + const element: AIAccessibilityElement = { + selector: item.node.selector, + snippet: item.node.snippet, + label: item.node.nodeLabel, + issue_description: item.node.explanation || item.explanation, + }; + + if (item.value !== undefined) { + element.value = item.value; + } + + elements.push(element); + + // Add to critical elements if impact is critical or serious + if (impact === "critical" || impact === "serious") { + criticalElements.push(element); + } + } + }); + } + } + + // Create the issue + const issue: AIAccessibilityIssue = { + id: ref.id, + title: audit.title, + impact, + category: ref.group || "other", + elements: elements.length > 0 ? elements : undefined, + score: audit.score, + }; + + issues.push(issue); + }); + + // Calculate overall score + const score = Math.round((categoryData?.score || 0) * 100); + + // Generate prioritized recommendations + const prioritized_recommendations: string[] = []; + + // Add category-specific recommendations + Object.entries(categories) + .filter(([_, data]) => data.issues_count > 0) + .sort(([_, a], [__, b]) => b.issues_count - a.issues_count) + .forEach(([category, data]) => { + let recommendation = ""; + + switch (category) { + case "a11y-color-contrast": + recommendation = "Improve color contrast for better readability"; + break; + case "a11y-names-labels": + recommendation = "Add proper labels to all interactive elements"; + break; + case "a11y-aria": + recommendation = "Fix ARIA attributes and roles"; + break; + case "a11y-navigation": + recommendation = "Improve keyboard navigation and focus management"; + break; + case "a11y-language": + recommendation = "Add proper language attributes to HTML"; + break; + case "a11y-tables-lists": + recommendation = "Fix table and list structures for screen readers"; + break; + default: + recommendation = `Fix ${data.issues_count} issues in ${category}`; + } + + prioritized_recommendations.push(recommendation); + }); + + // Add specific high-impact recommendations + if (issues.some((issue) => issue.id === "color-contrast")) { + prioritized_recommendations.push( + "Fix low contrast text for better readability" + ); + } + + if (issues.some((issue) => issue.id === "document-title")) { + prioritized_recommendations.push("Add a descriptive page title"); + } + + if (issues.some((issue) => issue.id === "image-alt")) { + prioritized_recommendations.push("Add alt text to all images"); + } + + // Create the report content + const reportContent: AccessibilityReportContent = { + score, + audit_counts: { + failed: failedCount, + passed: passedCount, + manual: manualCount, + informative: informativeCount, + not_applicable: notApplicableCount, + }, + issues, + categories, + critical_elements: criticalElements, + prioritized_recommendations: + prioritized_recommendations.length > 0 + ? prioritized_recommendations + : undefined, + }; + + // Return the full report following the LighthouseReport interface + return { + metadata, + report: reportContent, + }; +}; diff --git a/browser-tools-server/lighthouse/best-practices.ts b/browser-tools-server/lighthouse/best-practices.ts new file mode 100644 index 0000000..1b269da --- /dev/null +++ b/browser-tools-server/lighthouse/best-practices.ts @@ -0,0 +1,336 @@ +import { Result as LighthouseResult } from "lighthouse"; +import { AuditCategory, LighthouseReport } from "./types.js"; +import { runLighthouseAudit } from "./index.js"; + +// === Best Practices Report Types === + +/** + * Best Practices-specific report content structure + */ +export interface BestPracticesReportContent { + score: number; // Overall score (0-100) + audit_counts: { + // Counts of different audit types + failed: number; + passed: number; + manual: number; + informative: number; + not_applicable: number; + }; + issues: AIBestPracticesIssue[]; + categories: { + [category: string]: { + score: number; + issues_count: number; + }; + }; + prioritized_recommendations?: string[]; // Ordered list of recommendations +} + +/** + * Full Best Practices report implementing the base LighthouseReport interface + */ +export type AIOptimizedBestPracticesReport = + LighthouseReport; + +/** + * AI-optimized Best Practices issue + */ +interface AIBestPracticesIssue { + id: string; // e.g., "js-libraries" + title: string; // e.g., "Detected JavaScript libraries" + impact: "critical" | "serious" | "moderate" | "minor"; + category: string; // e.g., "security", "trust", "user-experience", "browser-compat" + details?: { + name?: string; // Name of the item (e.g., library name, vulnerability) + version?: string; // Version information if applicable + value?: string; // Current value or status + issue?: string; // Description of the issue + }[]; + score: number | null; // 0-1 or null +} + +// Original interfaces for backward compatibility +interface BestPracticesAudit { + id: string; + title: string; + description: string; + score: number | null; + scoreDisplayMode: string; + details?: BestPracticesAuditDetails; +} + +interface BestPracticesAuditDetails { + items?: Array>; + type?: string; // e.g., "table" +} + +// This ensures we always include critical issues while limiting less important ones +const DETAIL_LIMITS: Record = { + critical: Number.MAX_SAFE_INTEGER, // No limit for critical issues + serious: 15, // Up to 15 items for serious issues + moderate: 10, // Up to 10 items for moderate issues + minor: 3, // Up to 3 items for minor issues +}; + +/** + * Runs a Best Practices audit on the specified URL + * @param url The URL to audit + * @returns Promise resolving to AI-optimized Best Practices audit results + */ +export async function runBestPracticesAudit( + url: string +): Promise { + try { + const lhr = await runLighthouseAudit(url, [AuditCategory.BEST_PRACTICES]); + return extractAIOptimizedData(lhr, url); + } catch (error) { + throw new Error( + `Best Practices audit failed: ${ + error instanceof Error ? error.message : String(error) + }` + ); + } +} + +/** + * Extract AI-optimized Best Practices data from Lighthouse results + */ +const extractAIOptimizedData = ( + lhr: LighthouseResult, + url: string +): AIOptimizedBestPracticesReport => { + const categoryData = lhr.categories[AuditCategory.BEST_PRACTICES]; + const audits = lhr.audits || {}; + + // Add metadata + const metadata = { + url, + timestamp: lhr.fetchTime || new Date().toISOString(), + device: lhr.configSettings?.formFactor || "desktop", + lighthouseVersion: lhr.lighthouseVersion || "unknown", + }; + + // Process audit results + const issues: AIBestPracticesIssue[] = []; + const categories: { [key: string]: { score: number; issues_count: number } } = + { + security: { score: 0, issues_count: 0 }, + trust: { score: 0, issues_count: 0 }, + "user-experience": { score: 0, issues_count: 0 }, + "browser-compat": { score: 0, issues_count: 0 }, + other: { score: 0, issues_count: 0 }, + }; + + // Counters for audit types + let failedCount = 0; + let passedCount = 0; + let manualCount = 0; + let informativeCount = 0; + let notApplicableCount = 0; + + // Process failed audits (score < 1) + const failedAudits = Object.entries(audits) + .filter(([, audit]) => { + const score = audit.score; + return ( + score !== null && + score < 1 && + audit.scoreDisplayMode !== "manual" && + audit.scoreDisplayMode !== "notApplicable" + ); + }) + .map(([auditId, audit]) => ({ auditId, ...audit })); + + // Update counters + Object.values(audits).forEach((audit) => { + const { score, scoreDisplayMode } = audit; + + if (scoreDisplayMode === "manual") { + manualCount++; + } else if (scoreDisplayMode === "informative") { + informativeCount++; + } else if (scoreDisplayMode === "notApplicable") { + notApplicableCount++; + } else if (score === 1) { + passedCount++; + } else if (score !== null && score < 1) { + failedCount++; + } + }); + + // Process failed audits into AI-friendly format + failedAudits.forEach((ref: any) => { + // Determine impact level based on audit score and weight + let impact: "critical" | "serious" | "moderate" | "minor" = "moderate"; + const score = ref.score || 0; + + // Use a more reliable approach to determine impact + if (score === 0) { + impact = "critical"; + } else if (score < 0.5) { + impact = "serious"; + } else if (score < 0.9) { + impact = "moderate"; + } else { + impact = "minor"; + } + + // Categorize the issue + let category = "other"; + + // Security-related issues + if ( + ref.auditId.includes("csp") || + ref.auditId.includes("security") || + ref.auditId.includes("vulnerab") || + ref.auditId.includes("password") || + ref.auditId.includes("cert") || + ref.auditId.includes("deprecat") + ) { + category = "security"; + } + // Trust and legitimacy issues + else if ( + ref.auditId.includes("doctype") || + ref.auditId.includes("charset") || + ref.auditId.includes("legit") || + ref.auditId.includes("trust") + ) { + category = "trust"; + } + // User experience issues + else if ( + ref.auditId.includes("user") || + ref.auditId.includes("experience") || + ref.auditId.includes("console") || + ref.auditId.includes("errors") || + ref.auditId.includes("paste") + ) { + category = "user-experience"; + } + // Browser compatibility issues + else if ( + ref.auditId.includes("compat") || + ref.auditId.includes("browser") || + ref.auditId.includes("vendor") || + ref.auditId.includes("js-lib") + ) { + category = "browser-compat"; + } + + // Count issues by category + categories[category].issues_count++; + + // Create issue object + const issue: AIBestPracticesIssue = { + id: ref.auditId, + title: ref.title, + impact, + category, + score: ref.score, + details: [], + }; + + // Extract details if available + const refDetails = ref.details as BestPracticesAuditDetails | undefined; + if (refDetails?.items && Array.isArray(refDetails.items)) { + const itemLimit = DETAIL_LIMITS[impact]; + const detailItems = refDetails.items.slice(0, itemLimit); + + detailItems.forEach((item: Record) => { + issue.details = issue.details || []; + + // Different audits have different detail structures + const detail: Record = {}; + + if (typeof item.name === "string") detail.name = item.name; + if (typeof item.version === "string") detail.version = item.version; + if (typeof item.issue === "string") detail.issue = item.issue; + if (item.value !== undefined) detail.value = String(item.value); + + // For JS libraries, extract name and version + if ( + ref.auditId === "js-libraries" && + typeof item.name === "string" && + typeof item.version === "string" + ) { + detail.name = item.name; + detail.version = item.version; + } + + // Add other generic properties that might exist + for (const [key, value] of Object.entries(item)) { + if (!detail[key] && typeof value === "string") { + detail[key] = value; + } + } + + issue.details.push(detail as any); + }); + } + + issues.push(issue); + }); + + // Calculate category scores (0-100) + Object.keys(categories).forEach((category) => { + // Simplified scoring: if there are issues in this category, score is reduced proportionally + const issueCount = categories[category].issues_count; + if (issueCount > 0) { + // More issues = lower score, max penalty of 25 points per issue + const penalty = Math.min(100, issueCount * 25); + categories[category].score = Math.max(0, 100 - penalty); + } else { + categories[category].score = 100; + } + }); + + // Generate prioritized recommendations + const prioritized_recommendations: string[] = []; + + // Prioritize recommendations by category with most issues + Object.entries(categories) + .filter(([_, data]) => data.issues_count > 0) + .sort(([_, a], [__, b]) => b.issues_count - a.issues_count) + .forEach(([category, data]) => { + let recommendation = ""; + + switch (category) { + case "security": + recommendation = `Address ${data.issues_count} security issues: vulnerabilities, CSP, deprecations`; + break; + case "trust": + recommendation = `Fix ${data.issues_count} trust & legitimacy issues: doctype, charset`; + break; + case "user-experience": + recommendation = `Improve ${data.issues_count} user experience issues: console errors, user interactions`; + break; + case "browser-compat": + recommendation = `Resolve ${data.issues_count} browser compatibility issues: outdated libraries, vendor prefixes`; + break; + default: + recommendation = `Fix ${data.issues_count} other best practice issues`; + } + + prioritized_recommendations.push(recommendation); + }); + + // Return the optimized report + return { + metadata, + report: { + score: categoryData?.score ? Math.round(categoryData.score * 100) : 0, + audit_counts: { + failed: failedCount, + passed: passedCount, + manual: manualCount, + informative: informativeCount, + not_applicable: notApplicableCount, + }, + issues, + categories, + prioritized_recommendations, + }, + }; +}; diff --git a/browser-tools-server/lighthouse/index.ts b/browser-tools-server/lighthouse/index.ts new file mode 100644 index 0000000..d354d9b --- /dev/null +++ b/browser-tools-server/lighthouse/index.ts @@ -0,0 +1,134 @@ +import lighthouse from "lighthouse"; +import type { Result as LighthouseResult, Flags } from "lighthouse"; +import { + connectToHeadlessBrowser, + scheduleBrowserCleanup, +} from "../puppeteer-service.js"; +import { LighthouseConfig, AuditCategory } from "./types.js"; + +/** + * Creates a Lighthouse configuration object + * @param categories Array of categories to audit + * @returns Lighthouse configuration and flags + */ +export function createLighthouseConfig( + categories: string[] = [AuditCategory.ACCESSIBILITY] +): LighthouseConfig { + return { + flags: { + output: ["json"], + onlyCategories: categories, + formFactor: "desktop", + port: undefined as number | undefined, + screenEmulation: { + mobile: false, + width: 1350, + height: 940, + deviceScaleFactor: 1, + disabled: false, + }, + }, + config: { + extends: "lighthouse:default", + settings: { + onlyCategories: categories, + emulatedFormFactor: "desktop", + throttling: { cpuSlowdownMultiplier: 1 }, + }, + }, + }; +} + +/** + * Runs a Lighthouse audit on the specified URL via CDP + * @param url The URL to audit + * @param categories Array of categories to audit, defaults to ["accessibility"] + * @returns Promise resolving to the Lighthouse result + * @throws Error if the URL is invalid or if the audit fails + */ +export async function runLighthouseAudit( + url: string, + categories: string[] +): Promise { + console.log(`Starting Lighthouse ${categories.join(", ")} audit for: ${url}`); + + if (!url || url === "about:blank") { + console.error("Invalid URL for Lighthouse audit"); + throw new Error( + "Cannot run audit on an empty page or about:blank. Please navigate to a valid URL first." + ); + } + + try { + // Always use a dedicated headless browser for audits + console.log("Using dedicated headless browser for audit"); + + // Determine if this is a performance audit - we need to load all resources for performance audits + const isPerformanceAudit = categories.includes(AuditCategory.PERFORMANCE); + + // For performance audits, we want to load all resources + // For accessibility or other audits, we can block non-essential resources + try { + const { port } = await connectToHeadlessBrowser(url, { + blockResources: !isPerformanceAudit, + }); + + console.log(`Connected to browser on port: ${port}`); + + // Create Lighthouse config + const { flags, config } = createLighthouseConfig(categories); + flags.port = port; + + console.log( + `Running Lighthouse with categories: ${categories.join(", ")}` + ); + const runnerResult = await lighthouse(url, flags as Flags, config); + console.log("Lighthouse scan completed"); + + if (!runnerResult?.lhr) { + console.error("Lighthouse audit failed to produce results"); + throw new Error("Lighthouse audit failed to produce results"); + } + + // Schedule browser cleanup after a delay to allow for subsequent audits + scheduleBrowserCleanup(); + + // Return the result + const result = runnerResult.lhr; + + return result; + } catch (browserError) { + // Check if the error is related to Chrome/Edge not being available + const errorMessage = + browserError instanceof Error + ? browserError.message + : String(browserError); + if ( + errorMessage.includes("Chrome could not be found") || + errorMessage.includes("Failed to launch browser") || + errorMessage.includes("spawn ENOENT") + ) { + throw new Error( + "Chrome or Edge browser could not be found. Please ensure that Chrome or Edge is installed on your system to run audits." + ); + } + // Re-throw other errors + throw browserError; + } + } catch (error) { + console.error("Lighthouse audit failed:", error); + // Schedule browser cleanup even if the audit fails + scheduleBrowserCleanup(); + throw new Error( + `Lighthouse audit failed: ${ + error instanceof Error ? error.message : String(error) + }` + ); + } +} + +// Export from specific audit modules +export * from "./accessibility.js"; +export * from "./performance.js"; +export * from "./seo.js"; +export * from "./types.js"; diff --git a/browser-tools-server/lighthouse/performance.ts b/browser-tools-server/lighthouse/performance.ts new file mode 100644 index 0000000..4f19a52 --- /dev/null +++ b/browser-tools-server/lighthouse/performance.ts @@ -0,0 +1,679 @@ +import { Result as LighthouseResult } from "lighthouse"; +import { AuditCategory, LighthouseReport } from "./types.js"; +import { runLighthouseAudit } from "./index.js"; + +// === Performance Report Types === + +/** + * Performance-specific report content structure + */ +export interface PerformanceReportContent { + score: number; // Overall score (0-100) + audit_counts: { + // Counts of different audit types + failed: number; + passed: number; + manual: number; + informative: number; + not_applicable: number; + }; + metrics: AIOptimizedMetric[]; + opportunities: AIOptimizedOpportunity[]; + page_stats?: AIPageStats; // Optional page statistics + prioritized_recommendations?: string[]; // Ordered list of recommendations +} + +/** + * Full performance report implementing the base LighthouseReport interface + */ +export type AIOptimizedPerformanceReport = + LighthouseReport; + +// AI-optimized performance metric format +interface AIOptimizedMetric { + id: string; // Short ID like "lcp", "fcp" + score: number | null; // 0-1 score + value_ms: number; // Value in milliseconds + element_type?: string; // For LCP: "image", "text", etc. + element_selector?: string; // DOM selector for the element + element_url?: string; // For images/videos + element_content?: string; // For text content (truncated) + passes_core_web_vital?: boolean; // Whether this metric passes as a Core Web Vital +} + +// AI-optimized opportunity format +interface AIOptimizedOpportunity { + id: string; // Like "render_blocking", "http2" + savings_ms: number; // Time savings in ms + severity?: "critical" | "serious" | "moderate" | "minor"; // Severity classification + resources: Array<{ + url: string; // Resource URL + savings_ms?: number; // Individual resource savings + size_kb?: number; // Size in KB + type?: string; // Resource type (js, css, img, etc.) + is_third_party?: boolean; // Whether this is a third-party resource + }>; +} + +// Page stats for AI analysis +interface AIPageStats { + total_size_kb: number; // Total page weight in KB + total_requests: number; // Total number of requests + resource_counts: { + // Count by resource type + js: number; + css: number; + img: number; + font: number; + other: number; + }; + third_party_size_kb: number; // Size of third-party resources + main_thread_blocking_time_ms: number; // Time spent blocking the main thread +} + +// This ensures we always include critical issues while limiting less important ones +const DETAIL_LIMITS = { + critical: Number.MAX_SAFE_INTEGER, // No limit for critical issues + serious: 15, // Up to 15 items for serious issues + moderate: 10, // Up to 10 items for moderate issues + minor: 3, // Up to 3 items for minor issues +}; + +/** + * Performance audit adapted for AI consumption + * This format is optimized for AI agents with: + * - Concise, relevant information without redundant descriptions + * - Key metrics and opportunities clearly structured + * - Only actionable data that an AI can use for recommendations + */ +export async function runPerformanceAudit( + url: string +): Promise { + try { + const lhr = await runLighthouseAudit(url, [AuditCategory.PERFORMANCE]); + return extractAIOptimizedData(lhr, url); + } catch (error) { + throw new Error( + `Performance audit failed: ${ + error instanceof Error ? error.message : String(error) + }` + ); + } +} + +/** + * Extract AI-optimized performance data from Lighthouse results + */ +const extractAIOptimizedData = ( + lhr: LighthouseResult, + url: string +): AIOptimizedPerformanceReport => { + const audits = lhr.audits || {}; + const categoryData = lhr.categories[AuditCategory.PERFORMANCE]; + const score = Math.round((categoryData?.score || 0) * 100); + + // Add metadata + const metadata = { + url, + timestamp: lhr.fetchTime || new Date().toISOString(), + device: "desktop", // This could be made configurable + lighthouseVersion: lhr.lighthouseVersion, + }; + + // Count audits by type + const auditRefs = categoryData?.auditRefs || []; + let failedCount = 0; + let passedCount = 0; + let manualCount = 0; + let informativeCount = 0; + let notApplicableCount = 0; + + auditRefs.forEach((ref) => { + const audit = audits[ref.id]; + if (!audit) return; + + if (audit.scoreDisplayMode === "manual") { + manualCount++; + } else if (audit.scoreDisplayMode === "informative") { + informativeCount++; + } else if (audit.scoreDisplayMode === "notApplicable") { + notApplicableCount++; + } else if (audit.score !== null) { + if (audit.score >= 0.9) { + passedCount++; + } else { + failedCount++; + } + } + }); + + const audit_counts = { + failed: failedCount, + passed: passedCount, + manual: manualCount, + informative: informativeCount, + not_applicable: notApplicableCount, + }; + + const metrics: AIOptimizedMetric[] = []; + const opportunities: AIOptimizedOpportunity[] = []; + + // Extract core metrics + if (audits["largest-contentful-paint"]) { + const lcp = audits["largest-contentful-paint"]; + const lcpElement = audits["largest-contentful-paint-element"]; + + const metric: AIOptimizedMetric = { + id: "lcp", + score: lcp.score, + value_ms: Math.round(lcp.numericValue || 0), + passes_core_web_vital: lcp.score !== null && lcp.score >= 0.9, + }; + + // Enhanced LCP element detection + + // 1. Try from largest-contentful-paint-element audit + if (lcpElement && lcpElement.details) { + const lcpDetails = lcpElement.details as any; + + // First attempt - try to get directly from items + if ( + lcpDetails.items && + Array.isArray(lcpDetails.items) && + lcpDetails.items.length > 0 + ) { + const item = lcpDetails.items[0]; + + // For text elements in tables format + if (item.type === "table" && item.items && item.items.length > 0) { + const firstTableItem = item.items[0]; + + if (firstTableItem.node) { + if (firstTableItem.node.selector) { + metric.element_selector = firstTableItem.node.selector; + } + + // Determine element type based on path or selector + const path = firstTableItem.node.path; + const selector = firstTableItem.node.selector || ""; + + if (path) { + if ( + selector.includes(" > img") || + selector.includes(" img") || + selector.endsWith("img") || + path.includes(",IMG") + ) { + metric.element_type = "image"; + + // Try to extract image name from selector + const imgMatch = selector.match(/img[.][^> ]+/); + if (imgMatch && !metric.element_url) { + metric.element_url = imgMatch[0]; + } + } else if ( + path.includes(",SPAN") || + path.includes(",P") || + path.includes(",H") + ) { + metric.element_type = "text"; + } + } + + // Try to extract text content if available + if (firstTableItem.node.nodeLabel) { + metric.element_content = firstTableItem.node.nodeLabel.substring( + 0, + 100 + ); + } + } + } + // Original handling for direct items + else if (item.node?.nodeLabel) { + // Determine element type from node label + if (item.node.nodeLabel.startsWith(" 0 + ) { + const item = lcpImageDetails.items[0]; + + if (item.url) { + metric.element_type = "image"; + metric.element_url = item.url; + } + } + } + + // 3. Try directly from the LCP audit details + if (!metric.element_url && lcp.details) { + const lcpDirectDetails = lcp.details as any; + + if (lcpDirectDetails.items && Array.isArray(lcpDirectDetails.items)) { + for (const item of lcpDirectDetails.items) { + if (item.url || (item.node && item.node.path)) { + if (item.url) { + metric.element_url = item.url; + metric.element_type = item.url.match( + /\.(jpg|jpeg|png|gif|webp|svg)$/i + ) + ? "image" + : "resource"; + } + if (item.node && item.node.selector) { + metric.element_selector = item.node.selector; + } + break; + } + } + } + } + + // 4. Check for specific audit that might contain image info + const largestImageAudit = audits["largest-image-paint"]; + if (largestImageAudit && largestImageAudit.details) { + const imageDetails = largestImageAudit.details as any; + + if ( + imageDetails.items && + Array.isArray(imageDetails.items) && + imageDetails.items.length > 0 + ) { + const item = imageDetails.items[0]; + + if (item.url) { + // If we have a large image that's close in time to LCP, it's likely the LCP element + metric.element_type = "image"; + metric.element_url = item.url; + } + } + } + + // 5. Check for network requests audit to find image resources + if (!metric.element_url) { + const networkRequests = audits["network-requests"]; + + if (networkRequests && networkRequests.details) { + const networkDetails = networkRequests.details as any; + + if (networkDetails.items && Array.isArray(networkDetails.items)) { + // Get all image resources loaded close to the LCP time + const lcpTime = lcp.numericValue || 0; + const imageResources = networkDetails.items + .filter( + (item: any) => + item.url && + item.mimeType && + item.mimeType.startsWith("image/") && + item.endTime && + Math.abs(item.endTime - lcpTime) < 500 // Within 500ms of LCP + ) + .sort( + (a: any, b: any) => + Math.abs(a.endTime - lcpTime) - Math.abs(b.endTime - lcpTime) + ); + + if (imageResources.length > 0) { + const closestImage = imageResources[0]; + + if (!metric.element_type) { + metric.element_type = "image"; + metric.element_url = closestImage.url; + } + } + } + } + } + + metrics.push(metric); + } + + if (audits["first-contentful-paint"]) { + const fcp = audits["first-contentful-paint"]; + metrics.push({ + id: "fcp", + score: fcp.score, + value_ms: Math.round(fcp.numericValue || 0), + passes_core_web_vital: fcp.score !== null && fcp.score >= 0.9, + }); + } + + if (audits["speed-index"]) { + const si = audits["speed-index"]; + metrics.push({ + id: "si", + score: si.score, + value_ms: Math.round(si.numericValue || 0), + }); + } + + if (audits["interactive"]) { + const tti = audits["interactive"]; + metrics.push({ + id: "tti", + score: tti.score, + value_ms: Math.round(tti.numericValue || 0), + }); + } + + // Add CLS (Cumulative Layout Shift) + if (audits["cumulative-layout-shift"]) { + const cls = audits["cumulative-layout-shift"]; + metrics.push({ + id: "cls", + score: cls.score, + // CLS is not in ms, but a unitless value + value_ms: Math.round((cls.numericValue || 0) * 1000) / 1000, // Convert to 3 decimal places + passes_core_web_vital: cls.score !== null && cls.score >= 0.9, + }); + } + + // Add TBT (Total Blocking Time) + if (audits["total-blocking-time"]) { + const tbt = audits["total-blocking-time"]; + metrics.push({ + id: "tbt", + score: tbt.score, + value_ms: Math.round(tbt.numericValue || 0), + passes_core_web_vital: tbt.score !== null && tbt.score >= 0.9, + }); + } + + // Extract opportunities + if (audits["render-blocking-resources"]) { + const rbrAudit = audits["render-blocking-resources"]; + + // Determine impact level based on potential savings + let impact: "critical" | "serious" | "moderate" | "minor" = "moderate"; + const savings = Math.round(rbrAudit.numericValue || 0); + + if (savings > 2000) { + impact = "critical"; + } else if (savings > 1000) { + impact = "serious"; + } else if (savings < 300) { + impact = "minor"; + } + + const opportunity: AIOptimizedOpportunity = { + id: "render_blocking_resources", + savings_ms: savings, + severity: impact, + resources: [], + }; + + const rbrDetails = rbrAudit.details as any; + if (rbrDetails && rbrDetails.items && Array.isArray(rbrDetails.items)) { + // Determine how many items to include based on impact + const itemLimit = DETAIL_LIMITS[impact]; + + rbrDetails.items + .slice(0, itemLimit) + .forEach((item: { url?: string; wastedMs?: number }) => { + if (item.url) { + // Extract file name from full URL + const fileName = item.url.split("/").pop() || item.url; + opportunity.resources.push({ + url: fileName, + savings_ms: Math.round(item.wastedMs || 0), + }); + } + }); + } + + if (opportunity.resources.length > 0) { + opportunities.push(opportunity); + } + } + + if (audits["uses-http2"]) { + const http2Audit = audits["uses-http2"]; + + // Determine impact level based on potential savings + let impact: "critical" | "serious" | "moderate" | "minor" = "moderate"; + const savings = Math.round(http2Audit.numericValue || 0); + + if (savings > 2000) { + impact = "critical"; + } else if (savings > 1000) { + impact = "serious"; + } else if (savings < 300) { + impact = "minor"; + } + + const opportunity: AIOptimizedOpportunity = { + id: "http2", + savings_ms: savings, + severity: impact, + resources: [], + }; + + const http2Details = http2Audit.details as any; + if ( + http2Details && + http2Details.items && + Array.isArray(http2Details.items) + ) { + // Determine how many items to include based on impact + const itemLimit = DETAIL_LIMITS[impact]; + + http2Details.items + .slice(0, itemLimit) + .forEach((item: { url?: string }) => { + if (item.url) { + // Extract file name from full URL + const fileName = item.url.split("/").pop() || item.url; + opportunity.resources.push({ url: fileName }); + } + }); + } + + if (opportunity.resources.length > 0) { + opportunities.push(opportunity); + } + } + + // After extracting all metrics and opportunities, collect page stats + // Extract page stats + let page_stats: AIPageStats | undefined; + + // Total page stats + const totalByteWeight = audits["total-byte-weight"]; + const networkRequests = audits["network-requests"]; + const thirdPartyAudit = audits["third-party-summary"]; + const mainThreadWork = audits["mainthread-work-breakdown"]; + + if (networkRequests && networkRequests.details) { + const resourceDetails = networkRequests.details as any; + + if (resourceDetails.items && Array.isArray(resourceDetails.items)) { + const resources = resourceDetails.items; + const totalRequests = resources.length; + + // Calculate total size and counts by type + let totalSizeKb = 0; + let jsCount = 0, + cssCount = 0, + imgCount = 0, + fontCount = 0, + otherCount = 0; + + resources.forEach((resource: any) => { + const sizeKb = resource.transferSize + ? Math.round(resource.transferSize / 1024) + : 0; + totalSizeKb += sizeKb; + + // Count by mime type + const mimeType = resource.mimeType || ""; + if (mimeType.includes("javascript") || resource.url.endsWith(".js")) { + jsCount++; + } else if (mimeType.includes("css") || resource.url.endsWith(".css")) { + cssCount++; + } else if ( + mimeType.includes("image") || + /\.(jpg|jpeg|png|gif|webp|svg)$/i.test(resource.url) + ) { + imgCount++; + } else if ( + mimeType.includes("font") || + /\.(woff|woff2|ttf|otf|eot)$/i.test(resource.url) + ) { + fontCount++; + } else { + otherCount++; + } + }); + + // Calculate third-party size + let thirdPartySizeKb = 0; + if (thirdPartyAudit && thirdPartyAudit.details) { + const thirdPartyDetails = thirdPartyAudit.details as any; + if (thirdPartyDetails.items && Array.isArray(thirdPartyDetails.items)) { + thirdPartyDetails.items.forEach((item: any) => { + if (item.transferSize) { + thirdPartySizeKb += Math.round(item.transferSize / 1024); + } + }); + } + } + + // Get main thread blocking time + let mainThreadBlockingTimeMs = 0; + if (mainThreadWork && mainThreadWork.numericValue) { + mainThreadBlockingTimeMs = Math.round(mainThreadWork.numericValue); + } + + // Create page stats object + page_stats = { + total_size_kb: totalSizeKb, + total_requests: totalRequests, + resource_counts: { + js: jsCount, + css: cssCount, + img: imgCount, + font: fontCount, + other: otherCount, + }, + third_party_size_kb: thirdPartySizeKb, + main_thread_blocking_time_ms: mainThreadBlockingTimeMs, + }; + } + } + + // Generate prioritized recommendations + const prioritized_recommendations: string[] = []; + + // Add key recommendations based on failed audits with high impact + if ( + audits["render-blocking-resources"] && + audits["render-blocking-resources"].score !== null && + audits["render-blocking-resources"].score === 0 + ) { + prioritized_recommendations.push("Eliminate render-blocking resources"); + } + + if ( + audits["uses-responsive-images"] && + audits["uses-responsive-images"].score !== null && + audits["uses-responsive-images"].score === 0 + ) { + prioritized_recommendations.push("Properly size images"); + } + + if ( + audits["uses-optimized-images"] && + audits["uses-optimized-images"].score !== null && + audits["uses-optimized-images"].score === 0 + ) { + prioritized_recommendations.push("Efficiently encode images"); + } + + if ( + audits["uses-text-compression"] && + audits["uses-text-compression"].score !== null && + audits["uses-text-compression"].score === 0 + ) { + prioritized_recommendations.push("Enable text compression"); + } + + if ( + audits["uses-http2"] && + audits["uses-http2"].score !== null && + audits["uses-http2"].score === 0 + ) { + prioritized_recommendations.push("Use HTTP/2"); + } + + // Add more specific recommendations based on Core Web Vitals + if ( + audits["largest-contentful-paint"] && + audits["largest-contentful-paint"].score !== null && + audits["largest-contentful-paint"].score < 0.5 + ) { + prioritized_recommendations.push("Improve Largest Contentful Paint (LCP)"); + } + + if ( + audits["cumulative-layout-shift"] && + audits["cumulative-layout-shift"].score !== null && + audits["cumulative-layout-shift"].score < 0.5 + ) { + prioritized_recommendations.push("Reduce layout shifts (CLS)"); + } + + if ( + audits["total-blocking-time"] && + audits["total-blocking-time"].score !== null && + audits["total-blocking-time"].score < 0.5 + ) { + prioritized_recommendations.push("Reduce JavaScript execution time"); + } + + // Create the performance report content + const reportContent: PerformanceReportContent = { + score, + audit_counts, + metrics, + opportunities, + page_stats, + prioritized_recommendations: + prioritized_recommendations.length > 0 + ? prioritized_recommendations + : undefined, + }; + + // Return the full report following the LighthouseReport interface + return { + metadata, + report: reportContent, + }; +}; diff --git a/browser-tools-server/lighthouse/seo.ts b/browser-tools-server/lighthouse/seo.ts new file mode 100644 index 0000000..4b83b29 --- /dev/null +++ b/browser-tools-server/lighthouse/seo.ts @@ -0,0 +1,363 @@ +import { Result as LighthouseResult } from "lighthouse"; +import { AuditCategory, LighthouseReport } from "./types.js"; +import { runLighthouseAudit } from "./index.js"; + +// === SEO Report Types === + +/** + * SEO-specific report content structure + */ +export interface SEOReportContent { + score: number; // Overall score (0-100) + audit_counts: { + // Counts of different audit types + failed: number; + passed: number; + manual: number; + informative: number; + not_applicable: number; + }; + issues: AISEOIssue[]; + categories: { + [category: string]: { + score: number; + issues_count: number; + }; + }; + prioritized_recommendations?: string[]; // Ordered list of recommendations +} + +/** + * Full SEO report implementing the base LighthouseReport interface + */ +export type AIOptimizedSEOReport = LighthouseReport; + +/** + * AI-optimized SEO issue + */ +interface AISEOIssue { + id: string; // e.g., "meta-description" + title: string; // e.g., "Document has a meta description" + impact: "critical" | "serious" | "moderate" | "minor"; + category: string; // e.g., "content", "mobile", "crawlability" + details?: { + selector?: string; // CSS selector if applicable + value?: string; // Current value + issue?: string; // Description of the issue + }[]; + score: number | null; // 0-1 or null +} + +// Original interfaces for backward compatibility +interface SEOAudit { + id: string; // e.g., "meta-description" + title: string; // e.g., "Document has a meta description" + description: string; // e.g., "Meta descriptions improve SEO..." + score: number | null; // 0-1 or null + scoreDisplayMode: string; // e.g., "binary" + details?: SEOAuditDetails; // Optional, structured details + weight?: number; // For prioritization +} + +interface SEOAuditDetails { + items?: Array<{ + selector?: string; // e.g., "meta[name='description']" + issue?: string; // e.g., "Meta description is missing" + value?: string; // e.g., Current meta description text + }>; + type?: string; // e.g., "table" +} + +// This ensures we always include critical issues while limiting less important ones +const DETAIL_LIMITS = { + critical: Number.MAX_SAFE_INTEGER, // No limit for critical issues + serious: 15, // Up to 15 items for serious issues + moderate: 10, // Up to 10 items for moderate issues + minor: 3, // Up to 3 items for minor issues +}; + +/** + * Runs an SEO audit on the specified URL + * @param url The URL to audit + * @returns Promise resolving to AI-optimized SEO audit results + */ +export async function runSEOAudit(url: string): Promise { + try { + const lhr = await runLighthouseAudit(url, [AuditCategory.SEO]); + return extractAIOptimizedData(lhr, url); + } catch (error) { + throw new Error( + `SEO audit failed: ${ + error instanceof Error ? error.message : String(error) + }` + ); + } +} + +/** + * Extract AI-optimized SEO data from Lighthouse results + */ +const extractAIOptimizedData = ( + lhr: LighthouseResult, + url: string +): AIOptimizedSEOReport => { + const categoryData = lhr.categories[AuditCategory.SEO]; + const audits = lhr.audits || {}; + + // Add metadata + const metadata = { + url, + timestamp: lhr.fetchTime || new Date().toISOString(), + device: "desktop", // This could be made configurable + lighthouseVersion: lhr.lighthouseVersion, + }; + + // Initialize variables + const issues: AISEOIssue[] = []; + const categories: { + [category: string]: { score: number; issues_count: number }; + } = { + content: { score: 0, issues_count: 0 }, + mobile: { score: 0, issues_count: 0 }, + crawlability: { score: 0, issues_count: 0 }, + other: { score: 0, issues_count: 0 }, + }; + + // Count audits by type + let failedCount = 0; + let passedCount = 0; + let manualCount = 0; + let informativeCount = 0; + let notApplicableCount = 0; + + // Process audit refs + const auditRefs = categoryData?.auditRefs || []; + + // First pass: count audits by type and initialize categories + auditRefs.forEach((ref) => { + const audit = audits[ref.id]; + if (!audit) return; + + // Count by scoreDisplayMode + if (audit.scoreDisplayMode === "manual") { + manualCount++; + } else if (audit.scoreDisplayMode === "informative") { + informativeCount++; + } else if (audit.scoreDisplayMode === "notApplicable") { + notApplicableCount++; + } else if (audit.score !== null) { + // Binary pass/fail + if (audit.score >= 0.9) { + passedCount++; + } else { + failedCount++; + } + } + + // Categorize the issue + let category = "other"; + if ( + ref.id.includes("crawl") || + ref.id.includes("http") || + ref.id.includes("redirect") || + ref.id.includes("robots") + ) { + category = "crawlability"; + } else if ( + ref.id.includes("viewport") || + ref.id.includes("font-size") || + ref.id.includes("tap-targets") + ) { + category = "mobile"; + } else if ( + ref.id.includes("document") || + ref.id.includes("meta") || + ref.id.includes("description") || + ref.id.includes("canonical") || + ref.id.includes("title") || + ref.id.includes("link") + ) { + category = "content"; + } + + // Update category score and issues count + if (audit.score !== null && audit.score < 0.9) { + categories[category].issues_count++; + } + }); + + // Second pass: process failed audits into AI-friendly format + auditRefs + .filter((ref) => { + const audit = audits[ref.id]; + return audit && audit.score !== null && audit.score < 0.9; + }) + .sort((a, b) => (b.weight || 0) - (a.weight || 0)) + // No limit on failed audits - we'll filter dynamically based on impact + .forEach((ref) => { + const audit = audits[ref.id]; + + // Determine impact level based on score and weight + let impact: "critical" | "serious" | "moderate" | "minor" = "moderate"; + if (audit.score === 0) { + impact = "critical"; + } else if (audit.score !== null && audit.score <= 0.5) { + impact = "serious"; + } else if (audit.score !== null && audit.score > 0.7) { + impact = "minor"; + } + + // Categorize the issue + let category = "other"; + if ( + ref.id.includes("crawl") || + ref.id.includes("http") || + ref.id.includes("redirect") || + ref.id.includes("robots") + ) { + category = "crawlability"; + } else if ( + ref.id.includes("viewport") || + ref.id.includes("font-size") || + ref.id.includes("tap-targets") + ) { + category = "mobile"; + } else if ( + ref.id.includes("document") || + ref.id.includes("meta") || + ref.id.includes("description") || + ref.id.includes("canonical") || + ref.id.includes("title") || + ref.id.includes("link") + ) { + category = "content"; + } + + // Extract details + const details: { selector?: string; value?: string; issue?: string }[] = + []; + + if (audit.details) { + const auditDetails = audit.details as any; + if (auditDetails.items && Array.isArray(auditDetails.items)) { + // Determine item limit based on impact + const itemLimit = DETAIL_LIMITS[impact]; + + auditDetails.items.slice(0, itemLimit).forEach((item: any) => { + const detail: { + selector?: string; + value?: string; + issue?: string; + } = {}; + + if (item.selector) { + detail.selector = item.selector; + } + + if (item.value !== undefined) { + detail.value = item.value; + } + + if (item.issue) { + detail.issue = item.issue; + } + + if (Object.keys(detail).length > 0) { + details.push(detail); + } + }); + } + } + + // Create the issue + const issue: AISEOIssue = { + id: ref.id, + title: audit.title, + impact, + category, + details: details.length > 0 ? details : undefined, + score: audit.score, + }; + + issues.push(issue); + }); + + // Calculate overall score + const score = Math.round((categoryData?.score || 0) * 100); + + // Generate prioritized recommendations + const prioritized_recommendations: string[] = []; + + // Add category-specific recommendations + Object.entries(categories) + .filter(([_, data]) => data.issues_count > 0) + .sort(([_, a], [__, b]) => b.issues_count - a.issues_count) + .forEach(([category, data]) => { + if (data.issues_count === 0) return; + + let recommendation = ""; + + switch (category) { + case "content": + recommendation = `Improve SEO content (${data.issues_count} issues): titles, descriptions, and headers`; + break; + case "mobile": + recommendation = `Optimize for mobile devices (${data.issues_count} issues)`; + break; + case "crawlability": + recommendation = `Fix crawlability issues (${data.issues_count} issues): robots.txt, sitemaps, and redirects`; + break; + default: + recommendation = `Fix ${data.issues_count} SEO issues in category: ${category}`; + } + + prioritized_recommendations.push(recommendation); + }); + + // Add specific high-impact recommendations + if (issues.some((issue) => issue.id === "meta-description")) { + prioritized_recommendations.push( + "Add a meta description to improve click-through rate" + ); + } + + if (issues.some((issue) => issue.id === "document-title")) { + prioritized_recommendations.push( + "Add a descriptive page title with keywords" + ); + } + + if (issues.some((issue) => issue.id === "hreflang")) { + prioritized_recommendations.push( + "Fix hreflang implementation for international SEO" + ); + } + + if (issues.some((issue) => issue.id === "canonical")) { + prioritized_recommendations.push("Implement proper canonical tags"); + } + + // Create the report content + const reportContent: SEOReportContent = { + score, + audit_counts: { + failed: failedCount, + passed: passedCount, + manual: manualCount, + informative: informativeCount, + not_applicable: notApplicableCount, + }, + issues, + categories, + prioritized_recommendations: + prioritized_recommendations.length > 0 + ? prioritized_recommendations + : undefined, + }; + + // Return the full report following the LighthouseReport interface + return { + metadata, + report: reportContent, + }; +}; diff --git a/browser-tools-server/lighthouse/types.ts b/browser-tools-server/lighthouse/types.ts new file mode 100644 index 0000000..5de3536 --- /dev/null +++ b/browser-tools-server/lighthouse/types.ts @@ -0,0 +1,63 @@ +/** + * Audit categories available in Lighthouse + */ +export enum AuditCategory { + ACCESSIBILITY = "accessibility", + PERFORMANCE = "performance", + SEO = "seo", + BEST_PRACTICES = "best-practices", // Not yet implemented + PWA = "pwa", // Not yet implemented +} + +/** + * Base interface for Lighthouse report metadata + */ +export interface LighthouseReport { + metadata: { + url: string; + timestamp: string; // ISO 8601, e.g., "2025-02-27T14:30:00Z" + device: string; // e.g., "mobile", "desktop" + lighthouseVersion: string; // e.g., "10.4.0" + }; + + // For backward compatibility with existing report formats + overallScore?: number; + failedAuditsCount?: number; + passedAuditsCount?: number; + manualAuditsCount?: number; + informativeAuditsCount?: number; + notApplicableAuditsCount?: number; + failedAudits?: any[]; + + // New format for specialized reports + report?: T; // Generic report data that will be specialized by each audit type +} + +/** + * Configuration options for Lighthouse audits + */ +export interface LighthouseConfig { + flags: { + output: string[]; + onlyCategories: string[]; + formFactor: string; + port: number | undefined; + screenEmulation: { + mobile: boolean; + width: number; + height: number; + deviceScaleFactor: number; + disabled: boolean; + }; + }; + config: { + extends: string; + settings: { + onlyCategories: string[]; + emulatedFormFactor: string; + throttling: { + cpuSlowdownMultiplier: number; + }; + }; + }; +} diff --git a/browser-tools-server/package-lock.json b/browser-tools-server/package-lock.json index 455a7d4..c38a600 100644 --- a/browser-tools-server/package-lock.json +++ b/browser-tools-server/package-lock.json @@ -1,19 +1,22 @@ { "name": "@agentdeskai/browser-tools-server", - "version": "1.0.5", + "version": "1.1.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@agentdeskai/browser-tools-server", - "version": "1.0.5", + "version": "1.1.1", "license": "MIT", "dependencies": { "@modelcontextprotocol/sdk": "^1.4.1", "body-parser": "^1.20.3", "cors": "^2.8.5", "express": "^4.21.2", + "lighthouse": "^11.6.0", "llm-cost": "^1.0.5", + "node-fetch": "^2.7.0", + "puppeteer-core": "^22.4.1", "ws": "^8.18.0" }, "bin": { @@ -24,10 +27,86 @@ "@types/cors": "^2.8.17", "@types/express": "^5.0.0", "@types/node": "^22.13.1", + "@types/node-fetch": "^2.6.11", + "@types/puppeteer-core": "^7.0.4", "@types/ws": "^8.5.14", "typescript": "^5.7.3" + }, + "optionalDependencies": { + "chrome-launcher": "^1.1.2" + } + }, + "node_modules/@formatjs/ecma402-abstract": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-2.3.3.tgz", + "integrity": "sha512-pJT1OkhplSmvvr6i3CWTPvC/FGC06MbN5TNBfRO6Ox62AEz90eMq+dVvtX9Bl3jxCEkS0tATzDarRZuOLw7oFg==", + "dependencies": { + "@formatjs/fast-memoize": "2.2.6", + "@formatjs/intl-localematcher": "0.6.0", + "decimal.js": "10", + "tslib": "2" + } + }, + "node_modules/@formatjs/ecma402-abstract/node_modules/tslib": { + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", + "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==" + }, + "node_modules/@formatjs/fast-memoize": { + "version": "2.2.6", + "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-2.2.6.tgz", + "integrity": "sha512-luIXeE2LJbQnnzotY1f2U2m7xuQNj2DA8Vq4ce1BY9ebRZaoPB1+8eZ6nXpLzsxuW5spQxr7LdCg+CApZwkqkw==", + "dependencies": { + "tslib": "2" + } + }, + "node_modules/@formatjs/fast-memoize/node_modules/tslib": { + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", + "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==" + }, + "node_modules/@formatjs/icu-messageformat-parser": { + "version": "2.11.1", + "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.11.1.tgz", + "integrity": "sha512-o0AhSNaOfKoic0Sn1GkFCK4MxdRsw7mPJ5/rBpIqdvcC7MIuyUSW8WChUEvrK78HhNpYOgqCQbINxCTumJLzZA==", + "dependencies": { + "@formatjs/ecma402-abstract": "2.3.3", + "@formatjs/icu-skeleton-parser": "1.8.13", + "tslib": "2" + } + }, + "node_modules/@formatjs/icu-messageformat-parser/node_modules/tslib": { + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", + "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==" + }, + "node_modules/@formatjs/icu-skeleton-parser": { + "version": "1.8.13", + "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.8.13.tgz", + "integrity": "sha512-N/LIdTvVc1TpJmMt2jVg0Fr1F7Q1qJPdZSCs19unMskCmVQ/sa0H9L8PWt13vq+gLdLg1+pPsvBLydL1Apahjg==", + "dependencies": { + "@formatjs/ecma402-abstract": "2.3.3", + "tslib": "2" + } + }, + "node_modules/@formatjs/icu-skeleton-parser/node_modules/tslib": { + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", + "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==" + }, + "node_modules/@formatjs/intl-localematcher": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.6.0.tgz", + "integrity": "sha512-4rB4g+3hESy1bHSBG3tDFaMY2CH67iT7yne1e+0CLTsGLDcmoEWWpJjjpWVaYgYfYuohIRuo0E+N536gd2ZHZA==", + "dependencies": { + "tslib": "2" } }, + "node_modules/@formatjs/intl-localematcher/node_modules/tslib": { + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", + "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==" + }, "node_modules/@modelcontextprotocol/sdk": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.5.0.tgz", @@ -43,6 +122,156 @@ "node": ">=18" } }, + "node_modules/@paulirish/trace_engine": { + "version": "0.0.19", + "resolved": "https://registry.npmjs.org/@paulirish/trace_engine/-/trace_engine-0.0.19.tgz", + "integrity": "sha512-3tjEzXBBtU83DkCJAdU2UwBBunspiwTCn+Y5jOxm592cfEuLr/T7Lcn+QhRerVqkSik2mnjN4X6NgHZjI9Biwg==" + }, + "node_modules/@puppeteer/browsers": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-2.3.0.tgz", + "integrity": "sha512-ioXoq9gPxkss4MYhD+SFaU9p1IHFUX0ILAWFPyjGaBdjLsYAlZw6j1iLA0N/m12uVHLFDfSYNF7EQccjinIMDA==", + "dependencies": { + "debug": "^4.3.5", + "extract-zip": "^2.0.1", + "progress": "^2.0.3", + "proxy-agent": "^6.4.0", + "semver": "^7.6.3", + "tar-fs": "^3.0.6", + "unbzip2-stream": "^1.4.3", + "yargs": "^17.7.2" + }, + "bin": { + "browsers": "lib/cjs/main-cli.js" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/@puppeteer/browsers/node_modules/debug": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz", + "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==", + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/@puppeteer/browsers/node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==" + }, + "node_modules/@puppeteer/browsers/node_modules/semver": { + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz", + "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==", + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/@sentry/core": { + "version": "6.19.7", + "resolved": "https://registry.npmjs.org/@sentry/core/-/core-6.19.7.tgz", + "integrity": "sha512-tOfZ/umqB2AcHPGbIrsFLcvApdTm9ggpi/kQZFkej7kMphjT+SGBiQfYtjyg9jcRW+ilAR4JXC9BGKsdEQ+8Vw==", + "dependencies": { + "@sentry/hub": "6.19.7", + "@sentry/minimal": "6.19.7", + "@sentry/types": "6.19.7", + "@sentry/utils": "6.19.7", + "tslib": "^1.9.3" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@sentry/hub": { + "version": "6.19.7", + "resolved": "https://registry.npmjs.org/@sentry/hub/-/hub-6.19.7.tgz", + "integrity": "sha512-y3OtbYFAqKHCWezF0EGGr5lcyI2KbaXW2Ik7Xp8Mu9TxbSTuwTe4rTntwg8ngPjUQU3SUHzgjqVB8qjiGqFXCA==", + "dependencies": { + "@sentry/types": "6.19.7", + "@sentry/utils": "6.19.7", + "tslib": "^1.9.3" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@sentry/minimal": { + "version": "6.19.7", + "resolved": "https://registry.npmjs.org/@sentry/minimal/-/minimal-6.19.7.tgz", + "integrity": "sha512-wcYmSJOdvk6VAPx8IcmZgN08XTXRwRtB1aOLZm+MVHjIZIhHoBGZJYTVQS/BWjldsamj2cX3YGbGXNunaCfYJQ==", + "dependencies": { + "@sentry/hub": "6.19.7", + "@sentry/types": "6.19.7", + "tslib": "^1.9.3" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@sentry/node": { + "version": "6.19.7", + "resolved": "https://registry.npmjs.org/@sentry/node/-/node-6.19.7.tgz", + "integrity": "sha512-gtmRC4dAXKODMpHXKfrkfvyBL3cI8y64vEi3fDD046uqYcrWdgoQsffuBbxMAizc6Ez1ia+f0Flue6p15Qaltg==", + "dependencies": { + "@sentry/core": "6.19.7", + "@sentry/hub": "6.19.7", + "@sentry/types": "6.19.7", + "@sentry/utils": "6.19.7", + "cookie": "^0.4.1", + "https-proxy-agent": "^5.0.0", + "lru_map": "^0.3.3", + "tslib": "^1.9.3" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@sentry/node/node_modules/cookie": { + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz", + "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/@sentry/types": { + "version": "6.19.7", + "resolved": "https://registry.npmjs.org/@sentry/types/-/types-6.19.7.tgz", + "integrity": "sha512-jH84pDYE+hHIbVnab3Hr+ZXr1v8QABfhx39KknxqKWr2l0oEItzepV0URvbEhB446lk/S/59230dlUUIBGsXbg==", + "engines": { + "node": ">=6" + } + }, + "node_modules/@sentry/utils": { + "version": "6.19.7", + "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-6.19.7.tgz", + "integrity": "sha512-z95ECmE3i9pbWoXQrD/7PgkBAzJYR+iXtPuTkpBjDKs86O3mT+PXOT3BAn79w2wkn7/i3vOGD2xVr1uiMl26dA==", + "dependencies": { + "@sentry/types": "6.19.7", + "tslib": "^1.9.3" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@tootallnate/quickjs-emscripten": { + "version": "0.23.0", + "resolved": "https://registry.npmjs.org/@tootallnate/quickjs-emscripten/-/quickjs-emscripten-0.23.0.tgz", + "integrity": "sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==" + }, "node_modules/@types/body-parser": { "version": "1.19.5", "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.5.tgz", @@ -111,11 +340,30 @@ "version": "22.13.4", "resolved": "https://registry.npmjs.org/@types/node/-/node-22.13.4.tgz", "integrity": "sha512-ywP2X0DYtX3y08eFVx5fNIw7/uIv8hYUKgXoK8oayJlLnKcRfEYCxWMVE1XagUdVtCJlZT1AU4LXEABW+L1Peg==", - "dev": true, "dependencies": { "undici-types": "~6.20.0" } }, + "node_modules/@types/node-fetch": { + "version": "2.6.12", + "resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.6.12.tgz", + "integrity": "sha512-8nneRWKCg3rMtF69nLQJnOYUcbafYeFSjqkw3jCRLsqkWFlHaoQrr5mXmofFGOx3DKn7UfmBMyov8ySvLRVldA==", + "dev": true, + "dependencies": { + "@types/node": "*", + "form-data": "^4.0.0" + } + }, + "node_modules/@types/puppeteer-core": { + "version": "7.0.4", + "resolved": "https://registry.npmjs.org/@types/puppeteer-core/-/puppeteer-core-7.0.4.tgz", + "integrity": "sha512-7YK4lAjXTAsFN0HFWSRr43J1iQX+xoI5EXyOYnG6F+OhqkTR+L8bYnU8dqELrKmzvbSlxczh3F7dEBJ7TriqEw==", + "deprecated": "This is a stub types definition. puppeteer-core provides its own type definitions, so you do not need this installed.", + "dev": true, + "dependencies": { + "puppeteer-core": "*" + } + }, "node_modules/@types/qs": { "version": "6.9.18", "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.18.tgz", @@ -158,6 +406,15 @@ "@types/node": "*" } }, + "node_modules/@types/yauzl": { + "version": "2.10.3", + "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz", + "integrity": "sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==", + "optional": true, + "dependencies": { + "@types/node": "*" + } + }, "node_modules/accepts": { "version": "1.3.8", "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz", @@ -170,11 +427,194 @@ "node": ">= 0.6" } }, + "node_modules/agent-base": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz", + "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==", + "dependencies": { + "debug": "4" + }, + "engines": { + "node": ">= 6.0.0" + } + }, + "node_modules/agent-base/node_modules/debug": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz", + "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==", + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/agent-base/node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==" + }, + "node_modules/ansi-colors": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz", + "integrity": "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==", + "engines": { + "node": ">=6" + } + }, + "node_modules/ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "engines": { + "node": ">=8" + } + }, + "node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, "node_modules/array-flatten": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==" }, + "node_modules/ast-types": { + "version": "0.13.4", + "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.13.4.tgz", + "integrity": "sha512-x1FCFnFifvYDDzTaLII71vG5uvDwgtmDTEVWAxrgeiR8VjMONcCXJx7E+USjDtHlwFmt9MysbqgF9b9Vjr6w+w==", + "dependencies": { + "tslib": "^2.0.1" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/ast-types/node_modules/tslib": { + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", + "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==" + }, + "node_modules/asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==", + "dev": true + }, + "node_modules/axe-core": { + "version": "4.10.3", + "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.10.3.tgz", + "integrity": "sha512-Xm7bpRXnDSX2YE2YFfBk2FnF0ep6tmG7xPh8iHee8MIcrgq762Nkce856dYtJYLkuIoYZvGfTs/PbZhideTcEg==", + "engines": { + "node": ">=4" + } + }, + "node_modules/b4a": { + "version": "1.6.7", + "resolved": "https://registry.npmjs.org/b4a/-/b4a-1.6.7.tgz", + "integrity": "sha512-OnAYlL5b7LEkALw87fUVafQw5rVR9RjwGd4KUwNQ6DrrNmaVaUCgLipfVlzrPQ4tWOR9P0IXGNOx50jYCCdSJg==" + }, + "node_modules/bare-events": { + "version": "2.5.4", + "resolved": "https://registry.npmjs.org/bare-events/-/bare-events-2.5.4.tgz", + "integrity": "sha512-+gFfDkR8pj4/TrWCGUGWmJIkBwuxPS5F+a5yWjOHQt2hHvNZd5YLzadjmDUtFmMM4y429bnKLa8bYBMHcYdnQA==", + "optional": true + }, + "node_modules/bare-fs": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/bare-fs/-/bare-fs-4.0.1.tgz", + "integrity": "sha512-ilQs4fm/l9eMfWY2dY0WCIUplSUp7U0CT1vrqMg1MUdeZl4fypu5UP0XcDBK5WBQPJAKP1b7XEodISmekH/CEg==", + "optional": true, + "dependencies": { + "bare-events": "^2.0.0", + "bare-path": "^3.0.0", + "bare-stream": "^2.0.0" + }, + "engines": { + "bare": ">=1.7.0" + } + }, + "node_modules/bare-os": { + "version": "3.5.1", + "resolved": "https://registry.npmjs.org/bare-os/-/bare-os-3.5.1.tgz", + "integrity": "sha512-LvfVNDcWLw2AnIw5f2mWUgumW3I3N/WYGiWeimhQC1Ybt71n2FjlS9GJKeCnFeg1MKZHxzIFmpFnBXDI+sBeFg==", + "optional": true, + "engines": { + "bare": ">=1.14.0" + } + }, + "node_modules/bare-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/bare-path/-/bare-path-3.0.0.tgz", + "integrity": "sha512-tyfW2cQcB5NN8Saijrhqn0Zh7AnFNsnczRcuWODH0eYAXBsJ5gVxAUuNr7tsHSC6IZ77cA0SitzT+s47kot8Mw==", + "optional": true, + "dependencies": { + "bare-os": "^3.0.1" + } + }, + "node_modules/bare-stream": { + "version": "2.6.5", + "resolved": "https://registry.npmjs.org/bare-stream/-/bare-stream-2.6.5.tgz", + "integrity": "sha512-jSmxKJNJmHySi6hC42zlZnq00rga4jjxcgNZjY9N5WlOe/iOoGRtdwGsHzQv2RlH2KOYMwGUXhf2zXd32BA9RA==", + "optional": true, + "dependencies": { + "streamx": "^2.21.0" + }, + "peerDependencies": { + "bare-buffer": "*", + "bare-events": "*" + }, + "peerDependenciesMeta": { + "bare-buffer": { + "optional": true + }, + "bare-events": { + "optional": true + } + } + }, + "node_modules/base64-js": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz", + "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ] + }, + "node_modules/basic-ftp": { + "version": "5.0.5", + "resolved": "https://registry.npmjs.org/basic-ftp/-/basic-ftp-5.0.5.tgz", + "integrity": "sha512-4Bcg1P8xhUuqcii/S0Z9wiHIrQVPMermM1any+MX5GeGD7faD3/msQUDGLol9wOcz4/jbg/WJnGqoJF6LiBdtg==", + "engines": { + "node": ">=10.0.0" + } + }, "node_modules/body-parser": { "version": "1.20.3", "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz", @@ -212,6 +652,37 @@ "node": ">= 0.8" } }, + "node_modules/buffer": { + "version": "5.7.1", + "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz", + "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "dependencies": { + "base64-js": "^1.3.1", + "ieee754": "^1.1.13" + } + }, + "node_modules/buffer-crc32": { + "version": "0.2.13", + "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz", + "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==", + "engines": { + "node": "*" + } + }, "node_modules/bytes": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz", @@ -247,6 +718,101 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/chrome-launcher": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/chrome-launcher/-/chrome-launcher-1.1.2.tgz", + "integrity": "sha512-YclTJey34KUm5jB1aEJCq807bSievi7Nb/TU4Gu504fUYi3jw3KCIaH6L7nFWQhdEgH3V+wCh+kKD1P5cXnfxw==", + "dependencies": { + "@types/node": "*", + "escape-string-regexp": "^4.0.0", + "is-wsl": "^2.2.0", + "lighthouse-logger": "^2.0.1" + }, + "bin": { + "print-chrome-path": "bin/print-chrome-path.js" + }, + "engines": { + "node": ">=12.13.0" + } + }, + "node_modules/chromium-bidi": { + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/chromium-bidi/-/chromium-bidi-0.6.3.tgz", + "integrity": "sha512-qXlsCmpCZJAnoTYI83Iu6EdYQpMYdVkCfq08KDh2pmlVqK5t5IA9mGs4/LwCwp4fqisSOMXZxP3HIh8w8aRn0A==", + "dependencies": { + "mitt": "3.0.1", + "urlpattern-polyfill": "10.0.0", + "zod": "3.23.8" + }, + "peerDependencies": { + "devtools-protocol": "*" + } + }, + "node_modules/chromium-bidi/node_modules/zod": { + "version": "3.23.8", + "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz", + "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==", + "funding": { + "url": "https://github.com/sponsors/colinhacks" + } + }, + "node_modules/cliui": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz", + "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==", + "dependencies": { + "string-width": "^4.2.0", + "strip-ansi": "^6.0.1", + "wrap-ansi": "^7.0.0" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" + }, + "node_modules/combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "dev": true, + "dependencies": { + "delayed-stream": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/configstore": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/configstore/-/configstore-5.0.1.tgz", + "integrity": "sha512-aMKprgk5YhBNyH25hj8wGt2+D52Sw1DRRIzqBwLp2Ya9mFmY8KPvvtvmna8SxVR9JMZ4kzMD68N22vlaRpkeFA==", + "dependencies": { + "dot-prop": "^5.2.0", + "graceful-fs": "^4.1.2", + "make-dir": "^3.0.0", + "unique-string": "^2.0.0", + "write-file-atomic": "^3.0.0", + "xdg-basedir": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/content-disposition": { "version": "0.5.4", "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz", @@ -291,6 +857,27 @@ "node": ">= 0.10" } }, + "node_modules/crypto-random-string": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz", + "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==", + "engines": { + "node": ">=8" + } + }, + "node_modules/csp_evaluator": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/csp_evaluator/-/csp_evaluator-1.1.1.tgz", + "integrity": "sha512-N3ASg0C4kNPUaNxt1XAvzHIVuzdtr8KLgfk1O8WDyimp1GisPAHESupArO2ieHk9QWbrJ/WkQODyh21Ps/xhxw==" + }, + "node_modules/data-uri-to-buffer": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-6.0.2.tgz", + "integrity": "sha512-7hvf7/GW8e86rW0ptuwS3OcBGDjIi6SZva7hCyWC0yYry2cOPmLIjXAUHI6DK2HsnwJd9ifmt57i8eV2n4YNpw==", + "engines": { + "node": ">= 14" + } + }, "node_modules/debug": { "version": "2.6.9", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", @@ -299,6 +886,41 @@ "ms": "2.0.0" } }, + "node_modules/decimal.js": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.5.0.tgz", + "integrity": "sha512-8vDa8Qxvr/+d94hSh5P3IJwI5t8/c0KsMp+g8bNw9cY2icONa5aPfvKeieW1WlG0WQYwwhJ7mjui2xtiePQSXw==" + }, + "node_modules/define-lazy-prop": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz", + "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==", + "engines": { + "node": ">=8" + } + }, + "node_modules/degenerator": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/degenerator/-/degenerator-5.0.1.tgz", + "integrity": "sha512-TllpMR/t0M5sqCXfj85i4XaAzxmS5tVA16dqvdkMwGmzI+dXLXnw3J+3Vdv7VKw+ThlTMboK6i9rnZ6Nntj5CQ==", + "dependencies": { + "ast-types": "^0.13.4", + "escodegen": "^2.1.0", + "esprima": "^4.0.1" + }, + "engines": { + "node": ">= 14" + } + }, + "node_modules/delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "dev": true, + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/depd": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz", @@ -316,6 +938,22 @@ "npm": "1.2.8000 || >= 1.4.16" } }, + "node_modules/devtools-protocol": { + "version": "0.0.1232444", + "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1232444.tgz", + "integrity": "sha512-pM27vqEfxSxRkTMnF+XCmxSEb6duO5R+t8A9DEEJgy4Wz2RVanje2mmj99B6A3zv2r/qGfYlOvYznUhuokizmg==" + }, + "node_modules/dot-prop": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz", + "integrity": "sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==", + "dependencies": { + "is-obj": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/dunder-proto": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz", @@ -334,6 +972,11 @@ "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==" }, + "node_modules/emoji-regex": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==" + }, "node_modules/encodeurl": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz", @@ -342,6 +985,26 @@ "node": ">= 0.8" } }, + "node_modules/end-of-stream": { + "version": "1.4.4", + "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz", + "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==", + "dependencies": { + "once": "^1.4.0" + } + }, + "node_modules/enquirer": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.4.1.tgz", + "integrity": "sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==", + "dependencies": { + "ansi-colors": "^4.1.1", + "strip-ansi": "^6.0.1" + }, + "engines": { + "node": ">=8.6" + } + }, "node_modules/es-define-property": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz", @@ -369,11 +1032,93 @@ "node": ">= 0.4" } }, + "node_modules/es-set-tostringtag": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz", + "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==", + "dev": true, + "dependencies": { + "es-errors": "^1.3.0", + "get-intrinsic": "^1.2.6", + "has-tostringtag": "^1.0.2", + "hasown": "^2.0.2" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/escalade": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz", + "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==", + "engines": { + "node": ">=6" + } + }, "node_modules/escape-html": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==" }, + "node_modules/escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/escodegen": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-2.1.0.tgz", + "integrity": "sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==", + "dependencies": { + "esprima": "^4.0.1", + "estraverse": "^5.2.0", + "esutils": "^2.0.2" + }, + "bin": { + "escodegen": "bin/escodegen.js", + "esgenerate": "bin/esgenerate.js" + }, + "engines": { + "node": ">=6.0" + }, + "optionalDependencies": { + "source-map": "~0.6.1" + } + }, + "node_modules/esprima": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", + "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==", + "bin": { + "esparse": "bin/esparse.js", + "esvalidate": "bin/esvalidate.js" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/estraverse": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz", + "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==", + "engines": { + "node": ">=4.0" + } + }, + "node_modules/esutils": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz", + "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/etag": { "version": "1.8.1", "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", @@ -446,6 +1191,59 @@ "url": "https://opencollective.com/express" } }, + "node_modules/extract-zip": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz", + "integrity": "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==", + "dependencies": { + "debug": "^4.1.1", + "get-stream": "^5.1.0", + "yauzl": "^2.10.0" + }, + "bin": { + "extract-zip": "cli.js" + }, + "engines": { + "node": ">= 10.17.0" + }, + "optionalDependencies": { + "@types/yauzl": "^2.9.1" + } + }, + "node_modules/extract-zip/node_modules/debug": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz", + "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==", + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/extract-zip/node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==" + }, + "node_modules/fast-fifo": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/fast-fifo/-/fast-fifo-1.3.2.tgz", + "integrity": "sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==" + }, + "node_modules/fd-slicer": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz", + "integrity": "sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==", + "dependencies": { + "pend": "~1.2.0" + } + }, "node_modules/finalhandler": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz", @@ -463,6 +1261,21 @@ "node": ">= 0.8" } }, + "node_modules/form-data": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.2.tgz", + "integrity": "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==", + "dev": true, + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "es-set-tostringtag": "^2.1.0", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/forwarded": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", @@ -487,6 +1300,14 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/get-caller-file": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz", + "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==", + "engines": { + "node": "6.* || 8.* || >= 10.*" + } + }, "node_modules/get-intrinsic": { "version": "1.2.7", "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.7.tgz", @@ -522,6 +1343,54 @@ "node": ">= 0.4" } }, + "node_modules/get-stream": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz", + "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==", + "dependencies": { + "pump": "^3.0.0" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/get-uri": { + "version": "6.0.4", + "resolved": "https://registry.npmjs.org/get-uri/-/get-uri-6.0.4.tgz", + "integrity": "sha512-E1b1lFFLvLgak2whF2xDBcOy6NLVGZBqqjJjsIhvopKfWWEi64pLVTWWehV8KlLerZkfNTA95sTe2OdJKm1OzQ==", + "dependencies": { + "basic-ftp": "^5.0.2", + "data-uri-to-buffer": "^6.0.2", + "debug": "^4.3.4" + }, + "engines": { + "node": ">= 14" + } + }, + "node_modules/get-uri/node_modules/debug": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz", + "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==", + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/get-uri/node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==" + }, "node_modules/gopd": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz", @@ -533,6 +1402,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/graceful-fs": { + "version": "4.2.11", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz", + "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==" + }, "node_modules/has-symbols": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz", @@ -544,6 +1418,21 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/has-tostringtag": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz", + "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==", + "dev": true, + "dependencies": { + "has-symbols": "^1.0.3" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/hasown": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz", @@ -570,6 +1459,88 @@ "node": ">= 0.8" } }, + "node_modules/http-link-header": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/http-link-header/-/http-link-header-1.1.3.tgz", + "integrity": "sha512-3cZ0SRL8fb9MUlU3mKM61FcQvPfXx2dBrZW3Vbg5CXa8jFlK8OaEpePenLe1oEXQduhz8b0QjsqfS59QP4AJDQ==", + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/http-proxy-agent": { + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz", + "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==", + "dependencies": { + "agent-base": "^7.1.0", + "debug": "^4.3.4" + }, + "engines": { + "node": ">= 14" + } + }, + "node_modules/http-proxy-agent/node_modules/agent-base": { + "version": "7.1.3", + "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.3.tgz", + "integrity": "sha512-jRR5wdylq8CkOe6hei19GGZnxM6rBGwFl3Bg0YItGDimvjGtAvdZk4Pu6Cl4u4Igsws4a1fd1Vq3ezrhn4KmFw==", + "engines": { + "node": ">= 14" + } + }, + "node_modules/http-proxy-agent/node_modules/debug": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz", + "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==", + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/http-proxy-agent/node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==" + }, + "node_modules/https-proxy-agent": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz", + "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==", + "dependencies": { + "agent-base": "6", + "debug": "4" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/https-proxy-agent/node_modules/debug": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz", + "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==", + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/https-proxy-agent/node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==" + }, "node_modules/iconv-lite": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", @@ -581,11 +1552,71 @@ "node": ">=0.10.0" } }, + "node_modules/ieee754": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz", + "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ] + }, + "node_modules/image-ssim": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/image-ssim/-/image-ssim-0.2.0.tgz", + "integrity": "sha512-W7+sO6/yhxy83L0G7xR8YAc5Z5QFtYEXXRV6EaE8tuYBZJnA3gVgp3q7X7muhLZVodeb9UfvjSbwt9VJwjIYAg==" + }, + "node_modules/imurmurhash": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz", + "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==", + "engines": { + "node": ">=0.8.19" + } + }, "node_modules/inherits": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" }, + "node_modules/intl-messageformat": { + "version": "10.7.15", + "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.7.15.tgz", + "integrity": "sha512-LRyExsEsefQSBjU2p47oAheoKz+EOJxSLDdjOaEjdriajfHsMXOmV/EhMvYSg9bAgCUHasuAC+mcUBe/95PfIg==", + "dependencies": { + "@formatjs/ecma402-abstract": "2.3.3", + "@formatjs/fast-memoize": "2.2.6", + "@formatjs/icu-messageformat-parser": "2.11.1", + "tslib": "2" + } + }, + "node_modules/intl-messageformat/node_modules/tslib": { + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", + "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==" + }, + "node_modules/ip-address": { + "version": "9.0.5", + "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-9.0.5.tgz", + "integrity": "sha512-zHtQzGojZXTwZTHQqra+ETKd4Sn3vgi7uBmlPoXVWZqYvuKmtI0l/VZTjqGmJY9x88GGOaZ9+G9ES8hC4T4X8g==", + "dependencies": { + "jsbn": "1.1.0", + "sprintf-js": "^1.1.3" + }, + "engines": { + "node": ">= 12" + } + }, "node_modules/ipaddr.js": { "version": "1.9.1", "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz", @@ -594,6 +1625,148 @@ "node": ">= 0.10" } }, + "node_modules/is-docker": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz", + "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==", + "bin": { + "is-docker": "cli.js" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/is-fullwidth-code-point": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", + "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", + "engines": { + "node": ">=8" + } + }, + "node_modules/is-obj": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz", + "integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==", + "engines": { + "node": ">=8" + } + }, + "node_modules/is-typedarray": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz", + "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==" + }, + "node_modules/is-wsl": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz", + "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==", + "dependencies": { + "is-docker": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/jpeg-js": { + "version": "0.4.4", + "resolved": "https://registry.npmjs.org/jpeg-js/-/jpeg-js-0.4.4.tgz", + "integrity": "sha512-WZzeDOEtTOBK4Mdsar0IqEU5sMr3vSV2RqkAIzUEV2BHnUfKGyswWFPFwK5EeDo93K3FohSHbLAjj0s1Wzd+dg==" + }, + "node_modules/js-library-detector": { + "version": "6.7.0", + "resolved": "https://registry.npmjs.org/js-library-detector/-/js-library-detector-6.7.0.tgz", + "integrity": "sha512-c80Qupofp43y4cJ7+8TTDN/AsDwLi5oOm/plBrWI+iQt485vKXCco+yVmOwEgdo9VOdsYTuV0UlTeetVPTriXA==", + "engines": { + "node": ">=12" + } + }, + "node_modules/jsbn": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-1.1.0.tgz", + "integrity": "sha512-4bYVV3aAMtDTTu4+xsDYa6sy9GyJ69/amsu9sYF2zqjiEoZA5xJi3BrfX3uY+/IekIu7MwdObdbDWpoZdBv3/A==" + }, + "node_modules/lighthouse": { + "version": "11.7.1", + "resolved": "https://registry.npmjs.org/lighthouse/-/lighthouse-11.7.1.tgz", + "integrity": "sha512-QuvkZvobZ8Gjv2Jkxl6TKhV5JYBzU+lzpqTY+Y1iH5IUc1SMYK4IOpBnSpp6PkM2FbNyur9uoNutPhsuLLqGTg==", + "dependencies": { + "@paulirish/trace_engine": "^0.0.19", + "@sentry/node": "^6.17.4", + "axe-core": "^4.9.0", + "chrome-launcher": "^1.1.1", + "configstore": "^5.0.1", + "csp_evaluator": "1.1.1", + "devtools-protocol": "0.0.1232444", + "enquirer": "^2.3.6", + "http-link-header": "^1.1.1", + "intl-messageformat": "^10.5.3", + "jpeg-js": "^0.4.4", + "js-library-detector": "^6.7.0", + "lighthouse-logger": "^2.0.1", + "lighthouse-stack-packs": "1.12.1", + "lodash": "^4.17.21", + "lookup-closest-locale": "6.2.0", + "metaviewport-parser": "0.3.0", + "open": "^8.4.0", + "parse-cache-control": "1.0.1", + "ps-list": "^8.0.0", + "puppeteer-core": "^22.5.0", + "robots-parser": "^3.0.1", + "semver": "^5.3.0", + "speedline-core": "^1.4.3", + "third-party-web": "^0.24.1", + "tldts-icann": "^6.1.0", + "ws": "^7.0.0", + "yargs": "^17.3.1", + "yargs-parser": "^21.0.0" + }, + "bin": { + "chrome-debug": "core/scripts/manual-chrome-launcher.js", + "lighthouse": "cli/index.js", + "smokehouse": "cli/test/smokehouse/frontends/smokehouse-bin.js" + }, + "engines": { + "node": ">=18.16" + } + }, + "node_modules/lighthouse-logger": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/lighthouse-logger/-/lighthouse-logger-2.0.1.tgz", + "integrity": "sha512-ioBrW3s2i97noEmnXxmUq7cjIcVRjT5HBpAYy8zE11CxU9HqlWHHeRxfeN1tn8F7OEMVPIC9x1f8t3Z7US9ehQ==", + "dependencies": { + "debug": "^2.6.9", + "marky": "^1.2.2" + } + }, + "node_modules/lighthouse-stack-packs": { + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/lighthouse-stack-packs/-/lighthouse-stack-packs-1.12.1.tgz", + "integrity": "sha512-i4jTmg7tvZQFwNFiwB+nCK6a7ICR68Xcwo+VIVd6Spi71vBNFUlds5HiDrSbClZdkQDON2Bhqv+KKJIo5zkPeA==" + }, + "node_modules/lighthouse/node_modules/ws": { + "version": "7.5.10", + "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz", + "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==", + "engines": { + "node": ">=8.3.0" + }, + "peerDependencies": { + "bufferutil": "^4.0.1", + "utf-8-validate": "^5.0.2" + }, + "peerDependenciesMeta": { + "bufferutil": { + "optional": true + }, + "utf-8-validate": { + "optional": true + } + } + }, "node_modules/llm-cost": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/llm-cost/-/llm-cost-1.0.5.tgz", @@ -602,6 +1775,56 @@ "tiktoken": "^1.0.11" } }, + "node_modules/lodash": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" + }, + "node_modules/lookup-closest-locale": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/lookup-closest-locale/-/lookup-closest-locale-6.2.0.tgz", + "integrity": "sha512-/c2kL+Vnp1jnV6K6RpDTHK3dgg0Tu2VVp+elEiJpjfS1UyY7AjOYHohRug6wT0OpoX2qFgNORndE9RqesfVxWQ==" + }, + "node_modules/lru_map": { + "version": "0.3.3", + "resolved": "https://registry.npmjs.org/lru_map/-/lru_map-0.3.3.tgz", + "integrity": "sha512-Pn9cox5CsMYngeDbmChANltQl+5pi6XmTrraMSzhPmMBbmgcxmqWry0U3PGapCU1yB4/LqCcom7qhHZiF/jGfQ==" + }, + "node_modules/lru-cache": { + "version": "7.18.3", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz", + "integrity": "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==", + "engines": { + "node": ">=12" + } + }, + "node_modules/make-dir": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", + "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==", + "dependencies": { + "semver": "^6.0.0" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/make-dir/node_modules/semver": { + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", + "bin": { + "semver": "bin/semver.js" + } + }, + "node_modules/marky": { + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/marky/-/marky-1.2.5.tgz", + "integrity": "sha512-q9JtQJKjpsVxCRVgQ+WapguSbKC3SQ5HEzFGPAJMStgh3QjCawp00UKv3MTTAArTmGmmPUvllHZoNbZ3gs0I+Q==" + }, "node_modules/math-intrinsics": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz", @@ -626,6 +1849,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/metaviewport-parser": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/metaviewport-parser/-/metaviewport-parser-0.3.0.tgz", + "integrity": "sha512-EoYJ8xfjQ6kpe9VbVHvZTZHiOl4HL1Z18CrZ+qahvLXT7ZO4YTC2JMyt5FaUp9JJp6J4Ybb/z7IsCXZt86/QkQ==" + }, "node_modules/methods": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", @@ -664,6 +1892,11 @@ "node": ">= 0.6" } }, + "node_modules/mitt": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz", + "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==" + }, "node_modules/ms": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", @@ -677,6 +1910,33 @@ "node": ">= 0.6" } }, + "node_modules/netmask": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/netmask/-/netmask-2.0.2.tgz", + "integrity": "sha512-dBpDMdxv9Irdq66304OLfEmQ9tbNRFnFTuZiLo+bD+r332bBmMJ8GBLXklIXXgxd3+v9+KUnZaUR5PJMa75Gsg==", + "engines": { + "node": ">= 0.4.0" + } + }, + "node_modules/node-fetch": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz", + "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==", + "dependencies": { + "whatwg-url": "^5.0.0" + }, + "engines": { + "node": "4.x || >=6.0.0" + }, + "peerDependencies": { + "encoding": "^0.1.0" + }, + "peerDependenciesMeta": { + "encoding": { + "optional": true + } + } + }, "node_modules/object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", @@ -707,6 +1967,106 @@ "node": ">= 0.8" } }, + "node_modules/once": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", + "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==", + "dependencies": { + "wrappy": "1" + } + }, + "node_modules/open": { + "version": "8.4.2", + "resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz", + "integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==", + "dependencies": { + "define-lazy-prop": "^2.0.0", + "is-docker": "^2.1.1", + "is-wsl": "^2.2.0" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/pac-proxy-agent": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/pac-proxy-agent/-/pac-proxy-agent-7.2.0.tgz", + "integrity": "sha512-TEB8ESquiLMc0lV8vcd5Ql/JAKAoyzHFXaStwjkzpOpC5Yv+pIzLfHvjTSdf3vpa2bMiUQrg9i6276yn8666aA==", + "dependencies": { + "@tootallnate/quickjs-emscripten": "^0.23.0", + "agent-base": "^7.1.2", + "debug": "^4.3.4", + "get-uri": "^6.0.1", + "http-proxy-agent": "^7.0.0", + "https-proxy-agent": "^7.0.6", + "pac-resolver": "^7.0.1", + "socks-proxy-agent": "^8.0.5" + }, + "engines": { + "node": ">= 14" + } + }, + "node_modules/pac-proxy-agent/node_modules/agent-base": { + "version": "7.1.3", + "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.3.tgz", + "integrity": "sha512-jRR5wdylq8CkOe6hei19GGZnxM6rBGwFl3Bg0YItGDimvjGtAvdZk4Pu6Cl4u4Igsws4a1fd1Vq3ezrhn4KmFw==", + "engines": { + "node": ">= 14" + } + }, + "node_modules/pac-proxy-agent/node_modules/debug": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz", + "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==", + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/pac-proxy-agent/node_modules/https-proxy-agent": { + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz", + "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==", + "dependencies": { + "agent-base": "^7.1.2", + "debug": "4" + }, + "engines": { + "node": ">= 14" + } + }, + "node_modules/pac-proxy-agent/node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==" + }, + "node_modules/pac-resolver": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/pac-resolver/-/pac-resolver-7.0.1.tgz", + "integrity": "sha512-5NPgf87AT2STgwa2ntRMr45jTKrYBGkVU36yT0ig/n/GMAa3oPqhZfIQ2kMEimReg0+t9kZViDVZ83qfVUlckg==", + "dependencies": { + "degenerator": "^5.0.0", + "netmask": "^2.0.2" + }, + "engines": { + "node": ">= 14" + } + }, + "node_modules/parse-cache-control": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/parse-cache-control/-/parse-cache-control-1.0.1.tgz", + "integrity": "sha512-60zvsJReQPX5/QP0Kzfd/VrpjScIQ7SHBW6bFCYfEP+fp0Eppr1SHhIO5nd1PjZtvclzSzES9D/p5nFJurwfWg==" + }, "node_modules/parseurl": { "version": "1.3.3", "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz", @@ -720,6 +2080,19 @@ "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz", "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==" }, + "node_modules/pend": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz", + "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==" + }, + "node_modules/progress": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz", + "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==", + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/proxy-addr": { "version": "2.0.7", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", @@ -732,6 +2105,131 @@ "node": ">= 0.10" } }, + "node_modules/proxy-agent": { + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/proxy-agent/-/proxy-agent-6.5.0.tgz", + "integrity": "sha512-TmatMXdr2KlRiA2CyDu8GqR8EjahTG3aY3nXjdzFyoZbmB8hrBsTyMezhULIXKnC0jpfjlmiZ3+EaCzoInSu/A==", + "dependencies": { + "agent-base": "^7.1.2", + "debug": "^4.3.4", + "http-proxy-agent": "^7.0.1", + "https-proxy-agent": "^7.0.6", + "lru-cache": "^7.14.1", + "pac-proxy-agent": "^7.1.0", + "proxy-from-env": "^1.1.0", + "socks-proxy-agent": "^8.0.5" + }, + "engines": { + "node": ">= 14" + } + }, + "node_modules/proxy-agent/node_modules/agent-base": { + "version": "7.1.3", + "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.3.tgz", + "integrity": "sha512-jRR5wdylq8CkOe6hei19GGZnxM6rBGwFl3Bg0YItGDimvjGtAvdZk4Pu6Cl4u4Igsws4a1fd1Vq3ezrhn4KmFw==", + "engines": { + "node": ">= 14" + } + }, + "node_modules/proxy-agent/node_modules/debug": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz", + "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==", + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/proxy-agent/node_modules/https-proxy-agent": { + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz", + "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==", + "dependencies": { + "agent-base": "^7.1.2", + "debug": "4" + }, + "engines": { + "node": ">= 14" + } + }, + "node_modules/proxy-agent/node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==" + }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, + "node_modules/ps-list": { + "version": "8.1.1", + "resolved": "https://registry.npmjs.org/ps-list/-/ps-list-8.1.1.tgz", + "integrity": "sha512-OPS9kEJYVmiO48u/B9qneqhkMvgCxT+Tm28VCEJpheTpl8cJ0ffZRRNgS5mrQRTrX5yRTpaJ+hRDeefXYmmorQ==", + "engines": { + "node": "^12.20.0 || ^14.13.1 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/pump": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.2.tgz", + "integrity": "sha512-tUPXtzlGM8FE3P0ZL6DVs/3P58k9nk8/jZeQCurTJylQA8qFYzHFfhBJkuqyE0FifOsQ0uKWekiZ5g8wtr28cw==", + "dependencies": { + "end-of-stream": "^1.1.0", + "once": "^1.3.1" + } + }, + "node_modules/puppeteer-core": { + "version": "22.15.0", + "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-22.15.0.tgz", + "integrity": "sha512-cHArnywCiAAVXa3t4GGL2vttNxh7GqXtIYGym99egkNJ3oG//wL9LkvO4WE8W1TJe95t1F1ocu9X4xWaGsOKOA==", + "dependencies": { + "@puppeteer/browsers": "2.3.0", + "chromium-bidi": "0.6.3", + "debug": "^4.3.6", + "devtools-protocol": "0.0.1312386", + "ws": "^8.18.0" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/puppeteer-core/node_modules/debug": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz", + "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==", + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/puppeteer-core/node_modules/devtools-protocol": { + "version": "0.0.1312386", + "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1312386.tgz", + "integrity": "sha512-DPnhUXvmvKT2dFA/j7B+riVLUt9Q6RKJlcppojL5CoRywJJKLDYnRlw0gTFKfgDPHP5E04UoB71SxoJlVZy8FA==" + }, + "node_modules/puppeteer-core/node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==" + }, "node_modules/qs": { "version": "6.13.0", "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz", @@ -779,6 +2277,22 @@ "node": ">=0.10.0" } }, + "node_modules/require-directory": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", + "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/robots-parser": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/robots-parser/-/robots-parser-3.0.1.tgz", + "integrity": "sha512-s+pyvQeIKIZ0dx5iJiQk1tPLJAWln39+MI5jtM8wnyws+G5azk+dMnMX0qfbqNetKKNgcWWOdi0sfm+FbQbgdQ==", + "engines": { + "node": ">=10.0.0" + } + }, "node_modules/safe-buffer": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", @@ -803,6 +2317,14 @@ "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" }, + "node_modules/semver": { + "version": "5.7.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz", + "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==", + "bin": { + "semver": "bin/semver" + } + }, "node_modules/send": { "version": "0.19.0", "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz", @@ -926,6 +2448,102 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/signal-exit": { + "version": "3.0.7", + "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz", + "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==" + }, + "node_modules/smart-buffer": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz", + "integrity": "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==", + "engines": { + "node": ">= 6.0.0", + "npm": ">= 3.0.0" + } + }, + "node_modules/socks": { + "version": "2.8.4", + "resolved": "https://registry.npmjs.org/socks/-/socks-2.8.4.tgz", + "integrity": "sha512-D3YaD0aRxR3mEcqnidIs7ReYJFVzWdd6fXJYUM8ixcQcJRGTka/b3saV0KflYhyVJXKhb947GndU35SxYNResQ==", + "dependencies": { + "ip-address": "^9.0.5", + "smart-buffer": "^4.2.0" + }, + "engines": { + "node": ">= 10.0.0", + "npm": ">= 3.0.0" + } + }, + "node_modules/socks-proxy-agent": { + "version": "8.0.5", + "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-8.0.5.tgz", + "integrity": "sha512-HehCEsotFqbPW9sJ8WVYB6UbmIMv7kUUORIF2Nncq4VQvBfNBLibW9YZR5dlYCSUhwcD628pRllm7n+E+YTzJw==", + "dependencies": { + "agent-base": "^7.1.2", + "debug": "^4.3.4", + "socks": "^2.8.3" + }, + "engines": { + "node": ">= 14" + } + }, + "node_modules/socks-proxy-agent/node_modules/agent-base": { + "version": "7.1.3", + "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.3.tgz", + "integrity": "sha512-jRR5wdylq8CkOe6hei19GGZnxM6rBGwFl3Bg0YItGDimvjGtAvdZk4Pu6Cl4u4Igsws4a1fd1Vq3ezrhn4KmFw==", + "engines": { + "node": ">= 14" + } + }, + "node_modules/socks-proxy-agent/node_modules/debug": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz", + "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==", + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/socks-proxy-agent/node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==" + }, + "node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "optional": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/speedline-core": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/speedline-core/-/speedline-core-1.4.3.tgz", + "integrity": "sha512-DI7/OuAUD+GMpR6dmu8lliO2Wg5zfeh+/xsdyJZCzd8o5JgFUjCeLsBDuZjIQJdwXS3J0L/uZYrELKYqx+PXog==", + "dependencies": { + "@types/node": "*", + "image-ssim": "^0.2.0", + "jpeg-js": "^0.4.1" + }, + "engines": { + "node": ">=8.0" + } + }, + "node_modules/sprintf-js": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz", + "integrity": "sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==" + }, "node_modules/statuses": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz", @@ -934,11 +2552,101 @@ "node": ">= 0.8" } }, + "node_modules/streamx": { + "version": "2.22.0", + "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.22.0.tgz", + "integrity": "sha512-sLh1evHOzBy/iWRiR6d1zRcLao4gGZr3C1kzNz4fopCOKJb6xD9ub8Mpi9Mr1R6id5o43S+d93fI48UC5uM9aw==", + "dependencies": { + "fast-fifo": "^1.3.2", + "text-decoder": "^1.1.0" + }, + "optionalDependencies": { + "bare-events": "^2.2.0" + } + }, + "node_modules/string-width": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", + "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "dependencies": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/strip-ansi": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dependencies": { + "ansi-regex": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/tar-fs": { + "version": "3.0.8", + "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.8.tgz", + "integrity": "sha512-ZoROL70jptorGAlgAYiLoBLItEKw/fUxg9BSYK/dF/GAGYFJOJJJMvjPAKDJraCXFwadD456FCuvLWgfhMsPwg==", + "dependencies": { + "pump": "^3.0.0", + "tar-stream": "^3.1.5" + }, + "optionalDependencies": { + "bare-fs": "^4.0.1", + "bare-path": "^3.0.0" + } + }, + "node_modules/tar-stream": { + "version": "3.1.7", + "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-3.1.7.tgz", + "integrity": "sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==", + "dependencies": { + "b4a": "^1.6.4", + "fast-fifo": "^1.2.0", + "streamx": "^2.15.0" + } + }, + "node_modules/text-decoder": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/text-decoder/-/text-decoder-1.2.3.tgz", + "integrity": "sha512-3/o9z3X0X0fTupwsYvR03pJ/DjWuqqrfwBgTQzdWDiQSm9KitAyz/9WqsT2JQW7KV2m+bC2ol/zqpW37NHxLaA==", + "dependencies": { + "b4a": "^1.6.4" + } + }, + "node_modules/third-party-web": { + "version": "0.24.5", + "resolved": "https://registry.npmjs.org/third-party-web/-/third-party-web-0.24.5.tgz", + "integrity": "sha512-1rUOdMYpNTRajgk1F7CmHD26oA6rTKekBjHay854J6OkPXeNyPcR54rhWDaamlWyi9t2wAVPQESdedBhucmOLA==" + }, + "node_modules/through": { + "version": "2.3.8", + "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", + "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==" + }, "node_modules/tiktoken": { "version": "1.0.20", "resolved": "https://registry.npmjs.org/tiktoken/-/tiktoken-1.0.20.tgz", "integrity": "sha512-zVIpXp84kth/Ni2me1uYlJgl2RZ2EjxwDaWLeDY/s6fZiyO9n1QoTOM5P7ZSYfToPvAvwYNMbg5LETVYVKyzfQ==" }, + "node_modules/tldts-core": { + "version": "6.1.84", + "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-6.1.84.tgz", + "integrity": "sha512-NaQa1W76W2aCGjXybvnMYzGSM4x8fvG2AN/pla7qxcg0ZHbooOPhA8kctmOZUDfZyhDL27OGNbwAeig8P4p1vg==" + }, + "node_modules/tldts-icann": { + "version": "6.1.84", + "resolved": "https://registry.npmjs.org/tldts-icann/-/tldts-icann-6.1.84.tgz", + "integrity": "sha512-2e5XqGZRjlNEssjCfftUZSCvoY68KX+eLKRz7oyxUdT0E7YMKyjAZGWL34WqAKcM3y5lLBI3VDclAU+JYw9SlQ==", + "dependencies": { + "tldts-core": "^6.1.84" + } + }, "node_modules/toidentifier": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz", @@ -947,6 +2655,16 @@ "node": ">=0.6" } }, + "node_modules/tr46": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", + "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==" + }, + "node_modules/tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + }, "node_modules/type-is": { "version": "1.6.18", "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz", @@ -959,6 +2677,14 @@ "node": ">= 0.6" } }, + "node_modules/typedarray-to-buffer": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz", + "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==", + "dependencies": { + "is-typedarray": "^1.0.0" + } + }, "node_modules/typescript": { "version": "5.7.3", "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz", @@ -972,11 +2698,30 @@ "node": ">=14.17" } }, + "node_modules/unbzip2-stream": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/unbzip2-stream/-/unbzip2-stream-1.4.3.tgz", + "integrity": "sha512-mlExGW4w71ebDJviH16lQLtZS32VKqsSfk80GCfUlwT/4/hNRFsoscrF/c++9xinkMzECL1uL9DDwXqFWkruPg==", + "dependencies": { + "buffer": "^5.2.1", + "through": "^2.3.8" + } + }, "node_modules/undici-types": { "version": "6.20.0", "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz", - "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==", - "dev": true + "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==" + }, + "node_modules/unique-string": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz", + "integrity": "sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==", + "dependencies": { + "crypto-random-string": "^2.0.0" + }, + "engines": { + "node": ">=8" + } }, "node_modules/unpipe": { "version": "1.0.0", @@ -986,6 +2731,11 @@ "node": ">= 0.8" } }, + "node_modules/urlpattern-polyfill": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/urlpattern-polyfill/-/urlpattern-polyfill-10.0.0.tgz", + "integrity": "sha512-H/A06tKD7sS1O1X2SshBVeA5FLycRpjqiBeqGKmBwBDBy28EnRjORxTNe269KSSr5un5qyWi1iL61wLxpd+ZOg==" + }, "node_modules/utils-merge": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", @@ -1002,6 +2752,52 @@ "node": ">= 0.8" } }, + "node_modules/webidl-conversions": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", + "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==" + }, + "node_modules/whatwg-url": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", + "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==", + "dependencies": { + "tr46": "~0.0.3", + "webidl-conversions": "^3.0.0" + } + }, + "node_modules/wrap-ansi": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", + "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", + "dependencies": { + "ansi-styles": "^4.0.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/wrap-ansi?sponsor=1" + } + }, + "node_modules/wrappy": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", + "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==" + }, + "node_modules/write-file-atomic": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz", + "integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==", + "dependencies": { + "imurmurhash": "^0.1.4", + "is-typedarray": "^1.0.0", + "signal-exit": "^3.0.2", + "typedarray-to-buffer": "^3.1.5" + } + }, "node_modules/ws": { "version": "8.18.0", "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz", @@ -1022,6 +2818,56 @@ } } }, + "node_modules/xdg-basedir": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-4.0.0.tgz", + "integrity": "sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q==", + "engines": { + "node": ">=8" + } + }, + "node_modules/y18n": { + "version": "5.0.8", + "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", + "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==", + "engines": { + "node": ">=10" + } + }, + "node_modules/yargs": { + "version": "17.7.2", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz", + "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==", + "dependencies": { + "cliui": "^8.0.1", + "escalade": "^3.1.1", + "get-caller-file": "^2.0.5", + "require-directory": "^2.1.1", + "string-width": "^4.2.3", + "y18n": "^5.0.5", + "yargs-parser": "^21.1.1" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/yargs-parser": { + "version": "21.1.1", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz", + "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==", + "engines": { + "node": ">=12" + } + }, + "node_modules/yauzl": { + "version": "2.10.0", + "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz", + "integrity": "sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==", + "dependencies": { + "buffer-crc32": "~0.2.3", + "fd-slicer": "~1.1.0" + } + }, "node_modules/zod": { "version": "3.24.2", "resolved": "https://registry.npmjs.org/zod/-/zod-3.24.2.tgz", diff --git a/browser-tools-server/package.json b/browser-tools-server/package.json index ef188e0..f7c5442 100644 --- a/browser-tools-server/package.json +++ b/browser-tools-server/package.json @@ -1,7 +1,8 @@ { "name": "@agentdeskai/browser-tools-server", - "version": "1.1.0", + "version": "1.2.0", "description": "A browser tools server for capturing and managing browser events, logs, and screenshots", + "type": "module", "main": "dist/browser-connector.js", "bin": { "browser-tools-server": "./dist/browser-connector.js" @@ -27,15 +28,23 @@ "body-parser": "^1.20.3", "cors": "^2.8.5", "express": "^4.21.2", + "lighthouse": "^11.6.0", "llm-cost": "^1.0.5", + "node-fetch": "^2.7.0", + "puppeteer-core": "^22.4.1", "ws": "^8.18.0" }, + "optionalDependencies": { + "chrome-launcher": "^1.1.2" + }, "devDependencies": { "@types/ws": "^8.5.14", "@types/body-parser": "^1.19.5", "@types/cors": "^2.8.17", "@types/express": "^5.0.0", "@types/node": "^22.13.1", + "@types/node-fetch": "^2.6.11", + "@types/puppeteer-core": "^7.0.4", "typescript": "^5.7.3" } } diff --git a/browser-tools-server/puppeteer-service.ts b/browser-tools-server/puppeteer-service.ts new file mode 100644 index 0000000..fbc4c96 --- /dev/null +++ b/browser-tools-server/puppeteer-service.ts @@ -0,0 +1,925 @@ +import fs from "fs"; +import puppeteer from "puppeteer-core"; +import path from "path"; +import os from "os"; +import { execSync } from "child_process"; +import * as ChromeLauncher from "chrome-launcher"; +// ===== Configuration Types and Defaults ===== + +/** + * Configuration interface for the Puppeteer service + */ +export interface PuppeteerServiceConfig { + // Browser preferences + preferredBrowsers?: string[]; // Order of browser preference ("chrome", "edge", "brave", "firefox") + customBrowserPaths?: { [key: string]: string }; // Custom browser executable paths + + // Connection settings + debugPorts?: number[]; // Ports to try when connecting to existing browsers + connectionTimeout?: number; // Timeout for connection attempts in ms + maxRetries?: number; // Maximum number of retries for connections + + // Browser cleanup settings + browserCleanupTimeout?: number; // Timeout before closing inactive browsers (ms) + + // Performance settings + blockResourceTypes?: string[]; // Resource types to block for performance +} + +// Default configuration values +const DEFAULT_CONFIG: PuppeteerServiceConfig = { + preferredBrowsers: ["chrome", "edge", "brave", "firefox"], + debugPorts: [9222, 9223, 9224, 9225], + connectionTimeout: 10000, + maxRetries: 3, + browserCleanupTimeout: 60000, + blockResourceTypes: ["image", "font", "media"], +}; + +// Browser support notes: +// - Chrome/Chromium: Fully supported (primary target) +// - Edge: Fully supported (Chromium-based) +// - Brave: Fully supported (Chromium-based) +// - Firefox: Partially supported (some features may not work) +// - Safari: Not supported by Puppeteer + +// ===== Global State ===== + +// Current active configuration +let currentConfig: PuppeteerServiceConfig = { ...DEFAULT_CONFIG }; + +// Browser instance management +let headlessBrowserInstance: puppeteer.Browser | null = null; +let launchedBrowserWSEndpoint: string | null = null; + +// Cleanup management +let browserCleanupTimeout: NodeJS.Timeout | null = null; +let BROWSER_CLEANUP_TIMEOUT = 60000; // 60 seconds default + +// Cache for browser executable paths +let detectedBrowserPath: string | null = null; + +// ===== Configuration Functions ===== + +/** + * Configure the Puppeteer service with custom settings + * @param config Partial configuration to override defaults + */ +export function configurePuppeteerService( + config: Partial +): void { + currentConfig = { ...DEFAULT_CONFIG, ...config }; + + // Update the timeout if it was changed + if ( + config.browserCleanupTimeout && + config.browserCleanupTimeout !== BROWSER_CLEANUP_TIMEOUT + ) { + BROWSER_CLEANUP_TIMEOUT = config.browserCleanupTimeout; + } + + console.log("Puppeteer service configured:", currentConfig); +} + +// ===== Browser Management ===== + +/** + * Get or create a headless browser instance + * @returns Promise resolving to a browser instance + */ +async function getHeadlessBrowserInstance(): Promise { + console.log("Browser instance request started"); + + // Cancel any scheduled cleanup + cancelScheduledCleanup(); + + // Try to reuse existing browser + if (headlessBrowserInstance) { + try { + const pages = await headlessBrowserInstance.pages(); + console.log( + `Reusing existing headless browser with ${pages.length} pages` + ); + return headlessBrowserInstance; + } catch (error) { + console.log( + "Existing browser instance is no longer valid, creating a new one" + ); + headlessBrowserInstance = null; + launchedBrowserWSEndpoint = null; + } + } + + // Create a new browser instance + return launchNewBrowser(); +} + +/** + * Launches a new browser instance + * @returns Promise resolving to a browser instance + */ +async function launchNewBrowser(): Promise { + console.log("Creating new headless browser instance"); + + // Setup temporary user data directory + const userDataDir = createTempUserDataDir(); + let browser: puppeteer.Browser | null = null; + + try { + // Configure launch options + const launchOptions = configureLaunchOptions(userDataDir); + + // Set custom browser executable + await setCustomBrowserExecutable(launchOptions); + + // Launch the browser + console.log( + "Launching browser with options:", + JSON.stringify({ + headless: launchOptions.headless, + executablePath: launchOptions.executablePath, + }) + ); + + browser = await puppeteer.launch(launchOptions); + + // Store references to the browser instance + launchedBrowserWSEndpoint = browser.wsEndpoint(); + headlessBrowserInstance = browser; + + // Setup cleanup handlers + setupBrowserCleanupHandlers(browser, userDataDir); + + console.log("Browser ready"); + return browser; + } catch (error) { + console.error("Failed to launch browser:", error); + + // Clean up resources + if (browser) { + try { + await browser.close(); + } catch (closeError) { + console.error("Error closing browser:", closeError); + } + headlessBrowserInstance = null; + launchedBrowserWSEndpoint = null; + } + + // Clean up the temporary directory + try { + fs.rmSync(userDataDir, { recursive: true, force: true }); + } catch (fsError) { + console.error("Error removing temporary directory:", fsError); + } + + throw error; + } +} + +/** + * Creates a temporary user data directory for the browser + * @returns Path to the created directory + */ +function createTempUserDataDir(): string { + const tempDir = os.tmpdir(); + const uniqueId = `${Date.now().toString()}-${Math.random() + .toString(36) + .substring(2)}`; + const userDataDir = path.join(tempDir, `browser-debug-profile-${uniqueId}`); + fs.mkdirSync(userDataDir, { recursive: true }); + console.log(`Using temporary user data directory: ${userDataDir}`); + return userDataDir; +} + +/** + * Configures browser launch options + * @param userDataDir Path to the user data directory + * @returns Launch options object + */ +function configureLaunchOptions(userDataDir: string): any { + const launchOptions: any = { + args: [ + "--remote-debugging-port=0", // Use dynamic port + `--user-data-dir=${userDataDir}`, + "--no-first-run", + "--no-default-browser-check", + "--disable-dev-shm-usage", + "--disable-extensions", + "--disable-component-extensions-with-background-pages", + "--disable-background-networking", + "--disable-backgrounding-occluded-windows", + "--disable-default-apps", + "--disable-sync", + "--disable-translate", + "--metrics-recording-only", + "--no-pings", + "--safebrowsing-disable-auto-update", + ], + }; + + // Add headless mode (using any to bypass type checking issues) + launchOptions.headless = "new"; + + return launchOptions; +} + +/** + * Sets a custom browser executable path if configured + * @param launchOptions Launch options object to modify + */ +async function setCustomBrowserExecutable(launchOptions: any): Promise { + // First, try to use a custom browser path from configuration + if ( + currentConfig.customBrowserPaths && + Object.keys(currentConfig.customBrowserPaths).length > 0 + ) { + const preferredBrowsers = currentConfig.preferredBrowsers || [ + "chrome", + "edge", + "brave", + "firefox", + ]; + + for (const browser of preferredBrowsers) { + if ( + currentConfig.customBrowserPaths[browser] && + fs.existsSync(currentConfig.customBrowserPaths[browser]) + ) { + launchOptions.executablePath = + currentConfig.customBrowserPaths[browser]; + + // Set product to firefox if using Firefox browser + if (browser === "firefox") { + launchOptions.product = "firefox"; + } + + console.log( + `Using custom ${browser} path: ${launchOptions.executablePath}` + ); + return; + } + } + } + + // If no custom path is found, use cached path or detect a new one + try { + if (detectedBrowserPath && fs.existsSync(detectedBrowserPath)) { + console.log(`Using cached browser path: ${detectedBrowserPath}`); + launchOptions.executablePath = detectedBrowserPath; + + // Check if the detected browser is Firefox + if (detectedBrowserPath.includes("firefox")) { + launchOptions.product = "firefox"; + console.log("Setting product to firefox for Firefox browser"); + } + } else { + detectedBrowserPath = await findBrowserExecutablePath(); + launchOptions.executablePath = detectedBrowserPath; + + // Check if the detected browser is Firefox + if (detectedBrowserPath.includes("firefox")) { + launchOptions.product = "firefox"; + console.log("Setting product to firefox for Firefox browser"); + } + + console.log( + `Using detected browser path: ${launchOptions.executablePath}` + ); + } + } catch (error) { + console.error("Failed to detect browser executable path:", error); + throw new Error( + "No browser executable path found. Please specify a custom browser path in the configuration." + ); + } +} + +/** + * Find a browser executable path on the current system + * @returns Path to a browser executable + */ +async function findBrowserExecutablePath(): Promise { + // Try to use chrome-launcher (most reliable method) + try { + console.log("Attempting to find Chrome using chrome-launcher..."); + + // Launch Chrome using chrome-launcher + const chrome = await ChromeLauncher.launch({ + chromeFlags: ["--headless"], + handleSIGINT: false, + }); + + // chrome-launcher stores the Chrome executable path differently than Puppeteer + // Let's try different approaches to get it + + // First check if we can access it directly + let chromePath = ""; + + // Chrome version data often contains the path + if (chrome.process && chrome.process.spawnfile) { + chromePath = chrome.process.spawnfile; + console.log("Found Chrome path from process.spawnfile"); + } else { + // Try to get the Chrome path from chrome-launcher + // In newer versions, it's directly accessible + console.log("Trying to determine Chrome path using other methods"); + + // This will actually return the real Chrome path for us + // chrome-launcher has this inside but doesn't expose it directly + const possiblePaths = [ + process.env.CHROME_PATH, + // Common paths by OS + ...(process.platform === "darwin" + ? ["/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"] + : process.platform === "win32" + ? [ + `${process.env.PROGRAMFILES}\\Google\\Chrome\\Application\\chrome.exe`, + `${process.env["PROGRAMFILES(X86)"]}\\Google\\Chrome\\Application\\chrome.exe`, + ] + : ["/usr/bin/google-chrome"]), + ].filter(Boolean); + + // Use the first valid path + for (const p of possiblePaths) { + if (p && fs.existsSync(p)) { + chromePath = p; + console.log("Found Chrome path from common locations"); + break; + } + } + } + + // Always kill the Chrome instance we just launched + await chrome.kill(); + + if (chromePath) { + console.log(`Chrome found via chrome-launcher: ${chromePath}`); + return chromePath; + } else { + console.log("Chrome launched but couldn't determine executable path"); + } + } catch (error) { + // Check if it's a ChromeNotInstalledError + const errorMessage = error instanceof Error ? error.message : String(error); + if ( + errorMessage.includes("No Chrome installations found") || + (error as any)?.code === "ERR_LAUNCHER_NOT_INSTALLED" + ) { + console.log("Chrome not installed. Falling back to manual detection"); + } else { + console.error("Failed to find Chrome using chrome-launcher:", error); + console.log("Falling back to manual detection"); + } + } + + // If chrome-launcher failed, use manual detection + + const platform = process.platform; + const preferredBrowsers = currentConfig.preferredBrowsers || [ + "chrome", + "edge", + "brave", + "firefox", + ]; + + console.log(`Attempting to detect browser executable path on ${platform}...`); + + // Platform-specific detection strategies + if (platform === "win32") { + // Windows - try registry detection for Chrome + let registryPath = null; + try { + console.log("Checking Windows registry for Chrome..."); + // Try HKLM first + const regOutput = execSync( + 'reg query "HKEY_LOCAL_MACHINE\\SOFTWARE\\Microsoft\\Windows\\CurrentVersion\\App Paths\\chrome.exe" /ve', + { encoding: "utf8" } + ); + + // Extract path from registry output + const match = regOutput.match(/REG_(?:SZ|EXPAND_SZ)\s+([^\s]+)/i); + if (match && match[1]) { + registryPath = match[1].replace(/\\"/g, ""); + // Verify the path exists + if (fs.existsSync(registryPath)) { + console.log(`Found Chrome via HKLM registry: ${registryPath}`); + return registryPath; + } + } + } catch (e) { + // Try HKCU if HKLM fails + try { + console.log("Checking user registry for Chrome..."); + const regOutput = execSync( + 'reg query "HKEY_CURRENT_USER\\SOFTWARE\\Microsoft\\Windows\\CurrentVersion\\App Paths\\chrome.exe" /ve', + { encoding: "utf8" } + ); + + // Extract path from registry output + const match = regOutput.match(/REG_(?:SZ|EXPAND_SZ)\s+([^\s]+)/i); + if (match && match[1]) { + registryPath = match[1].replace(/\\"/g, ""); + // Verify the path exists + if (fs.existsSync(registryPath)) { + console.log(`Found Chrome via HKCU registry: ${registryPath}`); + return registryPath; + } + } + } catch (innerError) { + console.log( + "Failed to find Chrome via registry, continuing with path checks" + ); + } + } + + // Try to find Chrome through BLBeacon registry key (version info) + try { + console.log("Checking Chrome BLBeacon registry..."); + const regOutput = execSync( + 'reg query "HKEY_CURRENT_USER\\Software\\Google\\Chrome\\BLBeacon" /v version', + { encoding: "utf8" } + ); + + if (regOutput) { + // If BLBeacon exists, Chrome is likely installed in the default location + const programFiles = process.env.PROGRAMFILES || "C:\\Program Files"; + const programFilesX86 = + process.env["PROGRAMFILES(X86)"] || "C:\\Program Files (x86)"; + + const defaultChromePaths = [ + path.join(programFiles, "Google\\Chrome\\Application\\chrome.exe"), + path.join(programFilesX86, "Google\\Chrome\\Application\\chrome.exe"), + ]; + + for (const chromePath of defaultChromePaths) { + if (fs.existsSync(chromePath)) { + console.log( + `Found Chrome via BLBeacon registry hint: ${chromePath}` + ); + return chromePath; + } + } + } + } catch (e) { + console.log("Failed to find Chrome via BLBeacon registry"); + } + + // Continue with regular path checks + const programFiles = process.env.PROGRAMFILES || "C:\\Program Files"; + const programFilesX86 = + process.env["PROGRAMFILES(X86)"] || "C:\\Program Files (x86)"; + + // Common Windows browser paths + const winBrowserPaths = { + chrome: [ + path.join(programFiles, "Google\\Chrome\\Application\\chrome.exe"), + path.join(programFilesX86, "Google\\Chrome\\Application\\chrome.exe"), + ], + edge: [ + path.join(programFiles, "Microsoft\\Edge\\Application\\msedge.exe"), + path.join(programFilesX86, "Microsoft\\Edge\\Application\\msedge.exe"), + ], + brave: [ + path.join( + programFiles, + "BraveSoftware\\Brave-Browser\\Application\\brave.exe" + ), + path.join( + programFilesX86, + "BraveSoftware\\Brave-Browser\\Application\\brave.exe" + ), + ], + firefox: [ + path.join(programFiles, "Mozilla Firefox\\firefox.exe"), + path.join(programFilesX86, "Mozilla Firefox\\firefox.exe"), + ], + }; + + // Check each browser in preferred order + for (const browser of preferredBrowsers) { + const paths = + winBrowserPaths[browser as keyof typeof winBrowserPaths] || []; + for (const browserPath of paths) { + if (fs.existsSync(browserPath)) { + console.log(`Found ${browser} at ${browserPath}`); + return browserPath; + } + } + } + } else if (platform === "darwin") { + // macOS browser paths + const macBrowserPaths = { + chrome: ["/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"], + edge: ["/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge"], + brave: ["/Applications/Brave Browser.app/Contents/MacOS/Brave Browser"], + firefox: ["/Applications/Firefox.app/Contents/MacOS/firefox"], + safari: ["/Applications/Safari.app/Contents/MacOS/Safari"], + }; + + // Check each browser in preferred order + for (const browser of preferredBrowsers) { + const paths = + macBrowserPaths[browser as keyof typeof macBrowserPaths] || []; + for (const browserPath of paths) { + if (fs.existsSync(browserPath)) { + console.log(`Found ${browser} at ${browserPath}`); + // Safari is detected but not supported by Puppeteer + if (browser === "safari") { + console.log( + "Safari detected but not supported by Puppeteer. Continuing search..." + ); + continue; + } + return browserPath; + } + } + } + } else if (platform === "linux") { + // Linux browser commands + const linuxBrowserCommands = { + chrome: ["google-chrome", "chromium", "chromium-browser"], + edge: ["microsoft-edge"], + brave: ["brave-browser"], + firefox: ["firefox"], + }; + + // Check each browser in preferred order + for (const browser of preferredBrowsers) { + const commands = + linuxBrowserCommands[browser as keyof typeof linuxBrowserCommands] || + []; + for (const cmd of commands) { + try { + // Use more universal commands for Linux to find executables + // command -v works in most shells, fallback to which or type + const browserPath = execSync( + `command -v ${cmd} || which ${cmd} || type -p ${cmd} 2>/dev/null`, + { encoding: "utf8" } + ).trim(); + + if (browserPath && fs.existsSync(browserPath)) { + console.log(`Found ${browser} at ${browserPath}`); + return browserPath; + } + } catch (e) { + // Command not found, continue to next + } + } + } + + // Additional check for unusual locations on Linux + const alternativeLocations = [ + "/usr/bin/google-chrome", + "/usr/bin/chromium", + "/usr/bin/chromium-browser", + "/snap/bin/chromium", + "/snap/bin/google-chrome", + "/opt/google/chrome/chrome", + ]; + + for (const location of alternativeLocations) { + if (fs.existsSync(location)) { + console.log(`Found browser at alternative location: ${location}`); + return location; + } + } + } + + throw new Error( + `No browser executable found for platform ${platform}. Please specify a custom browser path.` + ); +} + +/** + * Sets up cleanup handlers for the browser instance + * @param browser Browser instance + * @param userDataDir Path to the user data directory to clean up + */ +function setupBrowserCleanupHandlers( + browser: puppeteer.Browser, + userDataDir: string +): void { + browser.on("disconnected", () => { + console.log(`Browser disconnected. Scheduling cleanup for: ${userDataDir}`); + + // Clear any existing cleanup timeout when browser is disconnected + cancelScheduledCleanup(); + + // Delayed cleanup to avoid conflicts with potential new browser instances + setTimeout(() => { + // Only remove the directory if no new browser has been launched + if (!headlessBrowserInstance) { + console.log(`Cleaning up temporary directory: ${userDataDir}`); + try { + fs.rmSync(userDataDir, { recursive: true, force: true }); + console.log(`Successfully removed directory: ${userDataDir}`); + } catch (error) { + console.error(`Failed to remove directory ${userDataDir}:`, error); + } + } else { + console.log( + `Skipping cleanup for ${userDataDir} as new browser instance is active` + ); + } + }, 5000); // 5-second delay for cleanup + + // Reset browser instance variables + launchedBrowserWSEndpoint = null; + headlessBrowserInstance = null; + }); +} + +// ===== Cleanup Management ===== + +/** + * Cancels any scheduled browser cleanup + */ +function cancelScheduledCleanup(): void { + if (browserCleanupTimeout) { + console.log("Cancelling scheduled browser cleanup"); + clearTimeout(browserCleanupTimeout); + browserCleanupTimeout = null; + } +} + +/** + * Schedules automatic cleanup of the browser instance after inactivity + */ +export function scheduleBrowserCleanup(): void { + // Clear any existing timeout first + cancelScheduledCleanup(); + + // Only schedule cleanup if we have an active browser instance + if (headlessBrowserInstance) { + console.log( + `Scheduling browser cleanup in ${BROWSER_CLEANUP_TIMEOUT / 1000} seconds` + ); + + browserCleanupTimeout = setTimeout(() => { + console.log("Executing scheduled browser cleanup"); + if (headlessBrowserInstance) { + console.log("Closing headless browser instance"); + headlessBrowserInstance.close(); + headlessBrowserInstance = null; + launchedBrowserWSEndpoint = null; + } + browserCleanupTimeout = null; + }, BROWSER_CLEANUP_TIMEOUT); + } +} + +// ===== Public Browser Connection API ===== + +/** + * Connects to a headless browser for web operations + * @param url The URL to navigate to + * @param options Connection and emulation options + * @returns Promise resolving to browser, port, and page objects + */ +export async function connectToHeadlessBrowser( + url: string, + options: { + blockResources?: boolean; + customResourceBlockList?: string[]; + emulateDevice?: "mobile" | "tablet" | "desktop"; + emulateNetworkCondition?: "slow3G" | "fast3G" | "4G" | "offline"; + viewport?: { width: number; height: number }; + locale?: string; + timezoneId?: string; + userAgent?: string; + waitForSelector?: string; + waitForTimeout?: number; + cookies?: Array<{ + name: string; + value: string; + domain?: string; + path?: string; + }>; + headers?: Record; + } = {} +): Promise<{ + browser: puppeteer.Browser; + port: number; + page: puppeteer.Page; +}> { + console.log( + `Connecting to headless browser for ${url}${ + options.blockResources ? " (blocking non-essential resources)" : "" + }` + ); + + try { + // Validate URL format + try { + new URL(url); + } catch (e) { + throw new Error(`Invalid URL format: ${url}`); + } + + // Get or create a browser instance + const browser = await getHeadlessBrowserInstance(); + + if (!launchedBrowserWSEndpoint) { + throw new Error("Failed to retrieve WebSocket endpoint for browser"); + } + + // Extract port from WebSocket endpoint + const port = parseInt( + launchedBrowserWSEndpoint.split(":")[2].split("/")[0] + ); + + // Always create a new page for each audit to avoid request interception conflicts + console.log("Creating a new page for this audit"); + const page = await browser.newPage(); + + // Set a longer timeout for navigation + const navigationTimeout = 10000; // 10 seconds + page.setDefaultNavigationTimeout(navigationTimeout); + + // Navigate to the URL + console.log(`Navigating to ${url}`); + await page.goto(url, { + waitUntil: "networkidle2", // Wait until there are no more network connections for at least 500ms + timeout: navigationTimeout, + }); + + // Set custom headers if provided + if (options.headers && Object.keys(options.headers).length > 0) { + await page.setExtraHTTPHeaders(options.headers); + console.log("Set custom HTTP headers"); + } + + // Set cookies if provided + if (options.cookies && options.cookies.length > 0) { + const urlObj = new URL(url); + const cookiesWithDomain = options.cookies.map((cookie) => ({ + ...cookie, + domain: cookie.domain || urlObj.hostname, + path: cookie.path || "/", + })); + await page.setCookie(...cookiesWithDomain); + console.log(`Set ${options.cookies.length} cookies`); + } + + // Set custom viewport if specified + if (options.viewport) { + await page.setViewport(options.viewport); + console.log( + `Set viewport to ${options.viewport.width}x${options.viewport.height}` + ); + } else if (options.emulateDevice) { + // Set common device emulation presets + let viewport; + let userAgent = options.userAgent; + + switch (options.emulateDevice) { + case "mobile": + viewport = { + width: 375, + height: 667, + isMobile: true, + hasTouch: true, + }; + userAgent = + userAgent || + "Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X)"; + break; + case "tablet": + viewport = { + width: 768, + height: 1024, + isMobile: true, + hasTouch: true, + }; + userAgent = + userAgent || "Mozilla/5.0 (iPad; CPU OS 13_2_3 like Mac OS X)"; + break; + case "desktop": + default: + viewport = { + width: 1280, + height: 800, + isMobile: false, + hasTouch: false, + }; + break; + } + + await page.setViewport(viewport); + if (userAgent) await page.setUserAgent(userAgent); + + console.log(`Emulating ${options.emulateDevice} device`); + } + + // Set locale and timezone if provided + if (options.locale) { + await page.evaluateOnNewDocument((locale) => { + Object.defineProperty(navigator, "language", { get: () => locale }); + Object.defineProperty(navigator, "languages", { get: () => [locale] }); + }, options.locale); + console.log(`Set locale to ${options.locale}`); + } + + if (options.timezoneId) { + await page.emulateTimezone(options.timezoneId); + console.log(`Set timezone to ${options.timezoneId}`); + } + + // Emulate network conditions if specified + if (options.emulateNetworkCondition) { + // Define network condition types that match puppeteer's expected format + interface PuppeteerNetworkConditions { + offline: boolean; + latency?: number; + download?: number; + upload?: number; + } + + let networkConditions: PuppeteerNetworkConditions; + + switch (options.emulateNetworkCondition) { + case "slow3G": + networkConditions = { + offline: false, + latency: 400, + download: (500 * 1024) / 8, + upload: (500 * 1024) / 8, + }; + break; + case "fast3G": + networkConditions = { + offline: false, + latency: 150, + download: (1.5 * 1024 * 1024) / 8, + upload: (750 * 1024) / 8, + }; + break; + case "4G": + networkConditions = { + offline: false, + latency: 50, + download: (4 * 1024 * 1024) / 8, + upload: (2 * 1024 * 1024) / 8, + }; + break; + case "offline": + networkConditions = { offline: true }; + break; + default: + networkConditions = { offline: false }; + } + + // @ts-ignore - Property might not be in types but is supported + await page.emulateNetworkConditions(networkConditions); + console.log( + `Emulating ${options.emulateNetworkCondition} network conditions` + ); + } + + // Check if we should block resources based on the options + if (options.blockResources) { + const resourceTypesToBlock = options.customResourceBlockList || + currentConfig.blockResourceTypes || ["image", "font", "media"]; + + await page.setRequestInterception(true); + page.on("request", (request) => { + // Block unnecessary resources to speed up loading + const resourceType = request.resourceType(); + if (resourceTypesToBlock.includes(resourceType)) { + request.abort(); + } else { + request.continue(); + } + }); + + console.log( + `Blocking resource types: ${resourceTypesToBlock.join(", ")}` + ); + } + + // Wait for a specific selector if requested + if (options.waitForSelector) { + try { + console.log(`Waiting for selector: ${options.waitForSelector}`); + await page.waitForSelector(options.waitForSelector, { + timeout: options.waitForTimeout || 30000, + }); + } catch (selectorError: any) { + console.warn( + `Failed to find selector "${options.waitForSelector}": ${selectorError.message}` + ); + // Continue anyway, don't fail the whole operation + } + } + + return { browser, port, page }; + } catch (error) { + console.error("Failed to connect to headless browser:", error); + throw new Error( + `Failed to connect to headless browser: ${ + error instanceof Error ? error.message : String(error) + }` + ); + } +} diff --git a/browser-tools-server/tsconfig.json b/browser-tools-server/tsconfig.json index 6ba6251..3e141f9 100644 --- a/browser-tools-server/tsconfig.json +++ b/browser-tools-server/tsconfig.json @@ -8,8 +8,9 @@ "rootDir": ".", "strict": true, "skipLibCheck": true, - "forceConsistentCasingInFileNames": true + "forceConsistentCasingInFileNames": true, + "resolveJsonModule": true }, - "include": ["*.ts"], + "include": ["**/*.ts"], "exclude": ["node_modules", "dist"] -} \ No newline at end of file +} diff --git a/chrome-extension/background.js b/chrome-extension/background.js index 94d8c1e..45bc4d7 100644 --- a/chrome-extension/background.js +++ b/chrome-extension/background.js @@ -1,38 +1,386 @@ // Listen for messages from the devtools panel chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { + if (message.type === "GET_CURRENT_URL" && message.tabId) { + getCurrentTabUrl(message.tabId) + .then((url) => { + sendResponse({ success: true, url: url }); + }) + .catch((error) => { + sendResponse({ success: false, error: error.message }); + }); + return true; // Required to use sendResponse asynchronously + } + + // Handle explicit request to update the server with the URL + if (message.type === "UPDATE_SERVER_URL" && message.tabId && message.url) { + console.log( + `Background: Received request to update server with URL for tab ${message.tabId}: ${message.url}` + ); + updateServerWithUrl( + message.tabId, + message.url, + message.source || "explicit_update" + ) + .then(() => { + if (sendResponse) sendResponse({ success: true }); + }) + .catch((error) => { + console.error("Background: Error updating server with URL:", error); + if (sendResponse) + sendResponse({ success: false, error: error.message }); + }); + return true; // Required to use sendResponse asynchronously + } + 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; - } + // First get the server settings + chrome.storage.local.get(["browserConnectorSettings"], (result) => { + const settings = result.browserConnectorSettings || { + serverHost: "localhost", + serverPort: 3025, + }; - // 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) - ); + // Validate server identity first + validateServerIdentity(settings.serverHost, settings.serverPort) + .then((isValid) => { + if (!isValid) { + console.error( + "Cannot capture screenshot: Not connected to a valid browser tools server" + ); + sendResponse({ + success: false, + error: + "Not connected to a valid browser tools server. Please check your connection settings.", + }); + return; + } - if (!targetWindow) { - console.error("Could not find window containing the inspected tab"); + // Continue with screenshot capture + captureAndSendScreenshot(message, settings, sendResponse); + }) + .catch((error) => { + console.error("Error validating server:", error); sendResponse({ success: false, - error: "Could not find window containing the inspected tab" + error: "Failed to validate server identity: " + error.message, }); - return; + }); + }); + return true; // Required to use sendResponse asynchronously + } +}); + +// Validate server identity +async function validateServerIdentity(host, port) { + try { + const response = await fetch(`http://${host}:${port}/.identity`, { + signal: AbortSignal.timeout(3000), // 3 second timeout + }); + + if (!response.ok) { + console.error(`Invalid server response: ${response.status}`); + return false; + } + + const identity = await response.json(); + + // Validate the server signature + if (identity.signature !== "mcp-browser-connector-24x7") { + console.error("Invalid server signature - not the browser tools server"); + return false; + } + + return true; + } catch (error) { + console.error("Error validating server identity:", error); + return false; + } +} + +// Helper function to process the tab and run the audit +function processTabForAudit(tab, tabId) { + const url = tab.url; + + if (!url) { + console.error(`No URL available for tab ${tabId}`); + return; + } + + // Update our cache and the server with this URL + tabUrls.set(tabId, url); + updateServerWithUrl(tabId, url); +} + +// Track URLs for each tab +const tabUrls = new Map(); + +// Function to get the current URL for a tab +async function getCurrentTabUrl(tabId) { + try { + console.log("Background: Getting URL for tab", tabId); + + // First check if we have it cached + if (tabUrls.has(tabId)) { + const cachedUrl = tabUrls.get(tabId); + console.log("Background: Found cached URL:", cachedUrl); + return cachedUrl; + } + + // Otherwise get it from the tab + try { + const tab = await chrome.tabs.get(tabId); + if (tab && tab.url) { + // Cache the URL + tabUrls.set(tabId, tab.url); + console.log("Background: Got URL from tab:", tab.url); + return tab.url; + } else { + console.log("Background: Tab exists but no URL found"); + } + } catch (tabError) { + console.error("Background: Error getting tab:", tabError); + } + + // If we can't get the tab directly, try querying for active tabs + try { + const tabs = await chrome.tabs.query({ + active: true, + currentWindow: true, + }); + if (tabs && tabs.length > 0 && tabs[0].url) { + const activeUrl = tabs[0].url; + console.log("Background: Got URL from active tab:", activeUrl); + // Cache this URL as well + tabUrls.set(tabId, activeUrl); + return activeUrl; + } + } catch (queryError) { + console.error("Background: Error querying tabs:", queryError); + } + + console.log("Background: Could not find URL for tab", tabId); + return null; + } catch (error) { + console.error("Background: Error getting tab URL:", error); + return null; + } +} + +// Listen for tab updates to detect page refreshes and URL changes +chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => { + // Track URL changes + if (changeInfo.url) { + console.log(`URL changed in tab ${tabId} to ${changeInfo.url}`); + tabUrls.set(tabId, changeInfo.url); + + // Send URL update to server if possible + updateServerWithUrl(tabId, changeInfo.url, "tab_url_change"); + } + + // Check if this is a page refresh (status becoming "complete") + if (changeInfo.status === "complete") { + // Update URL in our cache + if (tab.url) { + tabUrls.set(tabId, tab.url); + // Send URL update to server if possible + updateServerWithUrl(tabId, tab.url, "page_complete"); + } + + retestConnectionOnRefresh(tabId); + } +}); + +// Listen for tab activation (switching between tabs) +chrome.tabs.onActivated.addListener((activeInfo) => { + const tabId = activeInfo.tabId; + console.log(`Tab activated: ${tabId}`); + + // Get the URL of the newly activated tab + chrome.tabs.get(tabId, (tab) => { + if (chrome.runtime.lastError) { + console.error("Error getting tab info:", chrome.runtime.lastError); + return; + } + + if (tab && tab.url) { + console.log(`Active tab changed to ${tab.url}`); + + // Update our cache + tabUrls.set(tabId, tab.url); + + // Send URL update to server + updateServerWithUrl(tabId, tab.url, "tab_activated"); + } + }); +}); + +// Function to update the server with the current URL +async function updateServerWithUrl(tabId, url, source = "background_update") { + if (!url) { + console.error("Cannot update server with empty URL"); + return; + } + + console.log(`Updating server with URL for tab ${tabId}: ${url}`); + + // Get the saved settings + chrome.storage.local.get(["browserConnectorSettings"], async (result) => { + const settings = result.browserConnectorSettings || { + serverHost: "localhost", + serverPort: 3025, + }; + + // Maximum number of retry attempts + const maxRetries = 3; + let retryCount = 0; + let success = false; + + while (retryCount < maxRetries && !success) { + try { + // Send the URL to the server + const serverUrl = `http://${settings.serverHost}:${settings.serverPort}/current-url`; + console.log( + `Attempt ${ + retryCount + 1 + }/${maxRetries} to update server with URL: ${url}` + ); + + const response = await fetch(serverUrl, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + url: url, + tabId: tabId, + timestamp: Date.now(), + source: source, + }), + // Add a timeout to prevent hanging requests + signal: AbortSignal.timeout(5000), + }); + + if (response.ok) { + const responseData = await response.json(); + console.log( + `Successfully updated server with URL: ${url}`, + responseData + ); + success = true; + } else { + console.error( + `Server returned error: ${response.status} ${response.statusText}` + ); + retryCount++; + // Wait before retrying + await new Promise((resolve) => setTimeout(resolve, 500)); } + } catch (error) { + console.error(`Error updating server with URL: ${error.message}`); + retryCount++; + // Wait before retrying + await new Promise((resolve) => setTimeout(resolve, 500)); + } + } + + if (!success) { + console.error( + `Failed to update server with URL after ${maxRetries} attempts` + ); + } + }); +} + +// Clean up when tabs are closed +chrome.tabs.onRemoved.addListener((tabId) => { + tabUrls.delete(tabId); +}); - // Capture screenshot of the window containing our tab - chrome.tabs.captureVisibleTab(targetWindow.id, { format: "png" }, (dataUrl) => { +// Function to retest connection when a page is refreshed +async function retestConnectionOnRefresh(tabId) { + console.log(`Page refreshed in tab ${tabId}, retesting connection...`); + + // Get the saved settings + chrome.storage.local.get(["browserConnectorSettings"], async (result) => { + const settings = result.browserConnectorSettings || { + serverHost: "localhost", + serverPort: 3025, + }; + + // Test the connection with the last known host and port + const isConnected = await validateServerIdentity( + settings.serverHost, + settings.serverPort + ); + + // Notify all devtools instances about the connection status + chrome.runtime.sendMessage({ + type: "CONNECTION_STATUS_UPDATE", + isConnected: isConnected, + tabId: tabId, + }); + + // Always notify for page refresh, whether connected or not + // This ensures any ongoing discovery is cancelled and restarted + chrome.runtime.sendMessage({ + type: "INITIATE_AUTO_DISCOVERY", + reason: "page_refresh", + tabId: tabId, + forceRestart: true, // Add a flag to indicate this should force restart any ongoing processes + }); + + if (!isConnected) { + console.log( + "Connection test failed after page refresh, initiating auto-discovery..." + ); + } else { + console.log("Connection test successful after page refresh"); + } + }); +} + +// Function to capture and send screenshot +function captureAndSendScreenshot(message, settings, sendResponse) { + // 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); + 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, @@ -40,8 +388,11 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { return; } - // Send screenshot data to browser connector - fetch("http://127.0.0.1:3025/screenshot", { + // Send screenshot data to browser connector using configured settings + const serverUrl = `http://${settings.serverHost}:${settings.serverPort}/screenshot`; + console.log(`Sending screenshot to ${serverUrl}`); + + fetch(serverUrl, { method: "POST", headers: { "Content-Type": "application/json", @@ -62,7 +413,7 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { sendResponse({ success: true, path: result.path, - title: tab.title || "Current Tab" + title: tab.title || "Current Tab", }); } }) @@ -73,9 +424,8 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { 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 c449402..6197f2f 100644 --- a/chrome-extension/devtools.js +++ b/chrome-extension/devtools.js @@ -9,6 +9,9 @@ let settings = { showRequestHeaders: false, showResponseHeaders: false, 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 @@ -29,6 +32,81 @@ chrome.storage.local.get(["browserConnectorSettings"], (result) => { chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { if (message.type === "SETTINGS_UPDATED") { settings = message.settings; + + // If server settings changed and we have a WebSocket, reconnect + if ( + ws && + (message.settings.serverHost !== settings.serverHost || + message.settings.serverPort !== settings.serverPort) + ) { + console.log("Server settings changed, reconnecting WebSocket..."); + setupWebSocket(); + } + } + + // Handle connection status updates from page refreshes + if (message.type === "CONNECTION_STATUS_UPDATE") { + console.log( + `DevTools received connection status update: ${ + message.isConnected ? "Connected" : "Disconnected" + }` + ); + + // If connection is lost, try to reestablish WebSocket only if we had a previous connection + if (!message.isConnected && ws) { + console.log( + "Connection lost after page refresh, will attempt to reconnect WebSocket" + ); + + // Only reconnect if we actually have a WebSocket that might be stale + if ( + ws && + (ws.readyState === WebSocket.CLOSED || + ws.readyState === WebSocket.CLOSING) + ) { + console.log("WebSocket is already closed or closing, will reconnect"); + setupWebSocket(); + } + } + } + + // Handle auto-discovery requests after page refreshes + if (message.type === "INITIATE_AUTO_DISCOVERY") { + console.log( + `DevTools initiating WebSocket reconnect after page refresh (reason: ${message.reason})` + ); + + // For page refreshes with forceRestart, we should always reconnect if our current connection is not working + if ( + (message.reason === "page_refresh" || message.forceRestart === true) && + (!ws || ws.readyState !== WebSocket.OPEN) + ) { + console.log( + "Page refreshed and WebSocket not open - forcing reconnection" + ); + + // Close existing WebSocket if any + if (ws) { + console.log("Closing existing WebSocket due to page refresh"); + intentionalClosure = true; // Mark as intentional to prevent auto-reconnect + try { + ws.close(); + } catch (e) { + console.error("Error closing WebSocket:", e); + } + ws = null; + intentionalClosure = false; // Reset flag + } + + // Clear any pending reconnect timeouts + if (wsReconnectTimeout) { + clearTimeout(wsReconnectTimeout); + wsReconnectTimeout = null; + } + + // Try to reestablish the WebSocket connection + setupWebSocket(); + } } }); @@ -161,12 +239,20 @@ function processJsonString(jsonString, maxLength) { } // Helper to send logs to browser-connector -function sendToBrowserConnector(logData) { +async function sendToBrowserConnector(logData) { if (!logData) { console.error("No log data provided to sendToBrowserConnector"); return; } + // First, ensure we're connecting to the right server + if (!(await validateServerIdentity())) { + console.error( + "Cannot send logs: Not connected to a valid browser tools server" + ); + return; + } + console.log("Sending log data to browser connector:", { type: logData.type, timestamp: logData.timestamp, @@ -242,40 +328,151 @@ function sendToBrowserConnector(logData) { ); } - fetch("http://127.0.0.1:3025/extension-log", { + const serverUrl = `http://${settings.serverHost}:${settings.serverPort}/extension-log`; + console.log(`Sending log to ${serverUrl}`); + + fetch(serverUrl, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload), }) .then((response) => { if (!response.ok) { - throw new Error(`HTTP error! status: ${response.status}`); + throw new Error(`HTTP error ${response.status}`); } - console.log("Successfully sent log to browser-connector"); return response.json(); }) .then((data) => { - console.log("Browser connector response:", data); + console.log("Log sent successfully:", data); }) .catch((error) => { - console.error("Failed to send log to browser-connector:", error); + console.error("Error sending log:", error); }); } -// Add function to wipe logs +// Validate server identity +async function validateServerIdentity() { + try { + console.log( + `Validating server identity at ${settings.serverHost}:${settings.serverPort}...` + ); + + // Use fetch with a timeout to prevent long-hanging requests + const response = await fetch( + `http://${settings.serverHost}:${settings.serverPort}/.identity`, + { + signal: AbortSignal.timeout(3000), // 3 second timeout + } + ); + + if (!response.ok) { + console.error( + `Server identity validation failed: HTTP ${response.status}` + ); + + // Notify about the connection failure + chrome.runtime.sendMessage({ + type: "SERVER_VALIDATION_FAILED", + reason: "http_error", + status: response.status, + serverHost: settings.serverHost, + serverPort: settings.serverPort, + }); + + return false; + } + + const identity = await response.json(); + + // Validate signature + if (identity.signature !== "mcp-browser-connector-24x7") { + console.error("Server identity validation failed: Invalid signature"); + + // Notify about the invalid signature + chrome.runtime.sendMessage({ + type: "SERVER_VALIDATION_FAILED", + reason: "invalid_signature", + serverHost: settings.serverHost, + serverPort: settings.serverPort, + }); + + return false; + } + + console.log( + `Server identity confirmed: ${identity.name} v${identity.version}` + ); + + // Notify about successful validation + chrome.runtime.sendMessage({ + type: "SERVER_VALIDATION_SUCCESS", + serverInfo: identity, + serverHost: settings.serverHost, + serverPort: settings.serverPort, + }); + + return true; + } catch (error) { + console.error("Server identity validation failed:", error); + + // Notify about the connection error + chrome.runtime.sendMessage({ + type: "SERVER_VALIDATION_FAILED", + reason: "connection_error", + error: error.message, + serverHost: settings.serverHost, + serverPort: settings.serverPort, + }); + + return false; + } +} + +// Function to clear logs on the server function wipeLogs() { - fetch("http://127.0.0.1:3025/wipelogs", { + console.log("Wiping all logs..."); + + const serverUrl = `http://${settings.serverHost}:${settings.serverPort}/wipelogs`; + console.log(`Sending wipe request to ${serverUrl}`); + + fetch(serverUrl, { method: "POST", headers: { "Content-Type": "application/json" }, - }).catch((error) => { - console.error("Failed to wipe logs:", error); - }); + }) + .then((response) => { + if (!response.ok) { + throw new Error(`HTTP error ${response.status}`); + } + return response.json(); + }) + .then((data) => { + console.log("Logs wiped successfully:", data); + }) + .catch((error) => { + console.error("Error wiping logs:", error); + }); } // Listen for page refreshes -chrome.devtools.network.onNavigated.addListener(() => { +chrome.devtools.network.onNavigated.addListener((url) => { console.log("Page navigated/refreshed - wiping logs"); wipeLogs(); + + // Send the new URL to the server + if (ws && ws.readyState === WebSocket.OPEN && url) { + console.log( + "Chrome Extension: Sending page-navigated event with URL:", + url + ); + ws.send( + JSON.stringify({ + type: "page-navigated", + url: url, + tabId: chrome.devtools.inspectedWindow.tabId, + timestamp: Date.now(), + }) + ); + } }); // 1) Listen for network requests @@ -461,14 +658,31 @@ chrome.devtools.panels.create("BrowserToolsMCP", "", "panel.html", (panel) => { }); }); -// Clean up when DevTools window is closed +// Clean up when DevTools closes window.addEventListener("unload", () => { + // Detach debugger detachDebugger(); + + // Set intentional closure flag before closing + intentionalClosure = true; + if (ws) { - ws.close(); + try { + ws.close(); + } catch (e) { + console.error("Error closing WebSocket during unload:", e); + } + ws = null; } + if (wsReconnectTimeout) { clearTimeout(wsReconnectTimeout); + wsReconnectTimeout = null; + } + + if (heartbeatInterval) { + clearInterval(heartbeatInterval); + heartbeatInterval = null; } }); @@ -522,83 +736,377 @@ chrome.devtools.panels.elements.onSelectionChanged.addListener(() => { // WebSocket connection management let ws = null; let wsReconnectTimeout = null; +let heartbeatInterval = null; const WS_RECONNECT_DELAY = 5000; // 5 seconds +const HEARTBEAT_INTERVAL = 30000; // 30 seconds +// Add a flag to track if we need to reconnect after identity validation +let reconnectAfterValidation = false; +// Track if we're intentionally closing the connection +let intentionalClosure = false; + +// Function to send a heartbeat to keep the WebSocket connection alive +function sendHeartbeat() { + if (ws && ws.readyState === WebSocket.OPEN) { + console.log("Chrome Extension: Sending WebSocket heartbeat"); + ws.send(JSON.stringify({ type: "heartbeat" })); + } +} -function setupWebSocket() { - if (ws) { - ws.close(); +async function setupWebSocket() { + // Clear any pending timeouts + if (wsReconnectTimeout) { + clearTimeout(wsReconnectTimeout); + wsReconnectTimeout = null; } - ws = new WebSocket("ws://localhost:3025/extension-ws"); + if (heartbeatInterval) { + clearInterval(heartbeatInterval); + heartbeatInterval = null; + } - ws.onmessage = async (event) => { + // Close existing WebSocket if any + if (ws) { + // Set flag to indicate this is an intentional closure + intentionalClosure = true; try { - const message = JSON.parse(event.data); - console.log("Chrome Extension: Received WebSocket message:", message); + ws.close(); + } catch (e) { + console.error("Error closing existing WebSocket:", e); + } + ws = null; + intentionalClosure = false; // Reset flag + } + + // Validate server identity before connecting + console.log("Validating server identity before WebSocket connection..."); + const isValid = await validateServerIdentity(); + + if (!isValid) { + console.error( + "Cannot establish WebSocket: Not connected to a valid browser tools server" + ); + // Set flag to indicate we need to reconnect after a page refresh check + reconnectAfterValidation = true; + + // Try again after delay + wsReconnectTimeout = setTimeout(() => { + console.log("Attempting to reconnect WebSocket after validation failure"); + setupWebSocket(); + }, WS_RECONNECT_DELAY); + return; + } + + // Reset reconnect flag since validation succeeded + reconnectAfterValidation = false; + + const wsUrl = `ws://${settings.serverHost}:${settings.serverPort}/extension-ws`; + console.log(`Connecting to WebSocket at ${wsUrl}`); + + try { + ws = new WebSocket(wsUrl); + + ws.onopen = () => { + console.log(`Chrome Extension: WebSocket connected to ${wsUrl}`); + + // Start heartbeat to keep connection alive + heartbeatInterval = setInterval(sendHeartbeat, HEARTBEAT_INTERVAL); - if (message.type === "take-screenshot") { - console.log("Chrome Extension: Taking screenshot..."); - // Capture screenshot of the current tab - chrome.tabs.captureVisibleTab(null, { format: "png" }, (dataUrl) => { + // Notify that connection is successful + chrome.runtime.sendMessage({ + type: "WEBSOCKET_CONNECTED", + serverHost: settings.serverHost, + serverPort: settings.serverPort, + }); + + // Send the current URL to the server right after connection + // This ensures the server has the URL even if no navigation occurs + chrome.runtime.sendMessage( + { + type: "GET_CURRENT_URL", + tabId: chrome.devtools.inspectedWindow.tabId, + }, + (response) => { if (chrome.runtime.lastError) { console.error( - "Chrome Extension: Screenshot capture failed:", + "Chrome Extension: Error getting URL from background on connection:", chrome.runtime.lastError ); - ws.send( - JSON.stringify({ - type: "screenshot-error", - error: chrome.runtime.lastError.message, - requestId: message.requestId, - }) - ); + + // If normal method fails, try fallback to chrome.tabs API directly + tryFallbackGetUrl(); 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 }), - }; + if (response && response.url) { + console.log( + "Chrome Extension: Sending initial URL to server:", + response.url + ); - console.log("Chrome Extension: Sending screenshot data response", { - ...response, - data: "[base64 data]", - }); + // Send the URL to the server via the background script + chrome.runtime.sendMessage({ + type: "UPDATE_SERVER_URL", + tabId: chrome.devtools.inspectedWindow.tabId, + url: response.url, + source: "initial_connection", + }); + } else { + // If response exists but no URL, try fallback + tryFallbackGetUrl(); + } + } + ); - ws.send(JSON.stringify(response)); + // Fallback method to get URL directly + function tryFallbackGetUrl() { + console.log("Chrome Extension: Trying fallback method to get URL"); + + // Try to get the URL directly using the tabs API + chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => { + if (chrome.runtime.lastError) { + console.error( + "Chrome Extension: Fallback URL retrieval failed:", + chrome.runtime.lastError + ); + return; + } + + if (tabs && tabs.length > 0 && tabs[0].url) { + console.log( + "Chrome Extension: Got URL via fallback method:", + tabs[0].url + ); + + // Send the URL to the server + chrome.runtime.sendMessage({ + type: "UPDATE_SERVER_URL", + tabId: chrome.devtools.inspectedWindow.tabId, + url: tabs[0].url, + source: "fallback_method", + }); + } else { + console.warn( + "Chrome Extension: Could not retrieve URL through fallback method" + ); + } }); } - } catch (error) { - console.error( - "Chrome Extension: Error processing WebSocket message:", - error - ); - } - }; + }; - ws.onopen = () => { - console.log("Chrome Extension: WebSocket connected"); - if (wsReconnectTimeout) { - clearTimeout(wsReconnectTimeout); - wsReconnectTimeout = null; - } - }; + ws.onerror = (error) => { + console.error(`Chrome Extension: WebSocket error for ${wsUrl}:`, error); + }; - ws.onclose = () => { - console.log( - "Chrome Extension: WebSocket disconnected, attempting to reconnect..." - ); - wsReconnectTimeout = setTimeout(setupWebSocket, WS_RECONNECT_DELAY); - }; + ws.onclose = (event) => { + console.log(`Chrome Extension: WebSocket closed for ${wsUrl}:`, event); - ws.onerror = (error) => { - console.error("Chrome Extension: WebSocket error:", error); - }; + // Stop heartbeat + if (heartbeatInterval) { + clearInterval(heartbeatInterval); + heartbeatInterval = null; + } + + // Don't reconnect if this was an intentional closure + if (intentionalClosure) { + console.log( + "Chrome Extension: Intentional WebSocket closure, not reconnecting" + ); + return; + } + + // Only attempt to reconnect if the closure wasn't intentional + // Code 1000 (Normal Closure) and 1001 (Going Away) are normal closures + // Code 1005 often happens with clean closures in Chrome + const isAbnormalClosure = !(event.code === 1000 || event.code === 1001); + + // Check if this was an abnormal closure or if we need to reconnect after validation + if (isAbnormalClosure || reconnectAfterValidation) { + console.log( + `Chrome Extension: Will attempt to reconnect WebSocket (closure code: ${event.code})` + ); + + // Try to reconnect after delay + wsReconnectTimeout = setTimeout(() => { + console.log( + `Chrome Extension: Attempting to reconnect WebSocket to ${wsUrl}` + ); + setupWebSocket(); + }, WS_RECONNECT_DELAY); + } else { + console.log( + `Chrome Extension: Normal WebSocket closure, not reconnecting automatically` + ); + } + }; + + ws.onmessage = async (event) => { + try { + const message = JSON.parse(event.data); + + // Don't log heartbeat responses to reduce noise + if (message.type !== "heartbeat-response") { + console.log("Chrome Extension: Received WebSocket message:", message); + + if (message.type === "server-shutdown") { + console.log("Chrome Extension: Received server shutdown signal"); + // Clear any reconnection attempts + if (wsReconnectTimeout) { + clearTimeout(wsReconnectTimeout); + wsReconnectTimeout = null; + } + // Close the connection gracefully + ws.close(1000, "Server shutting down"); + return; + } + } + + if (message.type === "heartbeat-response") { + // Just a heartbeat response, no action needed + // 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) => { + 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, + }) + ); + 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)); + }); + } else if (message.type === "get-current-url") { + console.log("Chrome Extension: Received request for current URL"); + + // Get the current URL from the background script instead of inspectedWindow.eval + let retryCount = 0; + const maxRetries = 2; + + const requestCurrentUrl = () => { + chrome.runtime.sendMessage( + { + type: "GET_CURRENT_URL", + tabId: chrome.devtools.inspectedWindow.tabId, + }, + (response) => { + if (chrome.runtime.lastError) { + console.error( + "Chrome Extension: Error getting URL from background:", + chrome.runtime.lastError + ); + + // Retry logic + if (retryCount < maxRetries) { + retryCount++; + console.log( + `Retrying URL request (${retryCount}/${maxRetries})...` + ); + setTimeout(requestCurrentUrl, 500); // Wait 500ms before retrying + return; + } + + ws.send( + JSON.stringify({ + type: "current-url-response", + url: null, + tabId: chrome.devtools.inspectedWindow.tabId, + error: + "Failed to get URL from background: " + + chrome.runtime.lastError.message, + requestId: message.requestId, + }) + ); + return; + } + + if (response && response.success && response.url) { + console.log( + "Chrome Extension: Got URL from background:", + response.url + ); + ws.send( + JSON.stringify({ + type: "current-url-response", + url: response.url, + tabId: chrome.devtools.inspectedWindow.tabId, + requestId: message.requestId, + }) + ); + } else { + console.error( + "Chrome Extension: Invalid URL response from background:", + response + ); + + // Last resort - try to get URL directly from the tab + chrome.tabs.query( + { active: true, currentWindow: true }, + (tabs) => { + const url = tabs && tabs[0] && tabs[0].url; + console.log( + "Chrome Extension: Got URL directly from tab:", + url + ); + + ws.send( + JSON.stringify({ + type: "current-url-response", + url: url || null, + tabId: chrome.devtools.inspectedWindow.tabId, + error: + response?.error || + "Failed to get URL from background", + requestId: message.requestId, + }) + ); + } + ); + } + } + ); + }; + + requestCurrentUrl(); + } + } catch (error) { + console.error( + "Chrome Extension: Error processing WebSocket message:", + error + ); + } + }; + } catch (error) { + console.error("Error creating WebSocket:", error); + // Try again after delay + wsReconnectTimeout = setTimeout(setupWebSocket, WS_RECONNECT_DELAY); + } } // Initialize WebSocket connection when DevTools opens diff --git a/chrome-extension/manifest.json b/chrome-extension/manifest.json index 7979203..4b94126 100644 --- a/chrome-extension/manifest.json +++ b/chrome-extension/manifest.json @@ -1,6 +1,6 @@ { "name": "BrowserTools MCP", - "version": "1.1.0", + "version": "1.2.0", "description": "MCP tool for AI code editors to capture data from a browser such as console logs, network requests, screenshots and more", "manifest_version": 3, "devtools_page": "devtools.html", diff --git a/chrome-extension/panel.html b/chrome-extension/panel.html index f4dbb4a..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 @@

Quick Actions

Wipe All Logs +
+ +
@@ -133,6 +142,30 @@

Screenshot Settings

+
+

Server Connection Settings

+
+ + +
+
+ + +
+
+ + +
+ +
+

Advanced Settings

diff --git a/chrome-extension/panel.js b/chrome-extension/panel.js index 0cc2326..528df11 100644 --- a/chrome-extension/panel.js +++ b/chrome-extension/panel.js @@ -7,16 +7,303 @@ let settings = { showResponseHeaders: false, maxLogSize: 20000, screenshotPath: "", + // Add server connection settings + serverHost: "localhost", + serverPort: 3025, + allowAutoPaste: false, // Default auto-paste setting }; +// Track connection status +let serverConnected = false; +let reconnectAttemptTimeout = null; +// Add a flag to track ongoing discovery operations +let isDiscoveryInProgress = false; +// Add an AbortController to cancel fetch operations +let discoveryController = null; + // Load saved settings on startup chrome.storage.local.get(["browserConnectorSettings"], (result) => { if (result.browserConnectorSettings) { settings = { ...settings, ...result.browserConnectorSettings }; updateUIFromSettings(); } + + // Create connection status banner at the top + createConnectionBanner(); + + // Automatically discover server on panel load with quiet mode enabled + discoverServer(true); }); +// Add listener for connection status updates from background script (page refresh events) +chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { + if (message.type === "CONNECTION_STATUS_UPDATE") { + console.log( + `Received connection status update: ${ + message.isConnected ? "Connected" : "Disconnected" + }` + ); + + // Update UI based on connection status + if (message.isConnected) { + // If already connected, just maintain the current state + if (!serverConnected) { + // Connection was re-established, update UI + serverConnected = true; + updateConnectionBanner(true, { + name: "Browser Tools Server", + version: "reconnected", + host: settings.serverHost, + port: settings.serverPort, + }); + } + } else { + // Connection lost, update UI to show disconnected + serverConnected = false; + updateConnectionBanner(false, null); + } + } + + if (message.type === "INITIATE_AUTO_DISCOVERY") { + console.log( + `Initiating auto-discovery after page refresh (reason: ${message.reason})` + ); + + // For page refreshes or if forceRestart is set to true, always cancel any ongoing discovery and restart + if (message.reason === "page_refresh" || message.forceRestart === true) { + // Cancel any ongoing discovery operation + cancelOngoingDiscovery(); + + // Update UI to indicate we're starting a fresh scan + if (connectionStatusDiv) { + connectionStatusDiv.style.display = "block"; + if (statusIcon) statusIcon.className = "status-indicator"; + if (statusText) + statusText.textContent = + "Page refreshed. Restarting server discovery..."; + } + + // Always update the connection banner when a page refresh occurs + updateConnectionBanner(false, null); + + // Start a new discovery process with quiet mode + console.log("Starting fresh discovery after page refresh"); + discoverServer(true); + } + // For other types of auto-discovery requests, only start if not already in progress + else if (!isDiscoveryInProgress) { + // Use quiet mode for auto-discovery to minimize UI changes + discoverServer(true); + } + } + + // Handle successful server validation + if (message.type === "SERVER_VALIDATION_SUCCESS") { + console.log( + `Server validation successful: ${message.serverHost}:${message.serverPort}` + ); + + // Update the connection status banner + serverConnected = true; + updateConnectionBanner(true, message.serverInfo); + + // If we were showing the connection status dialog, we can hide it now + if (connectionStatusDiv && connectionStatusDiv.style.display === "block") { + connectionStatusDiv.style.display = "none"; + } + } + + // Handle failed server validation + if (message.type === "SERVER_VALIDATION_FAILED") { + console.log( + `Server validation failed: ${message.reason} - ${message.serverHost}:${message.serverPort}` + ); + + // Update the connection status + serverConnected = false; + updateConnectionBanner(false, null); + + // Start auto-discovery if this was a page refresh validation + if ( + message.reason === "connection_error" || + message.reason === "http_error" + ) { + // If we're not already trying to discover the server, start the process + if (!isDiscoveryInProgress) { + console.log("Starting auto-discovery after validation failure"); + discoverServer(true); + } + } + } + + // Handle successful WebSocket connection + if (message.type === "WEBSOCKET_CONNECTED") { + console.log( + `WebSocket connected to ${message.serverHost}:${message.serverPort}` + ); + + // Update connection status if it wasn't already connected + if (!serverConnected) { + serverConnected = true; + updateConnectionBanner(true, { + name: "Browser Tools Server", + version: "connected via WebSocket", + host: message.serverHost, + port: message.serverPort, + }); + } + } +}); + +// Create connection status banner +function createConnectionBanner() { + // Check if banner already exists + if (document.getElementById("connection-banner")) { + return; + } + + // Create the banner + const banner = document.createElement("div"); + banner.id = "connection-banner"; + banner.style.cssText = ` + padding: 6px 0px; + margin-bottom: 4px; + width: 40%; + display: flex; + flex-direction: column; + align-items: flex-start; + background-color:rgba(0,0,0,0); + border-radius: 11px; + font-size: 11px; + font-weight: 500; + color: #ffffff; + `; + + // Create reconnect button (now placed at the top) + const reconnectButton = document.createElement("button"); + reconnectButton.id = "banner-reconnect-btn"; + reconnectButton.textContent = "Reconnect"; + reconnectButton.style.cssText = ` + background-color: #333333; + color: #ffffff; + border: 1px solid #444444; + border-radius: 3px; + padding: 2px 8px; + font-size: 10px; + cursor: pointer; + margin-bottom: 6px; + align-self: flex-start; + display: none; + transition: background-color 0.2s; + `; + reconnectButton.addEventListener("mouseover", () => { + reconnectButton.style.backgroundColor = "#444444"; + }); + reconnectButton.addEventListener("mouseout", () => { + reconnectButton.style.backgroundColor = "#333333"; + }); + reconnectButton.addEventListener("click", () => { + // Hide the button while reconnecting + reconnectButton.style.display = "none"; + reconnectButton.textContent = "Reconnecting..."; + + // Update UI to show searching state + updateConnectionBanner(false, null); + + // Try to discover server + discoverServer(false); + }); + + // Create a container for the status indicator and text + const statusContainer = document.createElement("div"); + statusContainer.style.cssText = ` + display: flex; + align-items: center; + width: 100%; + `; + + // Create status indicator + const indicator = document.createElement("div"); + indicator.id = "banner-status-indicator"; + indicator.style.cssText = ` + width: 6px; + height: 6px; + position: relative; + top: 1px; + border-radius: 50%; + background-color: #ccc; + margin-right: 8px; + flex-shrink: 0; + transition: background-color 0.3s ease; + `; + + // Create status text + const statusText = document.createElement("div"); + statusText.id = "banner-status-text"; + statusText.textContent = "Searching for server..."; + statusText.style.cssText = + "flex-grow: 1; font-weight: 400; letter-spacing: 0.1px; font-size: 11px;"; + + // Add elements to statusContainer + statusContainer.appendChild(indicator); + statusContainer.appendChild(statusText); + + // Add elements to banner - reconnect button first, then status container + banner.appendChild(reconnectButton); + banner.appendChild(statusContainer); + + // Add banner to the beginning of the document body + // This ensures it's the very first element + document.body.prepend(banner); + + // Set initial state + updateConnectionBanner(false, null); +} + +// Update the connection banner with current status +function updateConnectionBanner(connected, serverInfo) { + const indicator = document.getElementById("banner-status-indicator"); + const statusText = document.getElementById("banner-status-text"); + const banner = document.getElementById("connection-banner"); + const reconnectButton = document.getElementById("banner-reconnect-btn"); + + if (!indicator || !statusText || !banner || !reconnectButton) return; + + if (connected && serverInfo) { + // Connected state with server info + indicator.style.backgroundColor = "#4CAF50"; // Green indicator + statusText.style.color = "#ffffff"; // White text for contrast on black + statusText.textContent = `Connected to ${serverInfo.name} v${serverInfo.version} at ${settings.serverHost}:${settings.serverPort}`; + + // Hide reconnect button when connected + reconnectButton.style.display = "none"; + } else if (connected) { + // Connected without server info + indicator.style.backgroundColor = "#4CAF50"; // Green indicator + statusText.style.color = "#ffffff"; // White text for contrast on black + statusText.textContent = `Connected to server at ${settings.serverHost}:${settings.serverPort}`; + + // Hide reconnect button when connected + reconnectButton.style.display = "none"; + } else { + // Disconnected state + indicator.style.backgroundColor = "#F44336"; // Red indicator + statusText.style.color = "#ffffff"; // White text for contrast on black + + // Only show "searching" message if discovery is in progress + if (isDiscoveryInProgress) { + statusText.textContent = "Not connected to server. Searching..."; + // Hide reconnect button while actively searching + reconnectButton.style.display = "none"; + } else { + statusText.textContent = "Not connected to server."; + // Show reconnect button above status message when disconnected and not searching + reconnectButton.style.display = "block"; + reconnectButton.textContent = "Reconnect"; + } + } +} + // Initialize UI elements const logLimitInput = document.getElementById("log-limit"); const queryLimitInput = document.getElementById("query-limit"); @@ -31,6 +318,15 @@ const maxLogSizeInput = document.getElementById("max-log-size"); const screenshotPathInput = document.getElementById("screenshot-path"); const captureScreenshotButton = document.getElementById("capture-screenshot"); +// Server connection UI elements +const serverHostInput = document.getElementById("server-host"); +const serverPortInput = document.getElementById("server-port"); +const discoverServerButton = document.getElementById("discover-server"); +const testConnectionButton = document.getElementById("test-connection"); +const connectionStatusDiv = document.getElementById("connection-status"); +const statusIcon = document.getElementById("status-icon"); +const statusText = document.getElementById("status-text"); + // Initialize collapsible advanced settings const advancedSettingsHeader = document.getElementById( "advanced-settings-header" @@ -45,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; @@ -54,6 +353,9 @@ function updateUIFromSettings() { showResponseHeadersCheckbox.checked = settings.showResponseHeaders; maxLogSizeInput.value = settings.maxLogSize; screenshotPathInput.value = settings.screenshotPath; + serverHostInput.value = settings.serverHost; + serverPortInput.value = settings.serverPort; + allowAutoPasteCheckbox.checked = settings.allowAutoPaste; } // Save settings @@ -102,37 +404,562 @@ screenshotPathInput.addEventListener("change", (e) => { saveSettings(); }); -// Update screenshot capture functionality +// Add event listeners for server settings +serverHostInput.addEventListener("change", (e) => { + settings.serverHost = e.target.value; + saveSettings(); + // Automatically test connection when host is changed + testConnection(settings.serverHost, settings.serverPort); +}); + +serverPortInput.addEventListener("change", (e) => { + settings.serverPort = parseInt(e.target.value, 10); + saveSettings(); + // Automatically test connection when port is changed + 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) { + console.log("Cancelling ongoing discovery operation"); + + // Abort any fetch requests in progress + if (discoveryController) { + try { + discoveryController.abort(); + } catch (error) { + console.error("Error aborting discovery controller:", error); + } + discoveryController = null; + } + + // Reset the discovery status + isDiscoveryInProgress = false; + + // Update UI to indicate the operation was cancelled + if ( + statusText && + connectionStatusDiv && + connectionStatusDiv.style.display === "block" + ) { + statusText.textContent = "Server discovery operation cancelled"; + } + + // Clear any pending network timeouts that might be part of the discovery process + clearTimeout(reconnectAttemptTimeout); + reconnectAttemptTimeout = null; + + console.log("Discovery operation cancelled successfully"); + } +} + +// Test server connection +testConnectionButton.addEventListener("click", async () => { + // Cancel any ongoing discovery operations before testing + cancelOngoingDiscovery(); + await testConnection(settings.serverHost, settings.serverPort); +}); + +// Function to test server connection +async function testConnection(host, port) { + // Cancel any ongoing discovery operations + cancelOngoingDiscovery(); + + connectionStatusDiv.style.display = "block"; + statusIcon.className = "status-indicator"; + statusText.textContent = "Testing connection..."; + + try { + // Use the identity endpoint instead of .port for more reliable validation + const response = await fetch(`http://${host}:${port}/.identity`, { + signal: AbortSignal.timeout(5000), // 5 second timeout + }); + + if (response.ok) { + const identity = await response.json(); + + // Verify this is actually our server by checking the signature + if (identity.signature !== "mcp-browser-connector-24x7") { + statusIcon.className = "status-indicator status-disconnected"; + statusText.textContent = `Connection failed: Found a server at ${host}:${port} but it's not the Browser Tools server`; + serverConnected = false; + updateConnectionBanner(false, null); + scheduleReconnectAttempt(); + return false; + } + + statusIcon.className = "status-indicator status-connected"; + statusText.textContent = `Connected successfully to ${identity.name} v${identity.version} at ${host}:${port}`; + serverConnected = true; + updateConnectionBanner(true, identity); + + // Clear any scheduled reconnect attempts + if (reconnectAttemptTimeout) { + clearTimeout(reconnectAttemptTimeout); + reconnectAttemptTimeout = null; + } + + // Update settings if different port was discovered + if (parseInt(identity.port, 10) !== port) { + console.log(`Detected different port: ${identity.port}`); + settings.serverPort = parseInt(identity.port, 10); + serverPortInput.value = settings.serverPort; + saveSettings(); + } + + return true; + } else { + statusIcon.className = "status-indicator status-disconnected"; + statusText.textContent = `Connection failed: Server returned ${response.status}`; + serverConnected = false; + + // Make sure isDiscoveryInProgress is false so the reconnect button will show + isDiscoveryInProgress = false; + + // Now update the connection banner to show the reconnect button + updateConnectionBanner(false, null); + scheduleReconnectAttempt(); + return false; + } + } catch (error) { + statusIcon.className = "status-indicator status-disconnected"; + statusText.textContent = `Connection failed: ${error.message}`; + serverConnected = false; + + // Make sure isDiscoveryInProgress is false so the reconnect button will show + isDiscoveryInProgress = false; + + // Now update the connection banner to show the reconnect button + updateConnectionBanner(false, null); + scheduleReconnectAttempt(); + return false; + } +} + +// Schedule a reconnect attempt if server isn't found +function scheduleReconnectAttempt() { + // Clear any existing reconnect timeout + if (reconnectAttemptTimeout) { + clearTimeout(reconnectAttemptTimeout); + } + + // Schedule a reconnect attempt in 30 seconds + reconnectAttemptTimeout = setTimeout(() => { + console.log("Attempting to reconnect to server..."); + // Only show minimal UI during auto-reconnect + discoverServer(true); + }, 30000); // 30 seconds +} + +// Helper function to try connecting to a server +async function tryServerConnection(host, port) { + try { + // Check if the discovery process was cancelled + if (!isDiscoveryInProgress) { + return false; + } + + // Create a local timeout that won't abort the entire discovery process + const controller = new AbortController(); + const timeoutId = setTimeout(() => { + controller.abort(); + }, 500); // 500ms timeout for each connection attempt + + try { + // Use identity endpoint for validation + const response = await fetch(`http://${host}:${port}/.identity`, { + // Use a local controller for this specific request timeout + // but also respect the global discovery cancellation + signal: discoveryController + ? AbortSignal.any([controller.signal, discoveryController.signal]) + : controller.signal, + }); + + clearTimeout(timeoutId); + + // Check again if discovery was cancelled during the fetch + if (!isDiscoveryInProgress) { + return false; + } + + if (response.ok) { + const identity = await response.json(); + + // Verify this is actually our server by checking the signature + if (identity.signature !== "mcp-browser-connector-24x7") { + console.log( + `Found a server at ${host}:${port} but it's not the Browser Tools server` + ); + return false; + } + + console.log(`Successfully found server at ${host}:${port}`); + + // Update settings with discovered server + settings.serverHost = host; + settings.serverPort = parseInt(identity.port, 10); + serverHostInput.value = settings.serverHost; + serverPortInput.value = settings.serverPort; + saveSettings(); + + statusIcon.className = "status-indicator status-connected"; + statusText.textContent = `Discovered ${identity.name} v${identity.version} at ${host}:${identity.port}`; + + // Update connection banner with server info + updateConnectionBanner(true, identity); + + // Update connection status + serverConnected = true; + + // Clear any scheduled reconnect attempts + if (reconnectAttemptTimeout) { + clearTimeout(reconnectAttemptTimeout); + reconnectAttemptTimeout = null; + } + + // End the discovery process + isDiscoveryInProgress = false; + + // Successfully found server + return true; + } + + return false; + } finally { + clearTimeout(timeoutId); + } + } catch (error) { + // Ignore connection errors during discovery + // But check if it was an abort (cancellation) + if (error.name === "AbortError") { + // Check if this was due to the global discovery cancellation + if (discoveryController && discoveryController.signal.aborted) { + console.log("Connection attempt aborted by global cancellation"); + return "aborted"; + } + // Otherwise it was just a timeout for this specific connection attempt + return false; + } + console.log(`Connection error for ${host}:${port}: ${error.message}`); + return false; + } +} + +// Server discovery function (extracted to be reusable) +async function discoverServer(quietMode = false) { + // Cancel any ongoing discovery operations before starting a new one + cancelOngoingDiscovery(); + + // Create a new AbortController for this discovery process + discoveryController = new AbortController(); + isDiscoveryInProgress = true; + + // In quiet mode, we don't show the connection status until we either succeed or fail completely + if (!quietMode) { + connectionStatusDiv.style.display = "block"; + statusIcon.className = "status-indicator"; + statusText.textContent = "Discovering server..."; + } + + // Always update the connection banner + updateConnectionBanner(false, null); + + try { + console.log("Starting server discovery process"); + + // Add an early cancellation listener that will respond to page navigation/refresh + discoveryController.signal.addEventListener("abort", () => { + console.log("Discovery aborted via AbortController signal"); + isDiscoveryInProgress = false; + }); + + // Common IPs to try (in order of likelihood) + const hosts = ["localhost", "127.0.0.1"]; + + // Add the current configured host if it's not already in the list + if ( + !hosts.includes(settings.serverHost) && + settings.serverHost !== "0.0.0.0" + ) { + hosts.unshift(settings.serverHost); // Put at the beginning for priority + } + + // Add common local network IPs + const commonLocalIps = ["192.168.0.", "192.168.1.", "10.0.0.", "10.0.1."]; + for (const prefix of commonLocalIps) { + for (let i = 1; i <= 5; i++) { + // Reduced from 10 to 5 for efficiency + hosts.push(`${prefix}${i}`); + } + } + + // Build port list in a smart order: + // 1. Start with current configured port + // 2. Add default port (3025) + // 3. Add sequential ports around the default (for fallback detection) + const ports = []; + + // Current configured port gets highest priority + const configuredPort = parseInt(settings.serverPort, 10); + ports.push(configuredPort); + + // Add default port if it's not the same as configured + if (configuredPort !== 3025) { + ports.push(3025); + } + + // Add sequential fallback ports (from default up to default+10) + for (let p = 3026; p <= 3035; p++) { + if (p !== configuredPort) { + // Avoid duplicates + ports.push(p); + } + } + + // Remove duplicates + const uniquePorts = [...new Set(ports)]; + console.log("Will check ports:", uniquePorts); + + // Create a progress indicator + let progress = 0; + let totalChecked = 0; + + // Phase 1: Try the most likely combinations first (current host:port and localhost variants) + console.log("Starting Phase 1: Quick check of high-priority hosts/ports"); + const priorityHosts = hosts.slice(0, 2); // First two hosts are highest priority + for (const host of priorityHosts) { + // Check if discovery was cancelled + if (!isDiscoveryInProgress) { + console.log("Discovery process was cancelled during Phase 1"); + return false; + } + + // Try configured port first + totalChecked++; + if (!quietMode) { + statusText.textContent = `Checking ${host}:${uniquePorts[0]}...`; + } + console.log(`Checking ${host}:${uniquePorts[0]}...`); + const result = await tryServerConnection(host, uniquePorts[0]); + + // Check for cancellation or success + if (result === "aborted" || !isDiscoveryInProgress) { + console.log("Discovery process was cancelled"); + return false; + } else if (result === true) { + console.log("Server found in priority check"); + if (quietMode) { + // In quiet mode, only show the connection banner but hide the status box + connectionStatusDiv.style.display = "none"; + } + return true; // Successfully found server + } + + // Then try default port if different + if (uniquePorts.length > 1) { + // Check if discovery was cancelled + if (!isDiscoveryInProgress) { + console.log("Discovery process was cancelled"); + return false; + } + + totalChecked++; + if (!quietMode) { + statusText.textContent = `Checking ${host}:${uniquePorts[1]}...`; + } + console.log(`Checking ${host}:${uniquePorts[1]}...`); + const result = await tryServerConnection(host, uniquePorts[1]); + + // Check for cancellation or success + if (result === "aborted" || !isDiscoveryInProgress) { + console.log("Discovery process was cancelled"); + return false; + } else if (result === true) { + console.log("Server found in priority check"); + if (quietMode) { + // In quiet mode, only show the connection banner but hide the status box + connectionStatusDiv.style.display = "none"; + } + return true; // Successfully found server + } + } + } + + // If we're in quiet mode and the quick checks failed, show the status now + // as we move into more intensive scanning + if (quietMode) { + connectionStatusDiv.style.display = "block"; + statusIcon.className = "status-indicator"; + statusText.textContent = "Searching for server..."; + } + + // Phase 2: Systematic scan of all combinations + const totalAttempts = hosts.length * uniquePorts.length; + console.log( + `Starting Phase 2: Full scan (${totalAttempts} total combinations)` + ); + statusText.textContent = `Quick check failed. Starting full scan (${totalChecked}/${totalAttempts})...`; + + // First, scan through all ports on localhost/127.0.0.1 to find fallback ports quickly + const localHosts = ["localhost", "127.0.0.1"]; + for (const host of localHosts) { + // Skip the first two ports on localhost if we already checked them in Phase 1 + const portsToCheck = uniquePorts.slice( + localHosts.includes(host) && priorityHosts.includes(host) ? 2 : 0 + ); + + for (const port of portsToCheck) { + // Check if discovery was cancelled + if (!isDiscoveryInProgress) { + console.log("Discovery process was cancelled during local port scan"); + return false; + } + + // Update progress + progress++; + totalChecked++; + statusText.textContent = `Scanning local ports... (${totalChecked}/${totalAttempts}) - Trying ${host}:${port}`; + console.log(`Checking ${host}:${port}...`); + + const result = await tryServerConnection(host, port); + + // Check for cancellation or success + if (result === "aborted" || !isDiscoveryInProgress) { + console.log("Discovery process was cancelled"); + return false; + } else if (result === true) { + console.log(`Server found at ${host}:${port}`); + return true; // Successfully found server + } + } + } + + // Then scan all the remaining host/port combinations + for (const host of hosts) { + // Skip hosts we already checked + if (localHosts.includes(host)) { + continue; + } + + for (const port of uniquePorts) { + // Check if discovery was cancelled + if (!isDiscoveryInProgress) { + console.log("Discovery process was cancelled during remote scan"); + return false; + } + + // Update progress + progress++; + totalChecked++; + statusText.textContent = `Scanning remote hosts... (${totalChecked}/${totalAttempts}) - Trying ${host}:${port}`; + console.log(`Checking ${host}:${port}...`); + + const result = await tryServerConnection(host, port); + + // Check for cancellation or success + if (result === "aborted" || !isDiscoveryInProgress) { + console.log("Discovery process was cancelled"); + return false; + } else if (result === true) { + console.log(`Server found at ${host}:${port}`); + return true; // Successfully found server + } + } + } + + console.log( + `Discovery process completed, checked ${totalChecked} combinations, no server found` + ); + // If we get here, no server was found + statusIcon.className = "status-indicator status-disconnected"; + statusText.textContent = + "No server found. Please check server is running and try again."; + + serverConnected = false; + + // End the discovery process first before updating the banner + isDiscoveryInProgress = false; + + // Update the connection banner to show the reconnect button + updateConnectionBanner(false, null); + + // Schedule a reconnect attempt + scheduleReconnectAttempt(); + + return false; + } catch (error) { + console.error("Error during server discovery:", error); + statusIcon.className = "status-indicator status-disconnected"; + statusText.textContent = `Error discovering server: ${error.message}`; + + serverConnected = false; + + // End the discovery process first before updating the banner + isDiscoveryInProgress = false; + + // Update the connection banner to show the reconnect button + updateConnectionBanner(false, null); + + // Schedule a reconnect attempt + scheduleReconnectAttempt(); + + return false; + } finally { + console.log("Discovery process finished"); + // Always clean up, even if there was an error + if (discoveryController) { + discoveryController = null; + } + } +} + +// Bind discover server button to the extracted function +discoverServerButton.addEventListener("click", () => discoverServer(false)); + +// Screenshot capture functionality captureScreenshotButton.addEventListener("click", () => { captureScreenshotButton.textContent = "Capturing..."; // 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"); - } else if (!response.success) { - captureScreenshotButton.textContent = "Failed to capture!"; - console.error("Screenshot capture failed:", response.error); - } else { - captureScreenshotButton.textContent = `Captured: ${response.title}`; - console.log("Screenshot captured successfully:", response.path); + 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"); + } else if (!response.success) { + captureScreenshotButton.textContent = "Failed to capture!"; + console.error("Screenshot capture failed:", response.error); + } else { + captureScreenshotButton.textContent = `Captured: ${response.title}`; + console.log("Screenshot captured successfully:", response.path); + } + setTimeout(() => { + captureScreenshotButton.textContent = "Capture Screenshot"; + }, 2000); } - setTimeout(() => { - captureScreenshotButton.textContent = "Capture Screenshot"; - }, 2000); - }); + ); }); // Add wipe logs functionality const wipeLogsButton = document.getElementById("wipe-logs"); wipeLogsButton.addEventListener("click", () => { - fetch("http://127.0.0.1:3025/wipelogs", { + const serverUrl = `http://${settings.serverHost}:${settings.serverPort}/wipelogs`; + console.log(`Sending wipe request to ${serverUrl}`); + + fetch(serverUrl, { method: "POST", headers: { "Content-Type": "application/json" }, })