refactor: connect to DevTools targets by default (#466)

in preparation for integration with DevTools, this PR moves the pages
filtering to the MCP context.

---------

Co-authored-by: Nikolay Vitkov <34244704+Lightning00Blade@users.noreply.github.com>

Author: OrKoN

src/McpContext.ts

@@ -39,6 +39,11 @@ export interface TextSnapshot {
   snapshotId: string;
 }
 
+interface McpContextOptions {
+  // Whether the DevTools windows are exposed as pages.
+  devtools: boolean;
+}
+
 const DEFAULT_TIMEOUT = 5_000;
 const NAVIGATION_TIMEOUT = 10_000;
 
@@ -92,15 +97,18 @@ export class McpContext implements Context {
   #traceResults: TraceResult[] = [];
 
   #locatorClass: typeof Locator;
+  #options: McpContextOptions;
 
   private constructor(
     browser: Browser,
     logger: Debugger,
+    options: McpContextOptions,
     locatorClass: typeof Locator,
   ) {
     this.browser = browser;
     this.logger = logger;
     this.#locatorClass = locatorClass;
+    this.#options = options;
 
     this.#networkCollector = new NetworkCollector(this.browser);
 
@@ -132,10 +140,11 @@ export class McpContext implements Context {
   static async from(
     browser: Browser,
     logger: Debugger,
+    opts: McpContextOptions,
     /* Let tests use unbundled Locator class to avoid overly strict checks within puppeteer that fail when mixing bundled and unbundled class instances */
     locatorClass: typeof Locator = Locator,
   ) {
-    const context = new McpContext(browser, logger, locatorClass);
+    const context = new McpContext(browser, logger, opts, locatorClass);
     await context.#init();
     return context;
   }
@@ -315,7 +324,12 @@ export class McpContext implements Context {
    * Creates a snapshot of the pages.
    */
   async createPagesSnapshot(): Promise<Page[]> {
-    this.#pages = await this.browser.pages();
+    this.#pages = (await this.browser.pages()).filter(page => {
+      if (page.url().startsWith('devtools://')) {
+        return this.#options.devtools;
+      }
+      return true;
+    });
     return this.#pages;
   }
 

src/browser.ts

@@ -18,16 +18,13 @@ import {puppeteer} from './third_party/index.js';
 
 let browser: Browser | undefined;
 
-function makeTargetFilter(devtools: boolean) {
+function makeTargetFilter() {
   const ignoredPrefixes = new Set([
     'chrome://',
     'chrome-extension://',
     'chrome-untrusted://',
   ]);
 
-  if (!devtools) {
-    ignoredPrefixes.add('devtools://');
-  }
   return function targetFilter(target: Target): boolean {
     if (target.url() === 'chrome://newtab/') {
       return true;
@@ -52,7 +49,7 @@ export async function ensureBrowserConnected(options: {
   }
 
   const connectOptions: Parameters<typeof puppeteer.connect>[0] = {
-    targetFilter: makeTargetFilter(options.devtools),
+    targetFilter: makeTargetFilter(),
     defaultViewport: null,
     handleDevToolsAsPage: options.devtools,
   };
@@ -129,7 +126,7 @@ export async function launch(options: McpLaunchOptions): Promise<Browser> {
   try {
     const browser = await puppeteer.launch({
       channel: puppeteerChannel,
-      targetFilter: makeTargetFilter(options.devtools),
+      targetFilter: makeTargetFilter(),
       executablePath,
       defaultViewport: null,
       userDataDir,

src/main.ts

@@ -81,7 +81,9 @@ async function getContext(): Promise<McpContext> {
         });
 
   if (context?.browser !== browser) {
-    context = await McpContext.from(browser, logger);
+    context = await McpContext.from(browser, logger, {
+      devtools,
+    });
   }
   return context;
 }

tests/utils.ts

@@ -36,7 +36,14 @@ export async function withBrowser(
     }),
   );
   const response = new McpResponse();
-  const context = await McpContext.from(browser, logger('test'), Locator);
+  const context = await McpContext.from(
+    browser,
+    logger('test'),
+    {
+      devtools: false,
+    },
+    Locator,
+  );
 
   await cb(response, context);
 }