chore: add extension pages to list_pages tool

Author: nroscino

src/McpContext.ts

@@ -109,6 +109,7 @@ export class McpContext implements Context {
     null;
 
   #nextPageId = 1;
+  #extensionPages = new WeakMap<Target, Page>();
 
   #extensionServiceWorkerMap = new WeakMap<Target, string>();
   #nextExtensionServiceWorkerId = 1;
@@ -589,6 +590,36 @@ export class McpContext implements Context {
       this.#options.experimentalIncludeAllPages,
     );
 
+    const allTargets = this.browser.targets();
+    const extensionTargets = allTargets.filter(target => {
+      return (
+        target.url().startsWith('chrome-extension://') &&
+        target.type() === 'page'
+      );
+    });
+
+    for (const target of extensionTargets) {
+      // Right now target.page() returns null for popup and side panel pages.
+      let page = await target.page();
+      if (!page) {
+        // We need to cache pages instances for targets because target.asPage()
+        // returns a new page instance every time.
+        page = this.#extensionPages.get(target) ?? null;
+        if (!page) {
+          try {
+            page = await target.asPage();
+            this.#extensionPages.set(target, page);
+          } catch (e) {
+            this.logger('Failed to get page for extension target', e);
+          }
+        }
+      }
+
+      if (page && !allPages.includes(page)) {
+        allPages.push(page);
+      }
+    }
+
     // Build a reverse lookup from BrowserContext instance → name.
     const contextToName = new Map<BrowserContext, string>();
     for (const [name, ctx] of this.#isolatedContexts) {

src/McpResponse.ts

@@ -16,6 +16,7 @@ import {DevTools} from './third_party/index.js';
 import type {
   ConsoleMessage,
   ImageContent,
+  Page,
   ResourceType,
   TextContent,
 } from './third_party/index.js';
@@ -42,6 +43,7 @@ interface TraceInsightData {
 export class McpResponse implements Response {
   #includePages = false;
   #includeExtensionServiceWorkers = false;
+  #includeExtensionPages = false;
   #snapshotParams?: SnapshotParams;
   #attachedNetworkRequestId?: number;
   #attachedNetworkRequestOptions?: {
@@ -94,6 +96,7 @@ export class McpResponse implements Response {
 
     if (this.#args.categoryExtensions) {
       this.#includeExtensionServiceWorkers = value;
+      this.#includeExtensionPages = value;
     }
   }
 
@@ -501,6 +504,7 @@ export class McpResponse implements Response {
       pages?: object[];
       pagination?: object;
       extensionServiceWorkers?: object[];
+      extensionPages?: object[];
     } = {};
 
     const response = [];
@@ -559,34 +563,82 @@ Call ${handleDialog.name} to handle it before continuing.`);
     }
 
     if (this.#includePages) {
-      const parts = [`## Pages`];
-      for (const page of context.getPages()) {
-        const isolatedContextName = context.getIsolatedContextName(page);
-        const contextLabel = isolatedContextName
-          ? ` isolatedContext=${isolatedContextName}`
-          : '';
-        parts.push(
-          `${context.getPageId(page)}: ${page.url()}${context.isPageSelected(page) ? ' [selected]' : ''}${contextLabel}`,
-        );
+      const allPages = context.getPages();
+
+      const {regularPages, extensionPages} = allPages.reduce(
+        (acc: {regularPages: Page[]; extensionPages: Page[]}, page: Page) => {
+          if (page.url().startsWith('chrome-extension://')) {
+            acc.extensionPages.push(page);
+          } else {
+            acc.regularPages.push(page);
+          }
+          return acc;
+        },
+        {regularPages: [], extensionPages: []},
+      );
+
+      if (regularPages.length) {
+        const parts = [`## Pages`];
+        for (const page of regularPages) {
+          const isolatedContextName = context.getIsolatedContextName(page);
+          const contextLabel = isolatedContextName
+            ? ` isolatedContext=${isolatedContextName}`
+            : '';
+          parts.push(
+            `${context.getPageId(page)}: ${page.url()}${context.isPageSelected(page) ? ' [selected]' : ''}${contextLabel}`,
+          );
+        }
+        response.push(...parts);
+        structuredContent.pages = regularPages.map(page => {
+          const isolatedContextName = context.getIsolatedContextName(page);
+          const entry: {
+            id: number | undefined;
+            url: string;
+            selected: boolean;
+            isolatedContext?: string;
+          } = {
+            id: context.getPageId(page),
+            url: page.url(),
+            selected: context.isPageSelected(page),
+          };
+          if (isolatedContextName) {
+            entry.isolatedContext = isolatedContextName;
+          }
+          return entry;
+        });
       }
-      response.push(...parts);
-      structuredContent.pages = context.getPages().map(page => {
-        const isolatedContextName = context.getIsolatedContextName(page);
-        const entry: {
-          id: number | undefined;
-          url: string;
-          selected: boolean;
-          isolatedContext?: string;
-        } = {
-          id: context.getPageId(page),
-          url: page.url(),
-          selected: context.isPageSelected(page),
-        };
-        if (isolatedContextName) {
-          entry.isolatedContext = isolatedContextName;
+
+      if (this.#includeExtensionPages) {
+        if (extensionPages.length) {
+          response.push(`## Extension Pages`);
+          for (const page of extensionPages) {
+            const isolatedContextName = context.getIsolatedContextName(page);
+            const contextLabel = isolatedContextName
+              ? ` isolatedContext=${isolatedContextName}`
+              : '';
+            response.push(
+              `${context.getPageId(page)}: ${page.url()}${context.isPageSelected(page) ? ' [selected]' : ''}${contextLabel}`,
+            );
+          }
+          structuredContent.extensionPages = extensionPages.map(page => {
+            const isolatedContextName = context.getIsolatedContextName(page);
+            const entry: {
+              id: number | undefined;
+              url: string;
+              selected: boolean;
+              isolatedContext?: string;
+            } = {
+              id: context.getPageId(page),
+              url: page.url(),
+              selected: context.isPageSelected(page),
+            };
+            if (isolatedContextName) {
+              entry.isolatedContext = isolatedContextName;
+            }
+            return entry;
+          });
         }
-        return entry;
-      });
+      }
     }
 
     if (this.#includeExtensionServiceWorkers) {

src/browser.ts

@@ -20,12 +20,11 @@ import {puppeteer} from './third_party/index.js';
 
 let browser: Browser | undefined;
 
-function makeTargetFilter() {
-  const ignoredPrefixes = new Set([
-    'chrome://',
-    'chrome-extension://',
-    'chrome-untrusted://',
-  ]);
+function makeTargetFilter(enableExtensions = false) {
+  const ignoredPrefixes = new Set(['chrome://', 'chrome-untrusted://']);
+  if (!enableExtensions) {
+    ignoredPrefixes.add('chrome-extension://');
+  }
 
   return function targetFilter(target: Target): boolean {
     if (target.url() === 'chrome://newtab/') {
@@ -51,14 +50,15 @@ export async function ensureBrowserConnected(options: {
   devtools: boolean;
   channel?: Channel;
   userDataDir?: string;
+  enableExtensions?: boolean;
 }) {
-  const {channel} = options;
+  const {channel, enableExtensions} = options;
   if (browser?.connected) {
     return browser;
   }
 
   const connectOptions: Parameters<typeof puppeteer.connect>[0] = {
-    targetFilter: makeTargetFilter(),
+    targetFilter: makeTargetFilter(enableExtensions),
     defaultViewport: null,
     handleDevToolsAsPage: true,
   };
@@ -217,7 +217,7 @@ export async function launch(options: McpLaunchOptions): Promise<Browser> {
   try {
     const browser = await puppeteer.launch({
       channel: puppeteerChannel,
-      targetFilter: makeTargetFilter(),
+      targetFilter: makeTargetFilter(options.enableExtensions),
       executablePath,
       defaultViewport: null,
       userDataDir,

src/server.ts

@@ -79,6 +79,7 @@ export async function createMcpServer(
               : undefined,
             userDataDir: serverArgs.userDataDir,
             devtools,
+            enableExtensions: serverArgs.categoryExtensions,
           })
         : await ensureBrowserLaunched({
             headless: serverArgs.headless,

tests/tools/fixtures/extension-side-panel/manifest.json

@@ -0,0 +1,15 @@
+{
+  "name": "Test Extension Side Panel",
+  "version": "1.0.0",
+  "manifest_version": 3,
+  "permissions": ["sidePanel"],
+  "action": {
+    "default_title": "Click to open panel"
+  },
+  "background": {
+    "service_worker": "sw.js"
+  },
+  "side_panel": {
+    "default_path": "sidepanel.html"
+  }
+}

tests/tools/fixtures/extension-side-panel/sidepanel.html

@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Side Panel</title>
+  </head>
+  <body>
+    <h1>Side Panel</h1>
+  </body>
+</html>

tests/tools/fixtures/extension-side-panel/sw.js

@@ -0,0 +1,3 @@
+chrome.sidePanel
+  .setPanelBehavior({openPanelOnActionClick: true})
+  .catch(console.error);

tests/tools/pages.test.js.snapshot

@@ -0,0 +1,27 @@
+exports[`pages > list_pages > list pages for extension pages with --category-extensions 1`] = `
+## Pages
+1: about:blank [selected]
+## Extension Pages
+2: chrome-extension://<extension-id>/popup.html
+`;
+
+exports[`pages > list_pages > list pages for extension service workers with --category-extensions 1`] = `
+## Pages
+1: about:blank [selected]
+## Extension Service Workers
+sw-1: chrome-extension://<extension-id>/sw.js
+`;
+
+exports[`pages > list_pages > list pages for extension service workers without --category-extensions 1`] = `
+## Pages
+1: about:blank [selected]
+`;
+
+exports[`pages > list_pages > list pages for side panels with --category-extensions 1`] = `
+## Pages
+1: about:blank
+## Extension Pages
+2: chrome-extension://<extension-id>/sidepanel.html [selected]
+## Extension Service Workers
+sw-1: chrome-extension://<extension-id>/sw.js
+`;