chrometools-mcp 3.2.10 → 3.3.8

package/extension/background.js

@@ -21,6 +21,10 @@ let nativePort = null;
 let isConnected = false;
 const tabsState = new Map(); // tabId -> {url, title, active, windowId}
 
+// Network requests storage (persists across page navigations)
+const networkRequests = new Map(); // requestId -> request info
+const MAX_NETWORK_REQUESTS = 500;
+
 // Recorder state (persisted in storage)
 let recorderState = {
   isRecording: false,
@@ -152,6 +156,24 @@ function handleBridgeMessage(message) {
       sendToBridge({ type: 'pong', requestId: message.requestId });
       break;
 
+    case 'get_network_requests':
+      // Return recent network requests
+      const requests = Array.from(networkRequests.values());
+      sendToBridge({
+        type: 'network_requests',
+        payload: { requests },
+        requestId: message.requestId
+      });
+      break;
+
+    case 'clear_network_requests':
+      networkRequests.clear();
+      sendToBridge({
+        type: 'network_requests_cleared',
+        requestId: message.requestId
+      });
+      break;
+
     default:
       console.log('[ChromeTools] Unknown message from Bridge:', message.type);
   }
@@ -293,6 +315,101 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
   }
 });
 
+// ============================================
+// Network Request Tracking (via webRequest API)
+// Persists across page navigations!
+// ============================================
+
+/**
+ * Clean old network requests to prevent memory leak
+ */
+function cleanOldNetworkRequests() {
+  if (networkRequests.size > MAX_NETWORK_REQUESTS) {
+    const entries = Array.from(networkRequests.entries());
+    const removeCount = entries.length - MAX_NETWORK_REQUESTS;
+    for (let i = 0; i < removeCount; i++) {
+      networkRequests.delete(entries[i][0]);
+    }
+  }
+}
+
+// Track when request starts (captures POST/PUT/PATCH before navigation)
+chrome.webRequest.onBeforeRequest.addListener(
+  (details) => {
+    // Only track mutation requests (POST, PUT, PATCH, DELETE)
+    if (['POST', 'PUT', 'PATCH', 'DELETE'].includes(details.method)) {
+      const requestInfo = {
+        requestId: details.requestId,
+        url: details.url,
+        method: details.method,
+        type: details.type, // main_frame, xmlhttprequest, etc.
+        tabId: details.tabId,
+        timestamp: Date.now(),
+        status: 'pending',
+        initiator: details.initiator || null
+      };
+
+      networkRequests.set(details.requestId, requestInfo);
+      cleanOldNetworkRequests();
+
+      // Send to Bridge
+      sendToBridge({
+        type: 'network_request_started',
+        payload: requestInfo
+      });
+
+      console.log(`[ChromeTools] Network: ${details.method} ${details.url}`);
+    }
+  },
+  { urls: ['<all_urls>'] }
+);
+
+// Track when request completes
+chrome.webRequest.onCompleted.addListener(
+  (details) => {
+    const request = networkRequests.get(details.requestId);
+    if (request) {
+      request.status = details.statusCode;
+      request.statusText = details.statusLine;
+      request.completedAt = Date.now();
+
+      // Send update to Bridge
+      sendToBridge({
+        type: 'network_request_completed',
+        payload: {
+          requestId: details.requestId,
+          status: details.statusCode,
+          statusText: details.statusLine
+        }
+      });
+
+      console.log(`[ChromeTools] Network completed: ${request.method} ${request.url} -> ${details.statusCode}`);
+    }
+  },
+  { urls: ['<all_urls>'] }
+);
+
+// Track request errors
+chrome.webRequest.onErrorOccurred.addListener(
+  (details) => {
+    const request = networkRequests.get(details.requestId);
+    if (request) {
+      request.status = 'failed';
+      request.error = details.error;
+      request.completedAt = Date.now();
+
+      sendToBridge({
+        type: 'network_request_failed',
+        payload: {
+          requestId: details.requestId,
+          error: details.error
+        }
+      });
+    }
+  },
+  { urls: ['<all_urls>'] }
+);
+
 // ============================================
 // Icon Management
 // ============================================

package/extension/content.js

@@ -149,8 +149,10 @@
 
     return Array.from(element.classList).filter(cls => {
       if (cls.length < 2) return false;
+      // Filter out Tailwind classes with special characters (colons, slashes, brackets)
+      if (/[:\/\[\]]/.test(cls)) return false;
       return !unstablePatterns.some(p => p.test(cls));
-    }).slice(0, 3);
+    }).slice(0, 3).map(cls => CSS.escape(cls));
   }
 
   function getNthChildPath(element, maxDepth = 5) {

package/extension/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "ChromeTools MCP",
-  "version": "3.1.2",
+  "version": "3.3.6",
   "description": "Tab tracking and scenario recording for chrometools-mcp",
 
   "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAxLLqg7Nu1h9ogRVgQoVMRPv8Jp7uRJugZSGUh++Niq0xm3khJefBuJ3L0dSG6xb9tkjTdgqUyg81VUgJBDVw9Bxu6iz1uL17VnEGHDZKe5wpsEpG8o6ZsTWtKRDeoxmkCGSOSDsh/ihlJe8mFaqpBYz6RBaO28R89TNobVhSobTQPB1ptyEND7W7JnsnMOiMcTo9l6j9HrIHLoHj7tO42DHNI4tEyLxI7C6R3i5dLIdwwxJMj0Hhrx4Ncmh24AzPyZypxVvpa1V7HP3sAXGBoUjLd/SEaY8j50lnaIQI3AkYv86pS9l6EZ6y3XCuW7C7W9guTTL/7ZNawYoE2bJ1HwIDAQAB",
@@ -12,6 +12,7 @@
     "scripting",
     "storage",
     "webNavigation",
+    "webRequest",
     "nativeMessaging"
   ],
 

package/index.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 
 import {Server} from "@modelcontextprotocol/sdk/server/index.js";
 import {StdioServerTransport} from "@modelcontextprotocol/sdk/server/stdio.js";
@@ -360,12 +360,65 @@ async function executeToolInternal(name, args) {
       };
     }
 
+    /**
+     * Check if identifier looks like an APOM ID (e.g., button_8, input_4, form_1)
+     */
+    function isApomIdPattern(identifier) {
+      return /^[a-z]+_\d+$/.test(identifier);
+    }
+
+    /**
+     * Quick element registration - runs APOM analysis and registers elements
+     */
+    async function quickRegisterElements(page) {
+      await page.evaluate((apomTreeConverterCode, selectorResolverCode) => {
+        // Inject utilities
+        if (typeof buildAPOMTree === 'undefined') {
+          eval(apomTreeConverterCode);
+        }
+        if (typeof registerElements === 'undefined') {
+          eval(selectorResolverCode);
+        }
+
+        // Build APOM tree (interactive only for speed)
+        const apomData = buildAPOMTree(true);
+
+        // Flatten and register elements
+        const elementsArray = [];
+        function collectElements(node) {
+          if (!node) return;
+          if (node.id && node.selector) {
+            elementsArray.push({
+              id: node.id,
+              selector: node.selector,
+              metadata: { type: node.type, tag: node.tag }
+            });
+          }
+          if (node.children) {
+            node.children.forEach(child => collectElements(child));
+          }
+          // Also check for container keys (div_container_0, etc.)
+          Object.keys(node).forEach(key => {
+            if (Array.isArray(node[key])) {
+              node[key].forEach(child => collectElements(child));
+            }
+          });
+        }
+        collectElements(apomData.tree);
+
+        if (typeof registerElements !== 'undefined') {
+          registerElements(elementsArray);
+        }
+      }, apomTreeConverter, selectorResolver);
+    }
+
     /**
      * Helper: Resolve selector (ID or CSS selector)
      * Injects selector-resolver and resolves element identifier
+     * Auto-refreshes element registry if APOM ID not found
      */
-    async function resolveSelector(page, identifier) {
-      return await page.evaluate((id, selectorResolverCode) => {
+    async function resolveSelector(page, identifier, timeoutMs = 5000) {
+      const tryResolve = () => page.evaluate((id, selectorResolverCode) => {
         // Inject selector resolver if not already loaded
         if (typeof resolveSelector === 'undefined') {
           eval(selectorResolverCode);
@@ -378,6 +431,20 @@ async function executeToolInternal(name, args) {
           found: document.querySelector(resolved.selector) !== null
         };
       }, identifier, selectorResolver);
+
+      const timeoutPromise = new Promise((_, reject) =>
+        setTimeout(() => reject(new Error(`resolveSelector timed out after ${timeoutMs}ms`)), timeoutMs)
+      );
+
+      let resolved = await Promise.race([tryResolve(), timeoutPromise]);
+
+      // Auto-refresh: if looks like APOM ID but not found, re-register elements and retry
+      if (!resolved.found && isApomIdPattern(identifier)) {
+        await quickRegisterElements(page);
+        resolved = await Promise.race([tryResolve(), timeoutPromise]);
+      }
+
+      return resolved;
     }
 
     if (name === "click") {
@@ -401,31 +468,56 @@ async function executeToolInternal(name, args) {
           throw new Error(`Element not found: ${identifier}`);
         }
 
-        // Capture timestamp BEFORE click for error filtering
+        // Capture timestamp and URL BEFORE click for diagnostics
         const beforeClickTimestamp = Date.now();
+        const urlBeforeClick = page.url();
+
+        // ALWAYS scroll to element first to ensure it's in viewport
+        await element.evaluate(el => el.scrollIntoView({ behavior: 'instant', block: 'center' }));
+
+        // Click with timeout to prevent hanging on navigation
+        const clickWithTimeout = async (timeoutMs = 5000) => {
+          const clickPromise = element.click().catch(() => {
+            // If Puppeteer click fails, fallback to JS click
+            return element.evaluate(el => el.click());
+          });
+          const timeoutPromise = new Promise((_, reject) =>
+            setTimeout(() => reject(new Error('click timeout')), timeoutMs)
+          );
+          return Promise.race([clickPromise, timeoutPromise]).catch(() => {
+            // If click times out, try JS click as last resort
+            return element.evaluate(el => el.click());
+          });
+        };
 
-        // Try multiple click methods for better reliability
-        try {
-          // Method 1: Puppeteer click (most reliable for most cases)
-          await element.click();
-        } catch (clickError) {
-          // Method 2: Scroll into view and try again
-          try {
-            await element.evaluate(el => el.scrollIntoView({ behavior: 'instant', block: 'center' }));
-            await new Promise(resolve => setTimeout(resolve, 100));
-            await element.click();
-          } catch (scrollClickError) {
-            // Method 3: JavaScript click (works for hidden/overlapping elements)
-            await element.evaluate(el => el.click());
-          }
-        }
+        await clickWithTimeout();
 
         // NEW POST-CLICK PATTERN:
-        // 1. Run post-click diagnostics (waits 500ms, checks pending requests, collects errors)
-        const diagnostics = await runPostClickDiagnostics(page, beforeClickTimestamp);
+        // 1. Run post-click diagnostics (waits for network requests within 200ms, max 10s timeout)
+        let diagnostics;
+        try {
+          diagnostics = await runPostClickDiagnostics(page, beforeClickTimestamp, {
+            skipNetworkWait: validatedArgs.skipNetworkWait,
+            networkWaitTimeout: validatedArgs.networkWaitTimeout,
+            urlBeforeAction: urlBeforeClick
+          });
+        } catch (diagError) {
+          // Diagnostics may fail if page navigated - create minimal diagnostics
+          diagnostics = {
+            networkActivity: { trackedRequests: [], bridgeRequests: [], stillPending: 0, pendingRequests: [] },
+            navigation: { from: urlBeforeClick, to: page.url(), likelyFormSubmit: true },
+            errors: { consoleErrors: [], networkErrors: [], totalErrors: 0 },
+            hasErrors: false
+          };
+        }
 
         // 2. Generate AI hints after click
-        const hints = await generateClickHints(page, identifier);
+        let hints;
+        try {
+          hints = await generateClickHints(page, identifier);
+        } catch (hintsError) {
+          hints = { modalOpened: false, newElements: [], suggestedNext: [] };
+        }
 
         // 3. Format output with hints and diagnostics
         let hintsText = '\n\n** AI HINTS **';
@@ -464,36 +556,60 @@ async function executeToolInternal(name, args) {
     if (name === "type") {
       const validatedArgs = schemas.TypeSchema.parse(args);
       const page = await getLastOpenPage();
+      const timeout = validatedArgs.timeout || 30000;
 
-      // Get identifier (id or selector)
-      const identifier = validatedArgs.id || validatedArgs.selector;
+      // Wrap operation in timeout
+      const typeOperation = async () => {
+        // Get identifier (id or selector)
+        const identifier = validatedArgs.id || validatedArgs.selector;
 
-      // Resolve selector (supports both APOM ID and CSS selector)
-      const resolved = await resolveSelector(page, identifier);
-      if (!resolved.found) {
-        throw new Error(`Element not found: ${identifier}${resolved.isPageObjectId ? ' (APOM ID)' : ' (CSS selector)'}`);
-      }
+        // Resolve selector (supports both APOM ID and CSS selector)
+        const resolved = await resolveSelector(page, identifier);
+        if (!resolved.found) {
+          throw new Error(`Element not found: ${identifier}${resolved.isPageObjectId ? ' (APOM ID)' : ' (CSS selector)'}`);
+        }
 
-      const element = await page.$(resolved.selector);
-      if (!element) {
-        throw new Error(`Element not found: ${identifier}`);
-      }
+        const element = await page.$(resolved.selector);
+        if (!element) {
+          throw new Error(`Element not found: ${identifier}`);
+        }
 
-      // Use input model to handle the element appropriately
-      const model = await getInputModel(element, page);
-      const options = {
-        delay: validatedArgs.delay !== undefined ? validatedArgs.delay : 30,
-        clearFirst: validatedArgs.clearFirst !== undefined ? validatedArgs.clearFirst : true,
-      };
+        // ALWAYS scroll to element first to ensure it's in viewport
+        await element.evaluate(el => el.scrollIntoView({ behavior: 'instant', block: 'center' }));
+        await new Promise(resolve => setTimeout(resolve, 100));
 
-      await model.setValue(validatedArgs.text, options);
-      const description = model.getActionDescription(validatedArgs.text, identifier);
+        // Use input model to handle the element appropriately
+        const model = await getInputModel(element, page);
+        const options = {
+          delay: validatedArgs.delay !== undefined ? validatedArgs.delay : 30,
+          clearFirst: validatedArgs.clearFirst !== undefined ? validatedArgs.clearFirst : true,
+        };
 
-      return {
-        content: [
-          { type: "text", text: description }
-        ],
+        await model.setValue(validatedArgs.text, options);
+        const description = model.getActionDescription(validatedArgs.text, identifier);
+
+        // Capture timestamp AFTER typing finishes - requests should start within 200ms of this
+        const afterTypeTimestamp = Date.now();
+
+        // Run diagnostics with 3s timeout for type (shorter than click's 10s)
+        const diagnostics = await runPostClickDiagnostics(page, afterTypeTimestamp, {
+          networkWaitTimeout: 3000
+        });
+        const diagnosticsText = formatDiagnosticsForAI(diagnostics);
+
+        return {
+          content: [
+            { type: "text", text: `${description}${diagnosticsText}` }
+          ],
+        };
       };
+
+      // Execute with timeout
+      const timeoutPromise = new Promise((_, reject) =>
+        setTimeout(() => reject(new Error(`Type operation timed out after ${timeout}ms`)), timeout)
+      );
+
+      return Promise.race([typeOperation(), timeoutPromise]);
     }
 
     if (name === "getComputedCss") {
@@ -2096,20 +2212,25 @@ Start coding now.`;
       };
     }
 
+    // Store previous analysis for diff calculation
+    if (!global.previousApomAnalysis) {
+      global.previousApomAnalysis = new Map(); // pageUrl -> analysis data
+    }
+
     if (name === "analyzePage") {
       const validatedArgs = schemas.AnalyzePageSchema.parse(args);
       const page = await getLastOpenPage();
       const pageUrl = page.url();
 
       // APOM Tree format (default) - v2 with tree structure and positioning
-      const apomResult = await page.evaluate((apomTreeConverterCode, selectorResolverCode, shouldRegister, includeAll) => {
+      const apomResult = await page.evaluate((apomTreeConverterCode, selectorResolverCode, shouldRegister, includeAll, viewportOnly) => {
         // Inject utilities
         eval(apomTreeConverterCode);
         eval(selectorResolverCode);
 
         // Build APOM tree
         // interactiveOnly = !includeAll (if includeAll is true, we want ALL elements)
-        const apomData = buildAPOMTree(!includeAll);
+        const apomData = buildAPOMTree(!includeAll, viewportOnly);
 
         // Register elements in selector resolver if requested
         if (shouldRegister) {
@@ -2142,7 +2263,43 @@ Start coding now.`;
         }
 
         return apomData;
-      }, apomTreeConverter, selectorResolver, validatedArgs.registerElements !== false, validatedArgs.includeAll || false);
+      }, apomTreeConverter, selectorResolver, validatedArgs.registerElements !== false, validatedArgs.includeAll || false, validatedArgs.viewportOnly || false);
+
+      // Handle diff mode
+      if (validatedArgs.diff) {
+        const previousAnalysis = global.previousApomAnalysis.get(pageUrl);
+
+        if (previousAnalysis) {
+          // Calculate diff
+          const diff = calculateApomDiff(previousAnalysis, apomResult);
+
+          // Store current analysis for next diff
+          global.previousApomAnalysis.set(pageUrl, apomResult);
+
+          return {
+            content: [{
+              type: 'text',
+              text: JSON.stringify({
+                mode: 'diff',
+                pageId: apomResult.pageId,
+                url: apomResult.url,
+                timestamp: apomResult.timestamp,
+                previousTimestamp: previousAnalysis.timestamp,
+                diff,
+                metadata: apomResult.metadata,
+                alerts: apomResult.alerts
+              })
+            }]
+          };
+        } else {
+          // No previous analysis, return full result with note
+          global.previousApomAnalysis.set(pageUrl, apomResult);
+          apomResult._note = 'First analysis for this page, no diff available';
+        }
+      } else {
+        // Store for future diff
+        global.previousApomAnalysis.set(pageUrl, apomResult);
+      }
 
       return {
         content: [{
@@ -2152,6 +2309,82 @@ Start coding now.`;
       };
     }
 
+    /**
+     * Calculate diff between two APOM analyses
+     */
+    function calculateApomDiff(previous, current) {
+      const previousElements = flattenApomTree(previous.tree);
+      const currentElements = flattenApomTree(current.tree);
+
+      const previousIds = new Set(previousElements.map(e => e.id));
+      const currentIds = new Set(currentElements.map(e => e.id));
+
+      const added = currentElements.filter(e => !previousIds.has(e.id));
+      const removed = previousElements.filter(e => !currentIds.has(e.id));
+
+      // Find changed elements (same ID but different content)
+      const changed = [];
+      for (const curr of currentElements) {
+        if (previousIds.has(curr.id)) {
+          const prev = previousElements.find(e => e.id === curr.id);
+          if (prev && JSON.stringify(prev.metadata) !== JSON.stringify(curr.metadata)) {
+            changed.push({
+              id: curr.id,
+              type: curr.type,
+              before: prev.metadata,
+              after: curr.metadata
+            });
+          }
+        }
+      }
+
+      return {
+        added: added.length > 0 ? added : undefined,
+        removed: removed.length > 0 ? removed : undefined,
+        changed: changed.length > 0 ? changed : undefined,
+        summary: {
+          addedCount: added.length,
+          removedCount: removed.length,
+          changedCount: changed.length
+        }
+      };
+    }
+
+    /**
+     * Flatten APOM tree to array of elements
+     */
+    function flattenApomTree(node, result = []) {
+      if (!node) return result;
+
+      // Handle compact format: { "tag_id": [children] }
+      if (typeof node === 'object' && !node.id && !node.tag) {
+        const keys = Object.keys(node);
+        for (const key of keys) {
+          if (Array.isArray(node[key])) {
+            node[key].forEach(child => flattenApomTree(child, result));
+          }
+        }
+        return result;
+      }
+
+      // Interactive element with id
+      if (node.id) {
+        result.push({
+          id: node.id,
+          tag: node.tag,
+          type: node.type,
+          metadata: node.metadata
+        });
+      }
+
+      // Process children
+      if (node.children) {
+        node.children.forEach(child => flattenApomTree(child, result));
+      }
+
+      return result;
+    }
+
     if (name === "getElementDetails") {
       const validatedArgs = schemas.GetElementDetailsSchema.parse(args);
       const page = await getLastOpenPage();
@@ -2462,6 +2695,9 @@ Start coding now.`;
       const extensionConnected = isExtensionConnected();
       const debugInfo = getWsDebugInfo();
 
+      // Always log connection state for debugging
+      console.error(`[chrometools-mcp] enableRecorder check: bridgeConnected=${debugInfo.bridgeConnected}, extensionConnected=${extensionConnected}, wsState=${debugInfo.readyState}`);
+
       if (extensionConnected) {
         return {
           content: [{

package/models/TextInputModel.js

@@ -7,25 +7,76 @@
 
 import { BaseInputModel } from './BaseInputModel.js';
 
+/**
+ * Wrap operation with timeout to prevent hanging
+ */
+async function withTimeout(operation, timeoutMs, operationName) {
+  const timeoutPromise = new Promise((_, reject) =>
+    setTimeout(() => reject(new Error(`${operationName} timed out after ${timeoutMs}ms`)), timeoutMs)
+  );
+  return Promise.race([operation(), timeoutPromise]);
+}
+
 export class TextInputModel extends BaseInputModel {
   static get inputTypes() {
     return ['text', 'email', 'tel', 'password', 'search', 'url', 'number', null];
   }
 
   /**
-   * Type text into the input using keyboard simulation
+   * Type text into the input using keyboard simulation with JS fallback
    * @param {string} value - Text to type
    * @param {object} options - { delay, clearFirst }
    */
   async setValue(value, options = {}) {
     const { delay = 0, clearFirst = true } = options;
+    const opTimeout = 5000; // 5s timeout per operation
+
+    // 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.select(); // Select all text
+          }
+        }, clearFirst),
+        opTimeout,
+        'focus-and-select'
+      );
+
+      // 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'
+      );
 
-    if (clearFirst) {
-      await this.element.click({ clickCount: 3 });
-      await this.page.keyboard.press('Backspace');
+      // Verify the value was set
+      const actualValue = await this.element.evaluate(el => el.value);
+      if (actualValue.includes(value)) {
+        return; // Success
+      }
+    } catch (e) {
+      // Fall through to JS method
     }
 
-    await this.element.type(value, { delay });
+    // 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'
+    );
   }
 
   getActionDescription(value, identifier) {