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

package/build/src/transports/WebMCPClientTransport.js

@@ -43,6 +43,8 @@ export class WebMCPClientTransport {
     _page;
     _cdpSession = null;
     _started = false;
+    /** Guards against concurrent start() calls. */
+    _starting = false;
     _closed = false;
     _readyTimeout;
     _requireWebMCP;
@@ -50,9 +52,17 @@ export class WebMCPClientTransport {
     _serverReadyPromise;
     _serverReadyResolve;
     _serverReadyReject;
-    // Transport callbacks
+    /** Tracks if promise was rejected to prevent double rejection. */
+    _serverReadyRejected = false;
+    /** Bound handler for frame navigation events (stored for cleanup). */
+    _frameNavigatedHandler = null;
+    /** Bound handler for CDP binding calls (stored for cleanup). */
+    _bindingCalledHandler = null;
+    /** Callback invoked when transport is closed. */
     onclose;
+    /** Callback invoked when an error occurs. */
     onerror;
+    /** Callback invoked when a JSON-RPC message is received. */
     onmessage;
     /**
      * Check if the transport has been closed.
@@ -74,21 +84,43 @@ export class WebMCPClientTransport {
         this._page = options.page;
         this._readyTimeout = options.readyTimeout ?? 10000;
         this._requireWebMCP = options.requireWebMCP ?? true;
-        // Set up server ready promise
+        // Set up server ready promise with attached rejection handler
+        // to prevent unhandled rejection if close() is called before start()
         this._serverReadyPromise = new Promise((resolve, reject) => {
             this._serverReadyResolve = resolve;
-            this._serverReadyReject = reject;
+            this._serverReadyReject = (err) => {
+                this._serverReadyRejected = true;
+                reject(err);
+            };
+        });
+        // Attach a no-op catch to prevent unhandled rejection warnings
+        // The actual error will be propagated when the promise is awaited
+        this._serverReadyPromise.catch(() => {
+            // Intentionally empty - errors are handled where the promise is awaited
         });
     }
     /**
-     * Check if WebMCP is available on the page
+     * Check if WebMCP is available on the page.
+     *
+     * Returns `available: false` with an `error` field if the check failed due to
+     * page-level issues (closed, navigating, etc.) vs WebMCP simply not being present.
      */
     async checkWebMCPAvailable() {
         try {
             const result = await this._page.evaluate(CHECK_WEBMCP_AVAILABLE_SCRIPT);
             return result;
         }
-        catch {
+        catch (err) {
+            const message = err instanceof Error ? err.message : String(err);
+            // Distinguish between "page is broken" vs "WebMCP not present"
+            const isPageError = message.includes('Execution context was destroyed') ||
+                message.includes('Target closed') ||
+                message.includes('Session closed') ||
+                message.includes('Protocol error');
+            if (isPageError) {
+                return { available: false, error: `Page error: ${message}` };
+            }
+            // Other errors (e.g., script threw) mean WebMCP is not available
             return { available: false };
         }
     }
@@ -106,76 +138,103 @@ export class WebMCPClientTransport {
         if (this._started) {
             throw new Error('WebMCPClientTransport already started');
         }
+        if (this._starting) {
+            throw new Error('WebMCPClientTransport start already in progress');
+        }
         if (this._closed) {
             throw new Error('WebMCPClientTransport has been closed');
         }
-        // Check if WebMCP is available
-        if (this._requireWebMCP) {
-            const check = await this.checkWebMCPAvailable();
-            if (!check.available) {
-                throw new Error('WebMCP not detected on this page. ' +
-                    'Ensure @mcp-b/global is loaded and initialized.');
+        this._starting = true;
+        try {
+            // Check if WebMCP is available
+            if (this._requireWebMCP) {
+                const check = await this.checkWebMCPAvailable();
+                if (!check.available) {
+                    const errorDetail = check.error ? ` (${check.error})` : '';
+                    throw new Error(`WebMCP not detected on this page${errorDetail}. ` +
+                        'Ensure @mcp-b/global is loaded and initialized.');
+                }
             }
-        }
-        // Create CDP session for this page
-        this._cdpSession = await this._page.createCDPSession();
-        // Enable Runtime domain for bindings and evaluation
-        await this._cdpSession.send('Runtime.enable');
-        // 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',
-        });
-        // Listen for binding calls (messages from bridge → this transport)
-        this._cdpSession.on('Runtime.bindingCalled', event => {
-            if (event.name !== '__mcpBridgeToClient')
-                return;
+            // Create CDP session for this page
+            this._cdpSession = await this._page.createCDPSession();
+            // Enable Runtime domain for bindings and evaluation
+            await this._cdpSession.send('Runtime.enable');
+            // 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',
+            });
+            // Create bound handlers so we can remove them later
+            this._bindingCalledHandler = (event) => {
+                if (event.name !== '__mcpBridgeToClient')
+                    return;
+                // Guard against processing messages after close
+                if (this._closed)
+                    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._frameNavigatedHandler = (frame) => {
+                if (frame === this._page.mainFrame()) {
+                    // Main frame navigated, bridge is gone
+                    this._handleNavigation();
+                }
+            };
+            // Listen for binding calls (messages from bridge → this transport)
+            this._cdpSession.on('Runtime.bindingCalled', this._bindingCalledHandler);
+            // Listen for page navigation to detect when bridge is lost
+            this._page.on('framenavigated', this._frameNavigatedHandler);
+            // Inject the bridge script
+            const result = await this._page.evaluate(WEB_MCP_BRIDGE_SCRIPT);
+            if (!result.success && !result.alreadyInjected) {
+                throw new Error('Failed to inject WebMCP bridge script');
+            }
+            this._started = true;
+            // Initiate server-ready handshake
+            await this._page.evaluate(() => {
+                window.__mcpBridge?.checkReady();
+            });
+            // Wait for server ready with timeout
+            const timeoutPromise = new Promise((_, reject) => {
+                const timer = setTimeout(() => {
+                    reject(new Error(`WebMCP server did not respond within ${this._readyTimeout}ms. ` +
+                        'Ensure TabServerTransport is running on the page.'));
+                }, this._readyTimeout);
+                // Clear timeout if promise resolves
+                this._serverReadyPromise.then(() => clearTimeout(timer)).catch(() => clearTimeout(timer));
+            });
             try {
-                const payload = JSON.parse(event.payload);
-                this._handlePayload(payload);
+                await Promise.race([this._serverReadyPromise, timeoutPromise]);
             }
             catch (err) {
-                this.onerror?.(new Error(`Failed to parse message from bridge: ${err}`));
-            }
-        });
-        // Listen for page navigation to detect when bridge is lost
-        this._page.on('framenavigated', frame => {
-            if (frame === this._page.mainFrame()) {
-                // Main frame navigated, bridge is gone
-                this._handleNavigation();
+                await this.close();
+                throw err;
             }
-        });
-        // Inject the bridge script
-        const result = await this._page.evaluate(WEB_MCP_BRIDGE_SCRIPT);
-        if (!result.success && !result.alreadyInjected) {
-            throw new Error('Failed to inject WebMCP bridge script');
-        }
-        this._started = true;
-        // Initiate server-ready handshake
-        await this._page.evaluate(() => {
-            window.__mcpBridge?.checkReady();
-        });
-        // Wait for server ready with timeout
-        const timeoutPromise = new Promise((_, reject) => {
-            const timer = setTimeout(() => {
-                reject(new Error(`WebMCP server did not respond within ${this._readyTimeout}ms. ` +
-                    'Ensure TabServerTransport is running on the page.'));
-            }, this._readyTimeout);
-            // Clear timeout if promise resolves
-            this._serverReadyPromise.then(() => clearTimeout(timer)).catch(() => clearTimeout(timer));
-        });
-        try {
-            await Promise.race([this._serverReadyPromise, timeoutPromise]);
         }
         catch (err) {
-            await this.close();
+            // Clean up on any error during start
+            this._starting = false;
+            if (!this._closed) {
+                await this._cleanup();
+            }
             throw err;
         }
+        finally {
+            this._starting = false;
+        }
     }
     /**
      * Handle a payload received from the bridge
      */
     _handlePayload(payload) {
+        // Guard against processing messages after close
+        if (this._closed)
+            return;
         // Handle special string payloads (handshake signals)
         if (typeof payload === 'string') {
             if (payload === 'mcp-server-ready') {
@@ -207,25 +266,32 @@ export class WebMCPClientTransport {
      * Handle page navigation - bridge is lost
      *
      * Navigation is a normal lifecycle event in browsers, not a fatal error.
-     * We close the connection gracefully and allow the client to reconnect if needed.
+     * We perform full teardown (detach CDP session, remove listeners) and
+     * allow the client to reconnect by creating a new transport instance.
      */
     _handleNavigation() {
         if (this._closed)
             return;
         this._serverReady = false;
-        // Mark as closed to prevent further operations
         this._closed = true;
         this._started = false;
-        // Reject any pending server ready promise
-        this._serverReadyReject(new Error('Page navigated, connection lost'));
+        // Reject any pending server ready promise (safe - has attached catch handler)
+        if (!this._serverReadyRejected) {
+            this._serverReadyReject(new Error('Page navigated, connection lost'));
+        }
+        // Full teardown - detach CDP session and remove listeners
+        this._cleanup().catch(() => {
+            // Ignore cleanup errors during navigation
+        });
         // Signal clean disconnection (not an error)
-        // The client can reconnect by creating a new transport instance
         this.onclose?.();
     }
     /**
      * Handle server stopped signal
      */
     _handleServerStopped() {
+        if (this._closed)
+            return;
         this._serverReady = false;
         this.onerror?.(new Error('WebMCP server stopped'));
     }
@@ -242,8 +308,9 @@ export class WebMCPClientTransport {
         // Wait for server to be ready before sending
         await this._serverReadyPromise;
         // Send via CDP → bridge → postMessage → TabServer
-        const messageJson = JSON.stringify(message);
         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;
                 if (!bridge) {
@@ -262,14 +329,20 @@ export class WebMCPClientTransport {
         }
     }
     /**
-     * Close the transport and clean up resources
+     * Internal cleanup method - removes listeners and detaches CDP session.
+     * Does not set _closed flag or call onclose (caller handles those).
      */
-    async close() {
-        if (this._closed)
-            return;
-        this._closed = true;
-        this._started = false;
-        this._serverReady = false;
+    async _cleanup() {
+        // Remove page event listener
+        if (this._frameNavigatedHandler) {
+            this._page.off('framenavigated', this._frameNavigatedHandler);
+            this._frameNavigatedHandler = null;
+        }
+        // Remove CDP event listener
+        if (this._cdpSession && this._bindingCalledHandler) {
+            this._cdpSession.off('Runtime.bindingCalled', this._bindingCalledHandler);
+            this._bindingCalledHandler = null;
+        }
         // Dispose the bridge script if possible
         try {
             await this._page.evaluate(() => {
@@ -277,7 +350,7 @@ export class WebMCPClientTransport {
             });
         }
         catch {
-            // Ignore errors during cleanup
+            // Ignore errors during cleanup (page might be closed/navigated)
         }
         // Detach CDP session
         if (this._cdpSession) {
@@ -289,8 +362,22 @@ export class WebMCPClientTransport {
             }
             this._cdpSession = null;
         }
-        // Reject any pending server ready promise
-        this._serverReadyReject(new Error('Transport closed'));
+    }
+    /**
+     * Close the transport and clean up resources
+     */
+    async close() {
+        if (this._closed)
+            return;
+        this._closed = true;
+        this._started = false;
+        this._serverReady = false;
+        // Full cleanup
+        await this._cleanup();
+        // Reject any pending server ready promise (safe - has attached catch handler)
+        if (!this._serverReadyRejected) {
+            this._serverReadyReject(new Error('Transport closed'));
+        }
         this.onclose?.();
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/chrome-devtools-mcp",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "MCP server for Chrome DevTools with WebMCP integration for connecting to website MCP tools",
   "keywords": [
     "mcp",
@@ -48,6 +48,7 @@
     "!*.tsbuildinfo"
   ],
   "dependencies": {
+    "@composio/json-schema-to-zod": "^0.1.17",
     "@modelcontextprotocol/sdk": "1.24.1",
     "core-js": "3.47.0",
     "debug": "4.4.3",