@dynamicu/chromedebug-mcp 2.6.6 → 2.7.0

package/chrome-extension/pro/enhanced-capture.js

@@ -0,0 +1,406 @@
+/**
+ * Enhanced Click Capture - Pro Feature
+ *
+ * Provides detailed element tracking including:
+ * - Full HTML capture
+ * - Event handlers detection
+ * - Element state and CSS
+ * - Framework component detection (React/Vue/Angular)
+ * - Performance metrics
+ */
+
+/**
+ * Captures element HTML with size limit (10KB max)
+ * @param {Element} element - The DOM element to capture
+ * @returns {string|null} Element HTML (truncated if over limit), null if capture failed or no element
+ */
+export function captureElementHTML(element) {
+  try {
+    if (!element) {
+      return null; // No element to capture
+    }
+
+    // Defensive check to prevent race conditions
+    let html;
+    try {
+      html = element.outerHTML;
+    } catch (e) {
+      // Element was likely removed from DOM during capture
+      console.error('[ChromePilot Pro] Element removed during capture:', e.message);
+      return null;
+    }
+
+    if (!html) {
+      console.error('[ChromePilot Pro] Element exists but has no outerHTML:', element.tagName || 'unknown');
+      return null; // Element exists but can't get HTML
+    }
+
+    const maxSize = 10 * 1024; // 10KB limit
+
+    if (html.length <= maxSize) {
+      // Return raw HTML - JSON.stringify will handle escaping properly
+      return html;
+    }
+
+    // Truncate and add indicator - JSON.stringify will handle escaping
+    const truncated = html.substring(0, maxSize - 20) + '...truncated';
+    return truncated;
+  } catch (error) {
+    console.error('[ChromePilot Pro] Error capturing element HTML:', error.message);
+    return null; // Capture failed with error
+  }
+}
+
+/**
+ * Extracts event handlers from element (2KB max)
+ * @param {Element} element - The DOM element to analyze
+ * @returns {Object|null} Event handlers data, null if capture failed or no element
+ */
+export function extractEventHandlers(element) {
+  try {
+    const handlers = {};
+    const maxSize = 2 * 1024; // 2KB limit
+
+    if (!element) {
+      return null; // No element to analyze
+    }
+
+    // Get inline event handlers
+    const inlineHandlers = {};
+    for (const attr of element.attributes || []) {
+      if (attr.name.startsWith('on')) {
+        inlineHandlers[attr.name] = attr.value;
+      }
+    }
+
+    if (Object.keys(inlineHandlers).length > 0) {
+      handlers.inline = inlineHandlers;
+    }
+
+    // Try to detect jQuery/library events if available
+    if (window.jQuery && element._jQuery) {
+      try {
+        const jQueryEvents = window.jQuery._data(element, 'events');
+        if (jQueryEvents) {
+          handlers.jquery = Object.keys(jQueryEvents);
+        }
+      } catch (e) {
+        // Ignore jQuery access errors
+      }
+    }
+
+    // Check for common framework event attributes
+    const frameworkAttrs = {};
+    for (const attr of element.attributes || []) {
+      if (attr.name.match(/^(v-on|@|ng-|data-action)/)) {
+        frameworkAttrs[attr.name] = attr.value;
+      }
+    }
+
+    if (Object.keys(frameworkAttrs).length > 0) {
+      handlers.framework = frameworkAttrs;
+    }
+
+    // Return null if no handlers found
+    if (Object.keys(handlers).length === 0) {
+      return null;
+    }
+
+    // Truncate if too large
+    const handlersStr = JSON.stringify(handlers);
+    if (handlersStr.length > maxSize) {
+      return { truncated: true, size: handlersStr.length };
+    }
+
+    return handlers;
+  } catch (error) {
+    console.error('[ChromePilot Pro] Error extracting event handlers:', error.message);
+    return null; // Capture failed with error
+  }
+}
+
+/**
+ * Captures element state including CSS and visibility (2KB max)
+ * @param {Element} element - The DOM element to analyze
+ * @returns {Object|null} Element state data, null if capture failed or no element
+ */
+export function captureElementState(element) {
+  try {
+    const state = {};
+    const maxSize = 2 * 1024; // 2KB limit
+
+    if (!element) {
+      return null; // No element to analyze
+    }
+
+    // Basic visibility and position
+    const rect = element.getBoundingClientRect();
+    state.boundingRect = {
+      width: Math.round(rect.width),
+      height: Math.round(rect.height),
+      top: Math.round(rect.top),
+      left: Math.round(rect.left)
+    };
+
+    // Visibility states
+    state.visibility = {
+      visible: element.offsetParent !== null,
+      inViewport: rect.top < window.innerHeight && rect.bottom > 0,
+      hidden: element.hidden,
+      display: getComputedStyle(element).display,
+      opacity: getComputedStyle(element).opacity
+    };
+
+    // Form element states
+    if (element.tagName === 'INPUT' || element.tagName === 'SELECT' || element.tagName === 'TEXTAREA') {
+      state.formElement = {
+        disabled: element.disabled,
+        readonly: element.readOnly,
+        required: element.required,
+        value: element.value || '',
+        checked: element.checked
+      };
+    }
+
+    // Interactive states
+    state.interactive = {
+      tabIndex: element.tabIndex,
+      contentEditable: element.contentEditable,
+      draggable: element.draggable
+    };
+
+    // Key CSS properties that affect behavior
+    const computedStyle = getComputedStyle(element);
+    state.css = {
+      position: computedStyle.position,
+      zIndex: computedStyle.zIndex,
+      pointerEvents: computedStyle.pointerEvents,
+      cursor: computedStyle.cursor
+    };
+
+    // Truncate if too large
+    const stateStr = JSON.stringify(state);
+    if (stateStr.length > maxSize) {
+      return {
+        truncated: true,
+        size: stateStr.length,
+        boundingRect: state.boundingRect,
+        visibility: state.visibility
+      };
+    }
+
+    return state;
+  } catch (error) {
+    console.error('[ChromePilot Pro] Error capturing element state:', error.message);
+    return null; // Capture failed with error
+  }
+}
+
+/**
+ * Extracts component information for React/Vue/Angular elements (3KB max)
+ * @param {Element} element - The DOM element to analyze
+ * @returns {Object|null} Component information, null if capture failed or no element
+ */
+export function getEnhancedComponentInfo(element) {
+  try {
+    const componentInfo = {};
+    const maxSize = 3 * 1024; // 3KB limit
+
+    if (!element) {
+      return null; // No element to analyze
+    }
+
+    // React component detection
+    try {
+      const reactFiberKey = Object.keys(element).find(key =>
+        key.startsWith('__reactInternalInstance') || key.startsWith('_reactInternalFiber')
+      );
+
+      if (reactFiberKey) {
+        const fiber = element[reactFiberKey];
+        if (fiber && fiber.type) {
+          componentInfo.react = {
+            componentName: fiber.type.displayName || fiber.type.name || 'Unknown',
+            key: fiber.key,
+            props: fiber.memoizedProps ? Object.keys(fiber.memoizedProps) : []
+          };
+        }
+      }
+    } catch (e) {
+      // Ignore React detection errors
+    }
+
+    // Vue component detection
+    try {
+      if (element.__vue__) {
+        const vue = element.__vue__;
+        componentInfo.vue = {
+          componentName: vue.$options.name || vue.$options._componentTag || 'Unknown',
+          props: vue.$props ? Object.keys(vue.$props) : [],
+          data: vue.$data ? Object.keys(vue.$data) : []
+        };
+      }
+    } catch (e) {
+      // Ignore Vue detection errors
+    }
+
+    // Angular component detection
+    try {
+      if (element.getAttribute && element.getAttribute('ng-version')) {
+        const ngAttributes = [];
+        for (const attr of element.attributes) {
+          if (attr.name.startsWith('ng-') || attr.name.startsWith('_ng')) {
+            ngAttributes.push(attr.name);
+          }
+        }
+        if (ngAttributes.length > 0) {
+          componentInfo.angular = {
+            attributes: ngAttributes,
+            version: element.getAttribute('ng-version')
+          };
+        }
+      }
+    } catch (e) {
+      // Ignore Angular detection errors
+    }
+
+    // Generic component attributes
+    const dataAttributes = {};
+    const classNames = element.className ? element.className.split(' ').filter(c => c) : [];
+
+    for (const attr of element.attributes || []) {
+      if (attr.name.startsWith('data-') && !attr.name.startsWith('data-testid')) {
+        dataAttributes[attr.name] = attr.value;
+      }
+    }
+
+    if (Object.keys(dataAttributes).length > 0) {
+      componentInfo.dataAttributes = dataAttributes;
+    }
+
+    if (classNames.length > 0) {
+      componentInfo.classNames = classNames;
+    }
+
+    // Role and accessibility info
+    if (element.getAttribute('role')) {
+      componentInfo.accessibility = {
+        role: element.getAttribute('role'),
+        ariaLabel: element.getAttribute('aria-label'),
+        ariaDescribedBy: element.getAttribute('aria-describedby')
+      };
+    }
+
+    // Return null if no component info found
+    if (Object.keys(componentInfo).length === 0) {
+      return null;
+    }
+
+    // Truncate if too large
+    const componentStr = JSON.stringify(componentInfo);
+    if (componentStr.length > maxSize) {
+      return {
+        truncated: true,
+        size: componentStr.length,
+        framework: Object.keys(componentInfo).filter(k => ['react', 'vue', 'angular'].includes(k))
+      };
+    }
+
+    return componentInfo;
+  } catch (error) {
+    console.error('[ChromePilot Pro] Error capturing component info:', error.message);
+    return null; // Capture failed with error
+  }
+}
+
+/**
+ * Captures performance metrics (1KB max)
+ * @returns {Object|null} Performance metrics, null if capture failed
+ */
+export function getPerformanceMetrics() {
+  try {
+    const metrics = {};
+    const maxSize = 1024; // 1KB limit
+
+    // Timing metrics
+    if (performance && performance.now) {
+      metrics.timestamp = Math.round(performance.now());
+    }
+
+    // Navigation timing
+    if (performance && performance.timing) {
+      const timing = performance.timing;
+      metrics.navigation = {
+        loadTime: timing.loadEventEnd - timing.navigationStart,
+        domReady: timing.domContentLoadedEventEnd - timing.navigationStart,
+        renderTime: timing.domComplete - timing.domLoading
+      };
+    }
+
+    // Memory usage (if available)
+    if (performance && performance.memory) {
+      metrics.memory = {
+        used: Math.round(performance.memory.usedJSHeapSize / 1024 / 1024),
+        total: Math.round(performance.memory.totalJSHeapSize / 1024 / 1024)
+      };
+    }
+
+    // Return null if no metrics captured
+    if (Object.keys(metrics).length === 0) {
+      return null;
+    }
+
+    // Truncate if too large
+    const metricsStr = JSON.stringify(metrics);
+    if (metricsStr.length > maxSize) {
+      return {
+        truncated: true,
+        size: metricsStr.length,
+        timestamp: metrics.timestamp
+      };
+    }
+
+    return metrics;
+  } catch (error) {
+    console.error('[ChromePilot Pro] Error capturing performance metrics:', error.message);
+    return null; // Capture failed with error
+  }
+}
+
+/**
+ * Captures all enhanced click data for an element
+ * @param {Event} event - The click event
+ * @param {Element} element - The clicked element
+ * @returns {Object} Enhanced click data (only includes fields with meaningful values)
+ */
+export async function captureEnhancedClickData(event, element) {
+  const enhancedData = {};
+
+  // Only include fields with meaningful values (not null/undefined)
+  const capturedHTML = captureElementHTML(element);
+  if (capturedHTML) {
+    enhancedData.element_html = capturedHTML;
+  }
+
+  const componentData = getEnhancedComponentInfo(element);
+  if (componentData) {
+    enhancedData.component_data = componentData;
+  }
+
+  const eventHandlers = extractEventHandlers(element);
+  if (eventHandlers) {
+    enhancedData.event_handlers = eventHandlers;
+  }
+
+  const elementState = captureElementState(element);
+  if (elementState) {
+    enhancedData.element_state = elementState;
+  }
+
+  const perfMetrics = getPerformanceMetrics();
+  if (perfMetrics) {
+    enhancedData.performance_metrics = perfMetrics;
+  }
+
+  return enhancedData;
+}