Switch to Puppeteer

Author: beaufortfrancois

src/McpContext.ts

@@ -7,13 +7,14 @@
 import fs from 'node:fs/promises';
 import path from 'node:path';
 
+import type {WebMCPTool} from 'puppeteer-core/internal/cdp/WebMCP.js';
+
 import type {TargetUniverse} from './DevtoolsUtils.js';
 import {UniverseManager} from './DevtoolsUtils.js';
 import {McpPage} from './McpPage.js';
 import {
   NetworkCollector,
   ConsoleCollector,
-  WebMcpCollector,
   type ListenerMap,
   type UncaughtError,
 } from './PageCollector.js';
@@ -42,7 +43,6 @@ import type {
   TextSnapshot,
   TextSnapshotNode,
   ExtensionServiceWorker,
-  WebMcpTool,
 } from './types.js';
 import {
   ExtensionRegistry,
@@ -79,7 +79,6 @@ export class McpContext implements Context {
   #selectedPage?: McpPage;
   #networkCollector: NetworkCollector;
   #consoleCollector: ConsoleCollector;
-  #webmcpCollector: WebMcpCollector;
   #devtoolsUniverseManager: UniverseManager;
   #extensionRegistry = new ExtensionRegistry();
 
@@ -125,13 +124,6 @@ export class McpContext implements Context {
         },
       } as ListenerMap;
     });
-    this.#webmcpCollector = new WebMcpCollector(this.browser, collect => {
-      return {
-        webmcpToolAdded: event => {
-          collect(event);
-        },
-      } as ListenerMap;
-    });
     this.#devtoolsUniverseManager = new UniverseManager(this.browser);
   }
 
@@ -140,14 +132,12 @@ export class McpContext implements Context {
     await this.createExtensionServiceWorkersSnapshot();
     await this.#networkCollector.init(pages);
     await this.#consoleCollector.init(pages);
-    await this.#webmcpCollector.init(pages);
     await this.#devtoolsUniverseManager.init(pages);
   }
 
   dispose() {
     this.#networkCollector.dispose();
     this.#consoleCollector.dispose();
-    this.#webmcpCollector.dispose();
     this.#devtoolsUniverseManager.dispose();
     for (const mcpPage of this.#mcpPages.values()) {
       mcpPage.dispose();
@@ -234,8 +224,8 @@ export class McpContext implements Context {
     );
   }
 
-  getWebMcpTools(page: McpPage): WebMcpTool[] {
-    return this.#webmcpCollector.getData(page.pptrPage) ?? [];
+  getWebMcpTools(page: McpPage): WebMCPTool[] {
+    return page.pptrPage.webmcp.tools();
   }
 
   getDevToolsUniverse(page: McpPage): TargetUniverse | null {

src/McpResponse.ts

@@ -4,6 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import type {WebMCPTool} from 'puppeteer-core/internal/cdp/WebMCP.js';
+
 import type {ParsedArguments} from './bin/chrome-devtools-mcp-cli-options.js';
 import {ConsoleFormatter} from './formatters/ConsoleFormatter.js';
 import {IssueFormatter} from './formatters/IssueFormatter.js';
@@ -32,7 +34,6 @@ import type {
 } from './tools/ToolDefinition.js';
 import type {InsightName, TraceResult} from './trace-processing/parse.js';
 import {getInsightOutput, getTraceSummary} from './trace-processing/parse.js';
-import type {WebMcpTool} from './types.js';
 import type {InstalledExtension} from './utils/ExtensionRegistry.js';
 import {paginate} from './utils/pagination.js';
 import type {PaginationOptions} from './utils/types.js';
@@ -490,7 +491,7 @@ export class McpResponse implements Response {
       page.inPageTools = inPageTools;
     }
 
-    let webmcpTools: WebMcpTool[] | undefined;
+    let webmcpTools: WebMCPTool[] | undefined;
     if (this.#listWebMcpTools) {
       const page = this.#page ?? context.getSelectedMcpPage();
       webmcpTools = context.getWebMcpTools(page);
@@ -617,7 +618,7 @@ export class McpResponse implements Response {
       extensions?: InstalledExtension[];
       lighthouseResult?: LighthouseData;
       inPageTools?: ToolGroup<ToolDefinition>;
-      webmcpTools?: WebMcpTool[];
+      webmcpTools?: WebMCPTool[];
     },
   ): {content: Array<TextContent | ImageContent>; structuredContent: object} {
     const structuredContent: {

src/PageCollector.ts

@@ -21,7 +21,6 @@ import {
   type Page,
   type PageEvents as PuppeteerPageEvents,
 } from './third_party/index.js';
-import type {WebMcpTool} from './types.js';
 
 export class UncaughtError {
   readonly details: Protocol.Runtime.ExceptionDetails;
@@ -36,7 +35,6 @@ export class UncaughtError {
 interface PageEvents extends PuppeteerPageEvents {
   issue: DevTools.AggregatedIssue;
   uncaughtError: UncaughtError;
-  webmcpToolAdded: WebMcpTool;
 }
 
 export type ListenerMap<EventMap extends PageEvents = PageEvents> = {
@@ -414,59 +412,3 @@ export class NetworkCollector extends PageCollector<HTTPRequest> {
     navigations.splice(this.maxNavigationSaved);
   }
 }
-
-export class WebMcpCollector extends PageCollector<WebMcpTool> {
-  #subscribedPages = new WeakMap<Page, WebMcpSubscriber>();
-
-  override addPage(page: Page): void {
-    super.addPage(page);
-    if (!this.#subscribedPages.has(page)) {
-      const subscriber = new WebMcpSubscriber(page);
-      this.#subscribedPages.set(page, subscriber);
-      void subscriber.subscribe();
-    }
-  }
-
-  protected override cleanupPageDestroyed(page: Page): void {
-    super.cleanupPageDestroyed(page);
-    void this.#subscribedPages.get(page)?.unsubscribe();
-    this.#subscribedPages.delete(page);
-  }
-}
-
-class WebMcpSubscriber {
-  #page: Page;
-  #session: CDPSession;
-  #onToolsAdded: (data: unknown) => void;
-
-  constructor(page: Page) {
-    this.#page = page;
-    // @ts-expect-error use existing CDP client (internal Puppeteer API).
-    this.#session = this.#page._client() as CDPSession;
-    this.#onToolsAdded = (data: unknown) => {
-      for (const tool of (data as {tools: WebMcpTool[]}).tools) {
-        this.#page.emit('webmcpToolAdded', tool);
-      }
-    };
-  }
-
-  async subscribe() {
-    this.#session.on('WebMCP.toolsAdded', this.#onToolsAdded);
-    try {
-      // @ts-expect-error WebMCP is an experimental domain
-      await this.#session.send('WebMCP.enable');
-    } catch (error) {
-      logger('Error subscribing to WebMCP', error);
-    }
-  }
-
-  async unsubscribe() {
-    this.#session.off('WebMCP.toolsAdded', this.#onToolsAdded);
-    try {
-      // @ts-expect-error WebMCP is an experimental domain
-      await this.#session.send('WebMCP.disable');
-    } catch (error) {
-      logger('Error unsubscribing to WebMCP', error);
-    }
-  }
-}

src/tools/ToolDefinition.ts

@@ -19,7 +19,6 @@ import type {
   TextSnapshotNode,
   GeolocationOptions,
   ExtensionServiceWorker,
-  WebMcpTool,
 } from '../types.js';
 import type {InstalledExtension} from '../utils/ExtensionRegistry.js';
 import type {PaginationOptions} from '../utils/types.js';

src/types.ts

@@ -4,12 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import type {
-  SerializedAXNode,
-  Viewport,
-  Target,
-  Protocol,
-} from './third_party/index.js';
+import type {SerializedAXNode, Viewport, Target} from './third_party/index.js';
 
 export interface ExtensionServiceWorker {
   url: string;
@@ -48,18 +43,3 @@ export interface EmulationSettings {
   colorScheme?: 'dark' | 'light';
   viewport?: Viewport;
 }
-
-export interface WebMcpAnnotation {
-  readOnly?: boolean;
-  autosubmit?: boolean;
-}
-
-export interface WebMcpTool {
-  name: string;
-  description: string;
-  inputSchema?: object;
-  annotations?: WebMcpAnnotation;
-  frameId: string;
-  backendNodeId?: number;
-  stackTrace?: Protocol.Runtime.StackTrace;
-}

tests/tools/webmcp.test.ts

@@ -9,26 +9,19 @@ import {describe, it} from 'node:test';
 
 import type {ParsedArguments} from '../../src/bin/chrome-devtools-mcp-cli-options.js';
 import {listWebMcpTools} from '../../src/tools/webmcp.js';
-import {getTextContent, withMcpContext} from '../utils.js';
+import {getTextContent, html, withMcpContext} from '../utils.js';
 
 describe('webmcp', () => {
   it('list webmcp tools', async () => {
     await withMcpContext(
       async (response, context) => {
         const page = context.getSelectedMcpPage().pptrPage;
-        // @ts-expect-error internal API
-        const client = page._client();
-
-        client.emit('WebMCP.toolsAdded', {
-          tools: [
-            {
-              name: 'test_tool',
-              description: 'A test tool',
-              inputSchema: {type: 'object'},
-              frameId: '1',
-            },
-          ],
-        });
+        await page.setContent(
+          html`<form
+            toolname="test_tool"
+            tooldescription="A test tool"
+          ></form>`,
+        );
 
         await listWebMcpTools.handler(
           {params: {}, page: context.getSelectedMcpPage()},
@@ -38,7 +31,10 @@ describe('webmcp', () => {
 
         const formattedResponse = await response.handle('test', context);
         const textContent = getTextContent(formattedResponse.content[0]);
-        assert.match(textContent, /name="test_tool", description="A test tool"/);
+        assert.match(
+          textContent,
+          /name="test_tool", description="A test tool"/,
+        );
       },
       {},
       {experimentalWebmcp: true} as ParsedArguments,
@@ -48,19 +44,12 @@ describe('webmcp', () => {
   it('does not list webmcp tools if not enabled', async () => {
     await withMcpContext(async (response, context) => {
       const page = context.getSelectedMcpPage().pptrPage;
-      // @ts-expect-error internal API
-      const client = page._client();
-
-      client.emit('WebMCP.toolsAdded', {
-        tools: [
-          {
-            name: 'test_tool',
-            description: 'A test tool',
-            inputSchema: {type: 'object'},
-            frameId: '1',
-          },
-        ],
-      });
+      await page.setContent(
+        html`<form
+          toolname="test_tool"
+          tooldescription="A test tool"
+        ></form>`,
+      );
 
       await listWebMcpTools.handler(
         {params: {}, page: context.getSelectedMcpPage()},