add list of inPageTools to responses to 'list_pages', 'select_page', 'new_page', and 'navigate_page'

Author: wolfib

src/McpContext.ts

@@ -127,7 +127,7 @@ export class McpContext implements Context {
   #userAgentMap = new WeakMap<Page, string>();
   #colorSchemeMap = new WeakMap<Page, 'dark' | 'light'>();
   #dialog?: Dialog;
-  #inPageTools?: ToolGroup;
+  #inPageTools?: ToolGroup | null;
 
   #pageIdMap = new WeakMap<Page, number>();
   #nextPageId = 1;
@@ -435,11 +435,11 @@ export class McpContext implements Context {
     });
   }
 
-  setInPageTools(toolGroup: ToolGroup|undefined) {
+  setInPageTools(toolGroup: ToolGroup | null) {
     this.#inPageTools = toolGroup;
   }
 
-  getInPageTools(): ToolGroup | undefined {
+  getInPageTools(): ToolGroup | null | undefined {
     return this.#inPageTools;
   }
 

src/McpResponse.ts

@@ -9,7 +9,7 @@ import {IssueFormatter} from './formatters/IssueFormatter.js';
 import {NetworkFormatter} from './formatters/NetworkFormatter.js';
 import {SnapshotFormatter} from './formatters/SnapshotFormatter.js';
 import type {McpContext} from './McpContext.js';
-import {DevTools} from './third_party/index.js';
+import {DevTools, type Page} from './third_party/index.js';
 import type {
   ConsoleMessage,
   ImageContent,
@@ -36,6 +36,25 @@ interface TraceInsightData {
   insightName: InsightName;
 }
 
+async function getToolGroup(page: Page) {
+  return await page.evaluate(() => {
+    return new Promise<ToolGroup | null>(resolve => {
+      const event = new CustomEvent('devtoolstooldiscovery');
+      // @ts-expect-error adding custom property
+      event.respondWith = (toolGroup: ToolGroup) => {
+        window.__mcp_tool_group = toolGroup;
+        resolve(toolGroup ?? null);
+      };
+      window.dispatchEvent(event);
+      // TODO: replace with checking for existence of event listener?
+      // Can `respondWith` be called asynchronously?
+      setTimeout(() => {
+        resolve(null);
+      }, 0);
+    });
+  });
+}
+
 export class McpResponse implements Response {
   #includePages = false;
   #snapshotParams?: SnapshotParams;
@@ -314,9 +333,10 @@ export class McpResponse implements Response {
       extensions = context.listExtensions();
     }
 
-    let inPageTools: ToolGroup | undefined;
+    let inPageTools: ToolGroup | null | undefined;
     if (this.#listInPageTools) {
-      inPageTools = context.getInPageTools();
+      inPageTools = await getToolGroup(context.getSelectedPage());
+      context.setInPageTools(inPageTools);
     }
 
     let consoleMessages: Array<ConsoleFormatter | IssueFormatter> | undefined;
@@ -429,7 +449,7 @@ export class McpResponse implements Response {
       traceSummary?: TraceResult;
       traceInsight?: TraceInsightData;
       extensions?: InstalledExtension[];
-      inPageTools?: ToolGroup;
+      inPageTools?: ToolGroup | null;
     },
   ): {content: Array<TextContent | ImageContent>; structuredContent: object} {
     const structuredContent: {
@@ -609,7 +629,7 @@ Call ${handleDialog.name} to handle it before continuing.`);
     }
 
     if (this.#listInPageTools) {
-      structuredContent.inPageTools = data.inPageTools;
+      structuredContent.inPageTools = data.inPageTools ?? undefined;
       response.push('## In-page tools');
       if (!data.inPageTools) {
         response.push('No in-page tools installed.');

src/tools/ToolDefinition.ts

@@ -151,8 +151,8 @@ export type Context = Readonly<{
   uninstallExtension(id: string): Promise<void>;
   listExtensions(): InstalledExtension[];
   getExtension(id: string): InstalledExtension | undefined;
-  setInPageTools(toolGroup: ToolGroup|undefined): void;
-  getInPageTools(): ToolGroup|undefined;
+  setInPageTools(toolGroup: ToolGroup | null): void;
+  getInPageTools(): ToolGroup | null | undefined;
 }>;
 
 export function defineTool<Schema extends zod.ZodRawShape>(

src/tools/inPage.ts

@@ -28,25 +28,6 @@ declare global {
   }
 }
 
-async function getToolGroup(page: Page) {
-  return await page.evaluate(() => {
-    return new Promise<ToolGroup | undefined>(resolve => {
-      const event = new CustomEvent('devtoolstooldiscovery');
-      // @ts-expect-error adding custom property
-      event.respondWith = (toolGroup: ToolGroup) => {
-        window.__mcp_tool_group = toolGroup;
-        resolve(toolGroup);
-      };
-      window.dispatchEvent(event);
-      // TODO: replace with checking for existence of event listener?
-      // Can `respondWith` be called asynchronously?
-      setTimeout(() => {
-        resolve(undefined);
-      }, 0);
-    });
-  });
-}
-
 export const listInPageTools = defineTool({
   name: 'list_in_page_tools',
   description: `Lists all tools the page exposes for providing runtime information.`,
@@ -55,10 +36,7 @@ export const listInPageTools = defineTool({
     readOnlyHint: true,
   },
   schema: {},
-  handler: async (_request, response, context) => {
-    const page = context.getSelectedPage();
-    const toolGroup = await getToolGroup(page);
-    context.setInPageTools(toolGroup);
+  handler: async (_request, response, _context) => {
     response.setListInPageTools();
   },
 });
@@ -80,10 +58,10 @@ export const executeInPageTool = defineTool({
     const params = request.params.params ?? {};
 
     // Get tools from context
-    // const toolGroup = context.getInPageTools();
+    const toolGroup = context.getInPageTools();
     // Alternatively: get tools from page
-    const toolGroup = await getToolGroup(page);
-    context.setInPageTools(toolGroup);
+    // const toolGroup = await getToolGroup(page);
+    // context.setInPageTools(toolGroup);
     const tool = toolGroup?.tools.find(t => t.name === toolName);
     if (!tool) {
       throw new Error(`Tool ${toolName} not found`);

src/tools/pages.ts

@@ -19,8 +19,13 @@ export const listPages = defineTool({
     readOnlyHint: true,
   },
   schema: {},
-  handler: async (_request, response) => {
+  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();
+    }
   },
 });
 
@@ -46,6 +51,7 @@ export const selectPage = defineTool({
     const page = context.getPageById(request.params.pageId);
     context.selectPage(page);
     response.setIncludePages(true);
+    response.setListInPageTools();
     if (request.params.bringToFront) {
       await page.bringToFront();
     }
@@ -108,6 +114,7 @@ export const newPage = defineTool({
     );
 
     response.setIncludePages(true);
+    response.setListInPageTools();
   },
 });
 
@@ -257,6 +264,7 @@ export const navigatePage = defineTool({
     }
 
     response.setIncludePages(true);
+    response.setListInPageTools();
   },
 });