feat: Support filtering network request by resource type

Author: OzTamir

src/McpResponse.ts

@@ -7,28 +7,32 @@ import type {
   ImageContent,
   TextContent,
 } from '@modelcontextprotocol/sdk/types.js';
+import type { ResourceType } from 'puppeteer-core';
 
-import {formatConsoleEvent} from './formatters/consoleFormatter.js';
+import { formatConsoleEvent } from './formatters/consoleFormatter.js';
 import {
   getFormattedHeaderValue,
   getShortDescriptionForRequest,
   getStatusFromRequest,
 } from './formatters/networkFormatter.js';
-import {formatA11ySnapshot} from './formatters/snapshotFormatter.js';
-import type {McpContext} from './McpContext.js';
-import type {ImageContentData, Response} from './tools/ToolDefinition.js';
-import {paginate, type PaginationOptions} from './utils/pagination.js';
+import { formatA11ySnapshot } from './formatters/snapshotFormatter.js';
+import type { McpContext } from './McpContext.js';
+import type { ImageContentData, Response } from './tools/ToolDefinition.js';
+import { paginate, type PaginationOptions } from './utils/pagination.js';
 
 export class McpResponse implements Response {
   #includePages = false;
   #includeSnapshot = false;
-  #includeNetworkRequests = false;
   #attachedNetworkRequestUrl?: string;
   #includeConsoleData = false;
   #textResponseLines: string[] = [];
   #formattedConsoleData?: string[];
   #images: ImageContentData[] = [];
-  #networkRequestsPaginationOptions?: PaginationOptions;
+  #networkRequestsOptions?: {
+    include: boolean;
+    pagination?: PaginationOptions;
+    resourceTypes?: ResourceType[];
+  };
 
   setIncludePages(value: boolean): void {
     this.#includePages = value;
@@ -40,17 +44,20 @@ export class McpResponse implements Response {
 
   setIncludeNetworkRequests(
     value: boolean,
-    options?: {pageSize?: number; pageIdx?: number},
+    options?: { pageSize?: number; pageIdx?: number; resourceTypes?: ResourceType[] },
   ): void {
-    this.#includeNetworkRequests = value;
-    if (!value || !options) {
-      this.#networkRequestsPaginationOptions = undefined;
+    if (!value) {
+      this.#networkRequestsOptions = undefined;
       return;
     }
 
-    this.#networkRequestsPaginationOptions = {
-      pageSize: options.pageSize,
-      pageIdx: options.pageIdx,
+    this.#networkRequestsOptions = {
+      include: value,
+      pagination: options?.pageSize || options?.pageIdx ? {
+        pageSize: options.pageSize,
+        pageIdx: options.pageIdx,
+      } : undefined,
+      resourceTypes: options?.resourceTypes,
     };
   }
 
@@ -67,7 +74,7 @@ export class McpResponse implements Response {
   }
 
   get includeNetworkRequests(): boolean {
-    return this.#includeNetworkRequests;
+    return this.#networkRequestsOptions?.include ?? false;
   }
 
   get includeConsoleData(): boolean {
@@ -77,7 +84,7 @@ export class McpResponse implements Response {
     return this.#attachedNetworkRequestUrl;
   }
   get networkRequestsPageIdx(): number | undefined {
-    return this.#networkRequestsPaginationOptions?.pageIdx;
+    return this.#networkRequestsOptions?.pagination?.pageIdx;
   }
 
   appendResponseLine(value: string): void {
@@ -179,25 +186,35 @@ Call browser_handle_dialog to handle it before continuing.`);
 
     response.push(...this.#getIncludeNetworkRequestsData(context));
 
-    if (this.#includeNetworkRequests) {
-      const requests = context.getNetworkRequests();
+    if (this.#networkRequestsOptions?.include) {
+      let requests = context.getNetworkRequests();
+
+      // Apply resource type filtering if specified
+      if (this.#networkRequestsOptions.resourceTypes) {
+        const normalizedTypes = new Set(this.#networkRequestsOptions.resourceTypes);
+        requests = requests.filter(request => {
+          const type = request.resourceType();
+          return normalizedTypes.has(type);
+        });
+      }
+
       response.push('## Network requests');
       if (requests.length) {
         const paginationResult = paginate(
           requests,
-          this.#networkRequestsPaginationOptions,
+          this.#networkRequestsOptions.pagination,
         );
         if (paginationResult.invalidPage) {
           response.push('Invalid page number provided. Showing first page.');
         }
 
-        const {startIndex, endIndex, currentPage, totalPages} =
+        const { startIndex, endIndex, currentPage, totalPages } =
           paginationResult;
         response.push(
           `Showing ${startIndex + 1}-${endIndex} of ${requests.length} (Page ${currentPage + 1} of ${totalPages}).`,
         );
 
-        if (this.#networkRequestsPaginationOptions) {
+        if (this.#networkRequestsOptions.pagination) {
           if (paginationResult.hasNextPage) {
             response.push(`Next page: ${currentPage + 1}`);
           }

src/tools/ToolDefinition.ts

@@ -4,12 +4,12 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import type {Dialog, ElementHandle, Page} from 'puppeteer-core';
+import type { Dialog, ElementHandle, Page } from 'puppeteer-core';
 import type z from 'zod';
 
-import type {TraceResult} from '../trace-processing/parse.js';
+import type { TraceResult } from '../trace-processing/parse.js';
 
-import type {ToolCategories} from './categories.js';
+import type { ToolCategories } from './categories.js';
 
 export interface ToolDefinition<Schema extends z.ZodRawShape = z.ZodRawShape> {
   name: string;
@@ -44,7 +44,7 @@ export interface Response {
   setIncludePages(value: boolean): void;
   setIncludeNetworkRequests(
     value: boolean,
-    options?: {pageSize?: number; pageIdx?: number},
+    options?: { pageSize?: number; pageIdx?: number; resourceTypes?: string[] },
   ): void;
   setIncludeConsoleData(value: boolean): void;
   setIncludeSnapshot(value: boolean): void;
@@ -73,7 +73,7 @@ export type Context = Readonly<{
   saveTemporaryFile(
     data: Uint8Array<ArrayBufferLike>,
     mimeType: 'image/png' | 'image/jpeg',
-  ): Promise<{filename: string}>;
+  ): Promise<{ filename: string }>;
   waitForEventsAfterAction(action: () => Promise<unknown>): Promise<void>;
 }>;
 

src/tools/network.ts

@@ -4,10 +4,33 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import type { ResourceType } from 'puppeteer-core';
 import z from 'zod';
 
-import {ToolCategories} from './categories.js';
-import {defineTool} from './ToolDefinition.js';
+import { ToolCategories } from './categories.js';
+import { defineTool } from './ToolDefinition.js';
+
+export const FILTERABLE_RESOURCE_TYPES = [
+  'document',
+  'stylesheet',
+  'image',
+  'media',
+  'font',
+  'script',
+  'texttrack',
+  'xhr',
+  'fetch',
+  'prefetch',
+  'eventsource',
+  'websocket',
+  'manifest',
+  'signedexchange',
+  'ping',
+  'cspviolationreport',
+  'preflight',
+  'fedcm',
+  'other',
+] as const satisfies readonly ResourceType[];
 
 export const listNetworkRequests = defineTool({
   name: 'list_network_requests',
@@ -33,11 +56,18 @@ export const listNetworkRequests = defineTool({
       .describe(
         'Page number to return (0-based). When omitted, returns the first page.',
       ),
+    resourceType: z
+      .array(z.enum(FILTERABLE_RESOURCE_TYPES as any))
+      .optional()
+      .describe(
+        'Filter requests by resource type. When omitted, returns all requests.',
+      ),
   },
   handler: async (request, response) => {
     response.setIncludeNetworkRequests(true, {
       pageSize: request.params.pageSize,
       pageIdx: request.params.pageIdx,
+      resourceTypes: request.params.resourceType,
     });
   },
 });

tests/utils.ts

@@ -5,20 +5,20 @@
  */
 
 import logger from 'debug';
-import type {Browser} from 'puppeteer';
+import type { Browser } from 'puppeteer';
 import puppeteer from 'puppeteer';
-import type {HTTPRequest, HTTPResponse} from 'puppeteer-core';
+import type { HTTPRequest, HTTPResponse } from 'puppeteer-core';
 
-import {McpContext} from '../src/McpContext.js';
-import {McpResponse} from '../src/McpResponse.js';
+import { McpContext } from '../src/McpContext.js';
+import { McpResponse } from '../src/McpResponse.js';
 
 let browser: Browser | undefined;
 
 export async function withBrowser(
   cb: (response: McpResponse, context: McpContext) => Promise<void>,
-  options: {debug?: boolean} = {},
+  options: { debug?: boolean } = {},
 ) {
-  const {debug = false} = options;
+  const { debug = false } = options;
   if (!browser) {
     browser = await puppeteer.launch({
       executablePath: process.env.PUPPETEER_EXECUTABLE_PATH,
@@ -46,6 +46,7 @@ export function getMockRequest(
     method?: string;
     response?: HTTPResponse;
     failure?: HTTPRequest['failure'];
+    resourceType?: string;
   } = {},
 ): HTTPRequest {
   return {
@@ -61,6 +62,9 @@ export function getMockRequest(
     failure() {
       return options.failure?.() ?? null;
     },
+    resourceType() {
+      return options.resourceType ?? 'document';
+    },
     headers(): Record<string, string> {
       return {
         'content-size': '10',