chrome-devtools-mcp 0.20.1 → 0.20.2

package/README.md

@@ -156,6 +156,9 @@ Then, install the plugin:
 
 Restart Claude Code to have the MCP server and skills load (check with `/skills`).
 
+> [!TIP]
+> If the plugin installation fails with a `Failed to clone repository` error (e.g., HTTPS connectivity issues behind a corporate firewall), see the [troubleshooting guide](./docs/troubleshooting.md#claude-code-plugin-installation-fails-with-failed-to-clone-repository) for workarounds, or use the CLI installation method above instead.
+
 </details>
 
 <details>

package/build/src/DevtoolsUtils.js

@@ -6,6 +6,52 @@
 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 { UniverseManager } from './DevtoolsUtils.js';
+import { extractUrlLikeFromDevToolsTitle, UniverseManager, urlsEqual, } from './DevtoolsUtils.js';
 import { McpPage } from './McpPage.js';
 import { NetworkCollector, ConsoleCollector } from './PageCollector.js';
 import { Locator } from './third_party/index.js';
@@ -467,18 +467,38 @@ export class McpContext {
     async detectOpenDevToolsWindows() {
         this.logger('Detecting open DevTools windows');
         const { pages } = await this.#getAllPages();
-        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;
+        // 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);
+                }
             }
-        }));
+        }
     }
     getExtensionServiceWorkers() {
         return this.#extensionServiceWorkers;

package/build/src/version.js

@@ -5,5 +5,5 @@
  */
 // If moved update release-please config
 // x-release-please-start-version
-export const VERSION = '0.20.1';
+export const VERSION = '0.20.2';
 // x-release-please-end

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chrome-devtools-mcp",
-  "version": "0.20.1",
+  "version": "0.20.2",
   "description": "MCP server for Chrome DevTools",
   "type": "module",
   "bin": {