chore: list service workers (ChromeDevTools#1035)

This PR adds the extension service workers to the output of listPages.
This is available only behind "--category-extensions" flag

Author: nroscino

docs/tool-reference.md

@@ -1,6 +1,6 @@
 <!-- AUTO GENERATED DO NOT EDIT - run 'npm run docs' to update-->
 
-# Chrome DevTools MCP Tool Reference (~7094 cl100k_base tokens)
+# Chrome DevTools MCP Tool Reference (~7095 cl100k_base tokens)
 
 - **[Input automation](#input-automation)** (9 tools)
   - [`click`](#click)

eslint.config.mjs

@@ -14,7 +14,7 @@ import tseslint from 'typescript-eslint';
 import localPlugin from './scripts/eslint_rules/local-plugin.js';
 
 export default defineConfig([
-  globalIgnores(['**/node_modules', '**/build/']),
+  globalIgnores(['**/node_modules', '**/build/', 'tests/tools/fixtures/']),
   importPlugin.flatConfigs.typescript,
   {
     languageOptions: {

src/McpContext.ts

@@ -29,6 +29,7 @@ import type {
   ScreenRecorder,
   SerializedAXNode,
   Viewport,
+  Target,
 } from './third_party/index.js';
 import {Locator, PredefinedNetworkConditions} from './third_party/index.js';
 import {type ToolGroup} from './tools/inPage.js';
@@ -50,6 +51,12 @@ export interface TextSnapshotNode extends SerializedAXNode {
   children: TextSnapshotNode[];
 }
 
+export interface ExtensionServiceWorker {
+  url: string;
+  target: Target;
+  id: string;
+}
+
 export interface GeolocationOptions {
   latitude: number;
   longitude: number;
@@ -129,6 +136,8 @@ export class McpContext implements Context {
   #nextIsolatedContextId = 1;
 
   #pages: Page[] = [];
+  #extensionServiceWorkers: ExtensionServiceWorker[] = [];
+
   #pageToDevToolsPage = new Map<Page, Page>();
   #selectedPage?: Page;
   #textSnapshot: TextSnapshot | null = null;
@@ -147,6 +156,9 @@ export class McpContext implements Context {
   #pageIdMap = new WeakMap<Page, number>();
   #nextPageId = 1;
 
+  #extensionServiceWorkerMap = new WeakMap<Target, string>();
+  #nextExtensionServiceWorkerId = 1;
+
   #nextSnapshotId = 1;
   #traceResults: TraceResult[] = [];
 
@@ -186,6 +198,7 @@ export class McpContext implements Context {
 
   async #init() {
     const pages = await this.createPagesSnapshot();
+    await this.createExtensionServiceWorkersSnapshot();
     await this.#networkCollector.init(pages);
     await this.#consoleCollector.init(pages);
     await this.#devtoolsUniverseManager.init(pages);
@@ -495,7 +508,7 @@ export class McpContext implements Context {
     }
     if (page.isClosed()) {
       throw new Error(
-        `The selected page has been closed. Call ${listPages.name} to see open pages.`,
+        `The selected page has been closed. Call ${listPages().name} to see open pages.`,
       );
     }
     return page;
@@ -593,6 +606,41 @@ export class McpContext implements Context {
     }
   }
 
+  /**
+   * Creates a snapshot of the extension service workers.
+   */
+  async createExtensionServiceWorkersSnapshot(): Promise<
+    ExtensionServiceWorker[]
+  > {
+    const allTargets = await this.browser.targets();
+
+    const serviceWorkers = allTargets.filter(target => {
+      return (
+        target.type() === 'service_worker' &&
+        target.url().includes('chrome-extension://')
+      );
+    });
+
+    for (const serviceWorker of serviceWorkers) {
+      if (!this.#extensionServiceWorkerMap.has(serviceWorker)) {
+        this.#extensionServiceWorkerMap.set(
+          serviceWorker,
+          'sw-' + this.#nextExtensionServiceWorkerId++,
+        );
+      }
+    }
+
+    this.#extensionServiceWorkers = serviceWorkers.map(serviceWorker => {
+      return {
+        target: serviceWorker,
+        id: this.#extensionServiceWorkerMap.get(serviceWorker)!,
+        url: serviceWorker.url(),
+      };
+    });
+
+    return this.#extensionServiceWorkers;
+  }
+
   async createPagesSnapshot(): Promise<Page[]> {
     const allPages = await this.#getAllPages();
 
@@ -686,6 +734,16 @@ export class McpContext implements Context {
     }
   }
 
+  getExtensionServiceWorkers(): ExtensionServiceWorker[] {
+    return this.#extensionServiceWorkers;
+  }
+
+  getExtensionServiceWorkerId(
+    extensionServiceWorker: ExtensionServiceWorker,
+  ): string | undefined {
+    return this.#extensionServiceWorkerMap.get(extensionServiceWorker.target);
+  }
+
   getPages(): Page[] {
     return this.#pages;
   }

src/McpResponse.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import type {ParsedArguments} from './cli.js';
 import {ConsoleFormatter} from './formatters/ConsoleFormatter.js';
 import {IssueFormatter} from './formatters/IssueFormatter.js';
 import {NetworkFormatter} from './formatters/NetworkFormatter.js';
@@ -58,6 +59,7 @@ async function getToolGroup(page: Page) {
 
 export class McpResponse implements Response {
   #includePages = false;
+  #includeExtensionServiceWorkers = false;
   #snapshotParams?: SnapshotParams;
   #attachedNetworkRequestId?: number;
   #attachedNetworkRequestOptions?: {
@@ -86,6 +88,11 @@ export class McpResponse implements Response {
   #listInPageTools?: boolean;
   #devToolsData?: DevToolsData;
   #tabId?: string;
+  #args: ParsedArguments;
+
+  constructor(args: ParsedArguments) {
+    this.#args = args;
+  }
 
   attachDevToolsData(data: DevToolsData): void {
     this.#devToolsData = data;
@@ -97,6 +104,10 @@ export class McpResponse implements Response {
 
   setIncludePages(value: boolean): void {
     this.#includePages = value;
+
+    if (this.#args.categoryExtensions) {
+      this.#includeExtensionServiceWorkers = value;
+    }
   }
 
   includeSnapshot(params?: SnapshotParams): void {
@@ -258,6 +269,10 @@ export class McpResponse implements Response {
       await context.createPagesSnapshot();
     }
 
+    if (this.#includeExtensionServiceWorkers) {
+      await context.createExtensionServiceWorkersSnapshot();
+    }
+
     let snapshot: SnapshotFormatter | string | undefined;
     if (this.#snapshotParams) {
       await context.createTextSnapshot(
@@ -473,6 +488,7 @@ export class McpResponse implements Response {
       };
       pages?: object[];
       pagination?: object;
+      extensionServiceWorkers?: object[];
     } = {};
 
     const response = [`# ${toolName} response`];
@@ -567,6 +583,26 @@ Call ${handleDialog.name} to handle it before continuing.`);
       });
     }
 
+    if (this.#includeExtensionServiceWorkers) {
+      if (!context.getExtensionServiceWorkers().length) {
+        response.push(`## Extension Service Workers`);
+      }
+
+      for (const extensionServiceWorker of context.getExtensionServiceWorkers()) {
+        response.push(
+          `${extensionServiceWorker.id}: ${extensionServiceWorker.url}`,
+        );
+      }
+      structuredContent.extensionServiceWorkers = context
+        .getExtensionServiceWorkers()
+        .map(extensionServiceWorker => {
+          return {
+            id: extensionServiceWorker.id,
+            url: extensionServiceWorker.url,
+          };
+        });
+    }
+
     if (this.#tabId) {
       structuredContent.tabId = this.#tabId;
     }

src/main.ts

@@ -203,7 +203,10 @@ function registerTool(tool: ToolDefinition): void {
         const context = await getContext();
         logger(`${tool.name} context: resolved`);
         await context.detectOpenDevToolsWindows();
-        const response = args.slim ? new SlimMcpResponse() : new McpResponse();
+        const response = args.slim
+          ? new SlimMcpResponse(args)
+          : new McpResponse(args);
+
         await tool.handler(
           {
             params,

src/tools/ToolDefinition.ts

@@ -168,14 +168,16 @@ export function defineTool<
   Schema extends zod.ZodRawShape,
   Args extends ParsedArguments = ParsedArguments,
 >(
-  definition: (args: Args) => ToolDefinition<Schema>,
-): (args: Args) => ToolDefinition<Schema>;
+  definition: (args?: Args) => ToolDefinition<Schema>,
+): (args?: Args) => ToolDefinition<Schema>;
 
 export function defineTool<
   Schema extends zod.ZodRawShape,
   Args extends ParsedArguments = ParsedArguments,
 >(
-  definition: ToolDefinition<Schema> | ((args: Args) => ToolDefinition<Schema>),
+  definition:
+    | ToolDefinition<Schema>
+    | ((args?: Args) => ToolDefinition<Schema>),
 ) {
   return definition;
 }

src/tools/pages.ts

@@ -11,22 +11,24 @@ import {zod} from '../third_party/index.js';
 import {ToolCategory} from './categories.js';
 import {CLOSE_PAGE_ERROR, defineTool, timeoutSchema} from './ToolDefinition.js';
 
-export const listPages = defineTool({
-  name: 'list_pages',
-  description: `Get a list of pages open in the browser.`,
-  annotations: {
-    category: ToolCategory.NAVIGATION,
-    readOnlyHint: true,
-  },
-  schema: {},
-  handler: async (_request, response, context) => {
-    response.setIncludePages(true);
-    // Only include in-page tools in the response, if they haven't already been
-    // sent before.
-    if (context.getInPageTools() === undefined) {
-      response.setListInPageTools();
-    }
-  },
+export const listPages = defineTool(args => {
+  return {
+    name: 'list_pages',
+    description: `Get a list of pages ${args?.categoryExtensions ? 'including extension service workers' : ''} open in the browser.`,
+    annotations: {
+      category: ToolCategory.NAVIGATION,
+      readOnlyHint: true,
+    },
+    schema: {},
+    handler: async (_request, response, context) => {
+      response.setIncludePages(true);
+      // Only include in-page tools in the response, if they haven't already been
+      // sent before.
+      if (context.getInPageTools() === undefined) {
+        response.setListInPageTools();
+      }
+    },
+  };
 });
 
 export const selectPage = defineTool({
@@ -40,7 +42,7 @@ export const selectPage = defineTool({
     pageId: zod
       .number()
       .describe(
-        `The ID of the page to select. Call ${listPages.name} to get available pages.`,
+        `The ID of the page to select. Call ${listPages().name} to get available pages.`,
       ),
     bringToFront: zod
       .boolean()
@@ -380,7 +382,7 @@ export const getTabId = defineTool({
     pageId: zod
       .number()
       .describe(
-        `The ID of the page to get the tab ID for. Call ${listPages.name} to get available pages.`,
+        `The ID of the page to get the tab ID for. Call ${listPages().name} to get available pages.`,
       ),
   },
   handler: async (request, response, context) => {

src/tools/tools.ts

@@ -44,8 +44,7 @@ export const createTools = (args: ParsedArguments) => {
   const tools: ToolDefinition[] = [];
   for (const tool of rawTools) {
     if (typeof tool === 'function') {
-      // @ts-expect-error none of the tools for now implement the function type tool has type "never"
-      tools.push(tool(args) as ToolDefinition);
+      tools.push(tool(args));
     } else {
       tools.push(tool as ToolDefinition);
     }

tests/tools/console.test.ts

@@ -7,6 +7,7 @@
 import assert from 'node:assert';
 import {before, describe, it} from 'node:test';
 
+import type {ParsedArguments} from '../../src/cli.js';
 import {loadIssueDescriptions} from '../../src/issue-descriptions.js';
 import {McpResponse} from '../../src/McpResponse.js';
 import {DevTools} from '../../src/third_party/index.js';
@@ -170,7 +171,7 @@ describe('console', () => {
           await context.createTextSnapshot();
           await issuePromise;
           await listConsoleMessages.handler({params: {}}, response, context);
-          const response2 = new McpResponse();
+          const response2 = new McpResponse({} as ParsedArguments);
           await getConsoleMessage.handler(
             {params: {msgid: 1}},
             response2,
@@ -225,7 +226,7 @@ describe('console', () => {
             response,
             context,
           );
-          const response2 = new McpResponse();
+          const response2 = new McpResponse({} as ParsedArguments);
           await getConsoleMessage.handler(
             {params: {msgid: id}},
             response2,

tests/tools/fixtures/extension-sw/manifest.json

@@ -0,0 +1,11 @@
+{
+  "manifest_version": 3,
+  "name": "Test Extension with SW",
+  "version": "1.0",
+  "background": {
+    "service_worker": "sw.js"
+  },
+  "action": {
+    "default_popup": "popup.html"
+  }
+}