@dynamicu/chromedebug-mcp 2.6.6 → 2.7.0

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
+};
+

package/chrome-extension/content.css

@@ -1,15 +1,15 @@
-.chrome-pilot-hover {
+.chrome-debug-hover {
   outline: 2px solid #4A90E2 !important;
   outline-offset: 2px !important;
   cursor: pointer !important;
 }
 
-.chrome-pilot-selected {
+.chrome-debug-selected {
   outline: 3px solid #E91E63 !important;
   outline-offset: 2px !important;
 }
 
-.chrome-pilot-overlay {
+.chrome-debug-overlay {
   position: fixed;
   bottom: 20px;
   right: 20px;
@@ -24,13 +24,13 @@
   color: #e0e0e0;
 }
 
-.chrome-pilot-overlay h3 {
+.chrome-debug-overlay h3 {
   margin: 0 0 10px 0;
   font-size: 16px;
   color: #ffffff;
 }
 
-.chrome-pilot-overlay .element-info {
+.chrome-debug-overlay .element-info {
   background: #2a2a2a;
   padding: 10px;
   border-radius: 4px;
@@ -41,7 +41,7 @@
   border: 1px solid #3a3a3a;
 }
 
-.chrome-pilot-overlay .react-info {
+.chrome-debug-overlay .react-info {
   background: #1a2332;
   padding: 10px;
   border-radius: 4px;
@@ -51,13 +51,13 @@
   color: #e0e0e0;
 }
 
-.chrome-pilot-overlay .react-info h4 {
+.chrome-debug-overlay .react-info h4 {
   margin: 0 0 8px 0;
   font-size: 14px;
   font-weight: 600;
 }
 
-.chrome-pilot-overlay textarea {
+.chrome-debug-overlay textarea {
   width: 100%;
   padding: 10px;
   border: 1px solid #ddd;
@@ -68,13 +68,13 @@
   font-size: 14px;
 }
 
-.chrome-pilot-overlay .button-group {
+.chrome-debug-overlay .button-group {
   display: flex;
   gap: 10px;
   margin-top: 15px;
 }
 
-.chrome-pilot-overlay button {
+.chrome-debug-overlay button {
   flex: 1;
   padding: 10px 20px;
   border: none;
@@ -85,31 +85,31 @@
   transition: background-color 0.2s;
 }
 
-.chrome-pilot-overlay .submit-btn {
+.chrome-debug-overlay .submit-btn {
   background: #4A90E2;
   color: white;
 }
 
-.chrome-pilot-overlay .submit-btn:hover {
+.chrome-debug-overlay .submit-btn:hover {
   background: #357ABD;
 }
 
-.chrome-pilot-overlay .cancel-btn {
+.chrome-debug-overlay .cancel-btn {
   background: #f0f0f0;
   color: #333;
 }
 
-.chrome-pilot-overlay .cancel-btn:hover {
+.chrome-debug-overlay .cancel-btn:hover {
   background: #e0e0e0;
 }
 
-.chrome-pilot-overlay .loading {
+.chrome-debug-overlay .loading {
   text-align: center;
   color: #a0a0a0;
   padding: 20px;
 }
 
-.chrome-pilot-status {
+.chrome-debug-status {
   position: fixed;
   top: 20px;
   right: 20px;