chrometools-mcp 3.4.0 → 3.4.1

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file.
 
+## [3.4.1] - 2026-02-12
+
+### Fixed
+- **Extension "not connected" after install** — Bridge connection now auto-retries after Chrome launches (previously MCP exhausted all reconnect attempts before Chrome even started)
+- **Bridge auto-install on first run** — Native Messaging Host is automatically registered on MCP startup if not yet installed, eliminating the need to manually run `--install-bridge`
+- **Browser autocomplete corrupting text input** — Temporarily suppresses autocomplete during typing to prevent stale data from overwriting input fields
+
 ## [3.4.0] - 2026-02-08
 
 ### Added

package/bridge/bridge-client.js

@@ -156,6 +156,33 @@ function scheduleReconnect() {
   }, RECONNECT_DELAY);
 }
 
+/**
+ * Reset reconnect state and retry connection to Bridge.
+ * Call this after Chrome launches (bridge-service may have just started).
+ */
+export async function retryBridgeConnection() {
+  if (isConnected && ws?.readyState === WebSocket.OPEN) {
+    return true; // Already connected
+  }
+
+  // Clean up any stale connection
+  if (ws) {
+    try { ws.close(); } catch (e) {}
+    ws = null;
+  }
+  isConnected = false;
+
+  // Reset reconnect counter so we get fresh attempts
+  reconnectAttempts = 0;
+  if (reconnectTimer) {
+    clearTimeout(reconnectTimer);
+    reconnectTimer = null;
+  }
+
+  logToFile('retryBridgeConnection: resetting and reconnecting');
+  return await connectToBridge();
+}
+
 /**
  * Disconnect from Bridge
  */

package/browser/browser-manager.js

@@ -23,6 +23,9 @@ let chromeProcess = null;
 // Track if we connected to existing Chrome (extension won't be auto-loaded)
 let connectedToExistingChrome = false;
 
+// Ensure bridge reconnect is only triggered once per Chrome launch
+let bridgeReconnectScheduled = false;
+
 // Track pages we've already seen to avoid double-handling
 const knownTargets = new WeakSet();
 
@@ -118,6 +121,9 @@ export async function getBrowser() {
           // Set up new tab tracking
           setupNewTabTracking(browser);
 
+          // Existing Chrome may already have bridge running — try to connect
+          scheduleBridgeReconnect();
+
           return browser;
         } catch (connectError) {
           debugLog("No existing Chrome found, launching new instance...");
@@ -173,6 +179,10 @@ export async function getBrowser() {
         // Set up new tab tracking
         setupNewTabTracking(browser);
 
+        // Extension needs time to load and start the bridge service.
+        // Schedule bridge reconnection after Chrome is ready.
+        scheduleBridgeReconnect();
+
         return browser;
       } catch (error) {
         // Check if it's a display-related error in WSL
@@ -221,6 +231,46 @@ This requires an X server to display the browser GUI.
   return await browserPromise;
 }
 
+/**
+ * Schedule bridge reconnection after Chrome launches.
+ * Extension needs ~2-3s to load and start the bridge service via Native Messaging.
+ * Retries a few times in case the bridge takes longer to start.
+ */
+function scheduleBridgeReconnect() {
+  if (bridgeReconnectScheduled) return;
+  bridgeReconnectScheduled = true;
+
+  const delays = [2000, 3000, 5000]; // retry schedule in ms
+  let attempt = 0;
+
+  async function tryConnect() {
+    try {
+      const { retryBridgeConnection, isBridgeConnected } = await import('../bridge/bridge-client.js');
+      if (isBridgeConnected()) {
+        debugLog('Bridge already connected, skipping reconnect');
+        return;
+      }
+      debugLog(`Bridge reconnect attempt ${attempt + 1}/${delays.length}`);
+      const connected = await retryBridgeConnection();
+      if (connected) {
+        console.error('[chrometools-mcp] Bridge connected after Chrome launch');
+        return;
+      }
+    } catch (e) {
+      debugLog('Bridge reconnect error:', e.message);
+    }
+
+    attempt++;
+    if (attempt < delays.length) {
+      setTimeout(tryConnect, delays[attempt]);
+    } else {
+      console.error('[chrometools-mcp] Bridge not available after Chrome launch. Run: npx chrometools-mcp --install-bridge');
+    }
+  }
+
+  setTimeout(tryConnect, delays[0]);
+}
+
 /**
  * Setup tracking for new tabs opened via window.open, target="_blank", etc.
  * @param {Browser} browser - Puppeteer browser instance

package/index.js

@@ -3998,6 +3998,17 @@ async function main() {
     console.error("[chrometools-mcp] GUI mode requires X server (DISPLAY=" + (process.env.DISPLAY || "not set") + ")");
   }
 
+  // Auto-install bridge if not yet registered (required for extension <-> MCP communication)
+  try {
+    const { isBridgeInstalled, installBridge } = await import('./bridge/install.js');
+    if (!isBridgeInstalled()) {
+      console.error('[chrometools-mcp] Bridge not installed. Auto-installing...');
+      await installBridge({ silent: true });
+    }
+  } catch (e) {
+    console.error('[chrometools-mcp] Bridge auto-install failed:', e.message);
+  }
+
   // Connect to Bridge Service (if running)
   await startWebSocketServer();
 

package/models/TextInputModel.js

@@ -31,52 +31,73 @@ export class TextInputModel extends BaseInputModel {
     const { delay = 0, clearFirst = true } = options;
     const opTimeout = 5000; // 5s timeout per operation
 
-    // Method 1: Try Puppeteer typing (works for most cases)
+    // Suppress browser autocomplete to prevent field corruption
+    // (autocomplete can fire between focus and typing, filling the field with stale data)
+    const savedAutocomplete = await this.element.evaluate(el => {
+      const prev = el.getAttribute('autocomplete');
+      el.setAttribute('autocomplete', 'new-password');
+      return prev;
+    });
+
     try {
-      // Focus and clear using JS (most reliable)
-      await withTimeout(
-        () => this.element.evaluate((el, shouldClear) => {
-          el.focus();
-          el.click();
-          if (shouldClear) {
-            el.select(); // Select all text
-          }
-        }, clearFirst),
-        opTimeout,
-        'focus-and-select'
-      );
+      // Method 1: Try Puppeteer typing (works for most cases)
+      try {
+        // Focus and clear using JS (most reliable)
+        await withTimeout(
+          () => this.element.evaluate((el, shouldClear) => {
+            el.focus();
+            el.click();
+            if (shouldClear) {
+              el.value = '';
+              el.dispatchEvent(new Event('input', { bubbles: true }));
+              el.dispatchEvent(new Event('change', { bubbles: true }));
+            }
+          }, clearFirst),
+          opTimeout,
+          'focus-and-clear'
+        );
 
-      // Small delay to ensure focus is established
-      await new Promise(resolve => setTimeout(resolve, 50));
+        // Small delay to ensure focus is established
+        await new Promise(resolve => setTimeout(resolve, 50));
 
-      // Type the new value
-      const typeTimeout = Math.max(opTimeout, value.length * delay + 5000);
-      await withTimeout(
-        () => this.element.type(value, { delay }),
-        typeTimeout,
-        'type'
-      );
+        // Type the new value
+        const typeTimeout = Math.max(opTimeout, value.length * delay + 5000);
+        await withTimeout(
+          () => this.element.type(value, { delay }),
+          typeTimeout,
+          'type'
+        );
 
-      // Verify the value was set
-      const actualValue = await this.element.evaluate(el => el.value);
-      if (actualValue.includes(value)) {
-        return; // Success
+        // Verify the value was set (exact match to catch autocomplete corruption)
+        const actualValue = await this.element.evaluate(el => el.value);
+        if (actualValue === value) {
+          return; // Success
+        }
+      } catch (e) {
+        // Fall through to JS method
       }
-    } catch (e) {
-      // Fall through to JS method
-    }
 
-    // Method 2: Fallback to direct JS value setting
-    await withTimeout(
-      () => this.element.evaluate((el, newValue) => {
-        el.focus();
-        el.value = newValue;
-        el.dispatchEvent(new Event('input', { bubbles: true }));
-        el.dispatchEvent(new Event('change', { bubbles: true }));
-      }, value),
-      opTimeout,
-      'js-set-value'
-    );
+      // Method 2: Fallback to direct JS value setting
+      await withTimeout(
+        () => this.element.evaluate((el, newValue) => {
+          el.focus();
+          el.value = newValue;
+          el.dispatchEvent(new Event('input', { bubbles: true }));
+          el.dispatchEvent(new Event('change', { bubbles: true }));
+        }, value),
+        opTimeout,
+        'js-set-value'
+      );
+    } finally {
+      // Restore original autocomplete attribute
+      await this.element.evaluate((el, orig) => {
+        if (orig === null) {
+          el.removeAttribute('autocomplete');
+        } else {
+          el.setAttribute('autocomplete', orig);
+        }
+      }, savedAutocomplete).catch(() => {});
+    }
   }
 
   getActionDescription(value, identifier) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chrometools-mcp",
-  "version": "3.4.0",
+  "version": "3.4.1",
   "description": "MCP (Model Context Protocol) server for Chrome automation using Puppeteer. Persistent browser sessions, UI framework detection (MUI, Ant Design, etc.), Page Object support, visual testing, Figma comparison. Works seamlessly in WSL, Linux, macOS, and Windows.",
   "type": "module",
   "main": "index.js",