Send raw DOM element data for server-side processing

Author: elieteyssedou

.changeset/phase-2-raw-element.md

@@ -0,0 +1,11 @@
+---
+'@mcp-pointer/chrome-extension': patch
+---
+
+Send raw DOM element data for server-side processing
+
+- Add extractRawPointedDOMElement() to collect minimal raw DOM data
+- Send outerHTML, boundingClientRect, url, timestamp, computedStyles
+- Include React Fiber when present on element
+- Use DOM_ELEMENT_POINTED message type
+- Move data processing responsibility to server

packages/chrome-extension/src/background.ts

@@ -37,7 +37,7 @@ ConfigStorageService.onChange((newConfig: ExtensionConfig) => {
 // Listen for messages from content script
 chrome.runtime.onMessage
   .addListener((request: any, _sender: any, sendResponse: (response: any) => void) => {
-    if (request.type === 'ELEMENT_SELECTED' && request.data) {
+    if (request.type === 'DOM_ELEMENT_POINTED' && request.data) {
       // Send element with current port and status callback
       elementSender.sendElement(
         request.data,

packages/chrome-extension/src/services/element-pointer-service.ts

@@ -1,9 +1,9 @@
-import { TargetedElement } from '@mcp-pointer/shared/types';
+import { RawPointedDOMElement } from '@mcp-pointer/shared/types';
 import logger from '../utils/logger';
 import TriggerMouseService from './trigger-mouse-service';
 import TriggerKeyService from './trigger-key-service';
 import OverlayManagerService, { OverlayType } from './overlay-manager-service';
-import { adaptTargetToElement } from '../utils/element';
+import { extractRawPointedDOMElement } from '../utils/element';
 
 const POINTING_CLASS = 'mcp-pointer--is-pointing';
 
@@ -111,8 +111,8 @@ export default class ElementPointerService {
 
     // Send directly to background script (isolated world has chrome.runtime access)
     chrome.runtime.sendMessage({
-      type: 'ELEMENT_SELECTED',
-      data: adaptTargetToElement(target) as TargetedElement,
+      type: 'DOM_ELEMENT_POINTED',
+      data: extractRawPointedDOMElement(target) as RawPointedDOMElement,
     }, (response: any) => {
       if (chrome.runtime.lastError) {
         logger.error('❌ Error sending to background:', chrome.runtime.lastError);

packages/chrome-extension/src/services/element-sender-service.ts

@@ -1,6 +1,6 @@
 import ReconnectingWebSocket from 'reconnecting-websocket';
 import {
-  TargetedElement, PointerMessage, PointerMessageType, ConnectionStatus,
+  RawPointedDOMElement, PointerMessage, PointerMessageType, ConnectionStatus,
 } from '@mcp-pointer/shared/types';
 import logger from '../utils/logger';
 
@@ -26,7 +26,7 @@ export class ElementSenderService {
   private readonly MAX_RETRIES = 10; // Maximum connection retry attempts
 
   async sendElement(
-    element: TargetedElement,
+    element: RawPointedDOMElement,
     port: number,
     statusCallback?: StatusCallback,
   ): Promise<void> {
@@ -45,7 +45,7 @@ export class ElementSenderService {
       statusCallback?.(ConnectionStatus.SENDING);
 
       const message: PointerMessage = {
-        type: PointerMessageType.ELEMENT_SELECTED,
+        type: PointerMessageType.DOM_ELEMENT_POINTED,
         data: element,
         timestamp: Date.now(),
       };

packages/chrome-extension/src/utils/element.ts

@@ -2,7 +2,7 @@
 /* eslint-disable no-underscore-dangle */
 
 import {
-  ComponentInfo, CSSProperties, ElementPosition, TargetedElement,
+  ComponentInfo, CSSProperties, ElementPosition, TargetedElement, RawPointedDOMElement,
 } from '@mcp-pointer/shared/types';
 import logger from './logger';
 
@@ -212,3 +212,61 @@ export function adaptTargetToElement(element: HTMLElement): TargetedElement {
     url: window.location.href,
   };
 }
+
+/**
+ * Extract raw React Fiber from an element (if present)
+ */
+export function getRawReactFiber(element: HTMLElement): any | undefined {
+  try {
+    const fiberKey = Object.keys(element).find((key) => key.startsWith('__reactFiber$')
+      || key.startsWith('__reactInternalInstance$'));
+
+    if (fiberKey) {
+      return (element as any)[fiberKey];
+    }
+
+    return undefined;
+  } catch (error) {
+    logger.error('🚨 Error extracting raw Fiber:', error);
+    return undefined;
+  }
+}
+
+/**
+ * Get all computed styles as a plain object (Record)
+ * CSSStyleDeclaration doesn't serialize properly with JSON.stringify,
+ * so we convert it to a plain object
+ */
+export function getAllComputedStyles(element: HTMLElement): Record<string, string> {
+  const computedStyle = window.getComputedStyle(element);
+  const styles: Record<string, string> = {};
+
+  // Convert CSSStyleDeclaration to plain object
+  for (let i = 0; i < computedStyle.length; i += 1) {
+    const property = computedStyle[i];
+    styles[property] = computedStyle.getPropertyValue(property);
+  }
+
+  return styles;
+}
+
+/**
+ * Extract minimal raw DOM element data for server-side processing
+ */
+export function extractRawPointedDOMElement(element: HTMLElement): RawPointedDOMElement {
+  const raw: RawPointedDOMElement = {
+    outerHTML: element.outerHTML,
+    url: window.location.href,
+    timestamp: Date.now(),
+    boundingClientRect: element.getBoundingClientRect(),
+    computedStyles: getAllComputedStyles(element),
+  };
+
+  // Add React Fiber if present
+  const reactFiber = getRawReactFiber(element);
+  if (reactFiber) {
+    raw.reactFiber = reactFiber;
+  }
+
+  return raw;
+}