chrome-devtools-mcp-for-extension 0.13.0 → 0.14.0

package/build/src/McpContext.js

@@ -77,12 +77,74 @@ export class McpContext {
         await context.#init();
         return context;
     }
+    /**
+     * Reinitialize CDP protocol domains after reconnection
+     * This ensures proper CDP event handling after browser restart
+     */
+    async reinitializeCDP() {
+        try {
+            // Get CDP client from the browser
+            const client = await this.browser._client();
+            if (!client) {
+                this.logger('Warning: Unable to get CDP client for reinitialization');
+                return;
+            }
+            // 1. Enable Target discovery and auto-attach
+            // This is critical for multi-target scenarios (iframes, workers, etc.)
+            try {
+                await client.send('Target.setDiscoverTargets', { discover: true });
+                this.logger('CDP: Target discovery enabled');
+            }
+            catch (err) {
+                this.logger('Warning: Failed to enable target discovery:', err);
+            }
+            try {
+                await client.send('Target.setAutoAttach', {
+                    autoAttach: true,
+                    waitForDebuggerOnStart: false,
+                    flatten: true
+                });
+                this.logger('CDP: Auto-attach configured');
+            }
+            catch (err) {
+                this.logger('Warning: Failed to configure auto-attach:', err);
+            }
+            // 2. Enable essential CDP domains for each page
+            const pages = await this.browser.pages();
+            for (const page of pages) {
+                try {
+                    const pageClient = page._client();
+                    if (pageClient) {
+                        // Enable Network domain for request interception
+                        await pageClient.send('Network.enable');
+                        // Enable Runtime domain for console messages and exceptions
+                        await pageClient.send('Runtime.enable');
+                        // Enable Log domain for browser logs
+                        await pageClient.send('Log.enable');
+                        this.logger(`CDP domains enabled for page: ${page.url()}`);
+                    }
+                }
+                catch (err) {
+                    this.logger(`Warning: Failed to enable CDP domains for page ${page.url()}:`, err);
+                }
+            }
+            this.logger('CDP protocol reinitialization completed');
+        }
+        catch (err) {
+            this.logger('Error during CDP reinitialization:', err);
+            // Don't throw - this is a best-effort operation
+            // The browser should still be usable even if CDP setup partially fails
+        }
+    }
     /**
      * Update browser instance after reconnection
      */
     async updateBrowser(newBrowser) {
         this.browser = newBrowser;
         this.connectionManager.setBrowser(newBrowser, async () => newBrowser);
+        // Reinitialize CDP protocol domains BEFORE collectors
+        // This ensures CDP events are properly set up
+        await this.reinitializeCDP();
         // Reinitialize collectors for new browser
         await this.#networkCollector.init();
         await this.#consoleCollector.init();

package/build/src/browser-connection-manager.js

@@ -3,6 +3,7 @@
  * Copyright 2025 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
+import { ProtocolError, TimeoutError } from 'puppeteer';
 /**
  * Default connection manager options
  */
@@ -13,25 +14,55 @@ const DEFAULT_OPTIONS = {
     enableLogging: true,
     onReconnect: undefined,
 };
+/**
+ * Connection state enum
+ */
+var ConnectionState;
+(function (ConnectionState) {
+    ConnectionState["CONNECTED"] = "CONNECTED";
+    ConnectionState["RECONNECTING"] = "RECONNECTING";
+    ConnectionState["CLOSED"] = "CLOSED";
+})(ConnectionState || (ConnectionState = {}));
 /**
  * Browser Connection Manager
  *
- * Provides automatic reconnection for CDP operations
+ * Provides automatic reconnection for CDP operations with:
+ * - Single-flight pattern to prevent concurrent reconnections
+ * - Event-driven detection via browser 'disconnected' event
+ * - State machine tracking (CONNECTED | RECONNECTING | CLOSED)
+ * - Exponential backoff with jitter to prevent thundering herd
  */
 export class BrowserConnectionManager {
     reconnectAttempts = 0;
     options;
     browser = null;
     browserFactory = null;
+    /** Single-flight pattern: prevents concurrent reconnection attempts */
+    reconnectInFlight = null;
+    /** Shared reconnection sequence for multiple operations */
+    reconnectSequenceInFlight = null;
+    /** Current connection state */
+    state = ConnectionState.CLOSED;
     constructor(options = {}) {
         this.options = { ...DEFAULT_OPTIONS, ...options };
     }
     /**
      * Set browser instance and factory for reconnection
+     *
+     * @param browser - Browser instance to manage
+     * @param factory - Factory function to create new browser instances on reconnection
      */
     setBrowser(browser, factory) {
         this.browser = browser;
         this.browserFactory = factory;
+        this.state = ConnectionState.CONNECTED;
+        // Event-driven detection: hook into browser 'disconnected' event
+        this.browser.on('disconnected', () => {
+            this.log('Browser disconnected event fired');
+            this.setState(ConnectionState.CLOSED);
+            // Trigger immediate reconnection (will be handled by next operation)
+        });
+        this.log('Browser instance set, state: CONNECTED');
     }
     /**
      * Execute an operation with automatic retry on CDP connection errors
@@ -49,23 +80,75 @@ export class BrowserConnectionManager {
         }
     }
     /**
-     * Retry operation with exponential backoff
+     * Retry operation with exponential backoff and jitter
+     *
+     * Implements single-flight pattern at the sequence level:
+     * - Multiple concurrent operations share the same reconnection sequence
+     * - Only one reconnection sequence runs at a time
+     * - All waiting operations retry after the shared sequence completes
+     *
+     * Adds ±20% randomness to retry delays to prevent thundering herd problem.
+     *
+     * @param operation - Operation to retry
+     * @param operationName - Name of operation for logging
+     * @returns Result of operation
      */
     async retryWithReconnect(operation, operationName) {
+        // Single-flight pattern: if a reconnection sequence is already running,
+        // wait for it to complete, then try the operation once
+        if (this.reconnectSequenceInFlight) {
+            this.log(`${operationName}: Waiting for ongoing reconnection sequence...`);
+            try {
+                await this.reconnectSequenceInFlight;
+                this.log(`${operationName}: Reconnection sequence completed, retrying operation...`);
+                return await operation();
+            }
+            catch (error) {
+                // Reconnection sequence failed, propagate the error
+                throw error;
+            }
+        }
+        // Start a new reconnection sequence
+        this.reconnectSequenceInFlight = this._runReconnectionSequence();
+        try {
+            await this.reconnectSequenceInFlight;
+            this.log(`${operationName}: Reconnection sequence completed, retrying operation...`);
+            return await operation();
+        }
+        catch (error) {
+            throw error;
+        }
+        finally {
+            // Clear the in-flight sequence
+            this.reconnectSequenceInFlight = null;
+        }
+    }
+    /**
+     * Run a full reconnection sequence with exponential backoff
+     *
+     * This is the actual retry loop that multiple operations can share.
+     *
+     * @private
+     */
+    async _runReconnectionSequence() {
         const maxAttempts = this.options.maxReconnectAttempts ?? 3;
         const initialDelay = this.options.initialRetryDelay ?? 1000;
         const maxDelay = this.options.maxRetryDelay ?? 10000;
         for (let attempt = 0; attempt < maxAttempts; attempt++) {
             this.reconnectAttempts++;
             const attemptNum = attempt + 1;
-            this.log(`Reconnect attempt ${attemptNum}/${maxAttempts} for ${operationName}...`);
+            this.log(`Reconnect attempt ${attemptNum}/${maxAttempts}...`);
             // Exponential backoff with max delay
-            const delay = Math.min(initialDelay * Math.pow(2, attempt), maxDelay);
+            const baseDelay = Math.min(initialDelay * Math.pow(2, attempt), maxDelay);
+            // Add jitter: ±20% randomness to prevent thundering herd
+            const jitter = baseDelay * 0.2 * (Math.random() * 2 - 1);
+            const delay = Math.max(0, baseDelay + jitter);
+            this.log(`Waiting ${delay.toFixed(0)}ms before reconnect attempt...`);
             await this.sleep(delay);
             try {
                 await this.reconnectBrowser();
-                this.log(`Reconnection successful, retrying ${operationName}...`);
-                return await operation();
+                this.log(`Reconnection successful`);
+                return; // Success!
             }
             catch (error) {
                 if (attempt === maxAttempts - 1) {
@@ -79,8 +162,19 @@ export class BrowserConnectionManager {
     }
     /**
      * Check if error is a CDP connection error
+     *
+     * Uses type-safe error detection with instanceof checks and falls back
+     * to string matching for compatibility.
+     *
+     * @param error - Error to check
+     * @returns true if error is a CDP connection error
      */
     isCDPConnectionError(error) {
+        // Type-safe detection using instanceof
+        if (error instanceof ProtocolError || error instanceof TimeoutError) {
+            return true;
+        }
+        // Fallback: string matching for error messages
         const errorMessage = error?.message || '';
         return (errorMessage.includes('Target closed') ||
             errorMessage.includes('Protocol error') ||
@@ -89,12 +183,39 @@ export class BrowserConnectionManager {
             errorMessage.includes('WebSocket is not open'));
     }
     /**
-     * Reconnect browser instance
+     * Reconnect browser instance with single-flight pattern
+     *
+     * Ensures only one reconnection attempt happens at a time.
+     * Multiple concurrent calls will wait for the same reconnection promise.
+     *
+     * @returns Promise that resolves when reconnection is complete
      */
     async reconnectBrowser() {
+        // Single-flight pattern: return existing promise if reconnection is already in progress
+        if (this.reconnectInFlight) {
+            this.log('Reconnection already in progress, waiting...');
+            return this.reconnectInFlight;
+        }
+        // Create new reconnection promise
+        this.reconnectInFlight = this._doReconnect();
+        try {
+            await this.reconnectInFlight;
+        }
+        finally {
+            // Clear in-flight promise when complete
+            this.reconnectInFlight = null;
+        }
+    }
+    /**
+     * Internal reconnection logic
+     *
+     * @private
+     */
+    async _doReconnect() {
         if (!this.browserFactory) {
             throw new Error('Browser factory not set. Cannot reconnect.');
         }
+        this.setState(ConnectionState.RECONNECTING);
         try {
             // Close old browser if still connected
             if (this.browser?.isConnected()) {
@@ -109,6 +230,12 @@ export class BrowserConnectionManager {
         // Create new browser instance
         const newBrowser = await this.browserFactory();
         this.browser = newBrowser;
+        // Re-attach disconnected event handler
+        this.browser.on('disconnected', () => {
+            this.log('Browser disconnected event fired');
+            this.setState(ConnectionState.CLOSED);
+        });
+        this.setState(ConnectionState.CONNECTED);
         this.log('Browser reconnected successfully');
         // Notify callback if provided
         if (this.options.onReconnect) {
@@ -138,8 +265,21 @@ ${lastError?.message || 'Unknown error'}
         error.name = 'CDPReconnectionError';
         return error;
     }
+    /**
+     * Set connection state and log transition
+     *
+     * @param newState - New connection state
+     */
+    setState(newState) {
+        if (this.state !== newState) {
+            this.log(`State transition: ${this.state} -> ${newState}`);
+            this.state = newState;
+        }
+    }
     /**
      * Log message if logging is enabled
+     *
+     * @param message - Message to log
      */
     log(message) {
         if (this.options.enableLogging !== false) {
@@ -172,10 +312,28 @@ ${lastError?.message || 'Unknown error'}
     }
     /**
      * Check if browser is currently connected
+     *
+     * @returns true if browser is connected
      */
     isConnected() {
         return this.browser?.isConnected() ?? false;
     }
+    /**
+     * Get current connection state
+     *
+     * @returns Current connection state (CONNECTED | RECONNECTING | CLOSED)
+     */
+    getState() {
+        return this.state;
+    }
+    /**
+     * Check if reconnection is currently in progress
+     *
+     * @returns true if reconnection is in progress
+     */
+    isReconnecting() {
+        return this.state === ConnectionState.RECONNECTING;
+    }
 }
 /**
  * Global connection manager instance

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chrome-devtools-mcp-for-extension",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "MCP server for Chrome extension development with Web Store automation. Fork of chrome-devtools-mcp with extension-specific tools.",
   "type": "module",
   "bin": "./build/src/index.js",