@dynamicu/chromedebug-mcp 2.6.4 → 2.6.7

package/chrome-extension/data-buffer.js

@@ -4,7 +4,7 @@
 class DataBuffer {
   constructor() {
     this.dbName = 'ChromePilotDataBuffer';
-    this.version = 1;
+    this.version = 2; // Incremented for new object stores
     this.db = null;
     this.maxBufferSize = 100 * 1024 * 1024; // 100MB default
     this.currentSize = 0;
@@ -31,30 +31,48 @@ class DataBuffer {
       
       request.onupgradeneeded = (event) => {
         const db = event.target.result;
-        
+
         // Create object stores if they don't exist
         if (!db.objectStoreNames.contains('events')) {
-          const eventsStore = db.createObjectStore('events', { 
-            keyPath: 'id', 
-            autoIncrement: true 
+          const eventsStore = db.createObjectStore('events', {
+            keyPath: 'id',
+            autoIncrement: true
           });
           eventsStore.createIndex('timestamp', 'timestamp', { unique: false });
           eventsStore.createIndex('type', 'type', { unique: false });
           eventsStore.createIndex('recording_id', 'recording_id', { unique: false });
         }
-        
+
         if (!db.objectStoreNames.contains('batches')) {
-          const batchesStore = db.createObjectStore('batches', { 
-            keyPath: 'id', 
-            autoIncrement: true 
+          const batchesStore = db.createObjectStore('batches', {
+            keyPath: 'id',
+            autoIncrement: true
           });
           batchesStore.createIndex('timestamp', 'timestamp', { unique: false });
           batchesStore.createIndex('status', 'status', { unique: false });
         }
-        
+
         if (!db.objectStoreNames.contains('metadata')) {
           db.createObjectStore('metadata', { keyPath: 'key' });
         }
+
+        // New object stores for browser-only recording mode
+        if (!db.objectStoreNames.contains('browser_recordings')) {
+          const recordingsStore = db.createObjectStore('browser_recordings', {
+            keyPath: 'sessionId'
+          });
+          recordingsStore.createIndex('timestamp', 'startTime', { unique: false });
+          recordingsStore.createIndex('status', 'status', { unique: false });
+        }
+
+        if (!db.objectStoreNames.contains('browser_frames')) {
+          const framesStore = db.createObjectStore('browser_frames', {
+            keyPath: 'id',
+            autoIncrement: true
+          });
+          framesStore.createIndex('sessionId', 'sessionId', { unique: false });
+          framesStore.createIndex('frameIndex', 'frameIndex', { unique: false });
+        }
       };
     });
   }
@@ -390,11 +408,11 @@ class DataBuffer {
 
   async getStats() {
     if (!this.db) await this.init();
-    
+
     const transaction = this.db.transaction(['events', 'batches'], 'readonly');
     const eventsStore = transaction.objectStore('events');
     const batchesStore = transaction.objectStore('batches');
-    
+
     return new Promise((resolve) => {
       let stats = {
         eventCount: 0,
@@ -404,29 +422,200 @@ class DataBuffer {
         totalSize: this.currentSize,
         maxSize: this.maxBufferSize
       };
-      
+
       eventsStore.count().onsuccess = (e) => {
         stats.eventCount = e.target.result;
       };
-      
+
       batchesStore.count().onsuccess = (e) => {
         stats.batchCount = e.target.result;
       };
-      
+
       const pendingIndex = batchesStore.index('status');
       pendingIndex.count(IDBKeyRange.only('pending')).onsuccess = (e) => {
         stats.pendingBatches = e.target.result;
       };
-      
+
       pendingIndex.count(IDBKeyRange.only('uploaded')).onsuccess = (e) => {
         stats.uploadedBatches = e.target.result;
       };
-      
+
       transaction.oncomplete = () => {
         resolve(stats);
       };
     });
   }
+
+  // Browser-only recording methods
+  async addBrowserRecording(recording) {
+    if (!this.db) await this.init();
+    const transaction = this.db.transaction(['browser_recordings'], 'readwrite');
+    const store = transaction.objectStore('browser_recordings');
+
+    return new Promise((resolve, reject) => {
+      const request = store.add(recording);
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  async updateBrowserRecording(sessionId, updates) {
+    if (!this.db) await this.init();
+    const transaction = this.db.transaction(['browser_recordings'], 'readwrite');
+    const store = transaction.objectStore('browser_recordings');
+
+    return new Promise((resolve, reject) => {
+      const getRequest = store.get(sessionId);
+      getRequest.onsuccess = () => {
+        const recording = getRequest.result;
+        if (recording) {
+          Object.assign(recording, updates);
+          const putRequest = store.put(recording);
+          putRequest.onsuccess = () => resolve();
+          putRequest.onerror = () => reject(putRequest.error);
+        } else {
+          reject(new Error('Recording not found'));
+        }
+      };
+      getRequest.onerror = () => reject(getRequest.error);
+    });
+  }
+
+  async getBrowserRecording(sessionId) {
+    if (!this.db) await this.init();
+    const transaction = this.db.transaction(['browser_recordings'], 'readonly');
+    const store = transaction.objectStore('browser_recordings');
+
+    return new Promise((resolve, reject) => {
+      const request = store.get(sessionId);
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  async getAllBrowserRecordings() {
+    if (!this.db) await this.init();
+    const transaction = this.db.transaction(['browser_recordings'], 'readonly');
+    const store = transaction.objectStore('browser_recordings');
+
+    return new Promise((resolve, reject) => {
+      const request = store.getAll();
+      request.onsuccess = () => resolve(request.result || []);
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  async deleteBrowserRecording(sessionId) {
+    if (!this.db) await this.init();
+
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction(['browser_recordings'], 'readwrite');
+      const store = transaction.objectStore('browser_recordings');
+
+      // Delete the recording
+      const deleteRequest = store.delete(sessionId);
+      deleteRequest.onerror = () => reject(deleteRequest.error);
+
+      // Wait for transaction to COMPLETE (commit to disk), not just request success
+      // This prevents race condition where add() happens before delete() commits
+      transaction.oncomplete = () => resolve();
+      transaction.onerror = () => reject(transaction.error);
+    });
+  }
+
+  async addBrowserFrame(frame) {
+    if (!this.db) await this.init();
+    const transaction = this.db.transaction(['browser_frames'], 'readwrite');
+    const store = transaction.objectStore('browser_frames');
+
+    return new Promise((resolve, reject) => {
+      const request = store.add(frame);
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  async getBrowserFrames(sessionId) {
+    if (!this.db) await this.init();
+    const transaction = this.db.transaction(['browser_frames'], 'readonly');
+    const store = transaction.objectStore('browser_frames');
+    const index = store.index('sessionId');
+
+    return new Promise((resolve, reject) => {
+      const request = index.getAll(IDBKeyRange.only(sessionId));
+      request.onsuccess = () => resolve(request.result || []);
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  async getBrowserFrameCount(sessionId) {
+    if (!this.db) await this.init();
+    const transaction = this.db.transaction(['browser_frames'], 'readonly');
+    const store = transaction.objectStore('browser_frames');
+    const index = store.index('sessionId');
+
+    return new Promise((resolve, reject) => {
+      const request = index.count(IDBKeyRange.only(sessionId));
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  async updateBrowserFrame(frameId, updates) {
+    if (!this.db) await this.init();
+
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction(['browser_frames'], 'readwrite');
+      const store = transaction.objectStore('browser_frames');
+
+      // Get the existing frame
+      const getRequest = store.get(frameId);
+      getRequest.onsuccess = () => {
+        const frame = getRequest.result;
+        if (!frame) {
+          reject(new Error(`Frame ${frameId} not found`));
+          return;
+        }
+
+        // Apply updates
+        Object.assign(frame, updates);
+
+        // Put the updated frame back
+        const putRequest = store.put(frame);
+        putRequest.onerror = () => reject(putRequest.error);
+      };
+      getRequest.onerror = () => reject(getRequest.error);
+
+      // Wait for transaction to complete
+      transaction.oncomplete = () => resolve();
+      transaction.onerror = () => reject(transaction.error);
+    });
+  }
+
+  async deleteBrowserFrames(sessionId) {
+    if (!this.db) await this.init();
+    const transaction = this.db.transaction(['browser_frames'], 'readwrite');
+    const store = transaction.objectStore('browser_frames');
+    const index = store.index('sessionId');
+
+    return new Promise((resolve, reject) => {
+      let deletedCount = 0;
+      const request = index.openCursor(IDBKeyRange.only(sessionId));
+
+      request.onsuccess = (event) => {
+        const cursor = event.target.result;
+        if (cursor) {
+          store.delete(cursor.primaryKey);
+          deletedCount++;
+          cursor.continue();
+        } else {
+          resolve(deletedCount);
+        }
+      };
+
+      request.onerror = () => reject(request.error);
+    });
+  }
 }
 
 // Export for use in background script

package/chrome-extension/frame-capture.js

@@ -10,6 +10,7 @@ class FrameCapture {
     this.sessionId = null;
     this.startTime = null;
     this.totalFramesCaptured = 0;
+    this.mode = 'server'; // 'server' or 'browser-only'
     this.settings = {
       frameRate: 1,      // seconds between frames
       imageQuality: 30,  // JPEG quality (1-100)
@@ -23,6 +24,16 @@ class FrameCapture {
 
   }
 
+  setMode(mode) {
+    if (mode !== 'server' && mode !== 'browser-only') {
+      console.warn('[FrameCapture] Invalid mode:', mode, '- defaulting to server');
+      this.mode = 'server';
+    } else {
+      this.mode = mode;
+      console.log('[FrameCapture] Mode set to:', this.mode);
+    }
+  }
+
   async startCapture(streamId, tabId, sessionId, scheduledStartTime, settings = {}, ownerId = null) {
     if (this.isCapturing) return;
 
@@ -38,12 +49,22 @@ class FrameCapture {
     // Initialize lease tracking - null forces immediate first check
     this.lastLeaseCheck = null;
 
-    // Update settings with passed values
-    this.settings = {
-      frameRate: settings.frameRate || 1,
-      imageQuality: settings.imageQuality || 30,
-      frameFlash: settings.frameFlash !== false
-    };
+    // Update settings with passed values or apply mode-specific defaults
+    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
+      };
+    } else {
+      // Server mode: standard settings
+      this.settings = {
+        frameRate: settings.frameRate || 1,
+        imageQuality: settings.imageQuality || 30,
+        frameFlash: settings.frameFlash !== false
+      };
+    }
 
     console.log('Starting frame capture session:', this.sessionId);
     console.log('Frame capture scheduled to start at:', new Date(scheduledStartTime));
@@ -68,16 +89,27 @@ class FrameCapture {
     this.totalFramesCaptured++;
     console.log('Created synthetic first frame at scheduled start time');
 
-    // Get the media stream with very low resolution optimized for Claude reading
-    const media = await navigator.mediaDevices.getUserMedia({
-      video: {
-        mandatory: {
-          chromeMediaSource: 'tab',
-          chromeMediaSourceId: streamId,
-          maxWidth: 640,  // Reduced from 960 for smaller files
-          maxHeight: 360  // Reduced from 540 for smaller files
+    // Get the media stream with resolution based on mode
+    const videoConstraints = this.mode === 'browser-only'
+      ? {
+          mandatory: {
+            chromeMediaSource: 'tab',
+            chromeMediaSourceId: streamId,
+            maxWidth: 480,   // Ultra-low resolution for browser storage
+            maxHeight: 270   // Ultra-low resolution for browser storage
+          }
         }
-      },
+      : {
+          mandatory: {
+            chromeMediaSource: 'tab',
+            chromeMediaSourceId: streamId,
+            maxWidth: 640,   // Standard resolution for server storage
+            maxHeight: 360   // Standard resolution for server storage
+          }
+        };
+
+    const media = await navigator.mediaDevices.getUserMedia({
+      video: videoConstraints,
       audio: false
     });
 
@@ -382,6 +414,11 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
   if (message.target !== 'offscreen') return;
 
   if (message.type === 'start-frame-capture') {
+    // Set mode before starting capture
+    if (message.mode) {
+      frameCapture.setMode(message.mode);
+    }
+
     frameCapture.startCapture(message.streamId, message.tabId, message.sessionId, message.scheduledStartTime, message.settings, message.ownerId)
       .then(() => sendResponse({ success: true }))
       .catch(error => {

package/chrome-extension/manifest.free.json

@@ -1,15 +1,14 @@
 {
   "manifest_version": 3,
-  "name": "ChromeDebug MCP Assistant FREE v2.6.0",
-  "version": "2.6.0",
-  "description": "ChromeDebug MCP visual element selector [FREE Edition] [Build: 2025-10-24-v2.6.0]",
+  "name": "ChromeDebug MCP Assistant FREE v2.6.7",
+  "version": "2.6.7",
+  "description": "ChromeDebug MCP visual element selector [FREE Edition] [Build: 2025-11-10-v2.6.7]",
   "permissions": [
     "activeTab",
     "scripting",
     "tabs",
     "storage",
     "tabCapture",
-    "desktopCapture",
     "notifications",
     "offscreen"
   ],

package/chrome-extension/popup.html

@@ -110,7 +110,29 @@
       50% { transform: scale(1.1); }
       100% { transform: scale(1); }
     }
-    
+
+    @keyframes slideInRight {
+      from {
+        transform: translateX(100%);
+        opacity: 0;
+      }
+      to {
+        transform: translateX(0);
+        opacity: 1;
+      }
+    }
+
+    @keyframes slideOutRight {
+      from {
+        transform: translateX(0);
+        opacity: 1;
+      }
+      to {
+        transform: translateX(100%);
+        opacity: 0;
+      }
+    }
+
     .countdown-timer {
       animation: countdown 1s ease-in-out;
     }
@@ -183,7 +205,19 @@
     <span class="server-status disconnected" id="serverStatus"></span>
     <span id="statusText">Checking server...</span>
   </div>
-  
+
+  <div id="pollingControls" style="margin: 10px 0; padding: 8px; background: #f5f5f5; border-radius: 4px; border: 1px solid #e0e0e0;">
+    <div style="display: flex; align-items: center; gap: 10px;">
+      <label style="display: flex; align-items: center; cursor: pointer; font-size: 13px; flex: 1;">
+        <input type="checkbox" id="pollContinuouslyCheckbox" checked style="margin-right: 6px; cursor: pointer;">
+        <span>Poll Continuously (every 3s)</span>
+      </label>
+      <button id="retryConnectionBtn" style="display: none; padding: 4px 12px; font-size: 12px; background: #2196F3; color: white; border: none; border-radius: 3px; cursor: pointer; white-space: nowrap;">
+        Retry Connection
+      </button>
+    </div>
+  </div>
+
   <div class="instructions">
     <strong>Chrome Debug Assistant:</strong>
     <p>Use the recording features below to capture screen recordings, workflow recordings, or debug data for your applications.</p>
@@ -221,7 +255,7 @@
     </div>
   </div>
 
-  <div class="recording-section" style="margin-top: 20px; padding-top: 20px; border-top: 1px solid #e0e0e0;">
+  <div class="recording-section" id="workflow-recording-section" style="margin-top: 20px; padding-top: 20px; border-top: 1px solid #e0e0e0; position: relative;">
     <div style="display: flex; justify-content: space-between; align-items: center; margin: 0 0 10px 0;">
       <h3 style="margin: 0; font-size: 16px;">Workflow Recording</h3>
       <a href="#" id="viewWorkflowRecordings" style="font-size: 12px; color: #2196F3; text-decoration: none;">View Past Recordings</a>
@@ -289,7 +323,7 @@
     </div>
   </div>
   
-  <div class="recording-section" style="margin-top: 20px; padding-top: 20px; border-top: 1px solid #e0e0e0;">
+  <div class="recording-section" id="screen-recording-section" style="margin-top: 20px; padding-top: 20px; border-top: 1px solid #e0e0e0; position: relative;">
     <div style="display: flex; justify-content: space-between; align-items: center; margin: 0 0 10px 0;">
       <h3 style="margin: 0; font-size: 16px;">Screen Recording</h3>
       <a href="#" id="viewScreenRecordings" style="font-size: 12px; color: #2196F3; text-decoration: none;">View Past Recordings</a>
@@ -395,7 +429,40 @@
     </div>
     -->
   </div>
-  
+
+  <!-- Browser-Only Mode Banner (shown when no server detected) -->
+  <div id="browserOnlyBanner" style="display: none; margin-top: 20px; padding: 12px; background: #fff3cd; border: 1px solid #ffc107; border-radius: 4px;">
+    <div style="font-size: 13px; font-weight: 500; color: #856404; margin-bottom: 8px;">
+      ⚠️ Browser-Only Mode
+    </div>
+    <div style="font-size: 12px; color: #856404; margin-bottom: 10px;">
+      No Chrome Debug server detected. Recordings are stored locally in your browser and may be lost when clearing browsing data.
+    </div>
+    <div style="font-size: 11px; color: #856404; margin-bottom: 10px;">
+      <strong>Storage Available:</strong> <span id="quotaUsage">Checking...</span>
+    </div>
+    <div style="margin-top: 10px;">
+      <button id="exportRecordingBtn" style="padding: 6px 12px; background: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 12px; width: 100%; margin-bottom: 5px; display: none;">
+        💾 Export Recording
+      </button>
+      <a href="https://chrome-debug.com/upgrade" target="_blank" style="display: block; padding: 6px 12px; background: #2196F3; color: white; border: none; border-radius: 4px; text-align: center; font-size: 12px; text-decoration: none;">
+        🚀 Get Full Version with Server
+      </a>
+    </div>
+  </div>
+
+  <!-- Storage Quota Meter (shown in browser-only mode) -->
+  <div id="quotaMeter" style="display: none; margin-top: 15px; padding: 10px; background: #f9f9f9; border-radius: 4px; border: 1px solid #e0e0e0;">
+    <div style="font-size: 13px; font-weight: 500; margin-bottom: 8px;">Browser Storage</div>
+    <div style="width: 100%; background: #e0e0e0; border-radius: 8px; height: 20px; overflow: hidden;">
+      <div id="quotaBar" style="height: 100%; background: #4CAF50; width: 0%; transition: width 0.3s, background 0.3s;"></div>
+    </div>
+    <div style="font-size: 11px; color: #666; margin-top: 5px; display: flex; justify-content: space-between;">
+      <span id="quotaText">0% used</span>
+      <span id="quotaAvailable">0 MB available</span>
+    </div>
+  </div>
+
   <style>
     .recording-item {
       background: #f5f5f5;
@@ -538,6 +605,43 @@
       border-color: #f44336 !important;
       color: #c62828;
     }
+
+    /* Loading overlay for recording sections */
+    .recording-section-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(255, 255, 255, 0.95);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      z-index: 1000;
+      border-radius: 8px;
+    }
+
+    .recording-section-overlay .spinner {
+      width: 40px;
+      height: 40px;
+      border: 4px solid #f3f3f3;
+      border-top: 4px solid #3498db;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+    }
+
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+
+    .recording-section-overlay .loading-text {
+      margin-top: 16px;
+      color: #333;
+      font-size: 14px;
+      font-weight: 500;
+    }
   </style>
 
   <script src="disable-react-devtools.js"></script>