@dynamicu/chromedebug-mcp 2.6.7 → 2.7.0

package/chrome-extension/browser-recording-manager.js

@@ -190,7 +190,7 @@ class BrowserRecordingManager {
 
       // Generate filename
       const date = new Date(recording.startTime).toISOString().split('T')[0];
-      const filename = `chrome-pilot-recording-${date}-${sessionId.slice(-8)}.json`;
+      const filename = `chrome-debug-recording-${date}-${sessionId.slice(-8)}.json`;
 
       return {
         blob,

package/chrome-extension/chrome-debug-logger.js

@@ -0,0 +1,168 @@
+/**
+ * ChromeDebugLogger - Dedicated logging system for Chrome Debug internal diagnostics
+ * Bypasses console interception to prevent polluting user workflow recordings
+ *
+ * Key Features:
+ * - Preserves original console before interception
+ * - Auto-enables in development mode
+ * - Works in service workers (chrome.storage.local) and content scripts (localStorage)
+ * - Includes source location tracking
+ * - Default disabled in production
+ * - Consistent prefix: [🔧 ChromeDebug:ComponentName]
+ */
+class ChromeDebugLogger {
+  constructor() {
+    // CRITICAL: Save original console IMMEDIATELY (before interception occurs)
+    this.originalConsole = {
+      log: console.log.bind(console),
+      error: console.error.bind(console),
+      warn: console.warn.bind(console),
+      debug: console.debug.bind(console),
+      info: console.info.bind(console)
+    };
+
+    // Auto-enable in development mode
+    const isDev = typeof chrome !== 'undefined' &&
+                  chrome.runtime?.getManifest?.()?.version_name?.includes('dev');
+    this.enabled = isDev || false;
+
+    this.prefix = '🔧 ChromeDebug';
+
+    // Load saved state (async, but don't block constructor)
+    this._loadState();
+  }
+
+  /**
+   * Enable Chrome Debug internal logging
+   */
+  enable() {
+    this.enabled = true;
+    this._saveState();
+    this._log('Logger', 'Chrome Debug logger enabled', null, 'info');
+  }
+
+  /**
+   * Disable Chrome Debug internal logging
+   */
+  disable() {
+    this._log('Logger', 'Chrome Debug logger disabled', null, 'info');
+    this.enabled = false;
+    this._saveState();
+  }
+
+  /**
+   * Check if logging is enabled
+   */
+  isEnabled() {
+    return this.enabled;
+  }
+
+  /**
+   * Log informational message
+   */
+  log(component, message, data = null) {
+    if (!this.enabled) return;
+    this._log(component, message, data, 'log');
+  }
+
+  /**
+   * Log error message
+   */
+  error(component, message, data = null) {
+    if (!this.enabled) return;
+    this._log(component, message, data, 'error');
+  }
+
+  /**
+   * Log warning message
+   */
+  warn(component, message, data = null) {
+    if (!this.enabled) return;
+    this._log(component, message, data, 'warn');
+  }
+
+  /**
+   * Log debug message
+   */
+  debug(component, message, data = null) {
+    if (!this.enabled) return;
+    this._log(component, message, data, 'debug');
+  }
+
+  /**
+   * Internal logging implementation
+   */
+  _log(component, message, data, level = 'log') {
+    try {
+      // Capture source location for debugging
+      const error = new Error();
+      const stack = error.stack?.split('\n')[3]; // Caller's location
+      const location = stack?.match(/\((.*?)\)/)?.[1] || '';
+
+      const prefix = `[${this.prefix}:${component}]`;
+      const suffix = location ? ` @${location.split('/').pop()}` : '';
+
+      if (data !== null && data !== undefined) {
+        this.originalConsole[level](prefix, message + suffix, data);
+      } else {
+        this.originalConsole[level](prefix, message + suffix);
+      }
+    } catch (e) {
+      // Fallback if logging fails
+      this.originalConsole.error('ChromeDebugLogger error:', e);
+    }
+  }
+
+  /**
+   * Save enabled state
+   */
+  async _saveState() {
+    try {
+      if (typeof chrome !== 'undefined' && chrome.storage) {
+        // Service worker context
+        await chrome.storage.local.set({ chromedebug_logger_enabled: this.enabled });
+      } else if (typeof localStorage !== 'undefined') {
+        // Content/popup context
+        localStorage.setItem('chromedebug_logger_enabled', this.enabled.toString());
+      }
+    } catch (e) {
+      // Storage might not be available
+    }
+  }
+
+  /**
+   * Load enabled state
+   */
+  async _loadState() {
+    try {
+      if (typeof chrome !== 'undefined' && chrome.storage) {
+        // Service worker context
+        const result = await chrome.storage.local.get('chromedebug_logger_enabled');
+        if (result.chromedebug_logger_enabled !== undefined) {
+          this.enabled = result.chromedebug_logger_enabled;
+        }
+      } else if (typeof localStorage !== 'undefined') {
+        // Content/popup context
+        const saved = localStorage.getItem('chromedebug_logger_enabled');
+        if (saved !== null) {
+          this.enabled = saved === 'true';
+        }
+      }
+    } catch (e) {
+      // Storage might not be available
+    }
+  }
+}
+
+// Create global singleton instance
+const chromeDebugLogger = new ChromeDebugLogger();
+
+// Export for different contexts
+if (typeof window !== 'undefined') {
+  window.chromeDebugLogger = chromeDebugLogger;
+  window.ChromeDebugLogger = ChromeDebugLogger;
+}
+if (typeof self !== 'undefined') {
+  self.chromeDebugLogger = chromeDebugLogger;
+  self.ChromeDebugLogger = ChromeDebugLogger;
+}

package/chrome-extension/console-interception-library.js

@@ -0,0 +1,430 @@
+/**
+ * Console Interception Library
+ * Shared code for both Screen Recording and Workflow Recording
+ *
+ * This library provides console log interception and cleanup functionality
+ * that is used identically by both recording systems.
+ *
+ * DRY Principle: Don't Repeat Yourself
+ * - Reduces code duplication from 600+ lines to reusable functions
+ * - Single source of truth for console interception logic
+ * - Easier to maintain and update
+ *
+ * Usage Example:
+ * ```javascript
+ * // Screen recording config
+ * const screenConfig = {
+ *   overrideFlagName: '__chromePilotConsoleOverridden',
+ *   originalConsoleName: '__chromePilotOriginalConsole',
+ *   relayFlagName: '__chromePilotConsoleRelay',
+ *   messageType: 'chrome-debug-console-log',
+ *   backgroundAction: 'consoleLog'
+ * };
+ *
+ * // Start interception
+ * await startConsoleInterception(tabId, screenConfig);
+ *
+ * // Stop interception
+ * await stopConsoleInterception(tabId, screenConfig);
+ * ```
+ */
+
+// Console Interception Library - Direct function definitions for importScripts compatibility
+
+/**
+ * Injectable function for MAIN world console interception
+ * This function will be serialized and injected into the page's MAIN execution context
+ *
+ * @param {string} overrideFlagName - Window property to track if already overridden
+ * @param {string} originalConsoleName - Window property to store original console methods
+ * @param {string} messageType - The postMessage type for log relay
+ * @returns {string} Status message
+ */
+function injectConsoleInterceptor(overrideFlagName, originalConsoleName, messageType) {
+  // Check if we've already overridden console methods
+  if (window[overrideFlagName]) {
+    console.log('[Chrome Debug] Console already overridden, skipping');
+    return 'already_installed';
+  }
+  window[overrideFlagName] = true;
+  console.log('[Chrome Debug] Installing console interceptor');
+
+  // CRITICAL: Store original console methods in window for later restoration
+  window[originalConsoleName] = {
+    log: console.log,
+    error: console.error,
+    warn: console.warn,
+    info: console.info,
+    debug: console.debug,
+    trace: console.trace,
+    table: console.table,
+    dir: console.dir,
+    group: console.group,
+    groupEnd: console.groupEnd,
+    time: console.time,
+    timeEnd: console.timeEnd,
+    count: console.count
+  };
+
+  // Duck-type check for Error-like objects (handles cross-realm errors)
+  const isErrorLike = (obj) => {
+    if (obj instanceof Error) return true;
+    // Duck-type check for cross-realm errors (e.g., from iframes, web workers)
+    return obj !== null &&
+           typeof obj === 'object' &&
+           typeof obj.message === 'string' &&
+           (typeof obj.stack === 'string' || typeof obj.name === 'string');
+  };
+
+  // Serialize Error objects properly (message, stack, name are non-enumerable)
+  const serializeError = (err, depth = 0) => {
+    if (depth > 3) return '[Error: max depth reached]';
+
+    const result = {
+      name: err.name || 'Error',
+      message: err.message || '',
+    };
+
+    // Capture stack trace with intelligent truncation
+    if (err.stack) {
+      const stackLines = err.stack.split('\n');
+      let truncatedStack = [];
+      for (let i = 0; i < stackLines.length && i < 10; i++) {
+        truncatedStack.push(stackLines[i]);
+        // Stop at node_modules to reduce noise
+        if (stackLines[i].includes('node_modules')) {
+          truncatedStack.push('    ... (truncated at node_modules)');
+          break;
+        }
+      }
+      result.stack = truncatedStack.join('\n');
+    }
+
+    // Capture custom enumerable properties (e.g., Firebase error.code)
+    for (const key of Object.keys(err)) {
+      if (!['name', 'message', 'stack'].includes(key)) {
+        try {
+          if (err[key] instanceof Error || isErrorLike(err[key])) {
+            result[key] = serializeError(err[key], depth + 1);
+          } else {
+            result[key] = JSON.parse(JSON.stringify(err[key]));
+          }
+        } catch (e) {
+          result[key] = '[Could not serialize]';
+        }
+      }
+    }
+
+    // ES2022 error.cause support
+    if (err.cause) {
+      if (err.cause instanceof Error || isErrorLike(err.cause)) {
+        result.cause = serializeError(err.cause, depth + 1);
+      } else {
+        try {
+          result.cause = JSON.parse(JSON.stringify(err.cause));
+        } catch (e) {
+          result.cause = '[Could not serialize cause]';
+        }
+      }
+    }
+
+    return result;
+  };
+
+  // Create sendLog function with truncation logic
+  const sendLog = (level, args) => {
+    try {
+      // Pre-serialize arguments to strings to avoid structured clone errors
+      const serializedArgs = args.map(arg => {
+        try {
+          if (arg === null) return 'null';
+          if (arg === undefined) return 'undefined';
+          if (typeof arg === 'function') return '[Function: ' + (arg.name || 'anonymous') + ']';
+
+          // IMPORTANT: Check for Error objects BEFORE generic object handler
+          // Error properties (message, stack, name) are non-enumerable and JSON.stringify returns "{}"
+          if (arg instanceof Error || isErrorLike(arg)) {
+            const errorObj = serializeError(arg);
+            return JSON.stringify(errorObj, null, 2);
+          }
+
+          // Note: Element check removed - service workers have no DOM access, so this will never trigger
+          if (typeof arg === 'object') {
+            // Custom replacer to handle nested errors in objects
+            const errorReplacer = (key, value) => {
+              if (value instanceof Error || (value && isErrorLike(value))) {
+                return serializeError(value);
+              }
+              return value;
+            };
+
+            // Try to stringify, but limit depth to avoid circular references
+            let stringified = JSON.stringify(arg, errorReplacer, 2);
+
+            // Check if this looks like a base64 image and truncate it
+            if (stringified.includes('data:image/') && stringified.length > 1000) {
+              const match = stringified.match(/data:image\/([^;]+);base64,(.{0,100})/);
+              if (match) {
+                return `[Base64 Image: ${match[1]}, ${stringified.length} bytes total, truncated...]`;
+              }
+            }
+
+            // Truncate any extremely large strings
+            const maxLength = 5000;
+            if (stringified.length > maxLength) {
+              return stringified.substring(0, maxLength) + `... [TRUNCATED: ${stringified.length} total bytes]`;
+            }
+
+            return stringified;
+          }
+
+          // Also check for base64 strings directly
+          const strValue = String(arg);
+          if (strValue.includes('data:image/') && strValue.length > 1000) {
+            const match = strValue.match(/data:image\/([^;]+);base64,(.{0,100})/);
+            if (match) {
+              return `[Base64 Image: ${match[1]}, ${strValue.length} bytes total, truncated...]`;
+            }
+          }
+
+          // Truncate any extremely large strings
+          if (strValue.length > 5000) {
+            return strValue.substring(0, 5000) + `... [TRUNCATED: ${strValue.length} total bytes]`;
+          }
+
+          return strValue;
+        } catch (e) {
+          return '[Object: could not serialize]';
+        }
+      });
+
+      // Build the message string
+      const messageString = serializedArgs.join(' ');
+
+      // Filter out internal Chrome Debug/ChromePilot logs
+      // These are internal debugging messages that should not be captured in recordings
+      if (messageString.startsWith('[Chrome Debug]') ||
+          messageString.startsWith('[ChromePilot]') ||
+          messageString.startsWith('[Console Injection]') ||
+          messageString.startsWith('[Console Cleanup]')) {
+        return; // Skip internal logs
+      }
+
+      // Post message to content script
+      window.postMessage({
+        type: messageType,
+        log: {
+          level,
+          message: messageString,
+          timestamp: Date.now()
+        }
+      }, '*');
+    } catch (e) {
+      // Ignore errors when sending logs
+    }
+  };
+
+  // Override console methods
+  const methods = ['log', 'error', 'warn', 'info', 'debug', 'trace', 'table', 'dir', 'group', 'groupEnd', 'time', 'timeEnd', 'count'];
+  methods.forEach(method => {
+    const original = window[originalConsoleName][method];
+    console[method] = (...args) => {
+      sendLog(method, args);
+      original.apply(console, args);
+    };
+  });
+
+  return 'console_installed';
+}
+
+/**
+ * Injectable function for content script console relay
+ * Forwards console logs from MAIN world to background script
+ *
+ * @param {string} relayFlagName - Window property to track if relay is active
+ * @param {string} messageType - The postMessage type to listen for
+ * @param {string} backgroundAction - The action name to send to background script
+ */
+function injectConsoleRelay(relayFlagName, messageType, backgroundAction) {
+  // Check if relay is already active
+  if (window[relayFlagName]) {
+    console.log('[Chrome Debug] Console relay already active, skipping');
+    return;
+  }
+
+  // Create and store the message handler
+  const messageHandler = (event) => {
+    if (event.data && event.data.type === messageType) {
+      // Forward to background script
+      chrome.runtime.sendMessage({
+        action: backgroundAction,
+        log: event.data.log
+      }).catch(() => {
+        // Background might not be available - that's OK
+      });
+    }
+  };
+
+  // Store reference for later removal
+  window[relayFlagName] = messageHandler;
+
+  // Listen for messages from main world
+  window.addEventListener('message', messageHandler);
+  console.log('[Chrome Debug] Console relay installed');
+}
+
+/**
+ * Injectable function for MAIN world console cleanup
+ * Restores original console methods
+ *
+ * @param {string} overrideFlagName - Window property that tracks override status
+ * @param {string} originalConsoleName - Window property with stored original methods
+ * @returns {object} Status object
+ */
+function cleanupConsoleInterceptor(overrideFlagName, originalConsoleName) {
+  console.log('[Chrome Debug] ===== CLEANUP SCRIPT EXECUTING IN MAIN WORLD =====');
+  console.log('[Chrome Debug] ' + originalConsoleName + ' exists:', !!window[originalConsoleName]);
+  console.log('[Chrome Debug] ' + overrideFlagName + ':', window[overrideFlagName]);
+
+  if (window[originalConsoleName] && window[overrideFlagName]) {
+    console.log('[Chrome Debug] RESTORING original console methods');
+
+    // Restore all original console methods
+    Object.assign(console, window[originalConsoleName]);
+
+    // Clean up stored references
+    delete window[originalConsoleName];
+    delete window[overrideFlagName];
+
+    console.log('[Chrome Debug] ✅ Console methods restored successfully');
+    return { success: true, message: 'Console restored' };
+  } else {
+    console.warn('[Chrome Debug] ⚠️ No console override to restore');
+    return { success: false, message: 'No override found' };
+  }
+}
+
+/**
+ * Injectable function for content script relay cleanup
+ * Removes the message event listener
+ *
+ * @param {string} relayFlagName - Window property with stored message handler
+ * @returns {object} Status object
+ */
+function cleanupConsoleRelay(relayFlagName) {
+  console.log('[Chrome Debug] ===== CLEANUP SCRIPT EXECUTING IN CONTENT SCRIPT =====');
+  console.log('[Chrome Debug] ' + relayFlagName + ' exists:', !!window[relayFlagName]);
+
+  if (window[relayFlagName]) {
+    console.log('[Chrome Debug] REMOVING console relay listener');
+    window.removeEventListener('message', window[relayFlagName]);
+    delete window[relayFlagName];
+    console.log('[Chrome Debug] ✅ Console relay removed successfully');
+    return { success: true, message: 'Relay removed' };
+  } else {
+    console.warn('[Chrome Debug] ⚠️ No relay to remove');
+    return { success: false, message: 'No relay found' };
+  }
+}
+
+/**
+ * High-level API for starting console interception
+ *
+ * @param {number} tabId - Chrome tab ID
+ * @param {object} config - Configuration object
+ * @param {string} config.overrideFlagName - Window property for override tracking
+ * @param {string} config.originalConsoleName - Window property for original methods
+ * @param {string} config.relayFlagName - Window property for relay handler
+ * @param {string} config.messageType - PostMessage type for log relay
+ * @param {string} config.backgroundAction - Background script action name
+ * @returns {Promise<boolean>} True if successful, false otherwise
+ */
+async function startConsoleInterception(tabId, config) {
+  try {
+    // Check if this tab allows content script injection
+    const tab = await chrome.tabs.get(tabId);
+    if (!tab.url || tab.url.startsWith('chrome://') || tab.url.startsWith('chrome-extension://') || tab.url.startsWith('moz-extension://')) {
+      console.log('Cannot inject console logger into restricted URL:', tab.url);
+      console.warn('WARNING: Console logs cannot be captured on restricted pages');
+      return false;
+    }
+
+    // Inject MAIN world console interceptor
+    const results = await chrome.scripting.executeScript({
+      target: { tabId: tabId },
+      world: 'MAIN',
+      func: injectConsoleInterceptor,
+      args: [config.overrideFlagName, config.originalConsoleName, config.messageType]
+    });
+
+    console.log('[Console Injection] MAIN world script injected:', results);
+
+    // Inject content script relay
+    await chrome.scripting.executeScript({
+      target: { tabId: tabId },
+      func: injectConsoleRelay,
+      args: [config.relayFlagName, config.messageType, config.backgroundAction]
+    });
+
+    console.log('[Console Injection] Content script relay injected successfully');
+    return true;
+  } catch (error) {
+    console.error('[Console Injection] Failed:', error);
+    return false;
+  }
+}
+
+/**
+ * High-level API for stopping console interception and cleanup
+ *
+ * @param {number} tabId - Chrome tab ID
+ * @param {object} config - Configuration object (same as startConsoleInterception)
+ * @returns {Promise<boolean>} True if successful, false otherwise
+ */
+async function stopConsoleInterception(tabId, config) {
+  try {
+    console.log('[Console Cleanup] Starting cleanup for tab:', tabId);
+
+    // Check if this tab allows content script injection
+    const tab = await chrome.tabs.get(tabId);
+    if (!tab.url || tab.url.startsWith('chrome://') || tab.url.startsWith('chrome-extension://')) {
+      console.warn('[Console Cleanup] Cannot inject into restricted URL:', tab.url);
+      return false;
+    }
+
+    // Restore console methods in MAIN world
+    const mainWorldResult = await chrome.scripting.executeScript({
+      target: { tabId: tabId },
+      world: 'MAIN',
+      func: cleanupConsoleInterceptor,
+      args: [config.overrideFlagName, config.originalConsoleName]
+    });
+    console.log('[Console Cleanup] MAIN world result:', mainWorldResult[0]?.result);
+
+    // Remove relay in content script
+    const contentScriptResult = await chrome.scripting.executeScript({
+      target: { tabId: tabId },
+      func: cleanupConsoleRelay,
+      args: [config.relayFlagName]
+    });
+    console.log('[Console Cleanup] Content script result:', contentScriptResult[0]?.result);
+
+    console.log('[Console Cleanup] Cleanup complete');
+    return true;
+  } catch (error) {
+    console.error('[Console Cleanup] Failed:', error);
+    return false;
+  }
+}
+
+// Export for use in Chrome extension background script (service worker context)
+// Direct assignment without wrapper to avoid importScripts NetworkError
+self.ConsoleInterceptionLibrary = {
+  injectConsoleInterceptor,
+  injectConsoleRelay,
+  cleanupConsoleInterceptor,
+  cleanupConsoleRelay,
+  startConsoleInterception,
+  stopConsoleInterception
+};
+