chrometools-mcp 2.4.2 → 3.1.2

package/server/websocket-bridge.js

@@ -0,0 +1,447 @@
+/**
+ * server/websocket-bridge.js
+ *
+ * WebSocket server for communication between Chrome Extension and MCP server
+ */
+
+import { WebSocketServer } from 'ws';
+import { saveScenario, listScenarios } from '../recorder/scenario-storage.js';
+import { urlToProjectId } from '../utils/url-to-project.js';
+import net from 'net';
+
+const WS_PORT_START = 9223;
+const WS_PORT_END = 9227;
+
+// State
+let wss = null;
+let extensionConnection = null;
+let isRunning = false;
+
+// Tabs state from extension (source of truth)
+export const extensionTabs = new Map();
+
+// Callbacks for tab events
+const tabEventCallbacks = [];
+
+// Handler for syncing active tab (set by page-manager to avoid circular imports)
+let activeTabSyncHandler = null;
+
+/**
+ * Set handler for syncing active tab to Puppeteer's lastPage
+ * Called by page-manager during initialization
+ */
+export function setActiveTabSyncHandler(handler) {
+  activeTabSyncHandler = handler;
+}
+
+/**
+ * Debug log helper
+ */
+function debugLog(...args) {
+  if (process.env.DEBUG === '1') {
+    console.error('[ws-bridge]', ...args);
+  }
+}
+
+/**
+ * Check if port is available
+ */
+async function isPortAvailable(port) {
+  return new Promise((resolve) => {
+    const server = net.createServer();
+    server.once('error', () => resolve(false));
+    server.once('listening', () => {
+      server.close();
+      resolve(true);
+    });
+    server.listen(port, '127.0.0.1');
+  });
+}
+
+/**
+ * Find available port in range
+ */
+async function findAvailablePort() {
+  for (let port = WS_PORT_START; port <= WS_PORT_END; port++) {
+    if (await isPortAvailable(port)) {
+      return port;
+    }
+  }
+  throw new Error(`No available ports in range ${WS_PORT_START}-${WS_PORT_END}`);
+}
+
+
+/**
+ * Start WebSocket server
+ */
+export async function startWebSocketServer() {
+  if (isRunning) {
+    debugLog('WebSocket server already running');
+    return;
+  }
+
+  try {
+    // Find available port
+    const port = await findAvailablePort();
+
+    wss = new WebSocketServer({ port });
+
+    wss.on('connection', (ws) => {
+      debugLog('Extension connected');
+      extensionConnection = ws;
+
+      ws.on('message', (data) => {
+        try {
+          const message = JSON.parse(data.toString());
+          handleExtensionMessage(ws, message);
+        } catch (error) {
+          debugLog('Failed to parse message:', error.message);
+        }
+      });
+
+      ws.on('close', () => {
+        debugLog('Extension disconnected');
+        if (extensionConnection === ws) {
+          extensionConnection = null;
+        }
+      });
+
+      ws.on('error', (error) => {
+        debugLog('WebSocket error:', error.message);
+      });
+    });
+
+    wss.on('error', (error) => {
+      if (error.code === 'EADDRINUSE') {
+        debugLog(`Port ${port} is already in use`);
+      } else {
+        debugLog('WebSocket server error:', error.message);
+      }
+    });
+
+    isRunning = true;
+    console.error(`[chrometools-mcp] WebSocket server listening on port ${port}`);
+    debugLog(`WebSocket server listening on port ${port}`);
+
+  } catch (error) {
+    console.error('[chrometools-mcp] Failed to start WebSocket server:', error.message);
+    debugLog('Failed to start WebSocket server:', error.message);
+  }
+}
+
+/**
+ * Stop WebSocket server
+ */
+export function stopWebSocketServer() {
+  if (wss) {
+    wss.close();
+    wss = null;
+    isRunning = false;
+    debugLog('WebSocket server stopped');
+  }
+}
+
+/**
+ * Handle messages from extension
+ */
+async function handleExtensionMessage(ws, message) {
+  debugLog('Received:', message.type);
+
+  switch (message.type) {
+    case 'tabs_sync':
+      // Full tabs sync from extension
+      extensionTabs.clear();
+      if (message.payload?.tabs) {
+        message.payload.tabs.forEach(tab => {
+          extensionTabs.set(tab.tabId, tab);
+        });
+      }
+      debugLog(`Synced ${extensionTabs.size} tabs`);
+      notifyTabCallbacks('sync', null);
+
+      // Sync Puppeteer's lastPage to the currently active tab
+      if (activeTabSyncHandler) {
+        const activeTab = message.payload?.tabs?.find(tab => tab.active);
+        if (activeTab && activeTab.url) {
+          activeTabSyncHandler(activeTab.url).catch(err => {
+            debugLog(`Failed to sync lastPage on tabs_sync: ${err.message}`);
+          });
+        }
+      }
+      break;
+
+    case 'tab_created':
+      extensionTabs.set(message.payload.tabId, message.payload);
+      debugLog(`Tab created: ${message.payload.tabId}`);
+      notifyTabCallbacks('created', message.payload);
+      break;
+
+    case 'tab_closed':
+      extensionTabs.delete(message.payload.tabId);
+      debugLog(`Tab closed: ${message.payload.tabId}`);
+      notifyTabCallbacks('closed', message.payload);
+      break;
+
+    case 'tab_activated':
+      // Update active status
+      for (const [id, tab] of extensionTabs) {
+        tab.active = (id === message.payload.tabId);
+      }
+      debugLog(`Tab activated: ${message.payload.tabId}`);
+      notifyTabCallbacks('activated', message.payload);
+
+      // Sync Puppeteer's lastPage to match the user's active tab
+      if (activeTabSyncHandler) {
+        const activatedTab = extensionTabs.get(message.payload.tabId);
+        if (activatedTab && activatedTab.url) {
+          activeTabSyncHandler(activatedTab.url).catch(err => {
+            debugLog(`Failed to sync lastPage to activated tab: ${err.message}`);
+          });
+        }
+      }
+      break;
+
+    case 'tab_updated':
+      if (message.payload.tab) {
+        extensionTabs.set(message.payload.tabId, message.payload.tab);
+      }
+      debugLog(`Tab updated: ${message.payload.tabId}`);
+      notifyTabCallbacks('updated', message.payload);
+      break;
+
+    case 'scenario_save':
+      await handleScenarioSave(ws, message.payload, message.requestId);
+      break;
+
+    case 'scenario_list_request':
+      await handleScenarioListRequest(ws, message.requestId);
+      break;
+
+    case 'recorder_started':
+      debugLog('Recording started from extension:', message.payload?.startUrl);
+      break;
+
+    case 'ping':
+      sendToExtension({ type: 'pong' });
+      break;
+
+    default:
+      debugLog('Unknown message type:', message.type);
+  }
+}
+
+/**
+ * Handle scenario save request from extension
+ */
+async function handleScenarioSave(ws, scenario, requestId) {
+  try {
+    // Determine project ID from entry URL
+    const projectId = urlToProjectId(scenario.metadata?.entryUrl || '');
+
+    const result = await saveScenario(scenario, projectId);
+
+    sendToExtension({
+      type: 'scenario_saved',
+      payload: {
+        success: result.success,
+        filePath: result.filePath,
+        error: result.error
+      },
+      requestId
+    });
+
+    debugLog('Scenario saved:', scenario.name);
+
+  } catch (error) {
+    sendToExtension({
+      type: 'scenario_saved',
+      payload: {
+        success: false,
+        error: error.message
+      },
+      requestId
+    });
+    debugLog('Failed to save scenario:', error.message);
+  }
+}
+
+/**
+ * Handle scenario list request from extension
+ */
+async function handleScenarioListRequest(ws, requestId) {
+  try {
+    const scenarios = await listScenarios(null, true); // All projects
+
+    sendToExtension({
+      type: 'scenario_list_response',
+      payload: {
+        scenarios: scenarios.map(s => ({
+          name: s.name,
+          projectId: s.projectId,
+          metadata: s.metadata
+        }))
+      },
+      requestId
+    });
+
+  } catch (error) {
+    sendToExtension({
+      type: 'scenario_list_response',
+      payload: {
+        scenarios: [],
+        error: error.message
+      },
+      requestId
+    });
+  }
+}
+
+/**
+ * Send message to extension
+ */
+export function sendToExtension(message) {
+  if (extensionConnection && extensionConnection.readyState === 1) { // WebSocket.OPEN
+    extensionConnection.send(JSON.stringify(message));
+    return true;
+  }
+  return false;
+}
+
+/**
+ * Request tabs sync from extension
+ */
+export function requestTabsSync() {
+  return sendToExtension({ type: 'tabs_request' });
+}
+
+/**
+ * Get all tabs from extension
+ */
+export function getTabsFromExtension() {
+  return Array.from(extensionTabs.values());
+}
+
+/**
+ * Get active tab from extension
+ */
+export function getActiveTabFromExtension() {
+  for (const tab of extensionTabs.values()) {
+    if (tab.active) {
+      return tab;
+    }
+  }
+  return null;
+}
+
+/**
+ * Check if extension is connected
+ */
+export function isExtensionConnected() {
+  return extensionConnection !== null && extensionConnection.readyState === 1;
+}
+
+/**
+ * Switch to tab by index or URL pattern via extension
+ * @param {number|string} tabIdentifier - Tab index or URL pattern
+ * @returns {object|null} - Tab info or null if not found
+ */
+export function switchTabViaExtension(tabIdentifier) {
+  const tabs = Array.from(extensionTabs.values());
+
+  let targetTab = null;
+
+  if (typeof tabIdentifier === 'number') {
+    // Find by index
+    targetTab = tabs[tabIdentifier];
+  } else if (typeof tabIdentifier === 'string') {
+    // Find by URL pattern (partial match)
+    targetTab = tabs.find(t => t.url.toLowerCase().includes(tabIdentifier.toLowerCase()));
+  }
+
+  if (targetTab) {
+    // Send switch command to extension
+    sendToExtension({
+      type: 'switch_tab',
+      payload: { tabId: targetTab.tabId }
+    });
+    return targetTab;
+  }
+
+  return null;
+}
+
+/**
+ * Register callback for tab events
+ */
+export function onTabEvent(callback) {
+  tabEventCallbacks.push(callback);
+  return () => {
+    const index = tabEventCallbacks.indexOf(callback);
+    if (index > -1) {
+      tabEventCallbacks.splice(index, 1);
+    }
+  };
+}
+
+/**
+ * Notify registered callbacks about tab events
+ */
+function notifyTabCallbacks(eventType, payload) {
+  tabEventCallbacks.forEach(callback => {
+    try {
+      callback(eventType, payload);
+    } catch (error) {
+      debugLog('Tab callback error:', error.message);
+    }
+  });
+}
+
+/**
+ * Send recorder command to extension
+ */
+export function sendRecorderCommand(command, options = {}) {
+  return sendToExtension({
+    type: `recorder_${command}`,
+    payload: options
+  });
+}
+
+/**
+ * Send command to extension and wait for response
+ */
+export function sendExtensionCommand(message, timeout = 5000) {
+  return new Promise((resolve, reject) => {
+    if (!extensionConnection) {
+      reject(new Error('Extension not connected'));
+      return;
+    }
+
+    const requestId = `req_${Date.now()}_${Math.random()}`;
+    message.requestId = requestId;
+
+    // Set up response handler
+    const responseHandler = (data) => {
+      try {
+        const response = JSON.parse(data);
+        if (response.requestId === requestId) {
+          clearTimeout(timeoutHandle);
+          extensionConnection.off('message', responseHandler);
+          resolve(response);
+        }
+      } catch (err) {
+        // Ignore parse errors for other messages
+      }
+    };
+
+    extensionConnection.on('message', responseHandler);
+
+    // Set timeout
+    const timeoutHandle = setTimeout(() => {
+      extensionConnection.off('message', responseHandler);
+      reject(new Error(`Extension command timeout after ${timeout}ms`));
+    }, timeout);
+
+    // Send message
+    extensionConnection.send(JSON.stringify(message));
+  });
+}

package/utils/selector-resolver.js

@@ -0,0 +1,186 @@
+/**
+ * Selector Resolver
+ * Resolves element identifiers (ID from Page Object or CSS selector) to actual elements
+ */
+
+/**
+ * Global registry for Page Object element IDs
+ * Maps element IDs to their selectors
+ * Use window.__ELEMENT_REGISTRY__ in browser for persistence across page.evaluate calls
+ */
+let elementRegistry;
+if (typeof window !== 'undefined') {
+  // Browser context - use global registry
+  if (!window.__ELEMENT_REGISTRY__) {
+    window.__ELEMENT_REGISTRY__ = new Map();
+  }
+  elementRegistry = window.__ELEMENT_REGISTRY__;
+} else {
+  // Node.js context
+  elementRegistry = new Map();
+}
+
+/**
+ * Register element from Page Object
+ * @param {string} id - Unique element ID
+ * @param {string} selector - CSS selector
+ * @param {Object} metadata - Additional element metadata
+ */
+function registerElement(id, selector, metadata = {}) {
+  elementRegistry.set(id, {
+    selector,
+    metadata,
+    registeredAt: Date.now()
+  });
+}
+
+/**
+ * Register multiple elements from Page Object
+ * @param {Array} elements - Array of {id, selector, metadata}
+ */
+function registerElements(elements) {
+  elements.forEach(el => {
+    registerElement(el.id, el.selector, el.metadata);
+  });
+}
+
+/**
+ * Clear element registry
+ */
+function clearRegistry() {
+  elementRegistry.clear();
+}
+
+/**
+ * Resolve element identifier to CSS selector
+ * Supports:
+ * - Page Object ID (e.g., "login_email_input")
+ * - CSS selector (e.g., "input[name='email']")
+ *
+ * @param {string} identifier - Element ID or CSS selector
+ * @returns {Object} { selector, isPageObjectId, metadata }
+ */
+function resolveSelector(identifier) {
+  // Check if it's a registered Page Object ID
+  if (elementRegistry.has(identifier)) {
+    const registered = elementRegistry.get(identifier);
+    return {
+      selector: registered.selector,
+      isPageObjectId: true,
+      metadata: registered.metadata,
+      originalId: identifier
+    };
+  }
+
+  // Otherwise, treat as CSS selector
+  return {
+    selector: identifier,
+    isPageObjectId: false,
+    metadata: {},
+    originalId: null
+  };
+}
+
+/**
+ * Find element by ID or selector
+ * @param {string} identifier - Element ID or CSS selector
+ * @returns {Element|null} - Found element or null
+ */
+function findElement(identifier) {
+  const resolved = resolveSelector(identifier);
+  return document.querySelector(resolved.selector);
+}
+
+/**
+ * Find all elements by ID or selector
+ * @param {string} identifier - Element ID or CSS selector
+ * @returns {NodeList} - Found elements
+ */
+function findElements(identifier) {
+  const resolved = resolveSelector(identifier);
+  return document.querySelectorAll(resolved.selector);
+}
+
+/**
+ * Get element information
+ * @param {string} identifier - Element ID or CSS selector
+ * @returns {Object|null} - Element information or null
+ */
+function getElementInfo(identifier) {
+  const resolved = resolveSelector(identifier);
+  const element = document.querySelector(resolved.selector);
+
+  if (!element) return null;
+
+  return {
+    identifier,
+    selector: resolved.selector,
+    isPageObjectId: resolved.isPageObjectId,
+    tag: element.tagName.toLowerCase(),
+    type: element.type || null,
+    text: element.textContent?.trim().substring(0, 100) || '',
+    visible: element.offsetWidth > 0 && element.offsetHeight > 0,
+    metadata: resolved.metadata
+  };
+}
+
+/**
+ * Get all registered element IDs
+ * @returns {Array} - Array of registered IDs
+ */
+function getRegisteredIds() {
+  return Array.from(elementRegistry.keys());
+}
+
+/**
+ * Get registry statistics
+ * @returns {Object} - Registry stats
+ */
+function getRegistryStats() {
+  return {
+    count: elementRegistry.size,
+    ids: Array.from(elementRegistry.keys()),
+    oldestRegistration: Math.min(...Array.from(elementRegistry.values()).map(v => v.registeredAt)),
+    newestRegistration: Math.max(...Array.from(elementRegistry.values()).map(v => v.registeredAt))
+  };
+}
+
+/**
+ * Check if identifier is a Page Object ID
+ * @param {string} identifier
+ * @returns {boolean}
+ */
+function isPageObjectId(identifier) {
+  return elementRegistry.has(identifier);
+}
+
+// Export for Node.js (server-side)
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = {
+    registerElement,
+    registerElements,
+    clearRegistry,
+    resolveSelector,
+    findElement,
+    findElements,
+    getElementInfo,
+    getRegisteredIds,
+    getRegistryStats,
+    isPageObjectId,
+    elementRegistry
+  };
+}
+
+// Export for browser context (global scope)
+if (typeof window !== 'undefined') {
+  window.registerElement = registerElement;
+  window.registerElements = registerElements;
+  window.clearRegistry = clearRegistry;
+  window.resolveSelector = resolveSelector;
+  window.findElement = findElement;
+  window.findElements = findElements;
+  window.getElementInfo = getElementInfo;
+  window.getRegisteredIds = getRegisteredIds;
+  window.getRegistryStats = getRegistryStats;
+  window.isPageObjectId = isPageObjectId;
+}