@mcp-b/chrome-devtools-mcp 1.3.1 → 1.5.0

package/README.md

@@ -123,7 +123,7 @@ The AI can see the actual response, fix any bugs, and repeat until it works perf
 This creates a tight feedback loop where your AI assistant can:
 - **Write** WebMCP tools in your codebase
 - **Deploy** them automatically via hot-reload
-- **Discover** them through `diff_webmcp_tools`
+- **Discover** them through `list_webmcp_tools`
 - **Test** them by calling tools directly by their prefixed names (e.g., `webmcp_localhost_3000_page0_search_products`)
 - **Debug** issues using console messages and snapshots
 - **Iterate** until the tool works correctly
@@ -476,7 +476,7 @@ If you run into any issues, checkout our [troubleshooting guide](./docs/troubles
   - [`take_screenshot`](docs/tool-reference.md#take_screenshot)
   - [`take_snapshot`](docs/tool-reference.md#take_snapshot)
 - **Website MCP Tools** (1 tool)
-  - [`diff_webmcp_tools`](docs/tool-reference.md#diff_webmcp_tools) - List available website tools across all pages (with diff)
+  - [`list_webmcp_tools`](docs/tool-reference.md#list_webmcp_tools) - List available website tools across all pages (with diff)
 
 <!-- END AUTO GENERATED TOOLS -->
 
@@ -814,7 +814,7 @@ Navigate to https://example.com/app
 What tools are available on this website?
 ```
 
-The AI agent will use `diff_webmcp_tools` to show you what functionality the
+The AI agent will use `list_webmcp_tools` to show you what functionality the
 website exposes. This automatically connects to the page's WebMCP server.
 
 **3. Use the tools directly**
@@ -840,13 +840,13 @@ By default, WebMCP tools are automatically registered as first-class MCP tools w
 | Claude Code | Yes | Full support for `tools/list_changed` |
 | GitHub Copilot | Yes | Supports list changed notifications |
 | Gemini CLI | Yes | Recently added support |
-| Cursor | No | Use `diff_webmcp_tools` to poll manually |
-| Cline | Partial | May need manual polling with `diff_webmcp_tools` |
-| Continue | Unknown | Use `diff_webmcp_tools` if tools don't appear |
+| Cursor | No | Use `list_webmcp_tools` to poll manually |
+| Cline | Partial | May need manual polling with `list_webmcp_tools` |
+| Continue | Unknown | Use `list_webmcp_tools` if tools don't appear |
 
 **For clients without dynamic tool support:**
 
-If your MCP client doesn't support `tools/list_changed` notifications, use `diff_webmcp_tools` to manually see which tools are available, then call them directly by their prefixed names. The `diff_webmcp_tools` tool is diff-aware to reduce context pollution:
+If your MCP client doesn't support `tools/list_changed` notifications, use `list_webmcp_tools` to manually see which tools are available, then call them directly by their prefixed names. The `list_webmcp_tools` tool is diff-aware to reduce context pollution:
 - First call returns the full tool list
 - Subsequent calls return only added/removed tools
 - Use `full: true` to force the complete list
@@ -872,9 +872,9 @@ Call the website's form submission tool to fill out the contact form
 - **"WebMCP not detected"**: The current webpage doesn't have `@mcp-b/global`
   installed or no tools are registered. The page needs the WebMCP polyfill loaded.
 - **Tool call fails**: Check the tool's input schema matches your parameters.
-  Use `diff_webmcp_tools` to see the expected input format.
+  Use `list_webmcp_tools` to see the expected input format.
 - **Tools not appearing after navigation**: WebMCP auto-reconnects when you
-  navigate. If the new page has different tools, call `diff_webmcp_tools` again.
+  navigate. If the new page has different tools, call `list_webmcp_tools` again.
 
 ## Related Packages
 

package/build/src/McpContext.js

@@ -10,7 +10,7 @@ import { Client } from '@modelcontextprotocol/sdk/client/index.js';
 import { extractUrlLikeFromDevToolsTitle, urlsEqual } from './DevtoolsUtils.js';
 import { ToolListChangedNotificationSchema } from './third_party/index.js';
 import { NetworkCollector, ConsoleCollector } from './PageCollector.js';
-import { WEB_MCP_BRIDGE_SCRIPT, CHECK_WEBMCP_AVAILABLE_SCRIPT } from './transports/WebMCPBridgeScript.js';
+import { WEB_MCP_BRIDGE_SCRIPT } from './transports/WebMCPBridgeScript.js';
 import { WebMCPClientTransport } from './transports/WebMCPClientTransport.js';
 import { Locator } from './third_party/index.js';
 import { listPages } from './tools/pages.js';
@@ -219,11 +219,11 @@ export class McpContext {
                 newUrl === 'about:blank') {
                 return;
             }
-            // Wait a bit for the page to initialize WebMCP
-            // The bridge script runs on DOMContentLoaded, and WebMCP may initialize after that
-            await new Promise(resolve => setTimeout(resolve, 500));
-            // Proactively check for WebMCP and sync tools
-            await this.#proactivelyDetectWebMCP(page);
+            // Immediately try to connect - no polling needed
+            // If no WebMCP, connection will timeout gracefully
+            this.#tryConnectWebMCP(page).catch(err => {
+                this.logger('WebMCP connection attempt failed (expected if page has no WebMCP):', err);
+            });
         };
         page.on('framenavigated', onFrameNavigated);
         // Clean up listener when page closes
@@ -234,33 +234,37 @@ export class McpContext {
         this.logger(`WebMCP auto-detection listener installed for page: ${url}`);
     }
     /**
-     * Proactively detect WebMCP on a page and sync tools if available.
-     * This is called after page navigation to automatically discover WebMCP tools.
+     * Attempt to connect to WebMCP on a page without pre-checking.
+     * Uses the extension's approach: just try to connect, handle failure gracefully.
+     *
+     * This matches the WebMCP extension's behavior:
+     * - No pre-flight detection polling
+     * - Immediate connection attempt
+     * - Graceful handling if no server exists
+     * - Notification-based syncing when tools appear later
+     *
+     * Reference: /WebMCP/apps/extension/entrypoints/content/connection.ts lines 88-118
      */
-    async #proactivelyDetectWebMCP(page) {
+    async #tryConnectWebMCP(page) {
         // Skip if tool hub is not enabled
         if (!this.#toolHub?.isEnabled()) {
             return;
         }
         try {
-            // Check if WebMCP is available on the page
-            const hasWebMCP = await this.#checkWebMCPAvailable(page);
-            if (!hasWebMCP) {
-                this.logger(`No WebMCP detected on page: ${page.url()}`);
-                return;
-            }
-            this.logger(`WebMCP detected on page: ${page.url()}, connecting...`);
-            // Connect and sync tools - this handles everything including sending list_changed
+            // Immediately try to get/create WebMCP client
+            // Transport is configured with requireWebMCP: false and 30s timeout in getWebMCPClient
             const result = await this.getWebMCPClient(page);
             if (result.connected) {
-                this.logger(`WebMCP tools synced for page: ${page.url()}`);
+                this.logger(`WebMCP connected for page: ${page.url()}`);
             }
             else {
-                this.logger(`Failed to connect to WebMCP: ${result.error}`);
+                // This is normal for pages without WebMCP
+                this.logger(`No WebMCP on page: ${page.url()}`);
             }
         }
         catch (err) {
-            this.logger('Error during proactive WebMCP detection:', err);
+            // Connection timeout or error is expected on pages without WebMCP
+            this.logger(`WebMCP connection failed for ${page.url()} (normal if page has no WebMCP):`, err);
         }
     }
     /**
@@ -270,8 +274,10 @@ export class McpContext {
     async #setupWebMCPAutoDetectionForAllPages() {
         for (const page of this.#pages) {
             this.#setupWebMCPAutoDetection(page);
-            // Also do an initial check for existing pages
-            await this.#proactivelyDetectWebMCP(page);
+            // Try to connect immediately (don't await - run in parallel for all pages)
+            this.#tryConnectWebMCP(page).catch(err => {
+                this.logger('Initial WebMCP connection attempt failed (expected):', err);
+            });
         }
     }
     /**
@@ -358,6 +364,33 @@ export class McpContext {
         this.#setupWebMCPAutoDetection(page);
         return page;
     }
+    async newWindow() {
+        // Use CDP to create a new browser window instead of just a tab
+        const browserTarget = this.browser.target();
+        const cdpSession = await browserTarget.createCDPSession();
+        // Create a new target with newWindow: true
+        const { targetId } = await cdpSession.send('Target.createTarget', {
+            url: 'about:blank',
+            newWindow: true,
+        });
+        await cdpSession.detach();
+        // Wait for the new page to be available
+        const target = await this.browser.waitForTarget(target => {
+            // @ts-expect-error _targetId is internal but stable
+            return target._targetId === targetId;
+        }, { timeout: 5000 });
+        const page = await target.page();
+        if (!page) {
+            throw new Error('Failed to get page from new window target');
+        }
+        await this.createPagesSnapshot();
+        this.selectPage(page);
+        this.#networkCollector.addPage(page);
+        this.#consoleCollector.addPage(page);
+        // Set up WebMCP auto-detection for the new page
+        this.#setupWebMCPAutoDetection(page);
+        return page;
+    }
     async closePage(pageIdx) {
         if (this.#pages.length === 1) {
             throw new Error(CLOSE_PAGE_ERROR);
@@ -547,7 +580,7 @@ export class McpContext {
         }
     }
     getPages() {
-        return this.#pages;
+        return [...this.#pages];
     }
     getDevToolsPage(page) {
         return this.#pageToDevToolsPage.get(page);
@@ -716,17 +749,12 @@ export class McpContext {
             }
             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
+        // Connect - no pre-checking needed (extension approach)
         try {
             const transport = new WebMCPClientTransport({
                 page: targetPage,
-                readyTimeout: 10000,
-                requireWebMCP: false, // We already checked
+                readyTimeout: 30000, // 30s to handle slow React apps (up from 10s)
+                requireWebMCP: false, // Don't pre-check, just try to connect
             });
             const client = new Client({ name: 'chrome-devtools-mcp', version: '1.0.0' }, { capabilities: {} });
             // Set up onclose handler to clean up connection state
@@ -775,19 +803,6 @@ export class McpContext {
             };
         }
     }
-    /**
-     * 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/McpResponse.js

@@ -17,6 +17,7 @@ export class McpResponse {
     #attachedConsoleMessageId;
     #textResponseLines = [];
     #images = [];
+    #isError = false;
     #networkRequestsOptions;
     #consoleDataOptions;
     #devToolsData;
@@ -96,6 +97,12 @@ export class McpResponse {
     appendResponseLine(value) {
         this.#textResponseLines.push(value);
     }
+    setIsError(value) {
+        this.#isError = value;
+    }
+    get isError() {
+        return this.#isError;
+    }
     attachImage(value) {
         this.#images.push(value);
     }

package/build/src/main.js

@@ -12,7 +12,7 @@ import { logger, saveLogsToFile } from './logger.js';
 import { McpContext } from './McpContext.js';
 import { McpResponse } from './McpResponse.js';
 import { Mutex } from './Mutex.js';
-import { McpServer, StdioServerTransport, SetLevelRequestSchema, } from './third_party/index.js';
+import { McpServer, StdioServerTransport, SetLevelRequestSchema, zod, } from './third_party/index.js';
 import { registerPrompts } from './prompts/index.js';
 import { ToolCategory } from './tools/categories.js';
 import { tools } from './tools/tools.js';
@@ -120,6 +120,10 @@ async function getContext() {
             experimentalDevToolsDebugging: devtools,
             experimentalIncludeAllPages: args.experimentalIncludeAllPages,
         });
+        // Always create a new window for this MCP session
+        // This ensures multiple MCP clients don't step on each other's toes
+        await context.newWindow();
+        logger('Created new window for this MCP session');
         // Initialize WebMCP tool hub for dynamic tool registration
         const toolHub = new WebMCPToolHub(server, context);
         context.setToolHub(toolHub);
@@ -164,7 +168,10 @@ function registerTool(tool) {
     }
     server.registerTool(tool.name, {
         description: tool.description,
-        inputSchema: tool.schema,
+        // For call_webmcp_tool, use a fully permissive schema to allow any properties
+        inputSchema: tool.name === 'call_webmcp_tool'
+            ? zod.record(zod.unknown())
+            : zod.object(tool.schema).passthrough(),
         annotations: tool.annotations,
     }, async (params) => {
         const guard = await toolMutex.acquire();
@@ -178,9 +185,13 @@ function registerTool(tool) {
                 params,
             }, response, context);
             const content = await response.handle(tool.name, context);
-            return {
+            const result = {
                 content,
             };
+            if (response.isError) {
+                result.isError = true;
+            }
+            return result;
         }
         catch (err) {
             logger(`${tool.name} error:`, err, err?.stack);

package/build/src/polyfillLoader.js

@@ -0,0 +1,44 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { createRequire } from 'node:module';
+import { readFileSync } from 'node:fs';
+const require = createRequire(import.meta.url);
+let cachedPolyfill = null;
+/**
+ * Load the @mcp-b/global IIFE polyfill code.
+ * This polyfill provides the navigator.modelContext API for pages that don't have WebMCP.
+ * Cached after first load for performance.
+ *
+ * @returns The IIFE JavaScript code as a string
+ * @throws Error if the polyfill file cannot be found or read
+ */
+export function getPolyfillCode() {
+    if (cachedPolyfill) {
+        return cachedPolyfill;
+    }
+    try {
+        // Use Node's module resolution to find the package regardless of
+        // workspace structure or installation method (pnpm, npm, yarn).
+        // Use the package's exported subpath '@mcp-b/global/iife' which resolves
+        // to the IIFE bundle via the exports field in package.json.
+        const polyfillPath = require.resolve('@mcp-b/global/iife');
+        cachedPolyfill = readFileSync(polyfillPath, 'utf-8');
+        return cachedPolyfill;
+    }
+    catch (err) {
+        const message = err instanceof Error ? err.message : String(err);
+        // Provide actionable error message
+        throw new Error(`Could not find @mcp-b/global polyfill: ${message}\n` +
+            'Run `pnpm build` in the global package or ensure @mcp-b/global is installed.');
+    }
+}
+/**
+ * Clear the cached polyfill code, forcing the next getPolyfillCode() call
+ * to reload from disk. Useful for testing or after @mcp-b/global updates.
+ */
+export function clearPolyfillCache() {
+    cachedPolyfill = null;
+}

package/build/src/prompts/index.js

@@ -27,7 +27,7 @@ export function registerPrompts(server) {
 1. **Write the Tool**: I'll ask you to create a WebMCP tool in my codebase using @mcp-b/global
 2. **Hot Reload**: My dev server will automatically reload with the new tool
 3. **Navigate**: Use navigate_page to open my dev server (e.g., http://localhost:3000)
-4. **Discover**: Use diff_webmcp_tools to see registered tools (shown with callable names like webmcp_localhost_3000_page0_my_tool)
+4. **Discover**: Use list_webmcp_tools to see registered tools (shown with callable names like webmcp_localhost_3000_page0_my_tool)
 5. **Test**: Call the tool directly by its prefixed name (e.g., webmcp_localhost_3000_page0_my_tool)
 6. **Iterate**: If something is wrong, fix the code and repeat
 
@@ -92,7 +92,7 @@ What would you like to build? Describe the tool you need and I'll help you imple
 ## Test Plan
 
 1. Navigate to ${url}
-2. Use diff_webmcp_tools to discover registered tools (shown with callable names like webmcp_localhost_3000_page0_tool_name)
+2. Use list_webmcp_tools to discover registered tools (shown with callable names like webmcp_localhost_3000_page0_tool_name)
 3. ${toolNameInstruction}
 4. Call the tool directly by its prefixed name and test with various inputs:
    - Valid inputs (happy path)
@@ -138,7 +138,7 @@ ${urlInstruction}
    - Errors loading @mcp-b/global
    - Tool registration errors
    - Any JavaScript errors
-3. **Test WebMCP**: Try diff_webmcp_tools to see if connection works
+3. **Test WebMCP**: Try list_webmcp_tools to see if connection works
 4. **Verify registration**: If no tools appear, check if the code properly imports '@mcp-b/global' and calls registerTool
 
 ## Common Issues