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

package/build/src/McpContext.js

@@ -10,6 +10,7 @@ import { NetworkCollector, PageCollector } from './PageCollector.js';
 import { listPages } from './tools/pages.js';
 import { CLOSE_PAGE_ERROR } from './tools/ToolDefinition.js';
 import { WaitForHelper } from './WaitForHelper.js';
+import { BrowserConnectionManager, } from './browser-connection-manager.js';
 const DEFAULT_TIMEOUT = 5_000;
 const NAVIGATION_TIMEOUT = 10_000;
 function getNetworkMultiplierFromString(condition) {
@@ -29,6 +30,7 @@ function getNetworkMultiplierFromString(condition) {
 export class McpContext {
     browser;
     logger;
+    connectionManager;
     // The most recent page state.
     #pages = [];
     #selectedPageIdx = 0;
@@ -42,9 +44,14 @@ export class McpContext {
     #dialog;
     #nextSnapshotId = 1;
     #traceResults = [];
-    constructor(browser, logger) {
+    constructor(browser, logger, browserFactory, connectionOptions) {
         this.browser = browser;
         this.logger = logger;
+        this.connectionManager = new BrowserConnectionManager(connectionOptions);
+        // Set up browser instance and factory for reconnection
+        if (browserFactory) {
+            this.connectionManager.setBrowser(browser, browserFactory);
+        }
         this.#networkCollector = new NetworkCollector(this.browser, (page, collect) => {
             page.on('request', request => {
                 collect(request);
@@ -65,11 +72,25 @@ export class McpContext {
         await this.#networkCollector.init();
         await this.#consoleCollector.init();
     }
-    static async from(browser, logger) {
-        const context = new McpContext(browser, logger);
+    static async from(browser, logger, browserFactory, connectionOptions) {
+        const context = new McpContext(browser, logger, browserFactory, connectionOptions);
         await context.#init();
         return context;
     }
+    /**
+     * Update browser instance after reconnection
+     */
+    async updateBrowser(newBrowser) {
+        this.browser = newBrowser;
+        this.connectionManager.setBrowser(newBrowser, async () => newBrowser);
+        // Reinitialize collectors for new browser
+        await this.#networkCollector.init();
+        await this.#consoleCollector.init();
+        // Recreate pages snapshot
+        await this.createPagesSnapshot();
+        this.setSelectedPageIdx(0);
+        this.logger('Browser instance updated after reconnection');
+    }
     getNetworkRequests() {
         const page = this.getSelectedPage();
         return this.#networkCollector.getData(page);

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

@@ -0,0 +1,198 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Default connection manager options
+ */
+const DEFAULT_OPTIONS = {
+    maxReconnectAttempts: 3,
+    initialRetryDelay: 1000, // 1 second
+    maxRetryDelay: 10000, // 10 seconds
+    enableLogging: true,
+    onReconnect: undefined,
+};
+/**
+ * Browser Connection Manager
+ *
+ * Provides automatic reconnection for CDP operations
+ */
+export class BrowserConnectionManager {
+    reconnectAttempts = 0;
+    options;
+    browser = null;
+    browserFactory = null;
+    constructor(options = {}) {
+        this.options = { ...DEFAULT_OPTIONS, ...options };
+    }
+    /**
+     * Set browser instance and factory for reconnection
+     */
+    setBrowser(browser, factory) {
+        this.browser = browser;
+        this.browserFactory = factory;
+    }
+    /**
+     * Execute an operation with automatic retry on CDP connection errors
+     */
+    async executeWithRetry(operation, operationName) {
+        try {
+            return await operation();
+        }
+        catch (error) {
+            if (this.isCDPConnectionError(error)) {
+                this.log(`CDP connection error in ${operationName}, attempting reconnect...`);
+                return await this.retryWithReconnect(operation, operationName);
+            }
+            throw error;
+        }
+    }
+    /**
+     * Retry operation with exponential backoff
+     */
+    async retryWithReconnect(operation, operationName) {
+        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}...`);
+            // Exponential backoff with max delay
+            const delay = Math.min(initialDelay * Math.pow(2, attempt), maxDelay);
+            await this.sleep(delay);
+            try {
+                await this.reconnectBrowser();
+                this.log(`Reconnection successful, retrying ${operationName}...`);
+                return await operation();
+            }
+            catch (error) {
+                if (attempt === maxAttempts - 1) {
+                    // Last attempt failed
+                    throw this.createReconnectionFailedError(attemptNum, error);
+                }
+                this.log(`Reconnect attempt ${attemptNum} failed: ${error}`);
+            }
+        }
+        throw new Error('Reconnection logic error'); // Should never reach here
+    }
+    /**
+     * Check 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'));
+    }
+    /**
+     * Reconnect browser instance
+     */
+    async reconnectBrowser() {
+        if (!this.browserFactory) {
+            throw new Error('Browser factory not set. Cannot reconnect.');
+        }
+        try {
+            // Close old browser if still connected
+            if (this.browser?.isConnected()) {
+                await this.browser.close().catch(() => {
+                    // Ignore errors during close
+                });
+            }
+        }
+        catch (error) {
+            // Ignore errors during cleanup
+        }
+        // Create new browser instance
+        const newBrowser = await this.browserFactory();
+        this.browser = newBrowser;
+        this.log('Browser reconnected successfully');
+        // Notify callback if provided
+        if (this.options.onReconnect) {
+            await this.options.onReconnect(newBrowser);
+        }
+    }
+    /**
+     * Create user-friendly error for reconnection failure
+     */
+    createReconnectionFailedError(attempts, lastError) {
+        const message = `
+❌ Chrome DevTools接続エラー
+
+${attempts}回の再接続を試みましたが、Chrome DevToolsとの接続を回復できませんでした。
+
+📋 最後のエラー:
+${lastError?.message || 'Unknown error'}
+
+🔧 解決方法:
+1. Claude Codeを再起動してください
+2. Chromeブラウザを完全に終了して再起動してください
+3. chrome://extensions でChrome DevTools拡張機能を確認してください
+
+詳細: docs/troubleshooting.md#cdp-connection-error
+    `.trim();
+        const error = new Error(message);
+        error.name = 'CDPReconnectionError';
+        return error;
+    }
+    /**
+     * Log message if logging is enabled
+     */
+    log(message) {
+        if (this.options.enableLogging !== false) {
+            console.log(`[ConnectionManager] ${message}`);
+        }
+    }
+    /**
+     * Sleep for specified milliseconds
+     */
+    sleep(ms) {
+        return new Promise((resolve) => setTimeout(resolve, ms));
+    }
+    /**
+     * Get current browser instance
+     */
+    getBrowser() {
+        return this.browser;
+    }
+    /**
+     * Get total reconnection attempts made
+     */
+    getReconnectAttempts() {
+        return this.reconnectAttempts;
+    }
+    /**
+     * Reset reconnection attempt counter
+     */
+    resetReconnectAttempts() {
+        this.reconnectAttempts = 0;
+    }
+    /**
+     * Check if browser is currently connected
+     */
+    isConnected() {
+        return this.browser?.isConnected() ?? false;
+    }
+}
+/**
+ * Global connection manager instance
+ */
+let globalConnectionManager = null;
+/**
+ * Get or create global connection manager
+ */
+export function getConnectionManager(options) {
+    if (!globalConnectionManager) {
+        globalConnectionManager = new BrowserConnectionManager(options);
+    }
+    return globalConnectionManager;
+}
+/**
+ * Reset global connection manager (for testing)
+ */
+export function resetConnectionManager() {
+    globalConnectionManager = null;
+}

package/build/src/main.js

@@ -60,7 +60,7 @@ server.server.setRequestHandler(SetLevelRequestSchema, () => {
 let context;
 let uiHealthCheckRun = false; // Track if UI health check has been run
 async function getContext() {
-    const browser = await resolveBrowser({
+    const browserOptions = {
         browserUrl: args.browserUrl,
         headless: args.headless,
         executablePath: args.executablePath,
@@ -73,10 +73,23 @@ async function getContext() {
         chromeProfile: args.chromeProfile,
         userDataDir: args.userDataDir,
         logFile,
-    });
+    };
+    const browser = await resolveBrowser(browserOptions);
+    // Browser factory function for reconnection
+    const browserFactory = async () => {
+        logger('Reconnecting browser...');
+        return await resolveBrowser(browserOptions);
+    };
     // Always recreate context if browser reference changed or context doesn't exist
     if (!context || context.browser !== browser) {
-        context = await McpContext.from(browser, logger);
+        // Connection manager options with reconnect callback
+        const connectionOptions = {
+            onReconnect: async (newBrowser) => {
+                logger('Updating context with reconnected browser...');
+                await context.updateBrowser(newBrowser);
+            },
+        };
+        context = await McpContext.from(browser, logger, browserFactory, connectionOptions);
         // Run UI health check only once per browser instance
         if (!uiHealthCheckRun) {
             uiHealthCheckRun = true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chrome-devtools-mcp-for-extension",
-  "version": "0.12.0",
+  "version": "0.13.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",