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

package/build/src/transports/WebMCPBridgeScript.js

@@ -13,7 +13,7 @@
  * Communication flow:
  *
  * CDP → Page (requests):
- *   1. CDP calls Runtime.evaluate with __mcpBridge.toServer(messageJson)
+ *   1. CDP calls Runtime.evaluate with __mcpCdpBridge.toServer(messageJson)
  *   2. Bridge parses the message and posts it via window.postMessage
  *   3. TabServerTransport receives it and processes the MCP request
  *
@@ -38,8 +38,8 @@ export const WEB_MCP_BRIDGE_SCRIPT = `
   var CHANNEL_ID = 'mcp-default';
   var BRIDGE_VERSION = '1.1.0';
 
-  // Prevent double injection
-  if (window.__mcpBridge && window.__mcpBridge.version === BRIDGE_VERSION) {
+  // Prevent double injection - use __mcpCdpBridge to avoid collision with polyfill's __mcpBridge
+  if (window.__mcpCdpBridge && window.__mcpCdpBridge.version === BRIDGE_VERSION) {
     return { alreadyInjected: true };
   }
 
@@ -68,8 +68,13 @@ export const WEB_MCP_BRIDGE_SCRIPT = `
       serverReady = false;
     }
 
-    // Forward to CDP client via the binding
-    // The binding '__mcpBridgeToClient' is set up by CDPClientTransport before injection
+    // Forward to CDP client via the binding.
+    // NOTE: We use '__mcpBridgeToClient' (not '__mcpCdpBridgeToClient') for the CDP binding
+    // because this name is set up by WebMCPClientTransport.connect() via Runtime.addBinding,
+    // which is separate from the window property '__mcpCdpBridge'. The window property was
+    // renamed to avoid collision with the polyfill's internal '__mcpBridge', but the CDP
+    // binding name doesn't conflict with anything and changing it would require coordinated
+    // updates to both the bridge script and WebMCPClientTransport.
     if (typeof window.__mcpBridgeToClient === 'function') {
       try {
         var messageJson = typeof payload === 'string' ? JSON.stringify(payload) : JSON.stringify(payload);
@@ -99,7 +104,8 @@ export const WEB_MCP_BRIDGE_SCRIPT = `
   checkWebMCPAvailable();
 
   // Expose the bridge API for CDP to call
-  Object.defineProperty(window, '__mcpBridge', {
+  // Use __mcpCdpBridge to avoid collision with polyfill's __mcpBridge
+  Object.defineProperty(window, '__mcpCdpBridge', {
     value: {
     version: BRIDGE_VERSION,
 
@@ -179,7 +185,7 @@ export const WEB_MCP_BRIDGE_SCRIPT = `
      */
     dispose: function() {
       window.removeEventListener('message', handleServerMessage);
-      delete window.__mcpBridge;
+      delete window.__mcpCdpBridge;
     }
   },
   writable: true,

package/build/src/transports/WebMCPClientTransport.js

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { WEB_MCP_BRIDGE_SCRIPT, CHECK_WEBMCP_AVAILABLE_SCRIPT } from './WebMCPBridgeScript.js';
+import { CDP_BRIDGE_WINDOW_PROPERTY, CDP_BRIDGE_BINDING } from './bridgeConstants.js';
 /**
  * MCP Client Transport that connects to a WebMCP server running in a browser tab.
  *
@@ -162,21 +163,29 @@ export class WebMCPClientTransport {
             // Set up binding for receiving messages from the bridge
             // When the bridge calls window.__mcpBridgeToClient(msg), we receive it here
             await this._cdpSession.send('Runtime.addBinding', {
-                name: '__mcpBridgeToClient',
+                name: CDP_BRIDGE_BINDING,
             });
             // Create bound handlers so we can remove them later
             this._bindingCalledHandler = (event) => {
-                if (event.name !== '__mcpBridgeToClient')
+                if (event.name !== CDP_BRIDGE_BINDING)
                     return;
                 // Guard against processing messages after close
                 if (this._closed)
                     return;
+                let payload;
+                try {
+                    payload = JSON.parse(event.payload);
+                }
+                catch (err) {
+                    this.onerror?.(new Error(`Failed to parse JSON message from bridge: ${err instanceof Error ? err.message : String(err)}. ` +
+                        `Raw payload: ${event.payload.substring(0, 200)}`));
+                    return;
+                }
                 try {
-                    const payload = JSON.parse(event.payload);
                     this._handlePayload(payload);
                 }
                 catch (err) {
-                    this.onerror?.(new Error(`Failed to parse message from bridge: ${err}`));
+                    this.onerror?.(new Error(`Failed to handle message from bridge: ${err instanceof Error ? err.message : String(err)}`));
                 }
             };
             this._frameNavigatedHandler = (frame) => {
@@ -196,9 +205,9 @@ export class WebMCPClientTransport {
             }
             this._started = true;
             // Initiate server-ready handshake
-            await this._page.evaluate(() => {
-                window.__mcpBridge?.checkReady();
-            });
+            await this._page.evaluate((bridgeProp) => {
+                window[bridgeProp]?.checkReady();
+            }, CDP_BRIDGE_WINDOW_PROPERTY);
             // Wait for server ready with timeout
             const timeoutPromise = new Promise((_, reject) => {
                 const timer = setTimeout(() => {
@@ -280,8 +289,11 @@ export class WebMCPClientTransport {
             this._serverReadyReject(new Error('Page navigated, connection lost'));
         }
         // Full teardown - detach CDP session and remove listeners
-        this._cleanup().catch(() => {
-            // Ignore cleanup errors during navigation
+        this._cleanup().catch((err) => {
+            // Cleanup errors during navigation are expected and non-critical
+            const message = err instanceof Error ? err.message : String(err);
+            const logFn = console.debug || console.log;
+            logFn('[WebMCPClientTransport] Cleanup error during navigation (non-critical):', message);
         });
         // Signal clean disconnection (not an error)
         this.onclose?.();
@@ -311,8 +323,8 @@ export class WebMCPClientTransport {
         try {
             // JSON.stringify inside try block to catch non-serializable messages
             const messageJson = JSON.stringify(message);
-            await this._page.evaluate((msg) => {
-                const bridge = window.__mcpBridge;
+            await this._page.evaluate((msg, bridgeProp) => {
+                const bridge = window[bridgeProp];
                 if (!bridge) {
                     throw new Error('WebMCP bridge not found');
                 }
@@ -320,7 +332,7 @@ export class WebMCPClientTransport {
                 if (!sent) {
                     throw new Error('Bridge failed to send message');
                 }
-            }, messageJson);
+            }, messageJson, CDP_BRIDGE_WINDOW_PROPERTY);
         }
         catch (err) {
             const error = new Error(`Failed to send message: ${err}`);
@@ -345,20 +357,26 @@ export class WebMCPClientTransport {
         }
         // Dispose the bridge script if possible
         try {
-            await this._page.evaluate(() => {
-                window.__mcpBridge?.dispose();
-            });
+            await this._page.evaluate((bridgeProp) => {
+                window[bridgeProp]?.dispose();
+            }, CDP_BRIDGE_WINDOW_PROPERTY);
         }
-        catch {
-            // Ignore errors during cleanup (page might be closed/navigated)
+        catch (err) {
+            // Cleanup errors during navigation are expected and non-critical
+            const message = err instanceof Error ? err.message : String(err);
+            const logFn = console.debug || console.log;
+            logFn('[WebMCPClientTransport] Bridge dispose skipped:', message);
         }
         // Detach CDP session
         if (this._cdpSession) {
             try {
                 await this._cdpSession.detach();
             }
-            catch {
-                // Ignore detach errors
+            catch (err) {
+                // Expected when session already detached - log for debugging only
+                const message = err instanceof Error ? err.message : String(err);
+                const logFn = console.debug || console.log;
+                logFn('[WebMCPClientTransport] CDP detach skipped:', message);
             }
             this._cdpSession = null;
         }

package/build/src/transports/bridgeConstants.js

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Constants for WebMCP CDP bridge communication.
+ * These names are used to coordinate between the bridge script injected into the page
+ * and the WebMCPClientTransport running in Node.js via CDP.
+ */
+/**
+ * Window property name for the CDP bridge object.
+ * Renamed from `__mcpBridge` to `__mcpCdpBridge` to avoid collision with
+ * the polyfill's internal `__mcpBridge` property.
+ */
+export const CDP_BRIDGE_WINDOW_PROPERTY = '__mcpCdpBridge';
+/**
+ * CDP binding name for receiving messages from the bridge.
+ * This is the function name registered via Runtime.addBinding that the
+ * bridge calls to send messages back to the CDP transport.
+ */
+export const CDP_BRIDGE_BINDING = '__mcpBridgeToClient';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/chrome-devtools-mcp",
-  "version": "1.3.1",
+  "version": "1.5.0",
   "description": "MCP server for Chrome DevTools with WebMCP integration for connecting to website MCP tools",
   "keywords": [
     "mcp",
@@ -47,19 +47,40 @@
     "LICENSE",
     "!*.tsbuildinfo"
   ],
+  "scripts": {
+    "build": "tsc && node --experimental-strip-types --no-warnings=ExperimentalWarning scripts/post-build.ts",
+    "bundle": "npm run clean && npm run build && rollup -c rollup.config.mjs",
+    "check-format": "eslint --cache . && prettier --check --cache .;",
+    "clean": "node -e \"require('fs').rmSync('build', {recursive: true, force: true})\"",
+    "docs": "npm run build && npm run docs:generate && npm run format",
+    "docs:generate": "node --experimental-strip-types scripts/generate-docs.ts",
+    "format": "eslint --cache --fix . && prettier --write --cache .",
+    "prepare": "node --experimental-strip-types scripts/prepare.ts",
+    "start": "npm run build && node build/src/index.js",
+    "start-debug": "DEBUG=mcp:* DEBUG_COLORS=false npm run build && node build/src/index.js",
+    "test": "npm run build && node --require ./build/tests/setup.js --no-warnings=ExperimentalWarning --test-reporter spec --test-force-exit --test \"build/tests/**/*.test.js\"",
+    "test:node20": "node --require ./build/tests/setup.js --test-reporter spec --test-force-exit --test build/tests",
+    "test:only": "npm run build && node --require ./build/tests/setup.js --no-warnings=ExperimentalWarning --test-reporter spec --test-force-exit --test --test-only \"build/tests/**/*.test.js\"",
+    "test:only:no-build": "node --require ./build/tests/setup.js --no-warnings=ExperimentalWarning --test-reporter spec --test-force-exit --test --test-only \"build/tests/**/*.test.js\"",
+    "test:update-snapshots": "npm run build && node --require ./build/tests/setup.js --no-warnings=ExperimentalWarning --test-force-exit --test --test-update-snapshots \"build/tests/**/*.test.js\"",
+    "typecheck": "tsc --noEmit",
+    "verify-server-json-version": "node --experimental-strip-types scripts/verify-server-json-version.ts"
+  },
   "dependencies": {
-    "@composio/json-schema-to-zod": "^0.1.17",
-    "@modelcontextprotocol/sdk": "1.24.1",
+    "@composio/json-schema-to-zod": "catalog:",
+    "@mcp-b/global": "workspace:*",
+    "@modelcontextprotocol/sdk": "catalog:",
     "core-js": "3.47.0",
     "debug": "4.4.3",
+    "esbuild": "^0.24.2",
     "puppeteer": "24.32.0",
     "puppeteer-core": "24.32.0",
     "yargs": "18.0.0",
-    "zod": "3.25.76"
+    "zod": "catalog:"
   },
   "devDependencies": {
     "@eslint/js": "^9.35.0",
-    "@modelcontextprotocol/sdk": "1.24.1",
+    "@modelcontextprotocol/sdk": "catalog:",
     "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
@@ -88,7 +109,7 @@
     "typescript": "^5.9.2",
     "typescript-eslint": "^8.43.0",
     "yargs": "18.0.0",
-    "zod": "3.25.76"
+    "zod": "catalog:"
   },
   "engines": {
     "node": "^20.19.0 || ^22.12.0 || >=23"
@@ -100,23 +121,5 @@
   "upstream": {
     "repository": "https://github.com/ChromeDevTools/chrome-devtools-mcp",
     "mcpName": "io.github.ChromeDevTools/chrome-devtools-mcp"
-  },
-  "scripts": {
-    "build": "tsc && node --experimental-strip-types --no-warnings=ExperimentalWarning scripts/post-build.ts",
-    "bundle": "npm run clean && npm run build && rollup -c rollup.config.mjs",
-    "check-format": "eslint --cache . && prettier --check --cache .;",
-    "clean": "node -e \"require('fs').rmSync('build', {recursive: true, force: true})\"",
-    "docs": "npm run build && npm run docs:generate && npm run format",
-    "docs:generate": "node --experimental-strip-types scripts/generate-docs.ts",
-    "format": "eslint --cache --fix . && prettier --write --cache .",
-    "start": "npm run build && node build/src/index.js",
-    "start-debug": "DEBUG=mcp:* DEBUG_COLORS=false npm run build && node build/src/index.js",
-    "test": "npm run build && node --require ./build/tests/setup.js --no-warnings=ExperimentalWarning --test-reporter spec --test-force-exit --test \"build/tests/**/*.test.js\"",
-    "test:node20": "node --require ./build/tests/setup.js --test-reporter spec --test-force-exit --test build/tests",
-    "test:only": "npm run build && node --require ./build/tests/setup.js --no-warnings=ExperimentalWarning --test-reporter spec --test-force-exit --test --test-only \"build/tests/**/*.test.js\"",
-    "test:only:no-build": "node --require ./build/tests/setup.js --no-warnings=ExperimentalWarning --test-reporter spec --test-force-exit --test --test-only \"build/tests/**/*.test.js\"",
-    "test:update-snapshots": "npm run build && node --require ./build/tests/setup.js --no-warnings=ExperimentalWarning --test-force-exit --test --test-update-snapshots \"build/tests/**/*.test.js\"",
-    "typecheck": "tsc --noEmit",
-    "verify-server-json-version": "node --experimental-strip-types scripts/verify-server-json-version.ts"
   }
-}
+}