Merge branch 'main' of github.com:ChromeDevTools/chrome-devtools-mcp into webmcp

Author: beaufortfrancois

.github/workflows/publish-to-npm-on-tag.yml

@@ -36,10 +36,6 @@ jobs:
           node-version-file: '.nvmrc'
           registry-url: 'https://registry.npmjs.org'
 
-      # Ensure npm 11.5.1 or later is installed
-      - name: Update npm
-        run: npm install -g npm@latest
-
       - name: Install dependencies
         run: npm ci
 

.nvmrc

@@ -1 +1 @@
-v22
+v24

README.md

@@ -1,11 +1,12 @@
-# Chrome DevTools MCP
+# Chrome DevTools for Agents
 
 [![npm chrome-devtools-mcp package](https://img.shields.io/npm/v/chrome-devtools-mcp.svg)](https://npmjs.org/package/chrome-devtools-mcp)
 
-`chrome-devtools-mcp` lets your coding agent (such as Gemini, Claude, Cursor or Copilot)
+Chrome DevTools for Agents (`chrome-devtools-mcp`) lets your coding agent (such as Gemini, Claude, Cursor or Copilot)
 control and inspect a live Chrome browser. It acts as a Model-Context-Protocol
 (MCP) server, giving your AI coding assistant access to the full power of
 Chrome DevTools for reliable automation, in-depth debugging, and performance analysis.
+A [CLI](docs/cli.md) is also provided for use without MCP.
 
 ## [Tool reference](./docs/tool-reference.md) | [Changelog](./CHANGELOG.md) | [Contributing](./CONTRIBUTING.md) | [Troubleshooting](./docs/troubleshooting.md) | [Design Principles](./docs/design-principles.md)
 

SECURITY.md

@@ -1,3 +1,9 @@
 ## Security policy
 
 The Chrome DevTools MCP project takes security very seriously. Please use [Chromium’s process to report security issues](https://www.chromium.org/Home/chromium-security/reporting-security-bugs/).
+
+### Scope
+
+In general, it is the expectation that the AI agent or client using this MCP server validates any input before sending it. The server provides powerful capabilities for browser automation and inspection, and it is the responsibility of the calling agent to ensure these are used safely and as intended.
+
+Several tools in this project have the ability to perform actions such as writing files to disk (e.g., via browser downloads or screenshots) or dynamically loading Chrome extensions. These are intentional, documented features and are not vulnerabilities.

package-lock.json

@@ -60,7 +60,7 @@
     "@types/yargs": "^17.0.33",
     "@typescript-eslint/eslint-plugin": "^8.43.0",
     "@typescript-eslint/parser": "^8.43.0",
-    "chrome-devtools-frontend": "1.0.1611825",
+    "chrome-devtools-frontend": "1.0.1613625",
     "core-js": "3.49.0",
     "debug": "4.4.3",
     "eslint": "^9.35.0",
@@ -69,7 +69,7 @@
     "globals": "^17.0.0",
     "lighthouse": "13.1.0",
     "prettier": "^3.6.2",
-    "puppeteer": "24.40.0",
+    "puppeteer": "24.41.0",
     "rollup": "4.60.1",
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-license": "^3.6.0",

package.json

@@ -33,7 +33,11 @@ import {Locator} from './third_party/index.js';
 import {PredefinedNetworkConditions} from './third_party/index.js';
 import {listPages} from './tools/pages.js';
 import {CLOSE_PAGE_ERROR} from './tools/ToolDefinition.js';
-import type {Context, DevToolsData} from './tools/ToolDefinition.js';
+import type {
+  Context,
+  DevToolsData,
+  SupportedExtensions,
+} from './tools/ToolDefinition.js';
 import type {TraceResult} from './trace-processing/parse.js';
 import type {
   EmulationSettings,
@@ -46,7 +50,7 @@ import {
   ExtensionRegistry,
   type InstalledExtension,
 } from './utils/ExtensionRegistry.js';
-import {saveTemporaryFile} from './utils/files.js';
+import {ensureExtension, saveTemporaryFile} from './utils/files.js';
 import {getNetworkMultiplierFromString} from './WaitForHelper.js';
 
 interface McpContextOptions {
@@ -117,7 +121,7 @@ export class McpContext implements Context {
         uncaughtError: event => {
           collect(event);
         },
-        issue: event => {
+        devtoolsAggregatedIssue: event => {
           collect(event);
         },
       } as ListenerMap;
@@ -801,10 +805,14 @@ export class McpContext implements Context {
   }
   async saveFile(
     data: Uint8Array<ArrayBufferLike>,
-    filename: string,
+    clientProvidedFilePath: string,
+    extension: SupportedExtensions,
   ): Promise<{filename: string}> {
     try {
-      const filePath = path.resolve(filename);
+      const filePath = ensureExtension(
+        path.resolve(clientProvidedFilePath),
+        extension,
+      );
       await fs.mkdir(path.dirname(filePath), {recursive: true});
       await fs.writeFile(filePath, data);
       return {filename: filePath};

src/McpContext.ts

@@ -414,11 +414,12 @@ export class McpResponse implements Response {
       if (textSnapshot) {
         const formatter = new SnapshotFormatter(textSnapshot);
         if (this.#snapshotParams.filePath) {
-          await context.saveFile(
+          const result = await context.saveFile(
             new TextEncoder().encode(formatter.toString()),
             this.#snapshotParams.filePath,
+            '.txt',
           );
-          snapshot = this.#snapshotParams.filePath;
+          snapshot = result.filename;
         } else {
           snapshot = formatter;
         }
@@ -440,7 +441,8 @@ export class McpResponse implements Response {
         fetchData: true,
         requestFilePath: this.#attachedNetworkRequestOptions?.requestFilePath,
         responseFilePath: this.#attachedNetworkRequestOptions?.responseFilePath,
-        saveFile: (data, filename) => context.saveFile(data, filename),
+        saveFile: (data, filename, extension) =>
+          context.saveFile(data, filename, extension),
         redactNetworkHeaders: this.#redactNetworkHeaders,
       });
       detailedNetworkRequest = formatter;
@@ -590,7 +592,8 @@ export class McpResponse implements Response {
                 context.getNetworkRequestStableId(request) ===
                 this.#networkRequestsOptions?.networkRequestIdInDevToolsUI,
               fetchData: false,
-              saveFile: (data, filename) => context.saveFile(data, filename),
+              saveFile: (data, filename, extension) =>
+                context.saveFile(data, filename, extension),
               redactNetworkHeaders: this.#redactNetworkHeaders,
             }),
           ),

src/McpResponse.ts

@@ -11,6 +11,7 @@ import type {
   CDPSession,
   ConsoleMessage,
   Protocol,
+  Issue,
 } from './third_party/index.js';
 import {DevTools} from './third_party/index.js';
 import {
@@ -33,7 +34,7 @@ export class UncaughtError {
 }
 
 interface PageEvents extends PuppeteerPageEvents {
-  issue: DevTools.AggregatedIssue;
+  devtoolsAggregatedIssue: DevTools.AggregatedIssue;
   uncaughtError: UncaughtError;
 }
 
@@ -285,7 +286,7 @@ class PageEventSubscriber {
   async subscribe() {
     this.#resetIssueAggregator();
     this.#page.on('framenavigated', this.#onFrameNavigated);
-    this.#session.on('Audits.issueAdded', this.#onIssueAdded);
+    this.#page.on('issue', this.#onIssueAdded);
     this.#session.on('Runtime.exceptionThrown', this.#onExceptionThrown);
     try {
       await this.#session.send('Audits.enable');
@@ -298,7 +299,7 @@ class PageEventSubscriber {
     this.#seenKeys.clear();
     this.#seenIssues.clear();
     this.#page.off('framenavigated', this.#onFrameNavigated);
-    this.#session.off('Audits.issueAdded', this.#onIssueAdded);
+    this.#page.off('issue', this.#onIssueAdded);
     this.#session.off('Runtime.exceptionThrown', this.#onExceptionThrown);
     if (this.#issueAggregator) {
       this.#issueAggregator.removeEventListener(
@@ -318,7 +319,7 @@ class PageEventSubscriber {
       return;
     }
     this.#seenIssues.add(event.data);
-    this.#page.emit('issue', event.data);
+    this.#page.emit('devtoolsAggregatedIssue', event.data);
   };
 
   #onExceptionThrown = (event: Protocol.Runtime.ExceptionThrownEvent) => {
@@ -339,9 +340,8 @@ class PageEventSubscriber {
     this.#resetIssueAggregator();
   };
 
-  #onIssueAdded = (data: Protocol.Audits.IssueAddedEvent) => {
+  #onIssueAdded = (inspectorIssue: Issue) => {
     try {
-      const inspectorIssue = data.issue;
       const issue = DevTools.createIssuesFromProtocolIssue(
         null,
         // @ts-expect-error Protocol types diverge.

src/PageCollector.ts

@@ -24,6 +24,7 @@ export interface NetworkFormatterOptions {
   saveFile?: (
     data: Uint8Array<ArrayBufferLike>,
     filename: string,
+    extension: '.network-request' | '.network-response',
   ) => Promise<{filename: string}>;
   redactNetworkHeaders: boolean;
 }
@@ -88,11 +89,12 @@ export class NetworkFormatter {
           throw new Error('saveFile is not provided');
         }
         if (data) {
-          await this.#options.saveFile(
+          const result = await this.#options.saveFile(
             Buffer.from(data),
             this.#options.requestFilePath,
+            '.network-request',
           );
-          this.#requestBodyFilePath = this.#options.requestFilePath;
+          this.#requestBodyFilePath = result.filename;
         } else {
           this.#requestBody = requestBodyNotAvailableMessage;
         }
@@ -119,8 +121,12 @@ export class NetworkFormatter {
           if (!this.#options.saveFile) {
             throw new Error('saveFile is not provided');
           }
-          await this.#options.saveFile(buffer, this.#options.responseFilePath);
-          this.#responseBodyFilePath = this.#options.responseFilePath;
+          const result = await this.#options.saveFile(
+            buffer,
+            this.#options.responseFilePath,
+            '.network-response',
+          );
+          this.#responseBodyFilePath = result.filename;
         } catch {
           // Flatten error handling for buffer() failure and save failure
         }