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

package/build/src/McpContext.js

@@ -44,6 +44,9 @@ export class McpContext {
     #dialog;
     #nextSnapshotId = 1;
     #traceResults = [];
+    // CDP Session management (v0.8.4+)
+    #browserSession;
+    #pageSessions = new Map();
     constructor(browser, logger, browserFactory, connectionOptions) {
         this.browser = browser;
         this.logger = logger;
@@ -77,12 +80,90 @@ export class McpContext {
         await context.#init();
         return context;
     }
+    /**
+     * Dispose all CDP sessions to prevent memory leaks
+     */
+    async #disposeSessions() {
+        await Promise.allSettled([
+            this.#browserSession?.detach(),
+            ...[...this.#pageSessions.values()].map(s => s.detach())
+        ]);
+        this.#browserSession = undefined;
+        this.#pageSessions.clear();
+    }
+    /**
+     * Reinitialize CDP protocol domains after reconnection
+     * This ensures proper CDP event handling after browser restart
+     */
+    async reinitializeCDP() {
+        try {
+            // 1. Dispose old sessions to prevent leaks
+            await this.#disposeSessions();
+            // 2. Create browser-level CDP session (public API, not _client())
+            this.#browserSession = await this.browser.target().createCDPSession();
+            this.logger('CDP: Browser-level session created');
+            // 3. Enable Target discovery and auto-attach
+            try {
+                await this.#browserSession.send('Target.setDiscoverTargets', { discover: true });
+                this.logger('CDP: Target discovery enabled');
+            }
+            catch (err) {
+                this.logger('Warning: Failed to enable target discovery:', err);
+            }
+            try {
+                await this.#browserSession.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);
+            }
+            // 4. Enable essential CDP domains for all targets
+            for (const target of this.browser.targets()) {
+                const type = target.type();
+                if (type === 'page') {
+                    const page = await target.page();
+                    if (!page)
+                        continue;
+                    try {
+                        const session = await page.createCDPSession();
+                        await Promise.allSettled([
+                            session.send('Network.enable'),
+                            session.send('Runtime.enable'),
+                            session.send('Log.enable'),
+                        ]);
+                        this.#pageSessions.set(page, session);
+                        this.logger(`CDP domains enabled for ${type}: ${page.url()}`);
+                    }
+                    catch (err) {
+                        this.logger(`Warning: Failed to enable CDP domains for ${type} ${page.url()}:`, err);
+                    }
+                }
+                // Service Worker / Worker support can be added here if needed
+                // if (type === 'service_worker' || type === 'worker') { ... }
+            }
+            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) {
+        // Dispose old sessions first
+        await this.#disposeSessions();
         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
  */
@@ -10,28 +11,66 @@ const DEFAULT_OPTIONS = {
     maxReconnectAttempts: 3,
     initialRetryDelay: 1000, // 1 second
     maxRetryDelay: 10000, // 10 seconds
+    reconnectOverallTimeoutMs: 30000, // 30 seconds
     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;
+    /** Disconnected event handler (arrow function to preserve 'this') */
+    onDisconnected = () => {
+        this.log('Browser disconnected');
+        this.setState(ConnectionState.RECONNECTING);
+        // Trigger immediate reconnection (single-flight prevents duplicates)
+        void this.triggerReconnect('event:disconnected');
+    };
     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) {
+        // Remove old listener to prevent memory leak
+        if (this.browser) {
+            this.browser.off('disconnected', this.onDisconnected);
+        }
         this.browser = browser;
         this.browserFactory = factory;
+        this.state = ConnectionState.CONNECTED;
+        // Event-driven detection: hook into browser 'disconnected' event
+        this.browser.on('disconnected', this.onDisconnected);
+        this.log('Browser instance set, state: CONNECTED');
     }
     /**
      * Execute an operation with automatic retry on CDP connection errors
@@ -49,23 +88,85 @@ export class BrowserConnectionManager {
         }
     }
     /**
-     * Retry operation with exponential backoff
+     * Trigger reconnection sequence
+     *
+     * Can be called from events (disconnected) or operations (executeWithRetry).
+     * Uses single-flight pattern to prevent duplicate reconnections.
+     *
+     * @param reason - Reason for triggering reconnection
+     * @returns Promise that resolves when reconnection completes
+     */
+    async triggerReconnect(reason) {
+        // Single-flight: return existing sequence if already running
+        if (this.reconnectSequenceInFlight) {
+            this.log(`Reconnection already in progress (${reason}), waiting...`);
+            return this.reconnectSequenceInFlight;
+        }
+        this.log(`Triggering reconnection: ${reason}`);
+        // Overall timeout with AbortController
+        const abortController = new AbortController();
+        const overallTimeout = this.options.reconnectOverallTimeoutMs ?? 30000;
+        const timeoutId = setTimeout(() => {
+            abortController.abort();
+            this.log(`Reconnection overall timeout (${overallTimeout}ms) exceeded`);
+        }, overallTimeout);
+        // Start reconnection sequence
+        this.reconnectSequenceInFlight = this._runReconnectionSequence(abortController.signal)
+            .finally(() => {
+            clearTimeout(timeoutId);
+            this.reconnectSequenceInFlight = null;
+        });
+        return this.reconnectSequenceInFlight;
+    }
+    /**
+     * Retry operation with automatic reconnection
+     *
+     * @param operation - Operation to retry
+     * @param operationName - Name of operation for logging
+     * @returns Result of operation
      */
     async retryWithReconnect(operation, operationName) {
+        // Use triggerReconnect for unified reconnection logic
+        await this.triggerReconnect(`operation:${operationName}`);
+        this.log(`${operationName}: Reconnection completed, retrying operation...`);
+        return await operation();
+    }
+    /**
+     * Run a full reconnection sequence with exponential backoff
+     *
+     * This is the actual retry loop that multiple operations can share.
+     *
+     * @param signal - AbortSignal to cancel reconnection
+     * @private
+     */
+    async _runReconnectionSequence(signal) {
         const maxAttempts = this.options.maxReconnectAttempts ?? 3;
         const initialDelay = this.options.initialRetryDelay ?? 1000;
         const maxDelay = this.options.maxRetryDelay ?? 10000;
+        const random = this.options.rng ?? Math.random;
         for (let attempt = 0; attempt < maxAttempts; attempt++) {
+            // Check abort signal
+            if (signal?.aborted) {
+                throw new Error('Reconnection aborted: overall timeout exceeded');
+            }
             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 * (random() * 2 - 1);
+            const delay = Math.max(0, baseDelay + jitter);
+            this.log(`Waiting ${delay.toFixed(0)}ms before reconnect attempt...`);
             await this.sleep(delay);
+            // Check abort signal after sleep
+            if (signal?.aborted) {
+                throw new Error('Reconnection aborted: overall timeout exceeded');
+            }
             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,22 +180,64 @@ 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. Also checks method hints.
+     *
+     * @param error - Error to check
+     * @returns true if error is a CDP connection error
      */
     isCDPConnectionError(error) {
-        const errorMessage = error?.message || '';
-        return (errorMessage.includes('Target closed') ||
-            errorMessage.includes('Protocol error') ||
-            errorMessage.includes('Session closed') ||
-            errorMessage.includes('Connection closed') ||
-            errorMessage.includes('WebSocket is not open'));
+        // Type-safe detection using instanceof
+        if (error instanceof ProtocolError || error instanceof TimeoutError) {
+            return true;
+        }
+        const msg = String(error?.message ?? '').toLowerCase();
+        const method = error?.method?.toString?.().toLowerCase?.() ?? '';
+        // Message hints
+        if (/connection closed|session closed|target closed|websocket is not open/.test(msg)) {
+            return true;
+        }
+        // Method hints (CDP methods like 'Target.*')
+        if (/^target\./.test(method)) {
+            return true;
+        }
+        return false;
     }
     /**
-     * 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 +252,9 @@ 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.onDisconnected);
+        this.setState(ConnectionState.CONNECTED);
         this.log('Browser reconnected successfully');
         // Notify callback if provided
         if (this.options.onReconnect) {
@@ -138,8 +284,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 +331,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.1",
   "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",