@mcp-b/chrome-devtools-mcp 0.12.0-beta.0 → 1.0.0

package/build/node_modules/chrome-devtools-frontend/mcp/mcp.js

@@ -0,0 +1,35 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+// Instantiating a DevTools universe requires settings from these meta files.
+// Until settings registration is handled differently, the easiest solution is to
+// just import relevant meta files (as long as they don't contain any UI related code)
+import '../front_end/core/sdk/sdk-meta.js';
+import '../front_end/models/workspace/workspace-meta.js';
+import { installInspectorFrontendHost } from '../front_end/core/host/InspectorFrontendHost.js';
+import { McpHostBindings } from './HostBindings.js';
+/**
+ * IMPORTANT! Make sure that any class that is exported here has related unit
+ * tests added to foundation_unittests. See front_end/core/i18n/BUILD.gn as an
+ * example.
+ */
+export * as Common from '../front_end/core/common/common.js';
+export * as I18n from '../front_end/core/i18n/i18n.js';
+export { ConnectionTransport } from '../front_end/core/protocol_client/ConnectionTransport.js';
+export * as ProtocolClient from '../front_end/core/protocol_client/protocol_client.js';
+export { DebuggerModel } from '../front_end/core/sdk/DebuggerModel.js';
+export { Target } from '../front_end/core/sdk/Target.js';
+export { TargetManager } from '../front_end/core/sdk/TargetManager.js';
+export * as Foundation from '../front_end/foundation/foundation.js';
+export { PerformanceInsightFormatter } from '../front_end/models/ai_assistance/data_formatters/PerformanceInsightFormatter.js';
+export { PerformanceTraceFormatter } from '../front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.js';
+export { AgentFocus } from '../front_end/models/ai_assistance/performance/AIContext.js';
+export { DebuggerWorkspaceBinding } from '../front_end/models/bindings/DebuggerWorkspaceBinding.js';
+export { Issue } from '../front_end/models/issues_manager/Issue.js';
+export { AggregatedIssue, IssueAggregator } from '../front_end/models/issues_manager/IssueAggregator.js';
+export { createIssuesFromProtocolIssue, IssuesManager } from '../front_end/models/issues_manager/IssuesManager.js';
+export * as MarkdownIssueDescription from '../front_end/models/issues_manager/MarkdownIssueDescription.js';
+export * as StackTrace from '../front_end/models/stack_trace/stack_trace.js';
+export * as TraceEngine from '../front_end/models/trace/trace.js';
+export * as Marked from '../front_end/third_party/marked/marked.js';
+installInspectorFrontendHost(new McpHostBindings());

package/build/src/McpContext.js

@@ -8,6 +8,7 @@ import os from 'node:os';
 import path from 'node:path';
 import { extractUrlLikeFromDevToolsTitle, urlsEqual } from './DevtoolsUtils.js';
 import { NetworkCollector, ConsoleCollector } from './PageCollector.js';
+import { WEB_MCP_BRIDGE_SCRIPT } from './transports/WebMCPBridgeScript.js';
 import { Locator } from './third_party/index.js';
 import { listPages } from './tools/pages.js';
 import { takeSnapshot } from './tools/snapshot.js';
@@ -91,6 +92,47 @@ export class McpContext {
         const pages = await this.createPagesSnapshot();
         await this.#networkCollector.init(pages);
         await this.#consoleCollector.init(pages);
+        // Auto-inject WebMCP bridge into all pages
+        await this.#setupWebMCPAutoInject();
+    }
+    /**
+     * Set up automatic WebMCP bridge injection for all pages.
+     * This injects the bridge script into existing pages and configures
+     * the browser to inject it into all future pages.
+     */
+    async #setupWebMCPAutoInject() {
+        try {
+            // Get browser-level CDP session to inject into all new pages
+            const browserTarget = this.browser.target();
+            const cdpSession = await browserTarget.createCDPSession();
+            // Inject bridge script into all future pages
+            await cdpSession.send('Page.addScriptToEvaluateOnNewDocument', {
+                source: WEB_MCP_BRIDGE_SCRIPT,
+            });
+            this.logger('WebMCP bridge auto-inject configured for new pages');
+            // Inject into existing pages (they won't have the auto-inject yet)
+            for (const page of this.#pages) {
+                try {
+                    // Skip chrome:// and devtools:// pages
+                    const url = page.url();
+                    if (url.startsWith('chrome://') ||
+                        url.startsWith('chrome-extension://') ||
+                        url.startsWith('devtools://') ||
+                        url === 'about:blank') {
+                        continue;
+                    }
+                    await page.evaluate(WEB_MCP_BRIDGE_SCRIPT);
+                }
+                catch {
+                    // Page might not be ready or accessible, ignore
+                }
+            }
+            this.logger('WebMCP bridge injected into existing pages');
+        }
+        catch (err) {
+            // Non-fatal - auto-inject is a convenience feature
+            this.logger('WebMCP auto-inject setup failed:', err);
+        }
     }
     dispose() {
         this.#networkCollector.dispose();

package/build/src/main.js

@@ -12,6 +12,7 @@ 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 { registerPrompts } from './prompts/index.js';
 import { ToolCategory } from './tools/categories.js';
 import { tools } from './tools/tools.js';
 // If moved update release-please config
@@ -25,7 +26,9 @@ const server = new McpServer({
     name: 'chrome_devtools',
     title: 'Chrome DevTools MCP server',
     version: VERSION,
-}, { capabilities: { logging: {} } });
+}, { capabilities: { logging: {}, prompts: {} } });
+// Register WebMCP development prompts
+registerPrompts(server);
 server.server.setRequestHandler(SetLevelRequestSchema, () => {
     return {};
 });

package/build/src/prompts/index.js

@@ -0,0 +1,156 @@
+/**
+ * @license
+ * Copyright 2025 WebMCP Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { zod as z } from '../third_party/index.js';
+/**
+ * Registers MCP prompts for AI-driven development workflows.
+ */
+export function registerPrompts(server) {
+    // WebMCP Development Workflow prompt
+    server.registerPrompt('webmcp-dev-workflow', {
+        title: 'WebMCP Development Workflow',
+        description: 'Guides you through the AI-driven development workflow for building and testing WebMCP tools. ' +
+            'Use this when developing web applications that expose MCP tools.',
+    }, () => {
+        return {
+            messages: [
+                {
+                    role: 'user',
+                    content: {
+                        type: 'text',
+                        text: `You are helping me develop WebMCP tools for my web application. Here's the workflow:
+
+## AI-Driven Tool Development Workflow
+
+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 list_webmcp_tools to see if the tool appears
+5. **Test**: Use call_webmcp_tool to test the tool with sample inputs
+6. **Iterate**: If something is wrong, fix the code and repeat
+
+## Tool Registration Pattern
+
+\`\`\`typescript
+import '@mcp-b/global';
+
+navigator.modelContext.registerTool({
+  name: 'tool_name',
+  description: 'What this tool does',
+  inputSchema: {
+    type: 'object',
+    properties: {
+      param1: { type: 'string', description: 'Parameter description' }
+    },
+    required: ['param1']
+  },
+  async execute(args) {
+    // Implementation
+    return {
+      content: [{ type: 'text', text: JSON.stringify(result) }]
+    };
+  }
+});
+\`\`\`
+
+What would you like to build? Describe the tool you need and I'll help you implement and test it.`,
+                    },
+                },
+            ],
+        };
+    });
+    // Test WebMCP Tool prompt
+    server.registerPrompt('test-webmcp-tool', {
+        title: 'Test WebMCP Tool',
+        description: 'Systematically test a WebMCP tool on the current page. ' +
+            'Discovers available tools and helps you test them with various inputs.',
+        argsSchema: {
+            toolName: z
+                .string()
+                .optional()
+                .describe('Optional: specific tool name to test'),
+            devServerUrl: z
+                .string()
+                .optional()
+                .describe('Optional: URL of your dev server (default: http://localhost:3000)'),
+        },
+    }, args => {
+        const url = args?.devServerUrl || 'http://localhost:3000';
+        const toolNameInstruction = args?.toolName
+            ? `Focus on testing the "${args.toolName}" tool specifically.`
+            : 'List all available tools and help me choose which one to test.';
+        return {
+            messages: [
+                {
+                    role: 'user',
+                    content: {
+                        type: 'text',
+                        text: `Help me test WebMCP tools on my development server.
+
+## Test Plan
+
+1. Navigate to ${url}
+2. Use list_webmcp_tools to discover available tools
+3. ${toolNameInstruction}
+4. Test the tool with various inputs:
+   - Valid inputs (happy path)
+   - Edge cases (empty strings, nulls, etc.)
+   - Invalid inputs (wrong types, missing required fields)
+5. Report the results and any issues found
+
+Please start by navigating to the page and listing the available tools.`,
+                    },
+                },
+            ],
+        };
+    });
+    // Debug WebMCP Connection prompt
+    server.registerPrompt('debug-webmcp', {
+        title: 'Debug WebMCP Connection',
+        description: 'Troubleshoot WebMCP connection issues. ' +
+            'Helps diagnose why tools are not appearing or not working.',
+        argsSchema: {
+            url: z
+                .string()
+                .optional()
+                .describe('URL of the page to debug (default: current page)'),
+        },
+    }, args => {
+        const urlInstruction = args?.url
+            ? `Navigate to ${args.url} first.`
+            : 'Use the current page.';
+        return {
+            messages: [
+                {
+                    role: 'user',
+                    content: {
+                        type: 'text',
+                        text: `Help me debug WebMCP connectivity issues.
+
+${urlInstruction}
+
+## Debugging Steps
+
+1. **Check page load**: Take a snapshot to verify the page loaded correctly
+2. **Check console**: Use list_console_messages to look for:
+   - Errors loading @mcp-b/global
+   - Tool registration errors
+   - Any JavaScript errors
+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
+
+- **"WebMCP not detected"**: The page doesn't have @mcp-b/global loaded
+- **Tools not appearing**: Registration code might not be executing
+- **Connection timeout**: Page might still be loading
+
+Please start the diagnosis.`,
+                    },
+                },
+            ],
+        };
+    });
+}

package/build/src/tools/webmcp.js

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { Client } from '@modelcontextprotocol/sdk/client/index.js';
-import { WebMCPClientTransport, CHECK_WEBMCP_AVAILABLE_SCRIPT, } from '../transports/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';
@@ -14,97 +14,108 @@ import { defineTool } from './ToolDefinition.js';
  */
 let webMCPClient = null;
 let webMCPTransport = null;
+let connectedPageUrl = null;
 /**
- * Connect to MCP tools registered on the current webpage via WebMCP.
- *
- * This tool injects a bridge into the page that connects to the page's
- * TabServerTransport, enabling access to tools registered with @mcp-b/global.
+ * 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.
  */
-export const connectWebMCP = defineTool({
-    name: 'connect_webmcp',
-    description: 'Connect to MCP tools registered on the current webpage via WebMCP. ' +
-        'This enables calling tools that the website has exposed through the Web Model Context API. ' +
-        'The page must have @mcp-b/global loaded.',
-    annotations: {
-        title: 'Connect to Website MCP Tools',
-        category: ToolCategory.WEBMCP,
-        readOnlyHint: true,
-    },
-    schema: {},
-    handler: async (_request, response, context) => {
-        const page = context.getSelectedPage();
-        // Check if already connected
-        if (webMCPClient) {
-            response.appendResponseLine('Already connected to WebMCP. Use disconnect_webmcp first to reconnect.');
-            return;
-        }
-        // Check if WebMCP is available on the page
-        let hasWebMCP = false;
-        try {
-            const result = (await page.evaluate(CHECK_WEBMCP_AVAILABLE_SCRIPT));
-            hasWebMCP = result.available;
-        }
-        catch {
-            hasWebMCP = false;
-        }
-        if (!hasWebMCP) {
-            response.appendResponseLine('WebMCP not detected on this page.');
-            response.appendResponseLine('');
-            response.appendResponseLine('To use website tools, the page needs @mcp-b/global loaded.');
-            response.appendResponseLine('Add to your page:');
-            response.appendResponseLine('  <script type="module" src="https://unpkg.com/@mcp-b/global"></script>');
-            return;
-        }
-        try {
-            // Create transport and client
-            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: {} });
-            await client.connect(transport);
-            // Store for later use
-            webMCPTransport = transport;
-            webMCPClient = client;
-            // List available tools
-            const { tools } = await client.listTools();
-            response.appendResponseLine('Connected to WebMCP server');
-            response.appendResponseLine('');
-            response.appendResponseLine(`Found ${tools.length} tool(s):`);
-            if (tools.length === 0) {
-                response.appendResponseLine('  (no tools registered yet)');
+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();
             }
-            else {
-                for (const tool of tools) {
-                    response.appendResponseLine(`  - ${tool.name}`);
-                    if (tool.description) {
-                        response.appendResponseLine(`    ${tool.description}`);
-                    }
-                }
+            // 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 (err) {
-            response.appendResponseLine(`Failed to connect: ${err instanceof Error ? err.message : String(err)}`);
+        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: {} });
+        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 connected webpage.
+ * List all MCP tools available on the current 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 connected webpage. ' +
-        'Run connect_webmcp first to establish a connection.',
+    description: 'List all MCP tools available on the current webpage. ' +
+        'Automatically connects to WebMCP if the page has @mcp-b/global loaded.',
     annotations: {
         title: 'List Website MCP Tools',
         category: ToolCategory.WEBMCP,
         readOnlyHint: true,
     },
     schema: {},
-    handler: async (_request, response, _context) => {
-        if (!webMCPClient) {
-            response.appendResponseLine('Not connected to WebMCP. Run connect_webmcp first.');
+    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.');
             return;
         }
         try {
@@ -136,10 +147,12 @@ export const listWebMCPTools = defineTool({
 });
 /**
  * Call a tool registered on the 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. ' +
+        'Automatically connects if the page has @mcp-b/global loaded. ' +
         'Use list_webmcp_tools to see available tools and their schemas.',
     annotations: {
         title: 'Call Website MCP Tool',
@@ -153,9 +166,11 @@ export const callWebMCPTool = defineTool({
             .optional()
             .describe('Arguments to pass to the tool as a JSON object'),
     },
-    handler: async (request, response, _context) => {
-        if (!webMCPClient) {
-            response.appendResponseLine('Not connected to WebMCP. Run connect_webmcp first.');
+    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.');
             return;
         }
         const { name, arguments: args } = request.params;
@@ -200,34 +215,3 @@ export const callWebMCPTool = defineTool({
         }
     },
 });
-/**
- * Disconnect from the WebMCP server on the current page.
- */
-export const disconnectWebMCP = defineTool({
-    name: 'disconnect_webmcp',
-    description: 'Disconnect from the WebMCP server on the current page.',
-    annotations: {
-        title: 'Disconnect from Website MCP',
-        category: ToolCategory.WEBMCP,
-        readOnlyHint: true,
-    },
-    schema: {},
-    handler: async (_request, response, _context) => {
-        if (!webMCPClient) {
-            response.appendResponseLine('Not connected to WebMCP.');
-            return;
-        }
-        try {
-            await webMCPClient.close();
-            webMCPClient = null;
-            webMCPTransport = null;
-            response.appendResponseLine('Disconnected from WebMCP.');
-        }
-        catch (err) {
-            response.appendResponseLine(`Error disconnecting: ${err instanceof Error ? err.message : String(err)}`);
-            // Clear anyway
-            webMCPClient = null;
-            webMCPTransport = null;
-        }
-    },
-});

package/build/src/transports/WebMCPBridgeScript.js

@@ -36,19 +36,16 @@ export const WEB_MCP_BRIDGE_SCRIPT = `
   'use strict';
 
   var CHANNEL_ID = 'mcp-default';
-  var BRIDGE_VERSION = '1.0.0';
+  var BRIDGE_VERSION = '1.1.0';
 
   // Prevent double injection
   if (window.__mcpBridge && window.__mcpBridge.version === BRIDGE_VERSION) {
-    console.log('[WebMCP Bridge] Already injected (v' + BRIDGE_VERSION + '), skipping');
     return { alreadyInjected: true };
   }
 
-  console.log('[WebMCP Bridge] Initializing CDP <-> TabServer bridge v' + BRIDGE_VERSION);
-
   // Track if we've seen the server ready signal
   var serverReady = false;
-  var pendingMessages = [];
+  var webMCPDetected = false;
 
   // Listen for messages FROM TabServerTransport (server-to-client direction)
   // These are responses and notifications from the MCP server
@@ -66,10 +63,8 @@ export const WEB_MCP_BRIDGE_SCRIPT = `
 
     // Track server ready state
     if (payload === 'mcp-server-ready') {
-      console.log('[WebMCP Bridge] Server ready signal received');
       serverReady = true;
     } else if (payload === 'mcp-server-stopped') {
-      console.log('[WebMCP Bridge] Server stopped signal received');
       serverReady = false;
     }
 
@@ -82,15 +77,30 @@ export const WEB_MCP_BRIDGE_SCRIPT = `
       } catch (err) {
         console.error('[WebMCP Bridge] Failed to forward message to CDP:', err);
       }
-    } else {
-      console.warn('[WebMCP Bridge] CDP binding not available, message dropped');
     }
   }
 
   window.addEventListener('message', handleServerMessage);
 
+  // Check if WebMCP (navigator.modelContext) is available
+  function checkWebMCPAvailable() {
+    if (typeof navigator !== 'undefined' && navigator.modelContext) {
+      webMCPDetected = true;
+      return true;
+    }
+    if (window.__MCP_BRIDGE__) {
+      webMCPDetected = true;
+      return true;
+    }
+    return false;
+  }
+
+  // Initial check
+  checkWebMCPAvailable();
+
   // Expose the bridge API for CDP to call
-  window.__mcpBridge = {
+  Object.defineProperty(window, '__mcpBridge', {
+    value: {
     version: BRIDGE_VERSION,
 
     /**
@@ -126,6 +136,15 @@ export const WEB_MCP_BRIDGE_SCRIPT = `
       return true;
     },
 
+    /**
+     * Check if WebMCP is available on this page
+     * Re-checks each time in case polyfill loaded after bridge injection
+     * @returns {boolean}
+     */
+    hasWebMCP: function() {
+      return checkWebMCPAvailable();
+    },
+
     /**
      * Check if the MCP server has signaled ready
      * @returns {boolean}
@@ -139,7 +158,6 @@ export const WEB_MCP_BRIDGE_SCRIPT = `
      * This triggers the server to respond with 'mcp-server-ready'
      */
     checkReady: function() {
-      console.log('[WebMCP Bridge] Sending check-ready signal');
       window.postMessage({
         channel: CHANNEL_ID,
         type: 'mcp',
@@ -160,15 +178,15 @@ export const WEB_MCP_BRIDGE_SCRIPT = `
      * Clean up the bridge (remove listeners)
      */
     dispose: function() {
-      console.log('[WebMCP Bridge] Disposing');
       window.removeEventListener('message', handleServerMessage);
       delete window.__mcpBridge;
     }
-  };
-
-  console.log('[WebMCP Bridge] Ready - window.__mcpBridge available');
+  },
+  writable: true,
+  configurable: true
+  });
 
-  return { success: true, version: BRIDGE_VERSION };
+  return { success: true, version: BRIDGE_VERSION, webMCPDetected: webMCPDetected };
 })();
 `;
 /**