chore: allow passing cdp endpoint (#86)

Fixes https://github.com/microsoft/playwright-mcp/issues/84

src/context.ts

@@ -16,9 +16,15 @@
 
 import * as playwright from 'playwright';
 
+export type ContextOptions = {
+  userDataDir: string;
+  launchOptions?: playwright.LaunchOptions;
+  cdpEndpoint?: string;
+  remoteEndpoint?: string;
+};
+
 export class Context {
-  private _userDataDir: string;
-  private _launchOptions: playwright.LaunchOptions | undefined;
+  private _options: ContextOptions;
   private _browser: playwright.Browser | undefined;
   private _page: playwright.Page | undefined;
   private _console: playwright.ConsoleMessage[] = [];
@@ -26,9 +32,8 @@ export class Context {
   private _fileChooser: playwright.FileChooser | undefined;
   private _lastSnapshotFrames: playwright.FrameLocator[] = [];
 
-  constructor(userDataDir: string, launchOptions?: playwright.LaunchOptions) {
-    this._userDataDir = userDataDir;
-    this._launchOptions = launchOptions;
+  constructor(options: ContextOptions) {
+    this._options = options;
   }
 
   async createPage(): Promise<playwright.Page> {
@@ -96,16 +101,25 @@ export class Context {
   }
 
   private async _createPage(): Promise<{ browser?: playwright.Browser, page: playwright.Page }> {
-    if (process.env.PLAYWRIGHT_WS_ENDPOINT) {
-      const url = new URL(process.env.PLAYWRIGHT_WS_ENDPOINT);
-      if (this._launchOptions)
-        url.searchParams.set('launch-options', JSON.stringify(this._launchOptions));
+    if (this._options.remoteEndpoint) {
+      const url = new URL(this._options.remoteEndpoint);
+      if (this._options.launchOptions)
+        url.searchParams.set('launch-options', JSON.stringify(this._options.launchOptions));
       const browser = await playwright.chromium.connect(String(url));
       const page = await browser.newPage();
       return { browser, page };
     }
 
-    const context = await playwright.chromium.launchPersistentContext(this._userDataDir, this._launchOptions);
+    if (this._options.cdpEndpoint) {
+      const browser = await playwright.chromium.connectOverCDP(this._options.cdpEndpoint);
+      const browserContext = browser.contexts()[0];
+      let [page] = browserContext.pages();
+      if (!page)
+        page = await browserContext.newPage();
+      return { browser, page };
+    }
+
+    const context = await playwright.chromium.launchPersistentContext(this._options.userDataDir, this._options.launchOptions);
     const [page] = context.pages();
     return { page };
   }

src/index.ts

@@ -66,6 +66,7 @@ const resources: Resource[] = [
 type Options = {
   userDataDir?: string;
   launchOptions?: LaunchOptions;
+  cdpEndpoint?: string;
   vision?: boolean;
 };
 
@@ -80,5 +81,6 @@ export function createServer(options?: Options): Server {
     resources,
     userDataDir: options?.userDataDir ?? '',
     launchOptions: options?.launchOptions,
+    cdpEndpoint: options?.cdpEndpoint,
   });
 }

src/program.ts

@@ -39,6 +39,7 @@ program
     .option('--user-data-dir <path>', 'Path to the user data directory')
     .option('--vision', 'Run server that uses screenshots (Aria snapshots are used by default)')
     .option('--port <port>', 'Port to listen on for SSE transport.')
+    .option('--cdp-endpoint <endpoint>', 'CDP endpoint to connect to.')
     .action(async options => {
       const launchOptions: LaunchOptions = {
         headless: !!options.headless,
@@ -49,6 +50,7 @@ program
         userDataDir,
         launchOptions,
         vision: !!options.vision,
+        cdpEndpoint: options.cdpEndpoint,
       }));
       setupExitWatchdog(serverList);
 

src/server.ts

@@ -21,20 +21,18 @@ import { Context } from './context';
 
 import type { Tool } from './tools/tool';
 import type { Resource } from './resources/resource';
-import type { LaunchOptions } from 'playwright';
+import type { ContextOptions } from './context';
 
-type Options = {
+type Options = ContextOptions & {
   name: string;
   version: string;
   tools: Tool[];
   resources: Resource[],
-  userDataDir: string;
-  launchOptions?: LaunchOptions;
 };
 
 export function createServerWithTools(options: Options): Server {
-  const { name, version, tools, resources, userDataDir, launchOptions } = options;
-  const context = new Context(userDataDir, launchOptions);
+  const { name, version, tools, resources } = options;
+  const context = new Context(options);
   const server = new Server({ name, version }, {
     capabilities: {
       tools: {},