chrometools-mcp 3.2.10 → 3.3.8

package/CHANGELOG.md

@@ -2,6 +2,175 @@
 
 All notable changes to this project will be documented in this file.
 
+## [3.3.8] - 2026-02-03
+
+### Added
+- **analyzePage: addEventListener tracking for Angular/React/Vue** — Monkey-patch detection
+  - Injects tracker via `evaluateOnNewDocument` before page load
+  - Catches `addEventListener('click', ...)` calls from any framework
+  - Solves Angular detection (compiled `(click)` bindings now visible)
+  - WeakMap storage prevents memory leaks
+  - `hasExplicitClickBinding()` now checks `window.__hasClickListener()`
+
+- **analyzePage: viewportOnly flag** — Filter to visible elements only
+  - Reduces output by 30-56% on large pages
+  - Useful for data-heavy pages with content below fold
+
+- **analyzePage: diff mode** — Show only changes since last analysis
+  - Returns `{added, removed, changed}` structure
+  - ~80-90% size reduction for incremental updates
+
+- **analyzePage: clickTarget legend** — Clarified in tool description
+  - Format: `"tag:id"` (e.g., `"div:container_19"`)
+  - No clickTarget = element handles its own click
+
+## [3.3.7] - 2026-02-03
+
+### Performance
+- **analyzePage: 26% output size reduction** — Optimized JSON structure
+  - Removed `position` for static elements (default, no need to include)
+  - Removed `zIndex: "auto"` (default value)
+  - Removed `isStacking`, `hasBackdrop`, `isFullscreen` from position object
+  - Removed empty `children: []` arrays
+  - Filtered out `null`, `undefined`, empty string, and `false` values from metadata
+  - Google Search benchmark: ~38 KB → ~28 KB
+
+### Added
+- **CLAUDE.md: analyzePage benchmark requirement** — Mandatory performance check
+  - Test URL: `https://www.google.com/search?q=puppeteer+mcp+server`
+  - Baseline: ~28 KB, threshold: < 40 KB
+  - Must run after any changes to analyzePage tool
+
+## [3.3.6] - 2026-02-03
+
+### Added
+- **Chrome Extension: POST request tracking** — Track POST requests via webRequest API
+  - Extension now captures POST/PUT/PATCH requests that Puppeteer may miss
+  - Shows in "Browser-level requests (via Extension)" section
+  - Useful for SPA apps with complex async request patterns
+
+## [3.3.5] - 2026-01-30
+
+### Fixed
+- **type/click: Intermittent timeout fix** — Added timeouts to internal operations
+  - `resolveSelector` now has 5s timeout (was unbounded)
+  - `getElementInfo` now has 5s timeout (was unbounded)
+  - `TextInputModel.setValue` operations have individual 5s timeouts
+  - Prevents indefinite hanging on unstable CDP sessions
+  - Error messages now show which specific operation timed out
+
+## [3.3.4] - 2026-01-30
+
+### Added
+- **click: Form submit detection for non-SPA apps** — Detect classic form submissions with page reload
+  - Tracks URL before and after click to detect page navigation
+  - Reports "Page navigation detected (form submit)" when URL changes
+  - Solves issue where POST requests were lost during page reload
+  - Works for Django, Rails, PHP and other server-rendered apps
+  - Example output: `🔄 Page navigation detected (form submit): /form → /success`
+
+## [3.3.3] - 2026-01-30
+
+### Fixed
+- **click: Post-click diagnostics timeout** — Fixed 30s timeout caused by network wait logic
+  - Now waits only for mutation requests (POST/PUT/PATCH) started within 200ms after click
+  - Ignores GET requests completely (were causing unnecessary waits)
+  - Hard 10s timeout limit enforced (never hangs indefinitely)
+  - Always returns success even if requests still pending after 10s
+  - Shows pending requests status instead of reporting timeout
+  - Changed output from "Form submission" to "Mutation requests"
+  - Example output:
+    ```
+    📡 Mutation requests detected (2 POST/PUT/PATCH):
+      1. ✓ POST /admin/tenant/.../change/ → 302 Found
+      2. ⏳ POST /api/slow-endpoint/ → pending
+
+    ⏳ 1 request(s) still pending after 10000ms timeout
+    ```
+
+### Performance
+- **click: Removed unnecessary delays** — Removed 100ms waits after scrollIntoView and retry clicks
+  - Click operations now complete instantly when no mutation requests detected
+  - Typical click time: <50ms (was 500-10000ms with old diagnostics)
+
+## [3.3.2] - 2026-01-30
+
+### Fixed
+- **click/type: Viewport scrolling** — Always scrolls to element before interaction
+  - Prevents 30s timeout when elements are outside viewport
+  - Moves scrollIntoView BEFORE first click/type attempt (was in fallback)
+  - Fixes Django admin forms hanging after multiple navigations
+  - Pattern: scroll → wait 100ms → interact
+  - Applied to both click and type tools
+
+## [3.3.1] - 2026-01-30
+
+### Added
+- **click: All network requests visibility** — Shows ALL requests started within 200ms after click
+  - AI agent now sees complete network activity picture after every click
+  - Shows: method, URL, and status code for each request
+  - Example output:
+    ```
+    📡 Network requests started within 200ms after click (15 total):
+      1. ✓ GET /api/auth/ws_token/ → 200 OK
+      2. ✓ GET /static/css/app.css → 200 OK
+      3. ✓ POST /admin/tenant/.../change/ → 302 Found
+    ```
+  - Helps AI understand what happened after click (form submission, navigation, polling, etc.)
+  - 200ms window captures both mutation requests and side-effect requests
+
+### Changed
+- **Enhanced diagnostics output** — Restructured to show all requests first, then mutation tracking
+  - Section 1: All requests in 200ms window (complete visibility)
+  - Section 2: Form submission status (POST/PATCH/PUT tracking)
+  - Clear icons: ✓ (success), ✗ (error), ⏳ (pending)
+  - Agent can immediately see if any requests occurred or not
+
+## [3.3.0] - 2026-01-30
+
+### Added
+- **click: skipNetworkWait parameter** — Skip network wait for forms with long-polling/WebSockets
+  - New parameter: `skipNetworkWait: boolean` (default: false)
+  - Use case: Pages with continuous long-polling to get instant response
+  - Example: `click({ selector: 'button[type="submit"]', skipNetworkWait: true })`
+- **click: networkWaitTimeout parameter** — Custom network wait timeout
+  - New parameter: `networkWaitTimeout: number` (default: 10000ms)
+  - Configurable per-click timeout for network requests
+  - Example: `click({ selector: '.save-btn', networkWaitTimeout: 5000 })`
+- **type: timeout parameter** — Explicit timeout for type operations
+  - New parameter: `timeout: number` (default: 30000ms)
+  - Prevents infinite hangs on input fields
+  - Example: `type({ selector: 'input[name="url"]', text: 'value', timeout: 10000 })`
+
+### Changed
+- **Smart form submission tracking** — Only tracks POST/PATCH/PUT requests in 100ms window
+  - Filters mutation requests (POST/PATCH/PUT) that started within 100ms after click
+  - Waits ONLY for these mutation requests (up to 10s)
+  - Ignores all other requests (GET, polling, analytics, etc.)
+  - Shows form submission status: `✓ POST /admin/tenant/.../change/ → 302 Found`
+  - Example: Django form with 50 polling requests → only 1 POST tracked
+- **Type operation timeout protection** — Wrapped in Promise.race with configurable timeout
+  - Prevents 120s hangs on problematic input fields
+  - Returns clear error message: "Type operation timed out after Xms"
+  - Django forms: type now fails fast instead of hanging
+
+### Fixed
+- **Django form timeout issues** — Fixed 30s click timeout and 120s type timeout
+  - Root cause: Long-polling/WebSockets created noise in network tracking
+  - Solution: Track only POST/PATCH/PUT requests within 100ms detection window
+  - Type operations now have explicit timeout protection
+  - Example: Django Admin forms now show reliable form submission status
+
+## [3.2.11] - 2026-01-30
+
+### Fixed
+- **Tailwind CSS selector escape** — Fixed `analyzePage` failing on pages with Tailwind CSS
+  - Tailwind classes with colons (e.g., `hover:text-gray-800`) broke `querySelectorAll`
+  - Added filtering for classes containing special characters (`:`, `/`, `[`, `]`)
+  - Applied `CSS.escape()` to class names when building CSS selectors
+  - Fixed in: APOM tree builder, Angular tools, hints generator, content script
+  - Example: Page with Tailwind → no more "not a valid selector" errors
+
 ## [3.2.10] - 2026-01-29
 
 ### Fixed

package/README.md

@@ -494,9 +494,11 @@ Click an element with optional result screenshot. **PREFERRED**: Use APOM ID fro
   - `waitAfter` (optional): Wait time in ms (default: 1500)
   - `screenshot` (optional): Capture screenshot (default: false for performance) ⚡
   - `timeout` (optional): Max operation time in ms (default: 30000)
-- **Use case**: Buttons, links, form submissions
-- **Returns**: Confirmation text + optional screenshot
-- **Performance**: 2-10x faster without screenshot
+  - `skipNetworkWait` (optional): Skip waiting for network requests (default: false). **Use for pages with continuous long-polling to get instant response.**
+  - `networkWaitTimeout` (optional): Custom network wait timeout in ms (default: 10000). Only used if skipNetworkWait is false.
+- **Use case**: Buttons, links, form submissions, Django admin forms
+- **Returns**: Confirmation text + optional screenshot + network diagnostics
+- **Performance**: 2-10x faster without screenshot, instant with skipNetworkWait
 - **Example**:
   ```javascript
   // PREFERRED: Using APOM ID
@@ -504,6 +506,12 @@ Click an element with optional result screenshot. **PREFERRED**: Use APOM ID fro
 
   // Alternative: Using CSS selector
   click({ selector: "button[type='submit']" })
+
+  // Django forms with WebSockets (prevents timeout)
+  click({ selector: ".submit-row input[type='submit']", skipNetworkWait: true })
+
+  // Custom network timeout for slow APIs
+  click({ id: "save_btn", networkWaitTimeout: 10000 })
   ```
 
 #### type
@@ -513,9 +521,10 @@ Type text into input fields with optional clearing and typing delay. **PREFERRED
   - `selector` (optional): CSS selector. Use when APOM ID is not available.
   - ⚠️ Either `id` OR `selector` required (mutually exclusive)
   - `text` (required): Text to type
-  - `delay` (optional): Delay between keystrokes in ms
+  - `delay` (optional): Delay between keystrokes in ms (default: 30)
   - `clearFirst` (optional): Clear field first (default: true)
-- **Use case**: Filling forms, search boxes, text inputs
+  - `timeout` (optional): Max operation time in ms (default: 30000). **Prevents infinite hangs on Django forms.**
+- **Use case**: Filling forms, search boxes, text inputs, Django admin forms
 - **Returns**: Confirmation text
 - **Example**:
   ```javascript

package/angular-tools.js

@@ -29,10 +29,16 @@ export async function listAngularComponents(page, includeHidden = false) {
 
         const component = ng.getComponent(el);
         if (component && component.constructor && component.constructor.name !== 'Object') {
-          // Get selector
+          // Get selector (filter out Tailwind classes with special characters)
           const tagName = el.tagName.toLowerCase();
-          const id = el.id ? `#${el.id}` : '';
-          const classes = el.className ? `.${el.className.split(' ').join('.')}` : '';
+          const id = el.id ? `#${CSS.escape(el.id)}` : '';
+          const stableClasses = el.className
+            ? el.className.split(' ')
+                .filter(c => c && !/[:\/\[\]]/.test(c))
+                .slice(0, 3)
+                .map(c => CSS.escape(c))
+            : [];
+          const classes = stableClasses.length > 0 ? `.${stableClasses.join('.')}` : '';
           const selector = id || `${tagName}${classes}` || tagName;
 
           // Get methods (public only by default)

package/bridge/bridge-client.js

@@ -12,8 +12,17 @@
  */
 
 import WebSocket from 'ws';
+import { appendFileSync } from 'fs';
+import { homedir } from 'os';
+import { join } from 'path';
 
 const BRIDGE_PORT = 9223;
+const LOG_FILE = join(homedir(), 'chrometools-bridge.log');
+
+function logToFile(message) {
+  const timestamp = new Date().toISOString();
+  appendFileSync(LOG_FILE, `${timestamp} ${message}\n`);
+}
 const RECONNECT_DELAY = 2000;
 const MAX_RECONNECT_ATTEMPTS = 5;
 
@@ -64,19 +73,24 @@ export function setActiveTabSyncHandler(handler) {
  */
 export async function connectToBridge() {
   return new Promise((resolve) => {
+    logToFile(`connectToBridge called, isConnected=${isConnected}, wsState=${ws?.readyState}`);
+
     if (isConnected && ws?.readyState === WebSocket.OPEN) {
       debugLog('Already connected to Bridge');
+      logToFile('Already connected, skipping');
       resolve(true);
       return;
     }
 
     debugLog(`Connecting to Bridge on port ${BRIDGE_PORT}...`);
+    logToFile(`Attempting connection to ws://127.0.0.1:${BRIDGE_PORT}`);
 
     try {
       ws = new WebSocket(`ws://127.0.0.1:${BRIDGE_PORT}`);
 
       const connectTimeout = setTimeout(() => {
-        debugLog('Connection timeout');
+        console.error('[chrometools-mcp] Bridge connection timeout (5s)');
+        logToFile('TIMEOUT: Connection timeout after 5s');
         ws?.close();
         resolve(false);
       }, 5000);
@@ -86,7 +100,8 @@ export async function connectToBridge() {
         isConnected = true;
         reconnectAttempts = 0;
         debugLog('Connected to Bridge');
-        console.error('[chrometools-mcp] Connected to Bridge Service');
+        console.error('[chrometools-mcp] Connected to Bridge Service (isConnected=true)');
+        logToFile('SUCCESS: WebSocket connected, isConnected=true');
         resolve(true);
       });
 
@@ -99,8 +114,9 @@ export async function connectToBridge() {
         }
       });
 
-      ws.on('close', () => {
-        debugLog('Disconnected from Bridge');
+      ws.on('close', (code, reason) => {
+        console.error(`[chrometools-mcp] Bridge disconnected (code=${code}, reason=${reason || 'none'})`);
+        logToFile(`CLOSE: WebSocket closed, code=${code}, reason=${reason || 'none'}`);
         isConnected = false;
         ws = null;
         scheduleReconnect();
@@ -108,12 +124,14 @@ export async function connectToBridge() {
 
       ws.on('error', (error) => {
         clearTimeout(connectTimeout);
-        debugLog('Connection error:', error.message);
+        console.error(`[chrometools-mcp] Bridge connection error: ${error.message}`);
+        logToFile(`ERROR: WebSocket error: ${error.message}`);
         resolve(false);
       });
 
     } catch (error) {
-      debugLog('Failed to create WebSocket:', error.message);
+      console.error(`[chrometools-mcp] Failed to create WebSocket: ${error.message}`);
+      logToFile(`EXCEPTION: Failed to create WebSocket: ${error.message}`);
       resolve(false);
     }
   });
@@ -125,7 +143,7 @@ export async function connectToBridge() {
 function scheduleReconnect() {
   if (reconnectTimer) return;
   if (reconnectAttempts >= MAX_RECONNECT_ATTEMPTS) {
-    debugLog(`Max reconnect attempts (${MAX_RECONNECT_ATTEMPTS}) reached`);
+    console.error(`[chrometools-mcp] Bridge: max reconnect attempts (${MAX_RECONNECT_ATTEMPTS}) reached, giving up`);
     return;
   }
 
@@ -360,6 +378,7 @@ export function isExtensionConnected() {
  * Check if connected to Bridge
  */
 export function isBridgeConnected() {
+  logToFile(`isBridgeConnected called, returning ${isConnected}`);
   return isConnected;
 }
 
@@ -470,3 +489,39 @@ export function getRecorderState() {
 export function getRecordings() {
   return bridgeState.recordings;
 }
+
+/**
+ * Get network requests from Bridge (tracked via Extension webRequest API)
+ * These persist across page navigations unlike CDP-based tracking
+ */
+export async function getNetworkRequestsFromBridge(options = {}) {
+  if (!isConnected) {
+    debugLog('Cannot get network requests: not connected to Bridge');
+    return [];
+  }
+
+  try {
+    const response = await sendCommand('get_network_requests', {}, options.timeout || 5000);
+    return response.payload?.requests || [];
+  } catch (error) {
+    debugLog('Failed to get network requests:', error.message);
+    return [];
+  }
+}
+
+/**
+ * Clear network requests in Bridge
+ */
+export async function clearNetworkRequestsFromBridge() {
+  if (!isConnected) {
+    return false;
+  }
+
+  try {
+    await sendCommand('clear_network_requests', {}, 5000);
+    return true;
+  } catch (error) {
+    debugLog('Failed to clear network requests:', error.message);
+    return false;
+  }
+}

package/bridge/bridge-service.js

@@ -7,7 +7,7 @@
  *
  * - Launched by Chrome when Extension starts
  * - Maintains state (tabs, recordings, events)
- * - Accepts 0-8 WebSocket clients
+ * - Accepts up to 20 WebSocket clients (with dead connection cleanup)
  * - Clients get full state on connect + real-time updates
  */
 
@@ -24,7 +24,7 @@ const require = createRequire(import.meta.url);
 // ============================================
 
 const WS_PORT = 9223;
-const MAX_CLIENTS = 8;
+const MAX_CLIENTS = 20;  // Increased from 8 to handle multiple MCP restarts
 const HOST_NAME = 'com.chrometools.bridge';
 
 // ============================================
@@ -40,11 +40,13 @@ const state = {
     metadata: null,
     secrets: {}
   },
+  networkRequests: new Map(), // requestId -> request info (from Extension webRequest API)
   eventLog: [],              // Ring buffer of recent events (max 1000)
   extensionConnected: false
 };
 
 const MAX_EVENT_LOG = 1000;
+const MAX_NETWORK_REQUESTS = 500;
 
 // ============================================
 // WebSocket Server for Claude/MCP Clients
@@ -61,6 +63,14 @@ function startWebSocketServer() {
   });
 
   wss.on('connection', (ws) => {
+    // Clean up dead connections before checking limit
+    for (const client of clients) {
+      if (client.readyState !== 1) { // Not OPEN
+        clients.delete(client);
+        log(`Cleaned up dead client (readyState=${client.readyState})`);
+      }
+    }
+
     if (clients.size >= MAX_CLIENTS) {
       log(`Max clients (${MAX_CLIENTS}) reached, rejecting connection`);
       ws.close(1013, 'Max clients reached');
@@ -105,6 +115,7 @@ function getFullState() {
     tabs: Array.from(state.tabs.values()),
     recordings: state.recordings,
     recorderState: state.recorderState,
+    networkRequests: Array.from(state.networkRequests.values()),
     extensionConnected: state.extensionConnected,
     timestamp: Date.now()
   };
@@ -153,6 +164,25 @@ function handleClientMessage(ws, message) {
       });
       break;
 
+    case 'get_network_requests':
+      // Return network requests from state (collected via Extension webRequest API)
+      sendToClient(ws, {
+        type: 'network_requests',
+        payload: {
+          requests: Array.from(state.networkRequests.values())
+        },
+        requestId: message.requestId
+      });
+      break;
+
+    case 'clear_network_requests':
+      state.networkRequests.clear();
+      sendToClient(ws, {
+        type: 'network_requests_cleared',
+        requestId: message.requestId
+      });
+      break;
+
     // Commands to forward to extension
     case 'start_recording':
     case 'stop_recording':
@@ -295,6 +325,54 @@ function handleExtensionMessage(message) {
       broadcastToClients({ type: 'pong' });
       break;
 
+    // Network request events (from Extension webRequest API)
+    case 'network_request_started':
+      state.networkRequests.set(message.payload.requestId, message.payload);
+      // Clean old requests
+      if (state.networkRequests.size > MAX_NETWORK_REQUESTS) {
+        const entries = Array.from(state.networkRequests.entries());
+        const removeCount = entries.length - MAX_NETWORK_REQUESTS;
+        for (let i = 0; i < removeCount; i++) {
+          state.networkRequests.delete(entries[i][0]);
+        }
+      }
+      broadcastToClients({ type: 'network_request_started', payload: message.payload });
+      break;
+
+    case 'network_request_completed':
+      if (state.networkRequests.has(message.payload.requestId)) {
+        const req = state.networkRequests.get(message.payload.requestId);
+        req.status = message.payload.status;
+        req.statusText = message.payload.statusText;
+        req.completedAt = Date.now();
+      }
+      broadcastToClients({ type: 'network_request_completed', payload: message.payload });
+      break;
+
+    case 'network_request_failed':
+      if (state.networkRequests.has(message.payload.requestId)) {
+        const req = state.networkRequests.get(message.payload.requestId);
+        req.status = 'failed';
+        req.error = message.payload.error;
+        req.completedAt = Date.now();
+      }
+      broadcastToClients({ type: 'network_request_failed', payload: message.payload });
+      break;
+
+    case 'network_requests':
+      // Response from extension with all network requests
+      broadcastToClients({
+        type: 'network_requests',
+        payload: message.payload,
+        requestId: message.requestId
+      });
+      break;
+
+    case 'network_requests_cleared':
+      state.networkRequests.clear();
+      broadcastToClients({ type: 'network_requests_cleared' });
+      break;
+
     default:
       // Forward unknown messages to clients
       broadcastToClients(message);

package/browser/page-manager.js

@@ -7,6 +7,59 @@
 import { getBrowser } from './browser-manager.js';
 // Note: injectRecorder removed - now using Chrome Extension for recording
 
+/**
+ * Click listener tracking script - injected via evaluateOnNewDocument
+ * Monkey-patches addEventListener to track which elements have click listeners
+ * This enables detection of click handlers added by frameworks like Angular
+ */
+const CLICK_LISTENER_TRACKER_SCRIPT = `
+(function() {
+  // Only inject once
+  if (window.__clickListenerTracker) return;
+  window.__clickListenerTracker = true;
+
+  // WeakMap to track elements with click listeners (prevents memory leaks)
+  const clickListeners = new WeakMap();
+
+  // Store original methods
+  const originalAddEventListener = EventTarget.prototype.addEventListener;
+  const originalRemoveEventListener = EventTarget.prototype.removeEventListener;
+
+  // Patch addEventListener
+  EventTarget.prototype.addEventListener = function(type, listener, options) {
+    if (type === 'click' && this instanceof Element) {
+      // Track this element has click listener
+      const count = clickListeners.get(this) || 0;
+      clickListeners.set(this, count + 1);
+    }
+    return originalAddEventListener.call(this, type, listener, options);
+  };
+
+  // Patch removeEventListener for accuracy
+  EventTarget.prototype.removeEventListener = function(type, listener, options) {
+    if (type === 'click' && this instanceof Element) {
+      const count = clickListeners.get(this) || 0;
+      if (count > 0) {
+        clickListeners.set(this, count - 1);
+      }
+    }
+    return originalRemoveEventListener.call(this, type, listener, options);
+  };
+
+  // Global function to check if element has click listener
+  window.__hasClickListener = function(element) {
+    if (!element) return false;
+    const count = clickListeners.get(element);
+    return count && count > 0;
+  };
+
+  // Also expose for debugging
+  window.__getClickListenerCount = function(element) {
+    return clickListeners.get(element) || 0;
+  };
+})();
+`;
+
 /**
  * Debug log helper (only logs to stderr when DEBUG=1)
  * @param {...any} args - Arguments to log
@@ -159,6 +212,20 @@ export async function setupNetworkMonitoring(page) {
 
 // Note: setupRecorderAutoReinjection removed - Chrome Extension handles recording now
 
+/**
+ * Inject click listener tracker into page
+ * Must be called BEFORE page.goto() to catch all listeners
+ * @param {Page} page - Puppeteer page instance
+ */
+async function injectClickListenerTracker(page) {
+  try {
+    await page.evaluateOnNewDocument(CLICK_LISTENER_TRACKER_SCRIPT);
+    debugLog('Click listener tracker injected');
+  } catch (error) {
+    debugLog('Failed to inject click listener tracker:', error.message);
+  }
+}
+
 /**
  * Get or create page for URL
  * @param {string} url - URL to navigate to
@@ -180,6 +247,9 @@ export async function getOrCreatePage(url) {
   // Create new page
   const page = await browser.newPage();
 
+  // Inject click listener tracker BEFORE navigation
+  await injectClickListenerTracker(page);
+
   // Set up console log capture
   const client = await page.target().createCDPSession();
   await client.send('Runtime.enable');
@@ -277,6 +347,19 @@ export function setLastPage(page) {
  * @returns {Promise<void>}
  */
 export async function setupNewPage(page, source = 'manual') {
+  // Inject click listener tracker
+  // For new tabs, we need both:
+  // 1. evaluateOnNewDocument for future navigations
+  // 2. evaluate for already-loaded content (won't catch existing listeners, but will catch new ones)
+  try {
+    await page.evaluateOnNewDocument(CLICK_LISTENER_TRACKER_SCRIPT);
+    // Also inject immediately for current page (in case content already loaded)
+    await page.evaluate(CLICK_LISTENER_TRACKER_SCRIPT);
+    debugLog(`Click listener tracker injected for ${source} page`);
+  } catch (error) {
+    debugLog('Failed to inject click listener tracker:', error.message);
+  }
+
   // Set up console log capture
   try {
     const client = await page.target().createCDPSession();