feat: implement console logs tool with DevTools integration

- Add DevTools page to inject console hijacking code
- Capture all console methods (log, info, warn, error, debug, trace, etc.)
- Store console logs in tab state with proper serialization
- Add filtering by level, timestamp (before), and limit
- Require DevTools to be open for console log capture
- Add console log test elements to test.html
- Update TabState.getConsoleLogs() to handle all filtering

Author: williamkapke

e2e/manual-test-console.js

@@ -0,0 +1,66 @@
+// Manual test for console logs tool
+// This cannot be automated because it requires DevTools to be open
+
+import { Client } from '@modelcontextprotocol/sdk/client/index.js';
+import { WebSocketTransport } from '@modelcontextprotocol/sdk/client/websocket.js';
+
+async function testConsoleLogs() {
+  console.log('Starting manual console logs test...');
+  console.log('IMPORTANT: Make sure Chrome DevTools is open for the test tab!');
+  
+  const transport = new WebSocketTransport(new URL('ws://localhost:61822/mcp'));
+  const client = new Client({ name: 'console-test', version: '1.0.0' }, { capabilities: {} });
+  
+  await client.connect(transport);
+  console.log('Connected to MCP server');
+  
+  // List tabs
+  const tabsResult = await client.callTool('list_tabs', {});
+  const tabs = JSON.parse(tabsResult.content[0].text).tabs;
+  
+  if (tabs.length === 0) {
+    console.log('No tabs connected. Please open test.html and connect.');
+    await client.close();
+    return;
+  }
+  
+  const tabId = tabs[0].tabId;
+  console.log(`Using tab ${tabId}: ${tabs[0].title}`);
+  
+  // Wait a moment for console logs to be generated
+  console.log('Waiting for console logs to be generated...');
+  await new Promise(resolve => setTimeout(resolve, 2000));
+  
+  try {
+    // Try to get console logs
+    console.log('Attempting to get console logs...');
+    const logsResult = await client.callTool('console_logs', { tabId });
+    const logs = JSON.parse(logsResult.content[0].text);
+    
+    console.log('Console logs retrieved successfully:');
+    console.log(JSON.stringify(logs, null, 2));
+    
+    // Test with filters
+    console.log('\nTesting with level filter (errors only)...');
+    const errorLogs = await client.callTool('console_logs', { tabId, level: 'error' });
+    console.log(JSON.parse(errorLogs.content[0].text));
+    
+    // Test with limit
+    console.log('\nTesting with limit (5 logs)...');
+    const limitedLogs = await client.callTool('console_logs', { tabId, limit: 5 });
+    console.log(JSON.parse(limitedLogs.content[0].text));
+    
+  } catch (error) {
+    if (error.message.includes('DevTools')) {
+      console.error('ERROR: DevTools must be open to use console logs tool');
+      console.error('Please open Chrome DevTools (F12) and try again');
+    } else {
+      console.error('Error getting console logs:', error);
+    }
+  }
+  
+  await client.close();
+  console.log('Test complete');
+}
+
+testConsoleLogs().catch(console.error);

extension/background.js

@@ -137,6 +137,21 @@ chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
       }
       return false;
     }
+
+    if (request.type === 'consoleLog') {
+      // Handle console log from content script
+      const tabState = tabManager.getTab(sender.tab.id);
+      if (tabState) {
+        if (request.level === 'clear') {
+          // Clear console logs
+          tabManager.clearConsoleLogs(sender.tab.id);
+        } else {
+          // Add console log
+          tabManager.addConsoleLog(sender.tab.id, request.level, request.args, request.stack);
+        }
+      }
+      return false;
+    }
   }
 
   // Handle messages from popup/panel (not from content scripts)

extension/content-script.js

@@ -2,6 +2,15 @@
 window.addEventListener('kapture-message', (event) => {
   chrome.runtime.sendMessage(event.detail);
 });
+
+// Listen for console log events from the injected code
+window.addEventListener('kapture-console', (event) => {
+  // Send console log to background script
+  chrome.runtime.sendMessage({
+    type: 'consoleLog',
+    ...event.detail
+  });
+});
 function ready() {
   // Notify background script that content script is ready
   chrome.runtime.sendMessage({ type: 'contentScriptReady' });

extension/devtools-page.js

@@ -0,0 +1,133 @@
+// This devtools page runs alongside the panel and handles console log injection
+// It has access to chrome.devtools.inspectedWindow.eval for the inspected tab
+
+// Injection code that hijacks console methods
+const injectionCode = `
+  (function() {
+    const isOverridden = !console.log.toString().includes('[native code]');
+
+    // Check if already injected
+    if (isOverridden) {
+      return;
+    }
+    
+    // Store original console methods
+    const originalConsole = {
+      log: console.log,
+      error: console.error,
+      warn: console.warn,
+      info: console.info,
+      debug: console.debug,
+      trace: console.trace,
+      table: console.table,
+      group: console.group,
+      groupCollapsed: console.groupCollapsed,
+      groupEnd: console.groupEnd,
+      clear: console.clear
+    };
+
+    // Helper to serialize arguments
+    function serializeArgs(args) {
+      return Array.from(args).map(arg => {
+        try {
+          if (arg === undefined) return 'undefined';
+          if (arg === null) return 'null';
+          if (typeof arg === 'function') return arg.toString();
+          if (typeof arg === 'object') {
+            // Handle circular references
+            const seen = new WeakSet();
+            return JSON.stringify(arg, function(key, value) {
+              if (typeof value === 'object' && value !== null) {
+                if (seen.has(value)) return '[Circular]';
+                seen.add(value);
+              }
+              if (typeof value === 'function') return value.toString();
+              return value;
+            });
+          }
+          return String(arg);
+        } catch (e) {
+          return String(arg);
+        }
+      });
+    }
+
+    originalConsole.log('[Kapture] overriding console methods');
+    
+    // Override console methods (all except clear)
+    ['log', 'error', 'warn', 'info', 'debug', 'trace', 'table', 'group', 'groupCollapsed', 'groupEnd'].forEach(level => {
+      console[level] = function(...args) {
+        // Create log entry
+        const event = new CustomEvent('kapture-console', {
+          detail: {
+            level: level,
+            args: serializeArgs(args),
+            timestamp: new Date().toISOString(),
+            stack: new Error().stack
+          }
+        });
+
+        // Dispatch event for content script to capture
+        window.dispatchEvent(event);
+        
+        // Call original method
+        originalConsole[level].apply(console, args);
+      };
+    });
+    
+    // Override console.clear
+    console.clear = function() {
+      // Dispatch clear event
+      const event = new CustomEvent('kapture-console', {
+        detail: {
+          level: 'clear'
+        }
+      });
+      originalConsole.log('[Kapture] Dispatching console clear event');
+      window.dispatchEvent(event);
+      
+      // Call original method
+      originalConsole.clear.apply(console);
+    };
+    
+    // Log that injection is complete
+    originalConsole.log('[Kapture] Console capture injected into page context');
+  })();
+`;
+
+// Track if we've injected for this tab
+let injected = false;
+
+// Function to inject the console hijacking code
+function injectConsoleHijack() {
+  if (injected) return;
+  
+  chrome.devtools.inspectedWindow.eval(injectionCode, (result, error) => {
+    if (error) {
+      console.error('[Kapture DevTools Page] Failed to inject console hijack:', error);
+    } else {
+      console.log('[Kapture DevTools Page] Console hijack injected successfully');
+      injected = true;
+    }
+  });
+}
+
+// Inject immediately when devtools page loads
+injectConsoleHijack();
+
+// Re-inject on navigation (page reload)
+chrome.devtools.network.onNavigated.addListener(() => {
+  console.log('[Kapture DevTools Page] Page navigated, re-injecting console hijack');
+  injected = false;
+  // Small delay to ensure page is ready
+  setTimeout(injectConsoleHijack, 100);
+});
+
+// Listen for messages from the background script to check if DevTools is open
+chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+  if (request.type === 'checkDevToolsOpen') {
+    // If this script is running, DevTools is open
+    sendResponse({ devToolsOpen: true, tabId: chrome.devtools.inspectedWindow.tabId });
+    return true;
+  }
+});

extension/devtools.html

@@ -2,6 +2,7 @@
 <html>
 <head>
   <script src="devtools.js"></script>
+  <script src="devtools-page.js"></script>
 </head>
 <body>
 </body>

extension/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "Kapture MCP Browser Automation",
   "short_name": "Kapture",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "Remote browser automation via MCP - DevTools Extension",
   "author": "William Kapke",
   "homepage_url": "https://github.com/williamkapke/kapture",

extension/modules/background-commands.js

@@ -2,6 +2,7 @@ import { keypress } from './background-keypress.js';
 import { click, hover } from './background-click.js';
 import { navigate, back, forward, close } from './background-navigate.js';
 import { screenshot } from './background-screenshot.js';
+import { getLogs } from './background-console.js';
 
 export const getFromContentScript = async (tabId, command, params, ) => {
   return await chrome.tabs.sendMessage(tabId, { command, params });
@@ -55,5 +56,6 @@ export const backgroundCommands = {
   click,
   hover,
   keypress,
-  screenshot
+  screenshot,
+  getLogs
 }

extension/modules/background-console.js

@@ -0,0 +1,46 @@
+// Import helper functions from background-commands
+import { respondWith, respondWithError } from './background-commands.js';
+
+export async function getLogs(tabState, { before, limit = 100, level }) {
+  // Check if DevTools is open by sending a message to all devtools pages
+  try {
+    // Try to communicate with the devtools page
+    const devToolsCheckPromise = new Promise((resolve) => {
+      // Set a timeout in case DevTools is not open
+      const timeout = setTimeout(() => {
+        resolve({ devToolsOpen: false });
+      }, 100);
+
+      // Send message to check if DevTools is open
+      chrome.runtime.sendMessage({ type: 'checkDevToolsOpen' }, (response) => {
+        clearTimeout(timeout);
+        if (chrome.runtime.lastError) {
+          resolve({ devToolsOpen: false });
+        } else {
+          resolve(response || { devToolsOpen: false });
+        }
+      });
+    });
+
+    const devToolsCheck = await devToolsCheckPromise;
+    
+    if (!devToolsCheck.devToolsOpen) {
+      return respondWithError(tabState.tabId, 'DEVTOOLS_NOT_OPEN', 'Please open Chrome DevTools to use the console logs tool');
+    }
+
+    // DevTools is open, get the logs from the tab state using its built-in method
+    const logs = tabState.getConsoleLogs(limit, level, before);
+    
+    // Check if there are more logs available
+    const totalFilteredCount = tabState.getConsoleLogs(null, level, before).length;
+    const hasMore = totalFilteredCount > limit;
+    
+    return respondWith(tabState.tabId, {
+      logs: logs,
+      hasMore: hasMore,
+      totalCount: tabState.getConsoleLogCount()
+    });
+  } catch (error) {
+    return respondWithError(tabState.tabId, 'CONSOLE_LOG_ERROR', error.message);
+  }
+}

extension/modules/tab-state.js

@@ -129,13 +129,20 @@ export class TabState {
     this.consoleLogs = [];
   }
 
-  getConsoleLogs(limit = null, level = null) {
+  getConsoleLogs(limit = null, level = null, before = null) {
     let logs = this.consoleLogs;
 
     if (level) {
       logs = logs.filter(log => log.level === level);
     }
 
+    if (before) {
+      const beforeTimestamp = new Date(before).getTime();
+      logs = logs.filter(log => 
+        new Date(log.timestamp).getTime() < beforeTimestamp
+      );
+    }
+    
     if (limit === null) {
       return [...logs];
     }

server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kapture-mcp-server",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "MCP server for Kapture browser automation",
   "main": "dist/index.js",
   "type": "module",