@tontoko/fast-playwright-mcp 0.0.4

package/lib/extension/cdp-relay.js

@@ -0,0 +1,486 @@
+import { createRequire } from "node:module";
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __toESM = (mod, isNodeMode, target) => {
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: () => mod[key],
+        enumerable: true
+      });
+  return to;
+};
+var __require = /* @__PURE__ */ createRequire(import.meta.url);
+
+// src/extension/cdp-relay.ts
+import { spawn } from "node:child_process";
+import debug from "debug";
+import { WebSocket, WebSocketServer } from "ws";
+import { httpAddressToString } from "../http-server.js";
+import { logUnhandledError } from "../log.js";
+import { ManualPromise } from "../manual-promise.js";
+var { registry } = await import("playwright-core/lib/server/registry/index");
+var debugLogger = debug("pw:mcp:relay");
+var HTTP_TO_WS_REGEX = /^http/;
+var EXTENSION_ID_REGEX = /^[a-p]{32}$/;
+var DANGEROUS_PATH_PATTERNS = [
+  /[;&|`$()]/,
+  /\.\./,
+  /^https?:/,
+  /^\w+:/
+];
+var DANGEROUS_PROPS = ["__proto__", "constructor", "prototype"];
+
+class CDPRelayServer {
+  _wsHost;
+  _browserChannel;
+  _cdpPath;
+  _extensionPath;
+  _wss;
+  _playwrightConnection = null;
+  _extensionConnection = null;
+  _nextSessionId = 1;
+  _connectedTabInfo;
+  _extensionConnectionPromise;
+  constructor(server, browserChannel) {
+    this._wsHost = httpAddressToString(server.address()).replace(HTTP_TO_WS_REGEX, "ws");
+    this._browserChannel = browserChannel;
+    const uuid = crypto.randomUUID();
+    this._cdpPath = `/cdp/${uuid}`;
+    this._extensionPath = `/extension/${uuid}`;
+    this._resetExtensionConnection();
+    this._wss = new WebSocketServer({ server });
+    this._wss.on("connection", this._onConnection.bind(this));
+  }
+  cdpEndpoint() {
+    return `${this._wsHost}${this._cdpPath}`;
+  }
+  extensionEndpoint() {
+    return `${this._wsHost}${this._extensionPath}`;
+  }
+  async ensureExtensionConnectionForMCPContext(clientInfo, abortSignal) {
+    debugLogger("Ensuring extension connection for MCP context");
+    if (this._extensionConnection) {
+      return;
+    }
+    this._connectBrowser(clientInfo);
+    debugLogger("Waiting for incoming extension connection");
+    await Promise.race([
+      this._extensionConnectionPromise,
+      new Promise((_, reject) => abortSignal.addEventListener("abort", reject))
+    ]);
+    debugLogger("Extension connection established");
+  }
+  _connectBrowser(clientInfo) {
+    const mcpRelayEndpoint = `${this._wsHost}${this._extensionPath}`;
+    const extensionId = process.env.PLAYWRIGHT_MCP_EXTENSION_ID ?? "jakfalbnbhgkpmoaakfflhflbfpkailf";
+    if (!EXTENSION_ID_REGEX.test(extensionId)) {
+      throw new Error("Invalid Chrome extension ID format");
+    }
+    const url = new URL(`chrome-extension://${extensionId}/lib/ui/connect.html`);
+    url.searchParams.set("mcpRelayUrl", mcpRelayEndpoint);
+    const sanitizedClientInfo = this._sanitizeClientInfo(clientInfo);
+    url.searchParams.set("client", JSON.stringify(sanitizedClientInfo));
+    const href = url.toString();
+    const executableInfo = registry.findExecutable(this._browserChannel);
+    if (!executableInfo) {
+      throw new Error(`Unsupported channel: "${this._browserChannel}"`);
+    }
+    const executablePath = executableInfo.executablePath();
+    if (!executablePath) {
+      throw new Error(`"${this._browserChannel}" executable not found. Make sure it is installed at a standard location.`);
+    }
+    if (!this._isValidExecutablePath(executablePath)) {
+      throw new Error("Invalid executable path detected");
+    }
+    spawn(executablePath, [href], {
+      windowsHide: true,
+      detached: true,
+      shell: false,
+      stdio: "ignore"
+    });
+  }
+  _sanitizeClientInfo(clientInfo) {
+    const sanitized = {
+      name: typeof clientInfo.name === "string" ? clientInfo.name.slice(0, 100) : "unknown",
+      version: typeof clientInfo.version === "string" ? clientInfo.version.slice(0, 20) : "1.0.0"
+    };
+    for (const key of Object.keys(sanitized)) {
+      const value = sanitized[key];
+      if (typeof value === "string") {
+        sanitized[key] = value.replace(/<script[^>]*>.*?<\/script>/gi, "");
+      }
+    }
+    return sanitized;
+  }
+  _isValidExecutablePath(path) {
+    if (!path || typeof path !== "string") {
+      return false;
+    }
+    return !DANGEROUS_PATH_PATTERNS.some((pattern) => pattern.test(path));
+  }
+  _safeJsonParse(jsonString) {
+    try {
+      if (jsonString.includes("__proto__") || jsonString.includes("constructor") || jsonString.includes("prototype")) {
+        debugLogger("Potential prototype pollution attempt detected");
+        return null;
+      }
+      const result = JSON.parse(jsonString);
+      if (result === null || typeof result !== "object") {
+        return result;
+      }
+      this._sanitizeObject(result);
+      return result;
+    } catch (error) {
+      debugLogger("JSON parsing failed:", error);
+      return null;
+    }
+  }
+  _sanitizeObject(obj) {
+    if (!obj || typeof obj !== "object") {
+      return;
+    }
+    for (const prop of DANGEROUS_PROPS) {
+      if (prop in obj) {
+        delete obj[prop];
+      }
+    }
+    for (const value of Object.values(obj)) {
+      if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+        this._sanitizeObject(value);
+      }
+    }
+  }
+  _isValidCDPCommand(message) {
+    if (!message || typeof message !== "object") {
+      return false;
+    }
+    const cmd = message;
+    return typeof cmd.id === "number" && typeof cmd.method === "string" && (cmd.sessionId === undefined || typeof cmd.sessionId === "string") && (cmd.params === undefined || typeof cmd.params === "object" && cmd.params !== null);
+  }
+  stop() {
+    this.closeConnections("Server stopped");
+    this._wss.close();
+  }
+  closeConnections(reason) {
+    this._closePlaywrightConnection(reason);
+    this._closeExtensionConnection(reason);
+  }
+  _onConnection(ws, request) {
+    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");
+    }
+  }
+  _handlePlaywrightConnection(ws) {
+    if (this._playwrightConnection) {
+      debugLogger("Rejecting second Playwright connection");
+      ws.close(1000, "Another CDP client already connected");
+      return;
+    }
+    this._playwrightConnection = ws;
+    ws.on("message", async (data) => {
+      try {
+        const messageString = data.toString();
+        if (messageString.length > 1048576) {
+          debugLogger("Message too large, rejecting");
+          return;
+        }
+        const message = this._safeJsonParse(messageString);
+        if (message === null) {
+          debugLogger("Invalid JSON message received from Playwright");
+          return;
+        }
+        await this._handlePlaywrightMessage(message);
+      } catch (error) {
+        const truncatedData = String(data).slice(0, 500);
+        debugLogger(`Error while handling Playwright message
+${truncatedData}...
+`, error);
+      }
+    });
+    ws.on("close", () => {
+      if (this._playwrightConnection !== ws) {
+        return;
+      }
+      this._playwrightConnection = null;
+      this._closeExtensionConnection("Playwright client disconnected");
+      debugLogger("Playwright WebSocket closed");
+    });
+    ws.on("error", (error) => {
+      debugLogger("Playwright WebSocket error:", error);
+    });
+    debugLogger("Playwright MCP connected");
+  }
+  _closeExtensionConnection(reason) {
+    this._extensionConnection?.close(reason);
+    this._extensionConnectionPromise.reject(new Error(reason));
+    this._resetExtensionConnection();
+  }
+  _resetExtensionConnection() {
+    this._connectedTabInfo = undefined;
+    this._extensionConnection = null;
+    this._extensionConnectionPromise = new ManualPromise;
+    this._extensionConnectionPromise.catch(logUnhandledError);
+  }
+  _closePlaywrightConnection(reason) {
+    if (this._playwrightConnection?.readyState === WebSocket.OPEN) {
+      this._playwrightConnection.close(1000, reason);
+    }
+    this._playwrightConnection = null;
+  }
+  _handleExtensionConnection(ws) {
+    if (this._extensionConnection) {
+      ws.close(1000, "Another extension connection already established");
+      return;
+    }
+    this._extensionConnection = new ExtensionConnection(ws);
+    this._extensionConnection.onclose = (c, reason) => {
+      debugLogger("Extension WebSocket closed:", reason, c === this._extensionConnection);
+      if (this._extensionConnection !== c) {
+        return;
+      }
+      this._resetExtensionConnection();
+      this._closePlaywrightConnection(`Extension disconnected: ${reason}`);
+    };
+    this._extensionConnection.onmessage = this._handleExtensionMessage.bind(this);
+    this._extensionConnectionPromise.resolve();
+  }
+  _handleExtensionMessage(method, params) {
+    switch (method) {
+      case "forwardCDPEvent": {
+        const sessionId = params.sessionId ?? this._connectedTabInfo?.sessionId;
+        this._sendToPlaywright({
+          sessionId,
+          method: params.method,
+          params: params.params
+        });
+        break;
+      }
+      case "detachedFromTab":
+        debugLogger("← Debugger detached from tab:", params);
+        this._connectedTabInfo = undefined;
+        break;
+      default:
+        debugLogger(`← Extension: unhandled method ${method}`, params);
+        break;
+    }
+  }
+  async _handlePlaywrightMessage(message) {
+    if (!this._isValidCDPCommand(message)) {
+      debugLogger("Invalid CDP command received from Playwright");
+      return;
+    }
+    debugLogger("← Playwright:", `${message.method} (id=${message.id})`);
+    const { id, sessionId, method, params } = message;
+    try {
+      const result = await this._handleCDPCommand(method, params, sessionId);
+      this._sendToPlaywright({ id, sessionId, result });
+    } catch (e) {
+      debugLogger("Error in the extension:", e);
+      this._sendToPlaywright({
+        id,
+        sessionId,
+        error: { message: e.message }
+      });
+    }
+  }
+  async _handleCDPCommand(method, params, sessionId) {
+    switch (method) {
+      case "Browser.getVersion": {
+        return {
+          protocolVersion: "1.3",
+          product: "Chrome/Extension-Bridge",
+          userAgent: "CDP-Bridge-Server/1.0.0"
+        };
+      }
+      case "Browser.setDownloadBehavior": {
+        return {};
+      }
+      case "Target.setAutoAttach": {
+        if (sessionId) {
+          break;
+        }
+        {
+          const result = await this._extensionConnection?.send("attachToTab");
+          const targetInfo = result.targetInfo;
+          this._connectedTabInfo = {
+            targetInfo,
+            sessionId: `pw-tab-${this._nextSessionId++}`
+          };
+          debugLogger("Simulating auto-attach");
+          this._sendToPlaywright({
+            method: "Target.attachedToTarget",
+            params: {
+              sessionId: this._connectedTabInfo.sessionId,
+              targetInfo: {
+                ...this._connectedTabInfo.targetInfo,
+                attached: true
+              },
+              waitingForDebugger: false
+            }
+          });
+        }
+        return {};
+      }
+      case "Target.getTargetInfo": {
+        return this._connectedTabInfo?.targetInfo;
+      }
+      default:
+        break;
+    }
+    return await this._forwardToExtension(method, params, sessionId);
+  }
+  async _forwardToExtension(method, params, sessionId) {
+    if (!this._extensionConnection) {
+      throw new Error("Extension not connected");
+    }
+    let effectiveSessionId = sessionId;
+    if (this._connectedTabInfo?.sessionId === sessionId) {
+      effectiveSessionId = undefined;
+    }
+    return await this._extensionConnection.send("forwardCDPCommand", {
+      sessionId: effectiveSessionId,
+      method,
+      params
+    });
+  }
+  _sendToPlaywright(message) {
+    const messageDesc = message.method ?? `response(id=${message.id})`;
+    debugLogger("→ Playwright:", messageDesc);
+    this._playwrightConnection?.send(JSON.stringify(message));
+  }
+}
+
+class ExtensionConnection {
+  _ws;
+  _callbacks = new Map;
+  _lastId = 0;
+  onmessage;
+  onclose;
+  constructor(ws) {
+    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));
+  }
+  send(method, params, sessionId) {
+    if (this._ws.readyState !== WebSocket.OPEN) {
+      throw new Error(`Unexpected WebSocket state: ${this._ws.readyState}`);
+    }
+    const id = ++this._lastId;
+    this._ws.send(JSON.stringify({ id, method, params, sessionId }));
+    const error = new Error(`Protocol error: ${method}`);
+    return new Promise((resolve, reject) => {
+      this._callbacks.set(id, { resolve, reject, error });
+    });
+  }
+  close(message) {
+    debugLogger("closing extension connection:", message);
+    if (this._ws.readyState === WebSocket.OPEN) {
+      this._ws.close(1000, message);
+    }
+  }
+  _parseJsonSafely(jsonString) {
+    try {
+      if (jsonString.includes("__proto__") || jsonString.includes("constructor") || jsonString.includes("prototype")) {
+        debugLogger("Potential prototype pollution attempt detected");
+        return null;
+      }
+      const result = JSON.parse(jsonString);
+      if (result === null || typeof result !== "object") {
+        return result;
+      }
+      this._sanitizeJsonObject(result);
+      return result;
+    } catch (error) {
+      debugLogger("JSON parsing failed:", error);
+      return null;
+    }
+  }
+  _sanitizeJsonObject(obj) {
+    if (!obj || typeof obj !== "object") {
+      return;
+    }
+    for (const prop of DANGEROUS_PROPS) {
+      if (prop in obj) {
+        delete obj[prop];
+      }
+    }
+    for (const value of Object.values(obj)) {
+      if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+        this._sanitizeJsonObject(value);
+      }
+    }
+  }
+  _onMessage(event) {
+    const eventData = event.toString();
+    if (eventData.length > 1048576) {
+      debugLogger("<closing ws> Message too large, closing websocket");
+      this._ws.close();
+      return;
+    }
+    const parsedJson = this._parseJsonSafely(eventData);
+    if (parsedJson === null) {
+      debugLogger(`<closing ws> Closing websocket due to malformed JSON. eventData=${eventData.slice(0, 200)}...`);
+      this._ws.close();
+      return;
+    }
+    try {
+      this._handleParsedMessage(parsedJson);
+    } catch (e) {
+      const errorMessage = e?.message;
+      debugLogger(`<closing ws> Closing websocket due to failed onmessage callback. eventData=${eventData} e=${errorMessage}`);
+      this._ws.close();
+    }
+  }
+  _handleParsedMessage(object) {
+    if (object.id && this._callbacks.has(object.id)) {
+      const callback = this._callbacks.get(object.id);
+      if (!callback) {
+        return;
+      }
+      this._callbacks.delete(object.id);
+      if (object.error) {
+        const error = callback.error;
+        error.message = object.error;
+        callback.reject(error);
+      } else {
+        callback.resolve(object.result);
+      }
+    } else if (object.id) {
+      debugLogger("← Extension: unexpected response", object);
+    } else if (object.method) {
+      this.onmessage?.(object.method, object.params ?? {});
+    }
+  }
+  _onClose(event) {
+    debugLogger(`<ws closed> code=${event.code} reason=${event.reason}`);
+    this._dispose();
+    this.onclose?.(this, event.reason);
+  }
+  _onError(event) {
+    debugLogger(`<ws error> message=${event.message} type=${event.type} target=${String(event.target)}`);
+    this._dispose();
+  }
+  _dispose() {
+    for (const callback of this._callbacks.values()) {
+      callback.reject(new Error("WebSocket closed"));
+    }
+    this._callbacks.clear();
+  }
+}
+export {
+  CDPRelayServer
+};

package/lib/extension/extension-context-factory.js

@@ -0,0 +1,74 @@
+import { createRequire } from "node:module";
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __toESM = (mod, isNodeMode, target) => {
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: () => mod[key],
+        enumerable: true
+      });
+  return to;
+};
+var __require = /* @__PURE__ */ createRequire(import.meta.url);
+
+// src/extension/extension-context-factory.ts
+import debug from "debug";
+import { chromium } from "playwright";
+import { startHttpServer } from "../http-server.js";
+import { CDPRelayServer } from "./cdp-relay.js";
+var debugLogger = debug("pw:mcp:relay");
+
+class ExtensionContextFactory {
+  name = "extension";
+  description = "Connect to a browser using the Playwright MCP extension";
+  _browserChannel;
+  _relayPromise;
+  _browserPromise;
+  constructor(browserChannel, _userDataDir) {
+    this._browserChannel = browserChannel;
+  }
+  async createContext(clientInfo, abortSignal) {
+    this._browserPromise ??= this._obtainBrowser(clientInfo, abortSignal);
+    const browser = await this._browserPromise;
+    return {
+      browserContext: browser.contexts()[0],
+      close: async () => {
+        debugLogger("close() called for browser context");
+        await browser.close();
+        this._browserPromise = undefined;
+      }
+    };
+  }
+  async _obtainBrowser(clientInfo, abortSignal) {
+    this._relayPromise ??= this._startRelay(abortSignal);
+    const relay = await this._relayPromise;
+    abortSignal.throwIfAborted();
+    await relay.ensureExtensionConnectionForMCPContext(clientInfo, abortSignal);
+    const browser = await chromium.connectOverCDP(relay.cdpEndpoint());
+    browser.on("disconnected", () => {
+      this._browserPromise = undefined;
+      debugLogger("Browser disconnected");
+    });
+    return browser;
+  }
+  async _startRelay(abortSignal) {
+    const httpServer = await startHttpServer({});
+    const cdpRelayServer = new CDPRelayServer(httpServer, this._browserChannel);
+    debugLogger(`CDP relay server started, extension endpoint: ${cdpRelayServer.extensionEndpoint()}.`);
+    if (abortSignal.aborted) {
+      cdpRelayServer.stop();
+    } else {
+      abortSignal.addEventListener("abort", () => cdpRelayServer.stop());
+    }
+    return cdpRelayServer;
+  }
+}
+export {
+  ExtensionContextFactory
+};

package/lib/extension/main.js

@@ -0,0 +1,41 @@
+import { createRequire } from "node:module";
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __toESM = (mod, isNodeMode, target) => {
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: () => mod[key],
+        enumerable: true
+      });
+  return to;
+};
+var __require = /* @__PURE__ */ createRequire(import.meta.url);
+
+// src/extension/main.ts
+import { BrowserServerBackend } from "../browser-server-backend.js";
+import { InProcessClientFactory } from "../in-process-client.js";
+import { start } from "../mcp/transport.js";
+import { ExtensionContextFactory } from "./extension-context-factory.js";
+async function runWithExtension(config) {
+  const contextFactory = createExtensionContextFactory(config);
+  const factories = [contextFactory];
+  const serverBackendFactory = () => new BrowserServerBackend(config, factories);
+  await start(serverBackendFactory, config.server);
+}
+function createExtensionClientFactory(config) {
+  return new InProcessClientFactory(createExtensionContextFactory(config), config);
+}
+function createExtensionContextFactory(config) {
+  return new ExtensionContextFactory(config.browser.launchOptions.channel || "chrome", config.browser.userDataDir);
+}
+export {
+  runWithExtension,
+  createExtensionContextFactory,
+  createExtensionClientFactory
+};

package/lib/file-utils.js

@@ -0,0 +1,42 @@
+import { createRequire } from "node:module";
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __toESM = (mod, isNodeMode, target) => {
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: () => mod[key],
+        enumerable: true
+      });
+  return to;
+};
+var __require = /* @__PURE__ */ createRequire(import.meta.url);
+
+// src/file-utils.ts
+import os from "node:os";
+import path from "node:path";
+function cacheDir() {
+  let cacheDirectory;
+  if (process.platform === "linux") {
+    cacheDirectory = process.env.XDG_CACHE_HOME ?? path.join(os.homedir(), ".cache");
+  } else if (process.platform === "darwin") {
+    cacheDirectory = path.join(os.homedir(), "Library", "Caches");
+  } else if (process.platform === "win32") {
+    cacheDirectory = process.env.LOCALAPPDATA ?? path.join(os.homedir(), "AppData", "Local");
+  } else {
+    throw new Error(`Unsupported platform: ${process.platform}`);
+  }
+  return path.join(cacheDirectory, "ms-playwright");
+}
+function userDataDir(browserConfig) {
+  return path.join(cacheDir(), "ms-playwright", `mcp-${browserConfig.launchOptions?.channel ?? browserConfig?.browserName}-profile`);
+}
+export {
+  userDataDir,
+  cacheDir
+};