@dynamicu/chromedebug-mcp 2.2.0

package/chrome-extension/dom-tracker.js

@@ -0,0 +1,411 @@
+// DOM Tracker for Chrome Debug Full Data Recording
+// Tracks DOM mutations using MutationObserver with performance optimization
+
+class DOMTracker {
+  constructor() {
+    this.isTracking = false;
+    this.observer = null;
+    this.eventBuffer = [];
+    this.bufferFlushDelay = 1000; // Flush buffer every 1 second
+    this.flushTimer = null;
+    this.maxBufferSize = 100; // Max mutations before forced flush
+    this.recordingId = null;
+    
+    // Performance optimization settings
+    this.mutationThrottle = 50; // Max mutations per second
+    this.lastMutationTime = 0;
+    this.mutationCount = 0;
+    
+    // Callbacks
+    this.onDataReady = null; // Callback when data is ready to upload
+    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 default settings
+    if (options.bufferFlushDelay) this.bufferFlushDelay = options.bufferFlushDelay;
+    if (options.maxBufferSize) this.maxBufferSize = options.maxBufferSize;
+    if (options.mutationThrottle) this.mutationThrottle = options.mutationThrottle;
+    
+    console.log('[DOMTracker] Initialized with options:', {
+      recordingId: this.recordingId,
+      bufferFlushDelay: this.bufferFlushDelay,
+      maxBufferSize: this.maxBufferSize,
+      mutationThrottle: this.mutationThrottle
+    });
+  }
+
+  startTracking() {
+    if (this.isTracking) {
+      console.warn('[DOMTracker] Already tracking DOM mutations');
+      return;
+    }
+
+    try {
+      // Create MutationObserver
+      this.observer = new MutationObserver((mutations) => {
+        this.handleMutations(mutations);
+      });
+
+      // Configure observer options
+      const config = {
+        childList: true,          // Track added/removed elements
+        attributes: true,         // Track attribute changes
+        attributeOldValue: true,  // Include old attribute values
+        characterData: true,      // Track text content changes
+        characterDataOldValue: true, // Include old text values
+        subtree: true            // Monitor entire subtree
+      };
+
+      // Start observing
+      this.observer.observe(document.body || document.documentElement, config);
+      
+      this.isTracking = true;
+      this.startBufferFlusher();
+      
+      console.log('[DOMTracker] Started DOM mutation tracking');
+      
+      // Record performance event
+      if (this.performanceMonitor) {
+        this.performanceMonitor.recordEvent('dom_tracking_started', {
+          timestamp: Date.now(),
+          config: config
+        });
+      }
+      
+    } catch (error) {
+      console.error('[DOMTracker] Failed to start tracking:', error);
+    }
+  }
+
+  stopTracking() {
+    if (!this.isTracking) return;
+
+    if (this.observer) {
+      this.observer.disconnect();
+      this.observer = null;
+    }
+
+    this.stopBufferFlusher();
+    this.flushBuffer(); // Flush any remaining data
+    
+    this.isTracking = false;
+    console.log('[DOMTracker] Stopped DOM mutation tracking');
+    
+    // Record performance event
+    if (this.performanceMonitor) {
+      this.performanceMonitor.recordEvent('dom_tracking_stopped', {
+        timestamp: Date.now(),
+        totalMutations: this.mutationCount
+      });
+    }
+  }
+
+  handleMutations(mutations) {
+    const now = Date.now();
+    
+    // Throttle mutations for performance
+    if (now - this.lastMutationTime < (1000 / this.mutationThrottle)) {
+      return; // Skip this batch if we're over the throttle limit
+    }
+    
+    this.lastMutationTime = now;
+    
+    const processedMutations = [];
+    
+    for (const mutation of mutations) {
+      try {
+        const processedMutation = this.processMutation(mutation);
+        if (processedMutation) {
+          processedMutations.push(processedMutation);
+          this.mutationCount++;
+        }
+      } catch (error) {
+        console.error('[DOMTracker] Error processing mutation:', error);
+      }
+    }
+    
+    if (processedMutations.length > 0) {
+      this.eventBuffer.push(...processedMutations);
+      
+      // Force flush if buffer is getting large
+      if (this.eventBuffer.length >= this.maxBufferSize) {
+        this.flushBuffer();
+      }
+    }
+  }
+
+  processMutation(mutation) {
+    const timestamp = Date.now();
+    const mutationData = {
+      type: 'dom_mutation',
+      timestamp: timestamp,
+      recording_id: this.recordingId,
+      mutation_type: mutation.type,
+      target_selector: this.getElementSelector(mutation.target),
+      target_xpath: this.getElementXPath(mutation.target)
+    };
+
+    // Process different mutation types
+    switch (mutation.type) {
+      case 'childList':
+        mutationData.added_nodes = this.processNodeList(mutation.addedNodes);
+        mutationData.removed_nodes = this.processNodeList(mutation.removedNodes);
+        break;
+        
+      case 'attributes':
+        mutationData.attribute_name = mutation.attributeName;
+        mutationData.old_value = mutation.oldValue;
+        mutationData.new_value = mutation.target.getAttribute(mutation.attributeName);
+        break;
+        
+      case 'characterData':
+        mutationData.old_value = mutation.oldValue;
+        mutationData.new_value = mutation.target.textContent;
+        break;
+    }
+
+    // Apply PII redaction if available
+    if (this.piiRedactor) {
+      mutationData = this.piiRedactor.redactData(mutationData, 'dom_mutation');
+    }
+
+    return mutationData;
+  }
+
+  processNodeList(nodeList) {
+    if (!nodeList || nodeList.length === 0) return [];
+    
+    const nodes = [];
+    
+    for (const node of nodeList) {
+      // Skip text nodes with only whitespace
+      if (node.nodeType === Node.TEXT_NODE && !node.textContent.trim()) {
+        continue;
+      }
+      
+      const nodeData = {
+        nodeType: node.nodeType,
+        nodeName: node.nodeName.toLowerCase()
+      };
+      
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        nodeData.tagName = node.tagName.toLowerCase();
+        nodeData.className = node.className;
+        nodeData.id = node.id;
+        
+        // Capture important attributes
+        if (node.attributes) {
+          nodeData.attributes = {};
+          for (const attr of node.attributes) {
+            nodeData.attributes[attr.name] = attr.value;
+          }
+        }
+      } else if (node.nodeType === Node.TEXT_NODE) {
+        nodeData.textContent = node.textContent.substring(0, 200); // Limit text length
+      }
+      
+      nodes.push(nodeData);
+    }
+    
+    return nodes;
+  }
+
+  getElementSelector(element) {
+    if (!element || element.nodeType !== Node.ELEMENT_NODE) {
+      return null;
+    }
+    
+    try {
+      // Try to build a unique CSS selector
+      const parts = [];
+      let current = element;
+      
+      while (current && current !== document.body && current !== document.documentElement) {
+        let selector = current.tagName.toLowerCase();
+        
+        // Add ID if available
+        if (current.id) {
+          selector += `#${current.id}`;
+          parts.unshift(selector);
+          break; // ID is unique, we can stop here
+        }
+        
+        // Add classes if available
+        if (current.className && typeof current.className === 'string') {
+          const classes = current.className.trim().split(/\s+/);
+          if (classes.length > 0) {
+            selector += '.' + classes.join('.');
+          }
+        }
+        
+        // Add nth-child if needed for uniqueness
+        const siblings = current.parentElement ? 
+          Array.from(current.parentElement.children).filter(el => el.tagName === current.tagName) : 
+          [];
+        
+        if (siblings.length > 1) {
+          const index = siblings.indexOf(current) + 1;
+          selector += `:nth-child(${index})`;
+        }
+        
+        parts.unshift(selector);
+        current = current.parentElement;
+        
+        // Limit depth to prevent overly long selectors
+        if (parts.length >= 5) break;
+      }
+      
+      return parts.join(' > ');
+    } catch (error) {
+      console.error('[DOMTracker] Error generating selector:', error);
+      return element.tagName?.toLowerCase() || 'unknown';
+    }
+  }
+
+  getElementXPath(element) {
+    if (!element || element.nodeType !== Node.ELEMENT_NODE) {
+      return null;
+    }
+    
+    try {
+      const parts = [];
+      let current = element;
+      
+      while (current && current !== document.documentElement) {
+        let part = current.tagName.toLowerCase();
+        
+        if (current.id) {
+          part += `[@id='${current.id}']`;
+          parts.unshift(part);
+          break; // ID is unique
+        }
+        
+        // Count siblings with same tag name
+        const siblings = current.parentElement ? 
+          Array.from(current.parentElement.children).filter(el => el.tagName === current.tagName) : 
+          [];
+        
+        if (siblings.length > 1) {
+          const index = siblings.indexOf(current) + 1;
+          part += `[${index}]`;
+        }
+        
+        parts.unshift(part);
+        current = current.parentElement;
+        
+        // Limit depth
+        if (parts.length >= 8) break;
+      }
+      
+      return '/' + parts.join('/');
+    } catch (error) {
+      console.error('[DOMTracker] Error generating XPath:', error);
+      return null;
+    }
+  }
+
+  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(`[DOMTracker] Flushing ${events.length} DOM mutations`);
+    
+    // Send data via callback
+    if (this.onDataReady) {
+      this.onDataReady(events);
+    }
+    
+    // Record performance metrics
+    if (this.performanceMonitor) {
+      this.performanceMonitor.recordEvent('dom_mutations_flushed', {
+        count: events.length,
+        timestamp: Date.now()
+      });
+    }
+  }
+
+  getStats() {
+    return {
+      isTracking: this.isTracking,
+      mutationCount: this.mutationCount,
+      bufferSize: this.eventBuffer.length,
+      recordingId: this.recordingId
+    };
+  }
+
+  // Advanced filtering options
+  setFilters(filters) {
+    this.filters = {
+      ignoredElements: filters.ignoredElements || ['script', 'style', 'meta'],
+      ignoredAttributes: filters.ignoredAttributes || ['data-*', 'aria-*'],
+      ignoredClasses: filters.ignoredClasses || ['hover', 'active', 'focus'],
+      maxTextLength: filters.maxTextLength || 200,
+      ...filters
+    };
+  }
+
+  shouldIgnoreMutation(mutation) {
+    if (!this.filters) return false;
+    
+    const target = mutation.target;
+    
+    // Ignore certain elements
+    if (target.tagName && this.filters.ignoredElements.includes(target.tagName.toLowerCase())) {
+      return true;
+    }
+    
+    // Ignore certain attributes
+    if (mutation.type === 'attributes') {
+      const attrName = mutation.attributeName;
+      for (const pattern of this.filters.ignoredAttributes) {
+        if (pattern.includes('*')) {
+          const regex = new RegExp(pattern.replace('*', '.*'));
+          if (regex.test(attrName)) return true;
+        } else if (attrName === pattern) {
+          return true;
+        }
+      }
+    }
+    
+    return false;
+  }
+
+  destroy() {
+    this.stopTracking();
+    this.eventBuffer = [];
+    this.onDataReady = null;
+    this.piiRedactor = null;
+    this.performanceMonitor = null;
+  }
+}
+
+// Export for use in content script
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = DOMTracker;
+}

package/chrome-extension/extension-config.js

@@ -0,0 +1,78 @@
+// Auto-generated configuration from Chrome Debug config
+// DO NOT EDIT MANUALLY - Run 'npm run update-extension-config' to regenerate
+
+const CHROMEDEBUG_CONFIG = {
+  ports: [
+  3000,
+  3001,
+  3002,
+  3028,
+  3029,
+  3030,
+  3031,
+  3032,
+  3033,
+  3034,
+  3035,
+  3036,
+  8080,
+  8081,
+  8082,
+  8083,
+  8084,
+  8085,
+  8086,
+  8087,
+  8088,
+  8089,
+  8090,
+  9000,
+  9001,
+  9002,
+  9003,
+  9004,
+  9005,
+  9006,
+  9007,
+  9008,
+  9009,
+  9010,
+  3023,
+  3003,
+  3004,
+  3005,
+  3006,
+  3007,
+  3008,
+  3009,
+  3010,
+  3011,
+  3012,
+  3013,
+  3014,
+  3015,
+  3016,
+  3017,
+  3018,
+  3019,
+  3020,
+  3021,
+  3022,
+  3024,
+  3025,
+  3026,
+  3027
+],
+  discoveryTimeout: 3000,
+  lastGenerated: '2025-10-01T22:12:24.724Z'
+};
+
+// Export for use in extension scripts
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = CHROMEDEBUG_CONFIG;
+}
+
+// For browser environments
+if (typeof window !== 'undefined') {
+  window.CHROMEDEBUG_CONFIG = CHROMEDEBUG_CONFIG;
+}