@mcp-b/chrome-devtools-mcp 1.1.5-beta.0 → 1.2.0-beta.1

package/build/src/McpContext.js

@@ -6,9 +6,11 @@
 import fs from 'node:fs/promises';
 import os from 'node:os';
 import path from 'node:path';
+import { Client } from '@modelcontextprotocol/sdk/client/index.js';
 import { extractUrlLikeFromDevToolsTitle, urlsEqual } from './DevtoolsUtils.js';
 import { NetworkCollector, ConsoleCollector } from './PageCollector.js';
-import { WEB_MCP_BRIDGE_SCRIPT } from './transports/WebMCPBridgeScript.js';
+import { WEB_MCP_BRIDGE_SCRIPT, CHECK_WEBMCP_AVAILABLE_SCRIPT } from './transports/WebMCPBridgeScript.js';
+import { WebMCPClientTransport } from './transports/WebMCPClientTransport.js';
 import { Locator } from './third_party/index.js';
 import { listPages } from './tools/pages.js';
 import { takeSnapshot } from './tools/snapshot.js';
@@ -61,6 +63,7 @@ export class McpContext {
     #traceResults = [];
     #locatorClass;
     #options;
+    #webMCPConnections = new WeakMap();
     constructor(browser, logger, options, locatorClass) {
         this.browser = browser;
         this.logger = logger;
@@ -522,6 +525,81 @@ export class McpContext {
         }
         return locator.wait();
     }
+    /**
+     * Get a WebMCP client for a page, auto-connecting if needed.
+     *
+     * This method handles the full lifecycle of WebMCP connections:
+     * - Maintains separate connections per page (one-to-many relationship)
+     * - Detects stale connections (page reload, navigation)
+     * - Cleans up old connections before creating new ones
+     * - Auto-connects when WebMCP is available on the page
+     *
+     * @param page - Optional page to get client for. Defaults to selected page.
+     */
+    async getWebMCPClient(page) {
+        const targetPage = page ?? this.getSelectedPage();
+        // Check if we have a valid, active connection for this page
+        // We must verify isClosed() to detect page reloads where URL stays the same but frames are invalidated
+        const conn = this.#webMCPConnections.get(targetPage);
+        if (conn && !conn.transport.isClosed()) {
+            return { connected: true, client: conn.client };
+        }
+        // If we have a stale connection, clean up first
+        if (conn) {
+            try {
+                await conn.client.close();
+            }
+            catch {
+                // Ignore close errors
+            }
+            this.#webMCPConnections.delete(targetPage);
+        }
+        // Check if WebMCP is available
+        const hasWebMCP = await this.#checkWebMCPAvailable(targetPage);
+        if (!hasWebMCP) {
+            return { connected: false, error: 'WebMCP not detected on this page' };
+        }
+        // Connect
+        try {
+            const transport = new WebMCPClientTransport({
+                page: targetPage,
+                readyTimeout: 10000,
+                requireWebMCP: false, // We already checked
+            });
+            const client = new Client({ name: 'chrome-devtools-mcp', version: '1.0.0' }, { capabilities: {} });
+            // Set up onclose handler to clean up connection state
+            // This handles page navigations, reloads, and manual disconnections
+            transport.onclose = () => {
+                const currentConn = this.#webMCPConnections.get(targetPage);
+                if (currentConn?.client === client) {
+                    this.#webMCPConnections.delete(targetPage);
+                }
+            };
+            await client.connect(transport);
+            // Store connection for this page
+            this.#webMCPConnections.set(targetPage, { client, transport, page: targetPage });
+            return { connected: true, client };
+        }
+        catch (err) {
+            return {
+                connected: false,
+                error: `Failed to connect: ${err instanceof Error ? err.message : String(err)}`,
+            };
+        }
+    }
+    /**
+     * Check if WebMCP is available on a page by checking the bridge's hasWebMCP() method.
+     * The bridge is auto-injected into all pages, so we just need to check if it detected WebMCP.
+     */
+    async #checkWebMCPAvailable(page) {
+        try {
+            const result = await page.evaluate(CHECK_WEBMCP_AVAILABLE_SCRIPT);
+            return result.available;
+        }
+        catch {
+            return false;
+        }
+    }
     /**
      * We need to ignore favicon request as they make our test flaky
      */

package/build/src/tools/webmcp.js

@@ -3,132 +3,50 @@
  * Copyright 2025 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { Client } from '@modelcontextprotocol/sdk/client/index.js';
-import { WebMCPClientTransport } from '../transports/index.js';
 import { zod } from '../third_party/index.js';
 import { ToolCategory } from './categories.js';
 import { defineTool } from './ToolDefinition.js';
 /**
- * Module-level storage for WebMCP client and transport.
- * Only one connection is maintained at a time per page.
- */
-let webMCPClient = null;
-let webMCPTransport = null;
-let connectedPageUrl = null;
-/**
- * Check if WebMCP is available on a page by checking the bridge's hasWebMCP() method.
- * The bridge is auto-injected into all pages, so we just need to check if it detected WebMCP.
- */
-async function checkWebMCPAvailable(page) {
-    try {
-        // First check if the bridge is injected and can detect WebMCP
-        const result = await page.evaluate(() => {
-            // Check if bridge exists and can detect WebMCP
-            if (typeof window !== 'undefined' &&
-                // @ts-expect-error - bridge is injected
-                typeof window.__mcpBridge?.hasWebMCP === 'function') {
-                // @ts-expect-error - bridge is injected
-                return window.__mcpBridge.hasWebMCP();
-            }
-            // Fallback: direct check
-            // @ts-expect-error - modelContext is a polyfill/experimental API
-            if (typeof navigator !== 'undefined' && navigator.modelContext) {
-                return true;
-            }
-            // @ts-expect-error - internal marker
-            if (window.__MCP_BRIDGE__) {
-                return true;
-            }
-            return false;
-        });
-        return result;
-    }
-    catch {
-        return false;
-    }
-}
-/**
- * Auto-connect to WebMCP on the current page if available.
- * Returns true if connected (or already connected to same page), false otherwise.
- */
-async function ensureWebMCPConnected(context) {
-    const page = context.getSelectedPage();
-    const currentUrl = page.url();
-    // If already connected to the same page, we're good
-    if (webMCPClient && connectedPageUrl === currentUrl) {
-        return { connected: true };
-    }
-    // If connected to a different page, disconnect first
-    if (webMCPClient && connectedPageUrl !== currentUrl) {
-        try {
-            await webMCPClient.close();
-        }
-        catch {
-            // Ignore close errors
-        }
-        webMCPClient = null;
-        webMCPTransport = null;
-        connectedPageUrl = null;
-    }
-    // Check if WebMCP is available
-    const hasWebMCP = await checkWebMCPAvailable(page);
-    if (!hasWebMCP) {
-        return { connected: false, error: 'WebMCP not detected on this page' };
-    }
-    // Connect
-    try {
-        const transport = new WebMCPClientTransport({
-            page,
-            readyTimeout: 10000,
-            requireWebMCP: false, // We already checked
-        });
-        const client = new Client({ name: 'chrome-devtools-mcp', version: '1.0.0' }, { capabilities: {} });
-        // Set up onclose handler to clean up module-level state
-        // This handles page navigations, reloads, and manual disconnections
-        transport.onclose = () => {
-            if (webMCPClient === client) {
-                webMCPClient = null;
-                webMCPTransport = null;
-                connectedPageUrl = null;
-            }
-        };
-        await client.connect(transport);
-        // Store for later use
-        webMCPTransport = transport;
-        webMCPClient = client;
-        connectedPageUrl = currentUrl;
-        return { connected: true };
-    }
-    catch (err) {
-        return {
-            connected: false,
-            error: `Failed to connect: ${err instanceof Error ? err.message : String(err)}`,
-        };
-    }
-}
-/**
- * List all MCP tools available on the current webpage.
+ * List all MCP tools available on a webpage.
  * Auto-connects to WebMCP if not already connected.
  */
 export const listWebMCPTools = defineTool({
     name: 'list_webmcp_tools',
-    description: 'List all MCP tools available on the current webpage. ' +
-        'Automatically connects to WebMCP if the page has @mcp-b/global loaded.',
+    description: 'List all MCP tools available on a webpage. ' +
+        'Automatically connects to WebMCP if the page has @mcp-b/global loaded. ' +
+        'Use page_index to target a specific page (see list_pages for indices).',
     annotations: {
         title: 'List Website MCP Tools',
         category: ToolCategory.WEBMCP,
         readOnlyHint: true,
     },
-    schema: {},
-    handler: async (_request, response, context) => {
-        // Auto-connect if needed
-        const connectResult = await ensureWebMCPConnected(context);
-        if (!connectResult.connected) {
-            response.appendResponseLine(connectResult.error || 'No WebMCP tools available on this page.');
+    schema: {
+        page_index: zod
+            .number()
+            .int()
+            .optional()
+            .describe('Index of the page to list tools from. If not specified, uses the currently selected page. ' +
+            'Use list_pages to see available pages and their indices.'),
+    },
+    handler: async (request, response, context) => {
+        const { page_index } = request.params;
+        // Get the target page
+        const page = page_index !== undefined
+            ? context.getPageByIdx(page_index)
+            : context.getSelectedPage();
+        // Get client from context (handles auto-connect and stale connection detection)
+        const result = await context.getWebMCPClient(page);
+        if (!result.connected) {
+            response.appendResponseLine(result.error || 'No WebMCP tools available on this page.');
             return;
         }
+        const client = result.client;
         try {
-            const { tools } = await webMCPClient.listTools();
+            const { tools } = await client.listTools();
+            if (page_index !== undefined) {
+                response.appendResponseLine(`Page ${page_index}: ${page.url()}`);
+                response.appendResponseLine('');
+            }
             response.appendResponseLine(`${tools.length} tool(s) available:`);
             response.appendResponseLine('');
             for (const tool of tools) {
@@ -155,14 +73,15 @@ export const listWebMCPTools = defineTool({
     },
 });
 /**
- * Call a tool registered on the webpage via WebMCP.
+ * Call a tool registered on a webpage via WebMCP.
  * Auto-connects to WebMCP if not already connected.
  */
 export const callWebMCPTool = defineTool({
     name: 'call_webmcp_tool',
-    description: 'Call a tool registered on the webpage via WebMCP. ' +
+    description: 'Call a tool registered on a webpage via WebMCP. ' +
         'Automatically connects if the page has @mcp-b/global loaded. ' +
-        'Use list_webmcp_tools to see available tools and their schemas.',
+        'Use list_webmcp_tools to see available tools and their schemas. ' +
+        'Use page_index to target a specific page.',
     annotations: {
         title: 'Call Website MCP Tool',
         category: ToolCategory.WEBMCP,
@@ -174,29 +93,43 @@ export const callWebMCPTool = defineTool({
             .record(zod.any())
             .optional()
             .describe('Arguments to pass to the tool as a JSON object'),
+        page_index: zod
+            .number()
+            .int()
+            .optional()
+            .describe('Index of the page to call the tool on. If not specified, uses the currently selected page. ' +
+            'Use list_pages to see available pages and their indices.'),
     },
     handler: async (request, response, context) => {
-        // Auto-connect if needed
-        const connectResult = await ensureWebMCPConnected(context);
-        if (!connectResult.connected) {
-            response.appendResponseLine(connectResult.error || 'No WebMCP tools available on this page.');
+        const { name, arguments: args, page_index } = request.params;
+        // Get the target page
+        const page = page_index !== undefined
+            ? context.getPageByIdx(page_index)
+            : context.getSelectedPage();
+        // Get client from context (handles auto-connect and stale connection detection)
+        const result = await context.getWebMCPClient(page);
+        if (!result.connected) {
+            response.appendResponseLine(result.error || 'No WebMCP tools available on this page.');
             return;
         }
-        const { name, arguments: args } = request.params;
+        const client = result.client;
         try {
+            if (page_index !== undefined) {
+                response.appendResponseLine(`Page ${page_index}: ${page.url()}`);
+            }
             response.appendResponseLine(`Calling tool: ${name}`);
             if (args && Object.keys(args).length > 0) {
                 response.appendResponseLine(`Arguments: ${JSON.stringify(args)}`);
             }
             response.appendResponseLine('');
-            const result = await webMCPClient.callTool({
+            const callResult = await client.callTool({
                 name,
                 arguments: args || {},
             });
             response.appendResponseLine('Result:');
             // Format the result content
-            if (result.content && Array.isArray(result.content)) {
-                for (const content of result.content) {
+            if (callResult.content && Array.isArray(callResult.content)) {
+                for (const content of callResult.content) {
                     if (content.type === 'text') {
                         response.appendResponseLine(content.text);
                     }
@@ -212,9 +145,9 @@ export const callWebMCPTool = defineTool({
                 }
             }
             else {
-                response.appendResponseLine(JSON.stringify(result, null, 2));
+                response.appendResponseLine(JSON.stringify(callResult, null, 2));
             }
-            if (result.isError) {
+            if (callResult.isError) {
                 response.appendResponseLine('');
                 response.appendResponseLine('(Tool returned an error)');
             }

package/build/src/transports/WebMCPClientTransport.js

@@ -54,6 +54,22 @@ export class WebMCPClientTransport {
     onclose;
     onerror;
     onmessage;
+    /**
+     * Check if the transport has been closed.
+     * This is useful for clients to check if they need to reconnect
+     * after a page navigation or reload.
+     */
+    isClosed() {
+        return this._closed;
+    }
+    /**
+     * Get the page this transport is connected to.
+     * This allows callers to verify the transport is connected to the expected page,
+     * which is important when browsers are closed and reopened.
+     */
+    getPage() {
+        return this._page;
+    }
     constructor(options) {
         this._page = options.page;
         this._readyTimeout = options.readyTimeout ?? 10000;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/chrome-devtools-mcp",
-  "version": "1.1.5-beta.0",
+  "version": "1.2.0-beta.1",
   "description": "MCP server for Chrome DevTools with WebMCP integration for connecting to website MCP tools",
   "keywords": [
     "mcp",