@dynamicu/chromedebug-mcp 2.2.0

package/chrome-extension/network-tracker.js

@@ -0,0 +1,510 @@
+// Network Tracker for Chrome Debug Full Data Recording
+// Wraps fetch and XMLHttpRequest to track all network activity
+
+class NetworkTracker {
+  constructor() {
+    this.isTracking = false;
+    this.originalFetch = null;
+    this.originalXHROpen = null;
+    this.originalXHRSend = null;
+    this.requestMap = new Map(); // Track ongoing requests
+    this.eventBuffer = [];
+    this.recordingId = null;
+    
+    // Configuration
+    this.captureRequestBody = true;
+    this.captureResponseBody = true;
+    this.maxBodySize = 10 * 1024; // 10KB limit for request/response bodies
+    this.bufferFlushDelay = 2000; // Flush every 2 seconds
+    this.flushTimer = null;
+    
+    // Callbacks and dependencies
+    this.onDataReady = null;
+    this.piiRedactor = null;
+    this.performanceMonitor = null;
+  }
+
+  init(options = {}) {
+    this.recordingId = options.recordingId || 'default';
+    this.onDataReady = options.onDataReady;
+    this.piiRedactor = options.piiRedactor;
+    this.performanceMonitor = options.performanceMonitor;
+    
+    // Override settings
+    if (options.captureRequestBody !== undefined) this.captureRequestBody = options.captureRequestBody;
+    if (options.captureResponseBody !== undefined) this.captureResponseBody = options.captureResponseBody;
+    if (options.maxBodySize) this.maxBodySize = options.maxBodySize;
+    if (options.bufferFlushDelay) this.bufferFlushDelay = options.bufferFlushDelay;
+    
+    console.log('[NetworkTracker] Initialized with options:', {
+      recordingId: this.recordingId,
+      captureRequestBody: this.captureRequestBody,
+      captureResponseBody: this.captureResponseBody,
+      maxBodySize: this.maxBodySize
+    });
+  }
+
+  startTracking() {
+    if (this.isTracking) {
+      console.warn('[NetworkTracker] Already tracking network requests');
+      return;
+    }
+
+    try {
+      this.wrapFetch();
+      this.wrapXMLHttpRequest();
+      
+      this.isTracking = true;
+      this.startBufferFlusher();
+      
+      console.log('[NetworkTracker] Started network request tracking');
+      
+      // Record performance event
+      if (this.performanceMonitor) {
+        this.performanceMonitor.recordEvent('network_tracking_started', {
+          timestamp: Date.now()
+        });
+      }
+      
+    } catch (error) {
+      console.error('[NetworkTracker] Failed to start tracking:', error);
+    }
+  }
+
+  stopTracking() {
+    if (!this.isTracking) return;
+
+    this.restoreFetch();
+    this.restoreXMLHttpRequest();
+    
+    this.stopBufferFlusher();
+    this.flushBuffer(); // Flush any remaining data
+    
+    this.isTracking = false;
+    console.log('[NetworkTracker] Stopped network request tracking');
+    
+    // Record performance event
+    if (this.performanceMonitor) {
+      this.performanceMonitor.recordEvent('network_tracking_stopped', {
+        timestamp: Date.now(),
+        totalRequests: this.requestMap.size
+      });
+    }
+  }
+
+  wrapFetch() {
+    this.originalFetch = window.fetch;
+    
+    window.fetch = async (input, init = {}) => {
+      const requestId = this.generateRequestId();
+      const startTime = Date.now();
+      
+      let url, method, headers, body;
+      
+      // Parse input (URL or Request object)
+      if (typeof input === 'string') {
+        url = input;
+        method = init.method || 'GET';
+        headers = init.headers || {};
+        body = init.body;
+      } else if (input instanceof Request) {
+        url = input.url;
+        method = input.method;
+        headers = Object.fromEntries(input.headers.entries());
+        body = init.body || input.body;
+      }
+      
+      // Create request data
+      const requestData = {
+        type: 'network_request',
+        timestamp: startTime,
+        recording_id: this.recordingId,
+        request_id: requestId,
+        method: method,
+        url: url,
+        headers: this.processHeaders(headers),
+        body: await this.processRequestBody(body),
+        fetch_type: 'fetch'
+      };
+      
+      // Store request for later correlation with response
+      this.requestMap.set(requestId, {
+        startTime,
+        requestData
+      });
+      
+      try {
+        // Make the actual request
+        const response = await this.originalFetch(input, init);
+        
+        // Process response
+        await this.handleFetchResponse(requestId, response.clone());
+        
+        return response;
+      } catch (error) {
+        // Handle fetch error
+        this.handleRequestError(requestId, error);
+        throw error;
+      }
+    };
+  }
+
+  wrapXMLHttpRequest() {
+    this.originalXHROpen = XMLHttpRequest.prototype.open;
+    this.originalXHRSend = XMLHttpRequest.prototype.send;
+    
+    XMLHttpRequest.prototype.open = function(method, url, async, user, password) {
+      // Store request details
+      this._chromePilotRequestId = this._chromePilotRequestId || generateRequestId();
+      this._chromePilotMethod = method;
+      this._chromePilotUrl = url;
+      this._chromePilotStartTime = Date.now();
+      
+      return this.originalXHROpen.call(this, method, url, async, user, password);
+    };
+    
+    XMLHttpRequest.prototype.send = function(body) {
+      const requestId = this._chromePilotRequestId;
+      const tracker = window.networkTracker; // Reference to this instance
+      
+      if (requestId && tracker) {
+        // Create request data
+        const requestData = {
+          type: 'network_request',
+          timestamp: this._chromePilotStartTime,
+          recording_id: tracker.recordingId,
+          request_id: requestId,
+          method: this._chromePilotMethod,
+          url: this._chromePilotUrl,
+          headers: tracker.getXHRHeaders(this),
+          body: tracker.processRequestBodySync(body),
+          fetch_type: 'xhr'
+        };
+        
+        // Store request
+        tracker.requestMap.set(requestId, {
+          startTime: this._chromePilotStartTime,
+          requestData,
+          xhr: this
+        });
+        
+        // Add event listeners for response
+        this.addEventListener('readystatechange', function() {
+          if (this.readyState === XMLHttpRequest.DONE) {
+            tracker.handleXHRResponse(requestId, this);
+          }
+        });
+        
+        this.addEventListener('error', function() {
+          tracker.handleRequestError(requestId, new Error('XHR Error'));
+        });
+      }
+      
+      return tracker.originalXHRSend.call(this, body);
+    };
+    
+    // Store reference for XHR access
+    window.networkTracker = this;
+  }
+
+  async handleFetchResponse(requestId, response) {
+    const request = this.requestMap.get(requestId);
+    if (!request) return;
+    
+    const endTime = Date.now();
+    const duration = endTime - request.startTime;
+    
+    // Get response headers
+    const responseHeaders = Object.fromEntries(response.headers.entries());
+    
+    // Get response body if configured
+    let responseBody = null;
+    if (this.captureResponseBody) {
+      try {
+        const contentType = response.headers.get('content-type') || '';
+        
+        if (contentType.includes('application/json') || 
+            contentType.includes('text/') || 
+            contentType.includes('application/xml')) {
+          
+          const text = await response.text();
+          responseBody = this.truncateData(text, this.maxBodySize);
+        }
+      } catch (error) {
+        console.warn('[NetworkTracker] Failed to read response body:', error);
+      }
+    }
+    
+    // Create complete request record
+    const networkEvent = {
+      ...request.requestData,
+      response_status: response.status,
+      response_headers: this.processHeaders(responseHeaders),
+      response_body: responseBody,
+      duration_ms: duration,
+      completed_at: endTime
+    };
+    
+    // Apply PII redaction
+    if (this.piiRedactor) {
+      networkEvent = this.piiRedactor.redactData(networkEvent, 'network_request');
+    }
+    
+    this.eventBuffer.push(networkEvent);
+    this.requestMap.delete(requestId);
+    
+    // Record performance metrics
+    if (this.performanceMonitor) {
+      this.performanceMonitor.recordEvent('network_request', {
+        method: networkEvent.method,
+        status: response.status,
+        duration: duration
+      });
+    }
+  }
+
+  handleXHRResponse(requestId, xhr) {
+    const request = this.requestMap.get(requestId);
+    if (!request) return;
+    
+    const endTime = Date.now();
+    const duration = endTime - request.startTime;
+    
+    // Get response data
+    let responseBody = null;
+    if (this.captureResponseBody && xhr.responseText) {
+      responseBody = this.truncateData(xhr.responseText, this.maxBodySize);
+    }
+    
+    // Create complete request record
+    const networkEvent = {
+      ...request.requestData,
+      response_status: xhr.status,
+      response_headers: this.getXHRResponseHeaders(xhr),
+      response_body: responseBody,
+      duration_ms: duration,
+      completed_at: endTime
+    };
+    
+    // Apply PII redaction
+    if (this.piiRedactor) {
+      networkEvent = this.piiRedactor.redactData(networkEvent, 'network_request');
+    }
+    
+    this.eventBuffer.push(networkEvent);
+    this.requestMap.delete(requestId);
+    
+    // Record performance metrics
+    if (this.performanceMonitor) {
+      this.performanceMonitor.recordEvent('network_request', {
+        method: networkEvent.method,
+        status: xhr.status,
+        duration: duration
+      });
+    }
+  }
+
+  handleRequestError(requestId, error) {
+    const request = this.requestMap.get(requestId);
+    if (!request) return;
+    
+    const endTime = Date.now();
+    const duration = endTime - request.startTime;
+    
+    const networkEvent = {
+      ...request.requestData,
+      response_status: 0,
+      error: error.message,
+      duration_ms: duration,
+      completed_at: endTime
+    };
+    
+    this.eventBuffer.push(networkEvent);
+    this.requestMap.delete(requestId);
+  }
+
+  async processRequestBody(body) {
+    if (!this.captureRequestBody || !body) return null;
+    
+    try {
+      if (typeof body === 'string') {
+        return this.truncateData(body, this.maxBodySize);
+      }
+      
+      if (body instanceof FormData) {
+        const formObject = {};
+        for (const [key, value] of body.entries()) {
+          formObject[key] = typeof value === 'string' ? 
+            this.truncateData(value, this.maxBodySize) : 
+            '[File]';
+        }
+        return formObject;
+      }
+      
+      if (body instanceof URLSearchParams) {
+        return Object.fromEntries(body.entries());
+      }
+      
+      if (body instanceof ArrayBuffer || body instanceof Uint8Array) {
+        return `[Binary Data: ${body.byteLength} bytes]`;
+      }
+      
+      // Try to stringify other objects
+      const stringified = JSON.stringify(body);
+      return this.truncateData(stringified, this.maxBodySize);
+      
+    } catch (error) {
+      return '[Unable to serialize request body]';
+    }
+  }
+
+  processRequestBodySync(body) {
+    // Synchronous version for XHR
+    if (!this.captureRequestBody || !body) return null;
+    
+    if (typeof body === 'string') {
+      return this.truncateData(body, this.maxBodySize);
+    }
+    
+    try {
+      const stringified = JSON.stringify(body);
+      return this.truncateData(stringified, this.maxBodySize);
+    } catch (error) {
+      return '[Unable to serialize request body]';
+    }
+  }
+
+  processHeaders(headers) {
+    if (!headers) return {};
+    
+    const processed = {};
+    
+    if (headers instanceof Headers) {
+      for (const [key, value] of headers.entries()) {
+        processed[key] = value;
+      }
+    } else if (typeof headers === 'object') {
+      Object.assign(processed, headers);
+    }
+    
+    return processed;
+  }
+
+  getXHRHeaders(xhr) {
+    // XHR doesn't provide easy access to request headers
+    // This is a limitation of the XMLHttpRequest API
+    return {};
+  }
+
+  getXHRResponseHeaders(xhr) {
+    const headers = {};
+    const headerString = xhr.getAllResponseHeaders();
+    
+    if (headerString) {
+      const lines = headerString.split('\r\n');
+      for (const line of lines) {
+        const parts = line.split(': ');
+        if (parts.length === 2) {
+          headers[parts[0].toLowerCase()] = parts[1];
+        }
+      }
+    }
+    
+    return headers;
+  }
+
+  truncateData(data, maxSize) {
+    if (!data || typeof data !== 'string') return data;
+    
+    if (data.length <= maxSize) return data;
+    
+    return data.substring(0, maxSize) + `... [Truncated: ${data.length} total chars]`;
+  }
+
+  generateRequestId() {
+    return `req_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+  }
+
+  restoreFetch() {
+    if (this.originalFetch) {
+      window.fetch = this.originalFetch;
+      this.originalFetch = null;
+    }
+  }
+
+  restoreXMLHttpRequest() {
+    if (this.originalXHROpen) {
+      XMLHttpRequest.prototype.open = this.originalXHROpen;
+      this.originalXHROpen = null;
+    }
+    
+    if (this.originalXHRSend) {
+      XMLHttpRequest.prototype.send = this.originalXHRSend;
+      this.originalXHRSend = null;
+    }
+    
+    // Clean up global reference
+    if (window.networkTracker === this) {
+      delete window.networkTracker;
+    }
+  }
+
+  startBufferFlusher() {
+    if (this.flushTimer) return;
+    
+    this.flushTimer = setInterval(() => {
+      if (this.eventBuffer.length > 0) {
+        this.flushBuffer();
+      }
+    }, this.bufferFlushDelay);
+  }
+
+  stopBufferFlusher() {
+    if (this.flushTimer) {
+      clearInterval(this.flushTimer);
+      this.flushTimer = null;
+    }
+  }
+
+  flushBuffer() {
+    if (this.eventBuffer.length === 0) return;
+    
+    const events = [...this.eventBuffer];
+    this.eventBuffer = [];
+    
+    console.log(`[NetworkTracker] Flushing ${events.length} network requests`);
+    
+    // Send data via callback
+    if (this.onDataReady) {
+      this.onDataReady(events);
+    }
+  }
+
+  getStats() {
+    return {
+      isTracking: this.isTracking,
+      pendingRequests: this.requestMap.size,
+      bufferSize: this.eventBuffer.length,
+      recordingId: this.recordingId
+    };
+  }
+
+  destroy() {
+    this.stopTracking();
+    this.eventBuffer = [];
+    this.requestMap.clear();
+    this.onDataReady = null;
+    this.piiRedactor = null;
+    this.performanceMonitor = null;
+  }
+}
+
+// Helper function for XHR (global scope)
+function generateRequestId() {
+  return `req_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+}
+
+// Export for use in content script
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = NetworkTracker;
+}

package/chrome-extension/offscreen.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Chrome Debug Offscreen Recorder</title>
+  </head>
+  <body>
+    <script src="frame-capture.js"></script>
+  </body>
+</html>

package/chrome-extension/options.html

@@ -0,0 +1,203 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Chrome Debug Settings</title>
+  <style>
+    body {
+      font-family: system-ui, -apple-system, sans-serif;
+      max-width: 600px;
+      margin: 20px auto;
+      padding: 20px;
+      background: #f5f5f5;
+    }
+    
+    .container {
+      background: white;
+      border-radius: 8px;
+      padding: 30px;
+      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    }
+    
+    h1 {
+      margin-top: 0;
+      color: #333;
+    }
+    
+    .setting-group {
+      margin-bottom: 25px;
+    }
+    
+    label {
+      display: block;
+      margin-bottom: 8px;
+      font-weight: 500;
+      color: #555;
+    }
+    
+    input[type="number"] {
+      width: 150px;
+      padding: 8px 12px;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      font-size: 14px;
+    }
+    
+    .help-text {
+      margin-top: 5px;
+      font-size: 13px;
+      color: #666;
+    }
+    
+    button {
+      background: #2196F3;
+      color: white;
+      border: none;
+      padding: 10px 20px;
+      border-radius: 4px;
+      font-size: 14px;
+      cursor: pointer;
+      margin-right: 10px;
+    }
+    
+    button:hover {
+      background: #1976D2;
+    }
+    
+    button.secondary {
+      background: #757575;
+    }
+    
+    button.secondary:hover {
+      background: #616161;
+    }
+    
+    .status {
+      margin-top: 20px;
+      padding: 10px 15px;
+      border-radius: 4px;
+      font-size: 14px;
+      display: none;
+    }
+    
+    .status.success {
+      background: #E8F5E9;
+      color: #2E7D32;
+      border: 1px solid #81C784;
+    }
+    
+    .status.error {
+      background: #FFEBEE;
+      color: #C62828;
+      border: 1px solid #EF5350;
+    }
+    
+    .status.info {
+      background: #E3F2FD;
+      color: #1565C0;
+      border: 1px solid #64B5F6;
+    }
+    
+    h3 {
+      margin: 0 0 15px 0;
+      color: #333;
+      font-size: 16px;
+    }
+    
+    input[type="radio"] {
+      margin-right: 8px;
+    }
+    
+    label {
+      display: flex;
+      align-items: center;
+      margin-bottom: 12px;
+      cursor: pointer;
+    }
+    
+    .site-section {
+      margin: 20px 0;
+    }
+    
+    .site-section label {
+      display: block;
+      margin-bottom: 8px;
+    }
+    
+    textarea {
+      width: 100%;
+      padding: 10px;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      font-size: 13px;
+      font-family: 'Courier New', monospace;
+      resize: vertical;
+      min-height: 120px;
+    }
+    
+    textarea:focus {
+      border-color: #2196F3;
+      outline: none;
+      box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>Chrome Debug Settings</h1>
+    
+    <div class="setting-group">
+      <label for="server-port">HTTP Server Port</label>
+      <input type="number" id="server-port" min="1024" max="65535" placeholder="Auto">
+      <div class="help-text">
+        Leave empty for automatic port discovery. The server typically runs on port 3000.
+      </div>
+    </div>
+    
+    <div class="setting-group">
+      <label>Server Status</label>
+      <button id="test-connection">Test Connection</button>
+      <button id="auto-detect" class="secondary">Auto Detect Port</button>
+    </div>
+    
+    <div class="setting-group">
+      <h3>Site Restrictions</h3>
+      <label>
+        <input type="radio" name="site-mode" value="whitelist" checked> 
+        Whitelist Mode (only run on specified sites)
+      </label>
+      <label>
+        <input type="radio" name="site-mode" value="blacklist"> 
+        Blacklist Mode (run everywhere except specified sites)
+      </label>
+      
+      <div id="allowed-sites-section" class="site-section">
+        <label for="allowed-sites">Allowed Sites (Whitelist)</label>
+        <div class="help-text">Chrome Debug will only run on these sites. Use * for wildcards (e.g., *.example.com)</div>
+        <textarea id="allowed-sites" rows="6" placeholder="localhost:*&#10;127.0.0.1:*&#10;*.test&#10;*.local&#10;*.dev&#10;example.com"></textarea>
+      </div>
+      
+      <div id="blocked-sites-section" class="site-section" style="display: none;">
+        <label for="blocked-sites">Blocked Sites (Blacklist)</label>
+        <div class="help-text">Chrome Debug will NOT run on these sites. Use * for wildcards (e.g., *.youtube.com)</div>
+        <textarea id="blocked-sites" rows="6" placeholder="youtube.com&#10;*.youtube.com&#10;google.com&#10;*.google.com&#10;facebook.com&#10;twitter.com"></textarea>
+      </div>
+      
+      <div style="margin-top: 15px;">
+        <button id="test-current-site" class="secondary">Test Current Tab</button>
+        <button id="add-current-site" class="secondary">Add Current Site</button>
+        <button id="import-export" class="secondary">Import/Export</button>
+      </div>
+    </div>
+    
+    <div id="status" class="status"></div>
+    
+    <div style="margin-top: 30px;">
+      <button id="save">Save Settings</button>
+      <button id="reset" class="secondary">Reset to Default</button>
+    </div>
+  </div>
+  
+  <script src="extension-config.js"></script>
+  <script src="options.js"></script>
+</body>
+</html>