chrome-devtools-mcp 0.19.0 → 0.20.1

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>
 
@@ -228,10 +228,18 @@ Configure the following fields and press `CTRL+S` to save the configuration:
 Follow the MCP install <a href="https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_add-an-mcp-server">guide</a>,
 with the standard config from above. You can also install the Chrome DevTools MCP server using the VS Code CLI:
 
+For macOS and Linux:
+
 ```bash
 code --add-mcp '{"name":"io.github.ChromeDevTools/chrome-devtools-mcp","command":"npx","args":["-y","chrome-devtools-mcp"],"env":{}}'
 ```
 
+For Windows (PowerShell):
+
+```powershell
+code --add-mcp '{"""name""":"""io.github.ChromeDevTools/chrome-devtools-mcp""","""command""":"""npx""","""args""":["""-y""","""chrome-devtools-mcp"""]}'
+```
+
 </details>
 
 <details>
@@ -358,7 +366,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/DevtoolsUtils.js

@@ -6,52 +6,6 @@
 import { PuppeteerDevToolsConnection } from './DevToolsConnectionAdapter.js';
 import { Mutex } from './Mutex.js';
 import { DevTools } from './third_party/index.js';
-export function extractUrlLikeFromDevToolsTitle(title) {
-    const match = title.match(new RegExp(`DevTools - (.*)`));
-    return match?.[1] ?? undefined;
-}
-export function urlsEqual(url1, url2) {
-    const normalizedUrl1 = normalizeUrl(url1);
-    const normalizedUrl2 = normalizeUrl(url2);
-    return normalizedUrl1 === normalizedUrl2;
-}
-/**
- * For the sake of the MCP server, when we determine if two URLs are equal we
- * remove some parts:
- *
- * 1. We do not care about the protocol.
- * 2. We do not care about trailing slashes.
- * 3. We do not care about "www".
- * 4. We ignore the hash parts.
- *
- * For example, if the user types "record a trace on foo.com", we would want to
- * match a tab in the connected Chrome instance that is showing "www.foo.com/"
- */
-function normalizeUrl(url) {
-    let result = url.trim();
-    // Remove protocols
-    if (result.startsWith('https://')) {
-        result = result.slice(8);
-    }
-    else if (result.startsWith('http://')) {
-        result = result.slice(7);
-    }
-    // Remove 'www.'. This ensures that we find the right URL regardless of if the user adds `www` or not.
-    if (result.startsWith('www.')) {
-        result = result.slice(4);
-    }
-    // We use target URLs to locate DevTools but those often do
-    // no include hash.
-    const hashIdx = result.lastIndexOf('#');
-    if (hashIdx !== -1) {
-        result = result.slice(0, hashIdx);
-    }
-    // Remove trailing slash
-    if (result.endsWith('/')) {
-        result = result.slice(0, -1);
-    }
-    return result;
-}
 /**
  * A mock implementation of an issues manager that only implements the methods
  * that are actually used by the IssuesAggregator

package/build/src/McpContext.js

@@ -5,7 +5,7 @@
  */
 import fs from 'node:fs/promises';
 import path from 'node:path';
-import { extractUrlLikeFromDevToolsTitle, UniverseManager, urlsEqual, } from './DevtoolsUtils.js';
+import { UniverseManager } from './DevtoolsUtils.js';
 import { McpPage } from './McpPage.js';
 import { NetworkCollector, ConsoleCollector } from './PageCollector.js';
 import { Locator } from './third_party/index.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) {
@@ -440,38 +467,18 @@ export class McpContext {
     async detectOpenDevToolsWindows() {
         this.logger('Detecting open DevTools windows');
         const { pages } = await this.#getAllPages();
-        // Clear all devToolsPage references before re-detecting.
-        for (const mcpPage of this.#mcpPages.values()) {
-            mcpPage.devToolsPage = undefined;
-        }
-        for (const devToolsPage of pages) {
-            if (devToolsPage.url().startsWith('devtools://')) {
-                try {
-                    this.logger('Calling getTargetInfo for ' + devToolsPage.url());
-                    const data = await devToolsPage
-                        // @ts-expect-error no types for _client().
-                        ._client()
-                        .send('Target.getTargetInfo');
-                    const devtoolsPageTitle = data.targetInfo.title;
-                    const urlLike = extractUrlLikeFromDevToolsTitle(devtoolsPageTitle);
-                    if (!urlLike) {
-                        continue;
-                    }
-                    // TODO: lookup without a loop.
-                    for (const page of this.#pages) {
-                        if (urlsEqual(page.url(), urlLike)) {
-                            const mcpPage = this.#mcpPages.get(page);
-                            if (mcpPage) {
-                                mcpPage.devToolsPage = devToolsPage;
-                            }
-                        }
-                    }
-                }
-                catch (error) {
-                    this.logger('Issue occurred while trying to find DevTools', error);
-                }
+        await Promise.all(pages.map(async (page) => {
+            const mcpPage = this.#mcpPages.get(page);
+            if (!mcpPage) {
+                return;
             }
-        }
+            if (await page.hasDevTools()) {
+                mcpPage.devToolsPage = await page.openDevTools();
+            }
+            else {
+                mcpPage.devToolsPage = undefined;
+            }
+        }));
     }
     getExtensionServiceWorkers() {
         return this.#extensionServiceWorkers;

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;
+}