@dynamicu/chromedebug-mcp 2.6.6 → 2.7.0

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

@@ -0,0 +1,256 @@
+/**
+ * BrowserRecordingManager - Manage recordings stored in IndexedDB
+ *
+ * Handles recording lifecycle for browser-only mode:
+ * - Stores frames and metadata in IndexedDB
+ * - Exports recordings as ZIP files
+ * - Manages cleanup and deletion
+ */
+
+class BrowserRecordingManager {
+  constructor(db) {
+    this.db = db; // DataBuffer instance
+    this.activeRecordings = new Map(); // sessionId -> recording metadata
+  }
+
+  /**
+   * Start a new browser recording
+   * @param {string} sessionId - Unique session identifier
+   * @param {Object} metadata - Recording metadata (tabId, url, timestamp, etc.)
+   * @returns {Promise<{success: boolean, sessionId: string}>}
+   */
+  async startRecording(sessionId, metadata = {}) {
+    try {
+      // Check if recording already exists (cleanup from previous incomplete session)
+      const existingRecording = await this.db.getBrowserRecording(sessionId);
+      if (existingRecording) {
+        console.warn(`[BrowserRecordingManager] Cleaning up existing recording: ${sessionId}`);
+        await this.deleteRecording(sessionId);
+      }
+
+      const recording = {
+        sessionId,
+        startTime: Date.now(),
+        tabId: metadata.tabId,
+        url: metadata.url,
+        title: metadata.title || 'Browser Recording',
+        frameCount: 0,
+        status: 'recording',
+        metadata
+      };
+
+      // Store recording metadata in IndexedDB
+      await this.db.addBrowserRecording(recording);
+
+      // Track active recording
+      this.activeRecordings.set(sessionId, recording);
+
+      return {
+        success: true,
+        sessionId,
+        startTime: recording.startTime
+      };
+    } catch (error) {
+      console.error('Failed to start browser recording:', {
+        name: error.name,
+        message: error.message,
+        stack: error.stack,
+        error: error
+      });
+      return {
+        success: false,
+        sessionId,
+        error: `${error.name}: ${error.message}`
+      };
+    }
+  }
+
+  /**
+   * Add a frame to an active recording
+   * @param {string} sessionId
+   * @param {Object} frameData - {frameIndex, screenshot, logs, timestamp}
+   * @returns {Promise<boolean>}
+   */
+  async addFrame(sessionId, frameData) {
+    try {
+      const frame = {
+        sessionId,
+        frameIndex: frameData.frameIndex,
+        screenshot: frameData.screenshot, // Base64 data URL
+        logs: frameData.logs || [],
+        timestamp: frameData.timestamp || Date.now(),
+        absoluteTimestamp: frameData.absoluteTimestamp // Preserve absolute timestamp for log association
+      };
+
+      await this.db.addBrowserFrame(frame);
+
+      // Update frame count
+      const recording = this.activeRecordings.get(sessionId);
+      if (recording) {
+        recording.frameCount++;
+      }
+
+      return true;
+    } catch (error) {
+      console.error('Failed to add frame:', error);
+      return false;
+    }
+  }
+
+  /**
+   * Stop recording and finalize
+   * @param {string} sessionId
+   * @returns {Promise<{success: boolean, frameCount: number, duration: number}>}
+   */
+  async stopRecording(sessionId) {
+    try {
+      const recording = this.activeRecordings.get(sessionId);
+      if (!recording) {
+        throw new Error(`Recording ${sessionId} not found`);
+      }
+
+      const endTime = Date.now();
+      const duration = endTime - recording.startTime;
+
+      // Update recording status
+      recording.status = 'completed';
+      recording.endTime = endTime;
+      recording.duration = duration;
+
+      await this.db.updateBrowserRecording(sessionId, {
+        status: 'completed',
+        endTime,
+        duration,
+        frameCount: recording.frameCount
+      });
+
+      this.activeRecordings.delete(sessionId);
+
+      return {
+        success: true,
+        sessionId,
+        frameCount: recording.frameCount,
+        duration
+      };
+    } catch (error) {
+      console.error('Failed to stop recording:', error);
+      return {
+        success: false,
+        sessionId,
+        error: error.message
+      };
+    }
+  }
+
+  /**
+   * Export recording as downloadable ZIP blob
+   * @param {string} sessionId
+   * @returns {Promise<{blob: Blob, filename: string}>}
+   */
+  async exportRecording(sessionId) {
+    try {
+      // Get recording metadata
+      const recording = await this.db.getBrowserRecording(sessionId);
+      if (!recording) {
+        throw new Error(`Recording ${sessionId} not found`);
+      }
+
+      // Get all frames for this session
+      const frames = await this.db.getBrowserFrames(sessionId);
+
+      // Create JSON manifest
+      const manifest = {
+        sessionId,
+        title: recording.title,
+        url: recording.url,
+        startTime: recording.startTime,
+        endTime: recording.endTime,
+        duration: recording.duration,
+        frameCount: frames.length,
+        exportedAt: Date.now()
+      };
+
+      // Build export data structure
+      const exportData = {
+        manifest,
+        recording,
+        frames: frames.map(frame => ({
+          frameIndex: frame.frameIndex,
+          timestamp: frame.timestamp,
+          screenshot: frame.screenshot,
+          logs: frame.logs
+        }))
+      };
+
+      // Convert to JSON string
+      const jsonString = JSON.stringify(exportData, null, 2);
+
+      // Create blob
+      const blob = new Blob([jsonString], { type: 'application/json' });
+
+      // Generate filename
+      const date = new Date(recording.startTime).toISOString().split('T')[0];
+      const filename = `chrome-debug-recording-${date}-${sessionId.slice(-8)}.json`;
+
+      return {
+        blob,
+        filename,
+        size: blob.size,
+        frameCount: frames.length
+      };
+    } catch (error) {
+      console.error('Failed to export recording:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * Delete a recording and all its frames
+   * @param {string} sessionId
+   * @returns {Promise<{success: boolean, deletedFrames: number}>}
+   */
+  async deleteRecording(sessionId) {
+    try {
+      // Delete all frames
+      const deletedFrames = await this.db.deleteBrowserFrames(sessionId);
+
+      // Delete recording metadata
+      await this.db.deleteBrowserRecording(sessionId);
+
+      // Remove from active recordings if present
+      this.activeRecordings.delete(sessionId);
+
+      return {
+        success: true,
+        sessionId,
+        deletedFrames
+      };
+    } catch (error) {
+      console.error('Failed to delete recording:', error);
+      return {
+        success: false,
+        sessionId,
+        error: error.message
+      };
+    }
+  }
+
+  /**
+   * List all recordings
+   * @returns {Promise<Array>}
+   */
+  async listRecordings() {
+    try {
+      return await this.db.getAllBrowserRecordings();
+    } catch (error) {
+      console.error('Failed to list recordings:', error);
+      return [];
+    }
+  }
+
+}
+
+// Export for use in other extension files
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = BrowserRecordingManager;
+}

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