@dynamicu/chromedebug-mcp 2.7.2 → 2.7.4

package/chrome-extension/frame-capture.js

@@ -56,34 +56,42 @@ class FrameCapture {
     }, this.emergencyMaxDuration);
 
     // Update settings with passed values or apply mode-specific defaults
+    console.log('[FrameCapture] Received settings:', settings, 'Mode:', this.mode);
     if (this.mode === 'browser-only') {
       // Browser-only mode: ultra-low resolution and quality for storage efficiency
       this.settings = {
         frameRate: settings.frameRate || 1,
         imageQuality: settings.imageQuality || 15,  // Lower quality for browser storage
-        frameFlash: settings.frameFlash !== false
+        frameFlash: settings.frameFlash !== false,
+        videoMode: settings?.videoMode || false
       };
     } else {
       // Server mode: standard settings
       this.settings = {
         frameRate: settings.frameRate || 1,
         imageQuality: settings.imageQuality || 30,
-        frameFlash: settings.frameFlash !== false
+        frameFlash: settings.frameFlash !== false,
+        videoMode: settings?.videoMode || false
       };
     }
+    console.log('[FrameCapture] Using settings:', this.settings, 'Interval:', this.settings.frameRate * 1000, 'ms');
 
     // Trigger visual feedback system start
     chrome.runtime.sendMessage({
       type: 'start-screen-capture-tracking',
-      sessionId: this.sessionId
+      sessionId: this.sessionId,
+      tabId: this.tabId,  // Include tabId for offscreen document routing
+      videoMode: this.settings.videoMode || false
     }).catch(() => {});
 
     // Create a synthetic first frame at scheduled start time to catch early logs
+    // Mark as synthetic so video exporter can skip it (1x1 placeholder can't be exported)
     const syntheticFrame = {
       timestamp: 0,
       absoluteTimestamp: this.scheduledStartTime,
       imageData: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==', // 1x1 transparent pixel
-      logs: []
+      logs: [],
+      isSynthetic: true  // Flag to identify placeholder frames for video export filtering
     };
     this.frames.push(syntheticFrame);
     this.totalFramesCaptured++;
@@ -102,8 +110,8 @@ class FrameCapture {
           mandatory: {
             chromeMediaSource: 'tab',
             chromeMediaSourceId: streamId,
-            maxWidth: 640,   // Standard resolution for server storage
-            maxHeight: 360   // Standard resolution for server storage
+            maxWidth: settings.maxWidth || 640,   // Default 640, allow override for video export
+            maxHeight: settings.maxHeight || 360  // Default 360, allow override for video export
           }
         };
 
@@ -180,7 +188,8 @@ class FrameCapture {
 
           // Trigger visual feedback for frame captured
           chrome.runtime.sendMessage({
-            type: 'show-screen-capture-flash'
+            type: 'show-screen-capture-flash',
+            tabId: this.tabId  // Include tabId for offscreen document routing
           }).catch(() => {});
 
           // Send frame immediately to keep memory usage low
@@ -266,7 +275,8 @@ class FrameCapture {
 
     // Stop visual feedback system
     chrome.runtime.sendMessage({
-      type: 'stop-screen-capture-tracking'
+      type: 'stop-screen-capture-tracking',
+      tabId: this.tabId  // Include tabId for offscreen document routing
     }).catch(() => {});
 
     // Notify completion
@@ -338,7 +348,8 @@ class FrameCapture {
 
           // Trigger visual feedback for manual snapshot
           chrome.runtime.sendMessage({
-            type: 'show-screen-capture-flash'
+            type: 'show-screen-capture-flash',
+            tabId: this.tabId  // Include tabId for offscreen document routing
           }).catch(() => {});
 
           // Flash indicator for manual snapshot
@@ -379,12 +390,22 @@ class FrameCapture {
 
     const batch = this.frames.splice(0, 5); // Send up to 5 frames at a time
 
+    // Filter out synthetic frames before sending to server
+    // Synthetic frames are 1x1 transparent pixels used only for early log capture
+    // They can't be exported to video and the server may reject the isSynthetic field
+    const realFrames = batch.filter(frame => !frame.isSynthetic);
+
+    if (realFrames.length === 0) {
+      // All frames in batch were synthetic, nothing to send
+      return;
+    }
+
     chrome.runtime.sendMessage({
       type: 'frame-batch-ready',
       target: 'background',
       data: {
         sessionId: this.sessionId,
-        frames: batch
+        frames: realFrames
       }
     });
   }

package/chrome-extension/image-processor.js

@@ -0,0 +1,193 @@
+/**
+ * Image Processor Utility (v2.7.3)
+ *
+ * Handles watermarking and image processing for Chrome Debug extension.
+ *
+ * CRITICAL DESIGN DECISION (from Second Opinion review):
+ * - Watermarks are applied at DISPLAY/EXPORT time, NOT storage time
+ * - This allows upgrade recovery (users who upgrade mid-session get clean images)
+ * - Storage remains clean without watermarks
+ */
+
+// Watermark configuration
+const WATERMARK_CONFIG = {
+  text: 'Chrome Debug FREE',
+  position: 'bottom-right',
+  opacity: 0.7,
+  fontSize: 14,
+  padding: 10,
+  backgroundColor: 'rgba(0, 0, 0, 0.7)',
+  textColor: '#ffffff'
+};
+
+/**
+ * Check if this is the PRO version
+ * @returns {boolean}
+ */
+function isProVersion() {
+  try {
+    const manifest = chrome.runtime.getManifest();
+    return manifest.name.includes('PRO');
+  } catch (e) {
+    // If we can't access manifest, assume FREE version
+    return false;
+  }
+}
+
+/**
+ * Check if watermarking should be applied
+ * @returns {boolean}
+ */
+function shouldWatermark() {
+  return !isProVersion();
+}
+
+/**
+ * Apply watermark to image data URL at DISPLAY or EXPORT time
+ * @param {string} imageDataUrl - Base64 image data URL
+ * @param {object} options - Watermark options (optional overrides)
+ * @returns {Promise<string>} - Watermarked image data URL
+ */
+async function applyWatermark(imageDataUrl, options = {}) {
+  const config = {
+    ...WATERMARK_CONFIG,
+    ...options
+  };
+
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+
+    img.onload = () => {
+      try {
+        const canvas = document.createElement('canvas');
+        canvas.width = img.width;
+        canvas.height = img.height;
+        const ctx = canvas.getContext('2d');
+
+        // Draw original image
+        ctx.drawImage(img, 0, 0);
+
+        // Calculate badge dimensions
+        ctx.font = `bold ${config.fontSize}px Arial, sans-serif`;
+        const textMetrics = ctx.measureText(config.text);
+        const textWidth = textMetrics.width;
+        const badgeWidth = textWidth + config.padding * 2;
+        const badgeHeight = config.fontSize + config.padding * 2;
+
+        // Calculate position (bottom-right corner)
+        let x, y;
+        switch (config.position) {
+          case 'bottom-right':
+            x = canvas.width - badgeWidth - 10;
+            y = canvas.height - badgeHeight - 10;
+            break;
+          case 'bottom-left':
+            x = 10;
+            y = canvas.height - badgeHeight - 10;
+            break;
+          case 'top-right':
+            x = canvas.width - badgeWidth - 10;
+            y = 10;
+            break;
+          case 'top-left':
+            x = 10;
+            y = 10;
+            break;
+          default:
+            x = canvas.width - badgeWidth - 10;
+            y = canvas.height - badgeHeight - 10;
+        }
+
+        // Draw semi-transparent badge background with rounded corners
+        ctx.fillStyle = config.backgroundColor;
+        ctx.beginPath();
+        roundRect(ctx, x, y, badgeWidth, badgeHeight, 5);
+        ctx.fill();
+
+        // Draw text
+        ctx.fillStyle = config.textColor;
+        ctx.fillText(config.text, x + config.padding, y + config.fontSize + config.padding / 2);
+
+        // Return watermarked image
+        resolve(canvas.toDataURL('image/jpeg', 0.92));
+      } catch (error) {
+        console.error('[ImageProcessor] Error applying watermark:', error);
+        // Return original image on error
+        resolve(imageDataUrl);
+      }
+    };
+
+    img.onerror = () => {
+      console.error('[ImageProcessor] Failed to load image for watermarking');
+      // Return original image on error
+      resolve(imageDataUrl);
+    };
+
+    img.src = imageDataUrl;
+  });
+}
+
+/**
+ * Helper function to draw rounded rectangle
+ */
+function roundRect(ctx, x, y, width, height, radius) {
+  ctx.moveTo(x + radius, y);
+  ctx.lineTo(x + width - radius, y);
+  ctx.arcTo(x + width, y, x + width, y + radius, radius);
+  ctx.lineTo(x + width, y + height - radius);
+  ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);
+  ctx.lineTo(x + radius, y + height);
+  ctx.arcTo(x, y + height, x, y + height - radius, radius);
+  ctx.lineTo(x, y + radius);
+  ctx.arcTo(x, y, x + radius, y, radius);
+  ctx.closePath();
+}
+
+/**
+ * Process image for display - applies watermark if FREE version
+ * @param {string} imageDataUrl - Base64 image data URL
+ * @returns {Promise<string>} - Processed image data URL
+ */
+async function processImageForDisplay(imageDataUrl) {
+  if (shouldWatermark()) {
+    return await applyWatermark(imageDataUrl);
+  }
+  return imageDataUrl;
+}
+
+/**
+ * Process image for export - applies watermark if FREE version
+ * @param {string} imageDataUrl - Base64 image data URL
+ * @returns {Promise<string>} - Processed image data URL
+ */
+async function processImageForExport(imageDataUrl) {
+  if (shouldWatermark()) {
+    return await applyWatermark(imageDataUrl);
+  }
+  return imageDataUrl;
+}
+
+/**
+ * Process multiple images for display/export
+ * @param {string[]} imageDataUrls - Array of base64 image data URLs
+ * @returns {Promise<string[]>} - Array of processed image data URLs
+ */
+async function processImagesForDisplay(imageDataUrls) {
+  if (shouldWatermark()) {
+    return await Promise.all(imageDataUrls.map(url => applyWatermark(url)));
+  }
+  return imageDataUrls;
+}
+
+// Export functions for use in other scripts
+if (typeof window !== 'undefined') {
+  window.ChromeDebugImageProcessor = {
+    isProVersion,
+    shouldWatermark,
+    applyWatermark,
+    processImageForDisplay,
+    processImageForExport,
+    processImagesForDisplay,
+    WATERMARK_CONFIG
+  };
+}

package/chrome-extension/manifest.free.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "ChromeDebug MCP Assistant FREE",
-  "version": "2.7.2",
+  "version": "2.7.3",
   "description": "AI-powered browser debugging with visual element selection and screen recording for developers",
   "permissions": [
     "activeTab",

package/chrome-extension/popup.html

@@ -151,6 +151,24 @@
       color: #f44336;
       font-weight: bold;
     }
+
+    .delete-all-btn {
+      transition: background 0.2s, transform 0.1s;
+    }
+
+    .delete-all-btn:hover {
+      background: #d32f2f !important;
+      transform: scale(1.05);
+    }
+
+    .delete-all-btn:active {
+      transform: scale(0.95);
+    }
+
+    .delete-all-btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
   </style>
 </head>
 <body>
@@ -171,7 +189,7 @@
         <span class="server-status disconnected" id="serverStatus"></span>
         <span id="statusText">Checking...</span>
       </div>
-      <a href="https://github.com/dynamicupgrade/ChromeDebug" target="_blank" style="font-size: 10px; color: #2196F3; text-decoration: none;">📚 Documentation</a>
+      <a href="https://www.npmjs.com/package/@dynamicu/chromedebug-mcp" target="_blank" style="font-size: 10px; color: #2196F3; text-decoration: none;">📚 Documentation</a>
     </div>
     <div style="flex: 0 0 auto; width: 200px;"></div>
   </div>
@@ -283,11 +301,45 @@
       Start Workflow Recording
       <span id="workflowProBadge" style="position: absolute; top: -8px; right: -8px; background: #ff6b6b; color: white; font-size: 9px; padding: 2px 6px; border-radius: 10px; font-weight: bold; display: none;">PRO</span>
     </button>
+
+    <!-- Screenshot Recording Button -->
+    <button class="record-btn" id="screenshotRecordBtn" style="background: #FF9800; position: relative; padding: 8px; font-size: 11px; margin-top: 4px;">
+      📸 Start Screenshot Recording
+      <span id="screenshotProBadge" style="position: absolute; top: -8px; right: -8px; background: #ff6b6b; color: white; font-size: 9px; padding: 2px 6px; border-radius: 10px; font-weight: bold; display: none;">PRO</span>
+    </button>
+
+    <!-- Screenshot Recording Settings (shown when button is clicked) -->
+    <div id="screenshotRecordingSettings" style="display: none; background: #fff3e0; padding: 6px; border-radius: 3px; margin-top: 4px; border: 1px solid #FF9800;">
+      <div style="font-size: 9px; font-weight: bold; margin-bottom: 4px; color: #E65100;">📸 Screenshot Settings</div>
+      <label style="font-size: 9px; display: flex; align-items: center; cursor: pointer; margin-bottom: 4px;">
+        <input type="checkbox" id="hideMouseCursorCheckbox" checked style="margin-right: 4px;">
+        Hide mouse cursor
+      </label>
+      <div style="display: flex; align-items: center; gap: 4px;">
+        <label style="font-size: 9px;">Countdown:</label>
+        <select id="screenshotCountdown" style="font-size: 9px; padding: 2px;">
+          <option value="0">Instant (0s)</option>
+          <option value="3" selected>3 seconds</option>
+          <option value="5">5 seconds</option>
+        </select>
+      </div>
+    </div>
+
     <button class="record-btn" id="saveRestorePointBtn" style="background: #2196F3; display: none; margin-top: 4px; padding: 6px; font-size: 10px;">📍 Save Point</button>
     <div class="recording-status" id="workflowRecordingStatus" style="font-size: 10px;"></div>
-    
+    <div class="recording-status" id="screenshotRecordingStatus" style="font-size: 10px;"></div>
+
     <div class="recordings-list" id="workflowRecordingsList" style="margin-top: 10px; display: none;">
-      <h4 style="margin: 0 0 6px 0; font-size: 11px;">Saved Workflow Recordings:</h4>
+      <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 6px;">
+        <h4 style="margin: 0; font-size: 11px;">Saved Recordings:</h4>
+        <button id="deleteAllWorkflowsBtn" class="delete-all-btn" style="display: none; font-size: 8px; padding: 2px 6px; background: #f44336; color: white; border: none; border-radius: 3px; cursor: pointer; flex-shrink: 0;" title="Delete all workflow recordings">Delete All</button>
+      </div>
+      <!-- Tab System for Workflow/Screenshot filtering -->
+      <div id="workflowTypeTabs" style="display: flex; margin-bottom: 6px; border-bottom: 1px solid #ddd;">
+        <button id="tabAllWorkflows" class="workflow-tab active" style="flex: 1; padding: 4px 8px; font-size: 10px; background: #9c27b0; color: white; border: none; border-radius: 4px 4px 0 0; cursor: pointer; margin-right: 2px;">All</button>
+        <button id="tabWorkflowOnly" class="workflow-tab" style="flex: 1; padding: 4px 8px; font-size: 10px; background: #e0e0e0; color: #333; border: none; border-radius: 4px 4px 0 0; cursor: pointer; margin-right: 2px;">Workflow</button>
+        <button id="tabScreenshotsOnly" class="workflow-tab" style="flex: 1; padding: 4px 8px; font-size: 10px; background: #e0e0e0; color: #333; border: none; border-radius: 4px 4px 0 0; cursor: pointer;">📸 Screenshots</button>
+      </div>
       <div id="workflowRecordingsContainer" style="max-height: 300px; overflow-y: auto; overflow-x: hidden; border: 1px solid #e0e0e0; border-radius: 4px; padding: 6px;"></div>
     </div>
 
@@ -346,11 +398,28 @@
               <input type="checkbox" id="frameFlash"> Flash
             </label>
           </div>
+
+          <!-- Mouse Tracking (PRO-only) -->
+          <div class="mouse-tracking-settings" id="mouseTrackingSection" style="margin-top: 8px; padding-top: 8px; border-top: 1px solid #e0e0e0;">
+            <label style="font-size: 9px; color: #666; display: flex; align-items: center; margin-bottom: 4px;">
+              <input type="checkbox" id="enableMouseTracking" style="margin-right: 4px;">
+              Track mouse movement
+            </label>
+            <select id="mouseSampleRate" disabled style="width: 100%; padding: 2px; font-size: 9px; margin-bottom: 4px;">
+              <option value="50">Fast (50ms) - Smooth</option>
+              <option value="100" selected>Normal (100ms)</option>
+              <option value="200">Slow (200ms)</option>
+            </select>
+            <p style="font-size: 8px; color: #999; margin: 0; line-height: 1.2;">
+              Records cursor position for video playback visualization.
+            </p>
+          </div>
         </div>
       </details>
     </div>
 
     <button class="record-btn" id="recordBtn" style="padding: 8px; font-size: 11px;">Start Recording</button>
+    <button class="record-btn" id="startVideoRecordingBtn" style="padding: 8px; font-size: 11px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); margin-top: 4px;">🎥 Start Video Recording</button>
     <button class="record-btn" id="manualSnapshotBtn" style="background: #4CAF50; display: none; margin-top: 4px; padding: 6px; font-size: 10px;">Manual Snapshot</button>
     <div class="recording-status" id="recordingStatus" style="font-size: 10px;"></div>
     <div class="countdown-display" id="countdownDisplay" style="display: none; text-align: center; margin-top: 10px; padding: 10px; background: #f0f0f0; border-radius: 4px;">
@@ -359,7 +428,16 @@
     </div>
 
       <div class="recordings-list" id="recordingsList" style="margin-top: 10px; display: none;">
-        <h4 style="margin: 0 0 6px 0; font-size: 11px;">Saved Recordings:</h4>
+        <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 6px;">
+          <h4 style="margin: 0; font-size: 11px;">Saved Recordings:</h4>
+          <button id="deleteAllScreenRecordingsBtn" class="delete-all-btn" style="display: none; font-size: 8px; padding: 2px 6px; background: #f44336; color: white; border: none; border-radius: 3px; cursor: pointer; flex-shrink: 0;" title="Delete all screen recordings">Delete All</button>
+        </div>
+        <!-- Recording type tabs -->
+        <div id="recordingTypeTabs" style="display: flex; margin-bottom: 6px; border-bottom: 1px solid #ddd;">
+          <button id="tabAllRecordings" class="recording-tab active" style="flex: 1; padding: 4px 8px; font-size: 10px; background: #2196F3; color: white; border: none; border-radius: 4px 4px 0 0; cursor: pointer; margin-right: 2px;">All</button>
+          <button id="tabScreenRecordings" class="recording-tab" style="flex: 1; padding: 4px 8px; font-size: 10px; background: #e0e0e0; color: #333; border: none; border-radius: 4px 4px 0 0; cursor: pointer; margin-right: 2px;">📸 Screen</button>
+          <button id="tabVideoRecordings" class="recording-tab" style="flex: 1; padding: 4px 8px; font-size: 10px; background: #e0e0e0; color: #333; border: none; border-radius: 4px 4px 0 0; cursor: pointer;">🎥 Video</button>
+        </div>
         <div id="recordingsContainer" style="max-height: 300px; overflow-y: auto; overflow-x: hidden; border: 1px solid #e0e0e0; border-radius: 4px; padding: 6px;"></div>
       </div>
     </div>