chrome-devtools-mcp 0.19.0 → 0.20.0

package/README.md

@@ -122,7 +122,7 @@ To use the Chrome DevTools MCP server follow the instructions from <a href="http
 
 This will make the Chrome DevTools MCP server automatically connect to the browser that Antigravity is using. If you are not using port 9222, make sure to adjust accordingly.
 
-Chrome DevTools MCP will not start the browser instance automatically using this approach as as the Chrome DevTools MCP server runs in Antigravity's built-in browser. If the browser is not already running, you have to start it first by clicking the Chrome icon at the top right corner.
+Chrome DevTools MCP will not start the browser instance automatically using this approach because the Chrome DevTools MCP server connects to Antigravity's built-in browser. If the browser is not already running, you have to start it first by clicking the Chrome icon at the top right corner.
 
 </details>
 
@@ -358,7 +358,7 @@ Alternatively, follow the <a href="https://docs.qoder.com/user-guide/chat/model-
 <details>
   <summary>Qoder CLI</summary>
 
-Install the Chrome DevTools MCP server using the Qoder CLI (<a href="https://docs.qoder.com/cli/using-cli#mcp-servsers">guide</a>):
+Install the Chrome DevTools MCP server using the Qoder CLI (<a href="https://docs.qoder.com/cli/using-cli#mcp-servers">guide</a>):
 
 **Project wide:**
 

package/build/src/McpContext.js

@@ -49,6 +49,7 @@ export class McpContext {
     #isRunningTrace = false;
     #screenRecorderData = null;
     #nextPageId = 1;
+    #extensionPages = new WeakMap();
     #extensionServiceWorkerMap = new WeakMap();
     #nextExtensionServiceWorkerId = 1;
     #nextSnapshotId = 1;
@@ -411,6 +412,32 @@ export class McpContext {
     async #getAllPages() {
         const defaultCtx = this.browser.defaultBrowserContext();
         const allPages = await this.browser.pages(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();
         for (const [name, ctx] of this.#isolatedContexts) {

package/build/src/McpResponse.js

@@ -15,6 +15,7 @@ import { paginate } from './utils/pagination.js';
 export class McpResponse {
     #includePages = false;
     #includeExtensionServiceWorkers = false;
+    #includeExtensionPages = false;
     #snapshotParams;
     #attachedNetworkRequestId;
     #attachedNetworkRequestOptions;
@@ -47,6 +48,7 @@ export class McpResponse {
         this.#includePages = value;
         if (this.#args.categoryExtensions) {
             this.#includeExtensionServiceWorkers = value;
+            this.#includeExtensionPages = value;
         }
     }
     includeSnapshot(params) {
@@ -358,27 +360,45 @@ 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, 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`];
+                const structuredPages = [];
+                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}`);
+                    structuredPages.push(createStructuredPage(page, context));
+                }
+                response.push(...parts);
+                structuredContent.pages = structuredPages;
             }
-            response.push(...parts);
-            structuredContent.pages = context.getPages().map(page => {
-                const isolatedContextName = context.getIsolatedContextName(page);
-                const entry = {
-                    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`);
+                    const structuredExtensionPages = [];
+                    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}`);
+                        structuredExtensionPages.push(createStructuredPage(page, context));
+                    }
+                    structuredContent.extensionPages = structuredExtensionPages;
                 }
-                return entry;
-            });
+            }
         }
         if (this.#includeExtensionServiceWorkers) {
             if (context.getExtensionServiceWorkers().length) {
@@ -560,3 +580,15 @@ Call ${handleDialog.name} to handle it before continuing.`);
         this.#textResponseLines = [];
     }
 }
+function createStructuredPage(page, context) {
+    const isolatedContextName = context.getIsolatedContextName(page);
+    const entry = {
+        id: context.getPageId(page),
+        url: page.url(),
+        selected: context.isPageSelected(page),
+    };
+    if (isolatedContextName) {
+        entry.isolatedContext = isolatedContextName;
+    }
+    return entry;
+}