@dynamicu/chromedebug-mcp 2.2.0

package/chrome-extension/frame-capture.js

@@ -0,0 +1,407 @@
+// Frame capture implementation for Chrome Debug
+// This captures frames at 1fps for Claude compatibility
+
+class FrameCapture {
+  constructor() {
+    this.isCapturing = false;
+    this.frames = [];
+    this.logs = [];
+    this.captureInterval = null;
+    this.sessionId = null;
+    this.startTime = null;
+    this.totalFramesCaptured = 0;
+    this.settings = {
+      frameRate: 1,      // seconds between frames
+      imageQuality: 30,  // JPEG quality (1-100)
+      frameFlash: true   // flash indicator
+    };
+
+    // Lease checking properties
+    this.lastLeaseCheck = null;
+    this.leaseCheckInterval = 3000; // Check every 3 seconds (before 5s expiry)
+    this.ownerId = null; // Will be set when session starts
+
+  }
+
+  async startCapture(streamId, tabId, sessionId, scheduledStartTime, settings = {}, ownerId = null) {
+    if (this.isCapturing) return;
+
+    // Use the passed session info for consistency
+    this.sessionId = sessionId || `frame_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    this.ownerId = ownerId || `owner_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    this.scheduledStartTime = scheduledStartTime || Date.now();
+    this.frames = [];
+    this.totalFramesCaptured = 0;
+    this.isCapturing = true;
+    this.tabId = tabId;
+
+    // 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
+    };
+
+    console.log('Starting frame capture session:', this.sessionId);
+    console.log('Frame capture scheduled to start at:', new Date(scheduledStartTime));
+    console.log('Frame capture settings:', this.settings);
+
+    // Trigger visual feedback system start
+    chrome.runtime.sendMessage({
+      type: 'start-screen-capture-tracking',
+      sessionId: this.sessionId
+    }).catch(() => {
+      console.log('[FrameCapture] Could not start visual feedback tracking');
+    });
+
+    // Create a synthetic first frame at scheduled start time to catch early logs
+    const syntheticFrame = {
+      timestamp: 0,
+      absoluteTimestamp: this.scheduledStartTime,
+      imageData: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==', // 1x1 transparent pixel
+      logs: []
+    };
+    this.frames.push(syntheticFrame);
+    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
+        }
+      },
+      audio: false
+    });
+
+    // Create video element to capture frames from
+    const video = document.createElement('video');
+    video.srcObject = media;
+    video.play();
+
+    // Create canvas for frame extraction
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+
+    // Wait for video to be ready
+    await new Promise(resolve => {
+      video.onloadedmetadata = () => {
+        canvas.width = video.videoWidth;
+        canvas.height = video.videoHeight;
+        resolve();
+      };
+    });
+
+    // Monitor stream health - stop if stream ends unexpectedly
+    this.mediaStream = media;
+    media.getTracks().forEach(track => {
+      track.onended = () => {
+        console.error('[FrameCapture] Media track ended unexpectedly');
+        this.stopCapture();
+      };
+    });
+
+    // Wait until scheduled start time before beginning frame capture
+    const waitTime = Math.max(0, this.scheduledStartTime - Date.now());
+    console.log(`Frame capture will wait ${waitTime}ms until scheduled start time`);
+
+    setTimeout(() => {
+      console.log('Frame capture starting at scheduled time');
+
+      // Capture frames at intervals (e.g., 1 frame per second)
+      this.captureInterval = setInterval(async () => {
+        if (!this.isCapturing) return;
+
+        // Check lease validity every 5 seconds
+        if (this.lastLeaseCheck && (Date.now() - this.lastLeaseCheck) > this.leaseCheckInterval) {
+          const leaseValid = await this.checkLease();
+          if (!leaseValid) {
+            console.log('[FrameCapture] Lease expired, stopping capture');
+            this.stopCapture();
+            return;
+          }
+          this.lastLeaseCheck = Date.now();
+        }
+
+        // Draw current frame to canvas
+        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+
+        // Convert to JPEG with compression
+        canvas.toBlob(blob => {
+          if (!blob) return;
+
+          const reader = new FileReader();
+          reader.onloadend = () => {
+            const captureTimestamp = Date.now();
+            const frameData = {
+              timestamp: captureTimestamp - this.scheduledStartTime, // Relative timestamp from scheduled start
+              absoluteTimestamp: captureTimestamp, // Absolute timestamp for log association
+              imageData: reader.result,
+              logs: [], // Will be populated during post-processing
+            };
+          
+          this.frames.push(frameData);
+          this.totalFramesCaptured++;
+          
+          console.log(`Captured frame ${this.totalFramesCaptured}, size: ${blob.size} bytes`);
+
+          // Trigger visual feedback for frame captured
+          chrome.runtime.sendMessage({
+            type: 'show-screen-capture-flash'
+          }).catch(() => {
+            console.log('[FrameCapture] Could not trigger frame capture flash');
+          });
+
+          // Send frame immediately to keep memory usage low
+          if (this.frames.length % 5 === 0) { // Every 5 frames
+            this.sendFrameBatch().catch(error => {
+              console.error('[FrameCapture] Error sending frame batch:', error);
+            });
+          }
+        };
+        reader.readAsDataURL(blob);
+      }, 'image/jpeg', this.settings.imageQuality / 100); // Use configurable quality
+      
+      // Flash indicator if enabled
+      if (this.settings.frameFlash) {
+        this.flashCaptureIndicator();
+      }
+      }, this.settings.frameRate * 1000); // Use configurable frame rate
+
+      console.log(`Frame capture interval set to ${this.settings.frameRate * 1000}ms (${this.settings.frameRate}s)`);
+      console.log(`Image quality set to ${this.settings.imageQuality}%`);
+
+      // Store the media stream for cleanup
+      this.mediaStream = media;
+      this.videoElement = video;
+    }, waitTime); // Close the setTimeout
+
+  }
+
+  // Check lease validity with background script
+  async checkLease() {
+    console.log('[FrameCapture] Lease check starting - SessionId:', this.sessionId);
+
+    try {
+      const response = await Promise.race([
+        chrome.runtime.sendMessage({
+          action: 'renewLease',
+          sessionId: this.sessionId,
+          ownerId: this.ownerId,
+          requestTime: Date.now(),
+          renewalDuration: this.leaseCheckInterval
+        }),
+        new Promise((_, reject) =>
+          setTimeout(() => reject(new Error('Lease check timeout')), 2000)
+        )
+      ]);
+
+      console.log('[FrameCapture] Lease response - Success:', response?.success);
+      return response?.success === true;
+
+    } catch (error) {
+      // On communication errors, log but continue (don't stop recording)
+      // The next lease check will try again
+      console.warn('[FrameCapture] Lease check failed (will retry):', error.message);
+      return true; // CHANGED: Be permissive on errors, next check will enforce
+    }
+  }
+
+  stopCapture() {
+    if (!this.isCapturing) return;
+
+    this.isCapturing = false;
+
+    // Stop interval
+    if (this.captureInterval) {
+      clearInterval(this.captureInterval);
+      this.captureInterval = null;
+    }
+
+    // Send remaining frames
+    if (this.frames.length > 0) {
+      this.sendFrameBatch().catch(error => {
+        console.error('[FrameCapture] Error sending final frame batch:', error);
+      });
+    }
+
+    // Clean up
+    if (this.mediaStream) {
+      this.mediaStream.getTracks().forEach(track => track.stop());
+    }
+    if (this.videoElement) {
+      this.videoElement.remove();
+    }
+
+    // Stop visual feedback system
+    chrome.runtime.sendMessage({
+      type: 'stop-screen-capture-tracking'
+    }).catch(() => {
+      console.log('[FrameCapture] Could not stop visual feedback tracking');
+    });
+
+    // Notify completion
+    chrome.runtime.sendMessage({
+      type: 'frame-capture-complete',
+      target: 'background',
+      data: {
+        sessionId: this.sessionId,
+        totalFrames: this.totalFramesCaptured,
+        duration: Date.now() - this.scheduledStartTime
+      }
+    });
+
+    console.log('Frame capture stopped');
+  }
+  
+  // Flash indicator method to show when frames are captured
+  flashCaptureIndicator() {
+    // Send message through background script to content script to show flash
+    chrome.runtime.sendMessage({
+      type: 'show-frame-flash',
+      target: 'background',
+      tabId: this.tabId
+    }).catch(() => {
+      // Background script might not be available, that's ok
+    });
+  }
+  
+  // Manual snapshot method for immediate frame capture
+  async takeManualSnapshot() {
+    if (!this.isCapturing) {
+      throw new Error('Cannot take manual snapshot - recording is not active');
+    }
+    
+    // Check if we have the necessary elements
+    if (!this.videoElement || !this.videoElement.videoWidth) {
+      throw new Error('Video element not ready for manual snapshot');
+    }
+    
+    console.log('Taking manual snapshot...');
+    
+    // Create a temporary canvas for the manual snapshot
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    canvas.width = this.videoElement.videoWidth;
+    canvas.height = this.videoElement.videoHeight;
+    
+    // Draw current frame to canvas
+    ctx.drawImage(this.videoElement, 0, 0, canvas.width, canvas.height);
+    
+    // Convert to JPEG with the same quality settings
+    return new Promise((resolve, reject) => {
+      canvas.toBlob(blob => {
+        if (!blob) {
+          reject(new Error('Failed to create manual snapshot blob'));
+          return;
+        }
+        
+        const reader = new FileReader();
+        reader.onloadend = () => {
+          const captureTimestamp = Date.now();
+          const frameData = {
+            timestamp: captureTimestamp - this.startTime,
+            absoluteTimestamp: captureTimestamp,
+            imageData: reader.result,
+            logs: [],
+            isManual: true // Flag to identify manual snapshots
+          };
+          
+          this.frames.push(frameData);
+          this.totalFramesCaptured++;
+          
+          console.log(`Manual snapshot captured: frame ${this.totalFramesCaptured}, size: ${blob.size} bytes`);
+
+          // Trigger visual feedback for manual snapshot
+          chrome.runtime.sendMessage({
+            type: 'show-screen-capture-flash'
+          }).catch(() => {
+            console.log('[FrameCapture] Could not trigger manual snapshot flash');
+          });
+
+          // Flash indicator for manual snapshot
+          if (this.settings.frameFlash) {
+            this.flashCaptureIndicator();
+          }
+          
+          // Send frame immediately
+          this.sendFrameBatch().catch(error => {
+            console.error('[FrameCapture] Error sending manual snapshot frame batch:', error);
+          });
+          
+          resolve();
+        };
+        
+        reader.onerror = () => {
+          reject(new Error('Failed to read manual snapshot blob'));
+        };
+        
+        reader.readAsDataURL(blob);
+      }, 'image/jpeg', this.settings.imageQuality / 100);
+    });
+  }
+
+  // Logs are no longer added in real-time
+  // They will be associated during post-processing
+
+  async sendFrameBatch() {
+    // Non-blocking lease check - warn but don't stop recording
+    // The interval check (line 113) provides the actual enforcement
+    this.checkLease().then(leaseValid => {
+      if (!leaseValid) {
+        console.warn('[FrameCapture] WARNING: Lease check failed during batch send, but continuing. Interval check will enforce if needed.');
+      }
+    }).catch(error => {
+      console.warn('[FrameCapture] Lease check error during batch send:', error.message);
+    });
+
+    const batch = this.frames.splice(0, 5); // Send up to 5 frames at a time
+    console.log(`[FrameCapture] Sending batch of ${batch.length} frames, ${this.frames.length} remaining`);
+
+    chrome.runtime.sendMessage({
+      type: 'frame-batch-ready',
+      target: 'background',
+      data: {
+        sessionId: this.sessionId,
+        frames: batch
+      }
+    });
+  }
+
+}
+
+// Listen for messages
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  if (message.target !== 'offscreen') return;
+
+  if (message.type === 'start-frame-capture') {
+    frameCapture.startCapture(message.streamId, message.tabId, message.sessionId, message.scheduledStartTime, message.settings, message.ownerId)
+      .then(() => sendResponse({ success: true }))
+      .catch(error => {
+        console.error('Error starting frame capture:', error);
+        sendResponse({ success: false, error: error.message });
+      });
+    return true; // Keep channel open
+  } else if (message.type === 'stop-frame-capture') {
+    frameCapture.stopCapture();
+    sendResponse({ success: true });
+  } else if (message.type === 'manual-snapshot') {
+    frameCapture.takeManualSnapshot()
+      .then(() => sendResponse({ success: true }))
+      .catch(error => {
+        console.error('Error taking manual snapshot:', error);
+        sendResponse({ success: false, error: error.message });
+      });
+    return true; // Keep channel open
+  }
+});
+
+// Create instance
+const frameCapture = new FrameCapture();

package/chrome-extension/icon128.png

@@ -0,0 +1 @@
+iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAbwAAAG8B8aLcQwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADFSURBVHic7cExAQAAAMKg9U9tCj+gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4G8BDwABTdLJpgAAAABJRU5ErkJggg==

package/chrome-extension/icon16.png

@@ -0,0 +1 @@
+iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAbwAAAG8B8aLcQwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADFSURBVDiNY2AYBaNgFAyEABMDFQELuo4FDAz/GRj+/2dg+M/AwMDAwMDAwMjAyMDIwMjAyMDw/z8DAwMDw38GBgYGhv8M/xkY/jMw/P/PwPCfgYHhPwPDfwaG/wwM/xkY/jMw/Gdg+M/A8J+B4T8Dw38Ghv8MDP8ZGP4zMPxnYPjPwPCfgeE/A8N/Bob/DAz/GRj+MzD8Z2D4z8Dwn4HhPwPDfwaG/wwM/xkY/jMw/Gdg+M/A8J+B4T8Dw38GBgYAKpQVJXjaVpAAAAAASUVORK5CYII=

package/chrome-extension/icon48.png

@@ -0,0 +1 @@
+iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAbwAAAG8B8aLcQwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADFSURBVGiB7ZAxDoAgEAT3xU/4Cn/hK/yEXyCxtBALC5M9yE7CJBttmF1AQAghvg0FgAJAAaAAUAAoABQACgAFgAJAAaAAUAAoABQACgAFgAJAAaAAUAAoABQACgAFgAJAAaAAUAAoABQACgAFgAJAAaAAUAAoABQACgAFgAJAAaAAUAAoABQACgAFgAJAAaAAUAAoABQACgAFgAJAAaAAUAAoABQACgAFgAJAAaAAUAAoABQACgAFgAJAAaAAUAAoABQACgD1BzMUBT6f7DfhAAAAAElFTkSuQmCC

package/chrome-extension/license-helper.js

@@ -0,0 +1,181 @@
+/**
+ * License Helper for Background Service Worker
+ * Non-module version compatible with importScripts()
+ *
+ * Privacy: Only transmits userId (anonymous UUID) and usage count
+ * NO recording data, NO PII, NO browsing history
+ */
+
+// License validation and usage tracking functions
+const LicenseHelper = {
+  cacheKey: 'chromedebug_license_cache',
+  instanceIdKey: 'chromedebug_instance_id',
+  userIdKey: 'chromedebug_user_id',
+
+  /**
+   * Check if user can start a recording (license + usage limit check)
+   * @returns {Promise<{allowed: boolean, message?: string, tier?: string}>}
+   */
+  async checkLicenseBeforeRecording() {
+    try {
+      // Get userId
+      const stored = await chrome.storage.local.get(this.userIdKey);
+      let userId = stored[this.userIdKey];
+
+      if (!userId) {
+        // First time user - allow recording, create userId
+        userId = crypto.randomUUID();
+        await chrome.storage.local.set({[this.userIdKey]: userId});
+        console.log('[License] New user created:', userId);
+        return {allowed: true, firstTime: true, userId: userId};
+      }
+
+      // Check cached license status
+      const licenseStatus = await this.getCachedLicenseStatus();
+
+      if (licenseStatus.valid && licenseStatus.tier === 'pro') {
+        console.log('[License] Pro user - allowing recording');
+        return {allowed: true, tier: 'pro', userId: userId};
+      }
+
+      // Free tier - check usage limit
+      const usage = await this.checkUsageLimit(userId);
+      console.log('[License] Usage check:', usage);
+
+      // Handle both API response format (withinLimit) and offline format (allowed)
+      const withinLimit = usage.withinLimit ?? usage.allowed ?? true;
+      const currentCount = usage.currentUsage ?? usage.count ?? 0;
+      const dailyLimit = usage.dailyLimit ?? usage.limit ?? 50;
+
+      if (!withinLimit) {
+        return {
+          allowed: false,
+          message: `Daily limit reached (${currentCount}/${dailyLimit}). Upgrade to Pro for unlimited recordings.`,
+          userId: userId
+        };
+      }
+
+      return {allowed: true, tier: 'free', userId: userId};
+    } catch (error) {
+      console.error('[License] Error checking license:', error);
+      // On error, allow recording (fail-open for user experience)
+      return {allowed: true, error: error.message};
+    }
+  },
+
+  /**
+   * Increment usage count AFTER recording completes
+   * @param {string} userId - User ID
+   * @returns {Promise<{success: boolean}>}
+   */
+  async trackUsageAfterRecording(userId) {
+    try {
+      if (!userId) {
+        const stored = await chrome.storage.local.get(this.userIdKey);
+        userId = stored[this.userIdKey];
+      }
+
+      if (!userId) {
+        console.warn('[License] No userId found for usage tracking');
+        return {success: false};
+      }
+
+      // Check if pro user (don't increment for pro)
+      const licenseStatus = await this.getCachedLicenseStatus();
+      if (licenseStatus.valid && licenseStatus.tier === 'pro') {
+        console.log('[License] Pro user - skipping usage increment');
+        return {success: true, tier: 'pro', skipped: true};
+      }
+
+      // Increment usage for free tier
+      await this.incrementUsage(userId);
+      console.log('[License] Usage incremented for user:', userId);
+
+      return {success: true};
+    } catch (error) {
+      console.error('[License] Error tracking usage:', error);
+      return {success: false, error: error.message};
+    }
+  },
+
+  /**
+   * Check usage limit via Cloud Function
+   * @param {string} userId - User ID
+   * @returns {Promise<{allowed: boolean, count?: number, limit?: number}>}
+   */
+  async checkUsageLimit(userId) {
+    try {
+      const url = `${FUNCTIONS_URL}/checkUsageLimit`;
+      console.log('[License Helper] FUNCTIONS_URL:', FUNCTIONS_URL);
+      console.log('[License Helper] Full URL:', url);
+      const response = await fetch(url, {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({userId})
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}`);
+      }
+
+      return await response.json();
+    } catch (error) {
+      console.error('[License] Failed to check usage limit:', error);
+      // Offline: allow limited usage (fail-open)
+      return {allowed: true, offline: true, limit: 5};
+    }
+  },
+
+  /**
+   * Increment usage via Cloud Function
+   * @param {string} userId - User ID
+   * @returns {Promise<{success: boolean}>}
+   */
+  async incrementUsage(userId) {
+    try {
+      const response = await fetch(`${FUNCTIONS_URL}/incrementUsage`, {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({userId})
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}`);
+      }
+
+      return await response.json();
+    } catch (error) {
+      console.error('[License] Failed to increment usage:', error);
+      return {success: false, offline: true};
+    }
+  },
+
+  /**
+   * Get cached license status
+   * @returns {Promise<{valid: boolean, tier?: string}>}
+   */
+  async getCachedLicenseStatus() {
+    const result = await chrome.storage.local.get(this.cacheKey);
+    const cached = result[this.cacheKey];
+
+    if (!cached) return {valid: false};
+
+    // Check if cache is stale (>24 hours)
+    const cacheAge = Date.now() - cached.cachedAt;
+    const cacheExpired = cacheAge > (24 * 60 * 60 * 1000);
+
+    if (cacheExpired) {
+      // Check if within grace period (30 days)
+      if (Date.now() < cached.graceUntil) {
+        return {valid: cached.valid, tier: cached.tier, offline: true, gracePeriod: true};
+      }
+
+      return {valid: false, expired: true};
+    }
+
+    return {valid: cached.valid, tier: cached.tier};
+  }
+};
+
+// Make available globally for background.js
+self.LicenseHelper = LicenseHelper;

package/chrome-extension/logger.js

@@ -0,0 +1,23 @@
+// Simple conditional logger for Chrome extension
+// Shows logs in development mode only
+
+// Check if we're in development mode (can be set via extension config)
+const isDevelopment = () => {
+  // Check if config defines development mode
+  if (typeof CHROMEDEBUG_CONFIG !== 'undefined' && CHROMEDEBUG_CONFIG.development !== undefined) {
+    return CHROMEDEBUG_CONFIG.development;
+  }
+  // Default to true for now (can be configured in extension-config.js)
+  return true;
+};
+
+const logger = {
+  log: (...args) => { if (isDevelopment()) console.log(...args); },
+  error: (...args) => console.error(...args), // Always show errors
+  warn: (...args) => { if (isDevelopment()) console.warn(...args); },
+  info: (...args) => { if (isDevelopment()) console.info(...args); },
+  debug: (...args) => { if (isDevelopment()) console.debug(...args); }
+};
+
+// Make available globally for the extension
+window.logger = logger;

package/chrome-extension/manifest.json

@@ -0,0 +1,73 @@
+{
+  "manifest_version": 3,
+  "name": "ChromeDebug MCP Assistant v2.1.1",
+  "version": "2.1.1",
+  "description": "ChromeDebug MCP visual element selector with function tracing [Build: 2025-01-20-v2.1.1]",
+  "permissions": [
+    "activeTab",
+    "scripting",
+    "tabs",
+    "storage",
+    "tabCapture",
+    "desktopCapture",
+    "notifications",
+    "offscreen"
+  ],
+  "host_permissions": [
+    "https://*.cloudfunctions.net/*"
+  ],
+  "action": {
+    "default_popup": "popup.html",
+    "default_icon": {
+      "16": "icon16.png",
+      "48": "icon48.png",
+      "128": "icon128.png"
+    }
+  },
+  "options_page": "options.html",
+  "content_scripts": [
+    {
+      "matches": [
+        "<all_urls>"
+      ],
+      "exclude_matches": [
+        "*://youtube.com/*",
+        "*://www.youtube.com/*",
+        "*://m.youtube.com/*",
+        "*://google.com/*",
+        "*://www.google.com/*",
+        "*://gmail.com/*",
+        "*://www.gmail.com/*",
+        "*://facebook.com/*",
+        "*://www.facebook.com/*",
+        "*://twitter.com/*",
+        "*://www.twitter.com/*",
+        "*://x.com/*",
+        "*://www.x.com/*",
+        "*://instagram.com/*",
+        "*://www.instagram.com/*"
+      ],
+      "js": [
+        "pako.min.js",
+        "web-vitals.iife.js",
+        "pii-redactor.js",
+        "data-buffer.js",
+        "performance-monitor.js",
+        "dom-tracker.js",
+        "network-tracker.js",
+        "function-tracker.js",
+        "content.js"
+      ],
+      "css": ["content.css"],
+      "run_at": "document_idle"
+    }
+  ],
+  "background": {
+    "service_worker": "background.js"
+  },
+  "icons": {
+    "16": "icon16.png",
+    "48": "icon48.png",
+    "128": "icon128.png"
+  }
+}