playwright-mcp/src/extension/cdpRelay.ts

/**
 * Copyright (c) Microsoft Corporation.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * WebSocket server that bridges Playwright MCP and Chrome Extension
 *
 * Endpoints:
 * - /cdp/guid - Full CDP interface for Playwright MCP
 * - /extension/guid - Extension connection for chrome.debugger forwarding
 */

import { WebSocket, WebSocketServer } from 'ws';
import type websocket from 'ws';
import http from 'node:http';
import debug from 'debug';
import { promisify } from 'node:util';
import { exec } from 'node:child_process';
import { httpAddressToString, startHttpServer } from '../transport.js';

const debugLogger = debug('pw:mcp:relay');

type CDPCommand = {
  id: number;
  sessionId?: string;
  method: string;
  params?: any;
};

type CDPResponse = {
  id?: number;
  sessionId?: string;
  method?: string;
  params?: any;
  result?: any;
  error?: { code?: number; message: string };
};

export class CDPRelayServer {
  private _wsHost: string;
  private _getClientInfo: () => { name: string, version: string };
  private _cdpPath: string;
  private _extensionPath: string;
  private _wss: WebSocketServer;
  private _playwrightConnection: WebSocket | null = null;
  private _extensionConnection: ExtensionConnection | null = null;
  private _connectedTabInfo: {
    targetInfo: any;
    // Page sessionId that should be used by this connection.
    sessionId: string;
  } | undefined;
  private _extensionConnectionPromise: Promise<void>;
  private _extensionConnectionResolve: (() => void) | null = null;

  constructor(server: http.Server, getClientInfo: () => { name: string, version: string }) {
    this._getClientInfo = getClientInfo;
    this._wsHost = httpAddressToString(server.address()).replace(/^http/, 'ws');

    const uuid = crypto.randomUUID();
    this._cdpPath = `/cdp/${uuid}`;
    this._extensionPath = `/extension/${uuid}`;

    this._extensionConnectionPromise = new Promise(resolve => {
      this._extensionConnectionResolve = resolve;
    });
    this._wss = new WebSocketServer({ server, verifyClient: this._verifyClient.bind(this) });
    this._wss.on('connection', this._onConnection.bind(this));
  }

  cdpEndpoint() {
    return `${this._wsHost}${this._cdpPath}`;
  }

  extensionEndpoint() {
    return `${this._wsHost}${this._extensionPath}`;
  }

  private async _verifyClient(info: { origin: string, req: http.IncomingMessage }, callback: (result: boolean, code?: number, message?: string) => void) {
    if (info.req.url?.startsWith(this._cdpPath)) {
      if (this._playwrightConnection) {
        callback(false, 500, 'Another Playwright connection already established');
        return;
      }
      await this._connectBrowser();
      await this._extensionConnectionPromise;
      callback(!!this._extensionConnection);
      return;
    }
    callback(true);
  }

  private async _connectBrowser() {
    const mcpRelayEndpoint = `${this._wsHost}${this._extensionPath}`;
    // Need to specify "key" in the manifest.json to make the id stable when loading from file.
    const url = new URL('chrome-extension://jakfalbnbhgkpmoaakfflhflbfpkailf/connect.html');
    url.searchParams.set('mcpRelayUrl', mcpRelayEndpoint);
    url.searchParams.set('client', JSON.stringify(this._getClientInfo()));
    const href = url.toString();
    const command = `'/Applications/Google Chrome.app/Contents/MacOS/Google Chrome' '${href}'`;
    try {
      await promisify(exec)(command);
    } catch (err) {
      debugLogger('Failed to run command:', err);
    }
  }

  stop(): void {
    this._playwrightConnection?.close();
    this._extensionConnection?.close();
  }

  private _onConnection(ws: WebSocket, request: http.IncomingMessage): void {
    const url = new URL(`http://localhost${request.url}`);
    debugLogger(`New connection to ${url.pathname}`);
    if (url.pathname === this._cdpPath) {
      this._handlePlaywrightConnection(ws);
    } else if (url.pathname === this._extensionPath) {
      this._handleExtensionConnection(ws);
    } else {
      debugLogger(`Invalid path: ${url.pathname}`);
      ws.close(4004, 'Invalid path');
    }
  }

  private _handlePlaywrightConnection(ws: WebSocket): void {
    this._playwrightConnection = ws;
    ws.on('message', async data => {
      try {
        const message = JSON.parse(data.toString());
        await this._handlePlaywrightMessage(message);
      } catch (error) {
        debugLogger('Error parsing Playwright message:', error);
      }
    });
    ws.on('close', () => {
      if (this._playwrightConnection === ws) {
        this._playwrightConnection = null;
        this._closeExtensionConnection();
        debugLogger('Playwright MCP disconnected');
      }
    });
    ws.on('error', error => {
      debugLogger('Playwright WebSocket error:', error);
    });
    debugLogger('Playwright MCP connected');
  }

  private _closeExtensionConnection() {
    this._connectedTabInfo = undefined;
    this._extensionConnection?.close();
    this._extensionConnection = null;
    this._extensionConnectionPromise = new Promise(resolve => {
      this._extensionConnectionResolve = resolve;
    });
  }

  private _handleExtensionConnection(ws: WebSocket): void {
    if (this._extensionConnection) {
      ws.close(1000, 'Another extension connection already established');
      return;
    }
    this._extensionConnection = new ExtensionConnection(ws);
    this._extensionConnection.onclose = c => {
      if (this._extensionConnection === c)
        this._extensionConnection = null;
    };
    this._extensionConnection.onmessage = this._handleExtensionMessage.bind(this);
    this._extensionConnectionResolve?.();
  }

  private _handleExtensionMessage(method: string, params: any) {
    switch (method) {
      case 'forwardCDPEvent':
        this._sendToPlaywright({
          sessionId: params.sessionId,
          method: params.method,
          params: params.params
        });
        break;
      case 'detachedFromTab':
        debugLogger('← Debugger detached from tab:', params);
        this._connectedTabInfo = undefined;
        break;
    }
  }

  private async _handlePlaywrightMessage(message: CDPCommand): Promise<void> {
    debugLogger('← Playwright:', `${message.method} (id=${message.id})`);
    if (!this._extensionConnection) {
      debugLogger('Extension not connected, sending error to Playwright');
      this._sendToPlaywright({
        id: message.id,
        error: { message: 'Extension not connected' }
      });
      return;
    }
    if (await this._interceptCDPCommand(message))
      return;
    await this._forwardToExtension(message);
  }

  private async _interceptCDPCommand(message: CDPCommand): Promise<boolean> {
    switch (message.method) {
      case 'Browser.getVersion': {
        this._sendToPlaywright({
          id: message.id,
          result: {
            protocolVersion: '1.3',
            product: 'Chrome/Extension-Bridge',
            userAgent: 'CDP-Bridge-Server/1.0.0',
          }
        });
        return true;
      }
      case 'Browser.setDownloadBehavior': {
        this._sendToPlaywright({
          id: message.id
        });
        return true;
      }
      case 'Target.setAutoAttach': {
        // Simulate auto-attach behavior with real target info
        if (!message.sessionId) {
          this._connectedTabInfo = await this._extensionConnection!.send('attachToTab');
          debugLogger('Simulating auto-attach for target:', message);
          this._sendToPlaywright({
            method: 'Target.attachedToTarget',
            params: {
              sessionId: this._connectedTabInfo!.sessionId,
              targetInfo: {
                ...this._connectedTabInfo!.targetInfo,
                attached: true,
              },
              waitingForDebugger: false
            }
          });
          this._sendToPlaywright({
            id: message.id
          });
        } else {
          await this._forwardToExtension(message);
        }
        return true;
      }
      case 'Target.getTargetInfo': {
        debugLogger('Target.getTargetInfo', message);
        this._sendToPlaywright({
          id: message.id,
          result: this._connectedTabInfo?.targetInfo
        });
        return true;
      }
    }
    return false;
  }

  private async _forwardToExtension(message: CDPCommand): Promise<void> {
    try {
      if (!this._extensionConnection)
        throw new Error('Extension not connected');
      const { id, sessionId, method, params } = message;
      const result = await this._extensionConnection.send('forwardCDPCommand', { sessionId, method, params });
      this._sendToPlaywright({ id, sessionId, result });
    } catch (e) {
      debugLogger('Error in the extension:', e);
      this._sendToPlaywright({
        id: message.id,
        sessionId: message.sessionId,
        error: { message: (e as Error).message }
      });
    }
  }

  private _sendToPlaywright(message: CDPResponse): void {
    debugLogger('→ Playwright:', `${message.method ?? `response(id=${message.id})`}`);
    this._playwrightConnection?.send(JSON.stringify(message));
  }
}

export async function startCDPRelayServer({
  getClientInfo,
  port,
}: {
  getClientInfo: () => { name: string, version: string };
  port: number;
}) {
  const httpServer = await startHttpServer({ port });
  const cdpRelayServer = new CDPRelayServer(httpServer, getClientInfo);
  process.on('exit', () => cdpRelayServer.stop());
  debugLogger(`CDP relay server started, extension endpoint: ${cdpRelayServer.extensionEndpoint()}.`);
  return cdpRelayServer.cdpEndpoint();
}

class ExtensionConnection {
  private readonly _ws: WebSocket;
  private readonly _callbacks = new Map<number, { resolve: (o: any) => void, reject: (e: Error) => void }>();
  private _lastId = 0;

  onmessage?: (method: string, params: any) => void;
  onclose?: (self: ExtensionConnection) => void;

  constructor(ws: WebSocket) {
    this._ws = ws;
    this._ws.on('message', this._onMessage.bind(this));
    this._ws.on('close', this._onClose.bind(this));
    this._ws.on('error', this._onError.bind(this));
  }

  async send(method: string, params?: any, sessionId?: string): Promise<any> {
    if (this._ws.readyState !== WebSocket.OPEN)
      throw new Error('WebSocket closed');
    const id = ++this._lastId;
    this._ws.send(JSON.stringify({ id, method, params, sessionId }));
    return new Promise((resolve, reject) => {
      this._callbacks.set(id, { resolve, reject });
    });
  }

  close(message?: string) {
    debugLogger('closing extension connection:', message);
    this._ws.close(1000, message ?? 'Connection closed');
    this.onclose?.(this);
  }

  private _onMessage(event: websocket.RawData) {
    const eventData = event.toString();
    let parsedJson;
    try {
      parsedJson = JSON.parse(eventData);
    } catch (e: any) {
      debugLogger(`<closing ws> Closing websocket due to malformed JSON. eventData=${eventData} e=${e?.message}`);
      this._ws.close();
      return;
    }
    try {
      this._handleParsedMessage(parsedJson);
    } catch (e: any) {
      debugLogger(`<closing ws> Closing websocket due to failed onmessage callback. eventData=${eventData} e=${e?.message}`);
      this._ws.close();
    }
  }

  private _handleParsedMessage(object: any) {
    if (object.id && this._callbacks.has(object.id)) {
      const callback = this._callbacks.get(object.id)!;
      this._callbacks.delete(object.id);
      if (object.error)
        callback.reject(new Error(object.error.message));
      else
        callback.resolve(object.result);
    } else if (object.id) {
      debugLogger('← Extension: unexpected response', object);
    } else {
      this.onmessage?.(object.method, object.params);
    }
  }

  private _onClose(event: websocket.CloseEvent) {
    debugLogger(`<ws closed> code=${event.code} reason=${event.reason}`);
    this._dispose();
  }

  private _onError(event: websocket.ErrorEvent) {
    debugLogger(`<ws error> message=${event.message} type=${event.type} target=${event.target}`);
    this._dispose();
  }

  private _dispose() {
    for (const callback of this._callbacks.values())
      callback.reject(new Error('WebSocket closed'));
    this._callbacks.clear();
  }
}