@nimbus21.ai/chrome-devtools-mcp 0.12.3 → 0.17.4

package/build/src/McpContext.js

@@ -6,12 +6,13 @@
 import fs from 'node:fs/promises';
 import os from 'node:os';
 import path from 'node:path';
-import { extractUrlLikeFromDevToolsTitle, urlsEqual } from './DevtoolsUtils.js';
+import { extractUrlLikeFromDevToolsTitle, UniverseManager, urlsEqual, } from './DevtoolsUtils.js';
 import { NetworkCollector, ConsoleCollector } from './PageCollector.js';
 import { Locator } from './third_party/index.js';
 import { listPages } from './tools/pages.js';
 import { takeSnapshot } from './tools/snapshot.js';
 import { CLOSE_PAGE_ERROR } from './tools/ToolDefinition.js';
+import { ExtensionRegistry, } from './utils/ExtensionRegistry.js';
 import { WaitForHelper } from './WaitForHelper.js';
 const DEFAULT_TIMEOUT = 5_000;
 const NAVIGATION_TIMEOUT = 10_000;
@@ -51,15 +52,23 @@ export class McpContext {
     #textSnapshot = null;
     #networkCollector;
     #consoleCollector;
+    #devtoolsUniverseManager;
+    #extensionRegistry = new ExtensionRegistry();
     #isRunningTrace = false;
     #networkConditionsMap = new WeakMap();
     #cpuThrottlingRateMap = new WeakMap();
     #geolocationMap = new WeakMap();
+    #viewportMap = new WeakMap();
+    #userAgentMap = new WeakMap();
+    #colorSchemeMap = new WeakMap();
     #dialog;
+    #pageIdMap = new WeakMap();
+    #nextPageId = 1;
     #nextSnapshotId = 1;
     #traceResults = [];
     #locatorClass;
     #options;
+    #uniqueBackendNodeIdToMcpId = new Map();
     constructor(browser, logger, options, locatorClass) {
         this.browser = browser;
         this.logger = logger;
@@ -71,30 +80,26 @@ export class McpContext {
                 console: event => {
                     collect(event);
                 },
-                pageerror: event => {
-                    if (event instanceof Error) {
-                        collect(event);
-                    }
-                    else {
-                        const error = new Error(`${event}`);
-                        error.stack = undefined;
-                        collect(error);
-                    }
+                uncaughtError: event => {
+                    collect(event);
                 },
                 issue: event => {
                     collect(event);
                 },
             };
         });
+        this.#devtoolsUniverseManager = new UniverseManager(this.browser);
     }
     async #init() {
         const pages = await this.createPagesSnapshot();
         await this.#networkCollector.init(pages);
         await this.#consoleCollector.init(pages);
+        await this.#devtoolsUniverseManager.init(pages);
     }
     dispose() {
         this.#networkCollector.dispose();
         this.#consoleCollector.dispose();
+        this.#devtoolsUniverseManager.dispose();
     }
     static async from(browser, logger, opts, 
     /* Let tests use unbundled Locator class to avoid overly strict checks within puppeteer that fail when mixing bundled and unbundled class instances */
@@ -149,25 +154,28 @@ export class McpContext {
         const page = this.getSelectedPage();
         return this.#consoleCollector.getData(page, includePreservedMessages);
     }
+    getDevToolsUniverse() {
+        return this.#devtoolsUniverseManager.get(this.getSelectedPage());
+    }
     getConsoleMessageStableId(message) {
         return this.#consoleCollector.getIdForResource(message);
     }
     getConsoleMessageById(id) {
         return this.#consoleCollector.getById(this.getSelectedPage(), id);
     }
-    async newPage() {
-        const page = await this.browser.newPage();
+    async newPage(background) {
+        const page = await this.browser.newPage({ background });
         await this.createPagesSnapshot();
         this.selectPage(page);
         this.#networkCollector.addPage(page);
         this.#consoleCollector.addPage(page);
         return page;
     }
-    async closePage(pageIdx) {
+    async closePage(pageId) {
         if (this.#pages.length === 1) {
             throw new Error(CLOSE_PAGE_ERROR);
         }
-        const page = this.getPageByIdx(pageIdx);
+        const page = this.getPageById(pageId);
         await page.close({ runBeforeUnload: false });
     }
     getNetworkRequestById(reqid) {
@@ -209,12 +217,54 @@ export class McpContext {
         const page = this.getSelectedPage();
         return this.#geolocationMap.get(page) ?? null;
     }
+    setViewport(viewport) {
+        const page = this.getSelectedPage();
+        if (viewport === null) {
+            this.#viewportMap.delete(page);
+        }
+        else {
+            this.#viewportMap.set(page, viewport);
+        }
+    }
+    getViewport() {
+        const page = this.getSelectedPage();
+        return this.#viewportMap.get(page) ?? null;
+    }
+    setUserAgent(userAgent) {
+        const page = this.getSelectedPage();
+        if (userAgent === null) {
+            this.#userAgentMap.delete(page);
+        }
+        else {
+            this.#userAgentMap.set(page, userAgent);
+        }
+    }
+    getUserAgent() {
+        const page = this.getSelectedPage();
+        return this.#userAgentMap.get(page) ?? null;
+    }
+    setColorScheme(scheme) {
+        const page = this.getSelectedPage();
+        if (scheme === null) {
+            this.#colorSchemeMap.delete(page);
+        }
+        else {
+            this.#colorSchemeMap.set(page, scheme);
+        }
+    }
+    getColorScheme() {
+        const page = this.getSelectedPage();
+        return this.#colorSchemeMap.get(page) ?? null;
+    }
     setIsRunningPerformanceTrace(x) {
         this.#isRunningTrace = x;
     }
     isRunningPerformanceTrace() {
         return this.#isRunningTrace;
     }
+    isCruxEnabled() {
+        return this.#options.performanceCrux;
+    }
     getDialog() {
         return this.#dialog;
     }
@@ -231,14 +281,16 @@ export class McpContext {
         }
         return page;
     }
-    getPageByIdx(idx) {
-        const pages = this.#pages;
-        const page = pages[idx];
+    getPageById(pageId) {
+        const page = this.#pages.find(p => this.#pageIdMap.get(p) === pageId);
         if (!page) {
             throw new Error('No page found');
         }
         return page;
     }
+    getPageId(page) {
+        return this.#pageIdMap.get(page);
+    }
     #dialogHandler = (dialog) => {
         this.#dialog = dialog;
     };
@@ -283,25 +335,34 @@ export class McpContext {
         if (!this.#textSnapshot?.idToNode.size) {
             throw new Error(`No snapshot found. Use ${takeSnapshot.name} to capture one.`);
         }
-        const [snapshotId] = uid.split('_');
-        if (this.#textSnapshot.snapshotId !== snapshotId) {
-            throw new Error('This uid is coming from a stale snapshot. Call take_snapshot to get a fresh snapshot.');
-        }
         const node = this.#textSnapshot?.idToNode.get(uid);
         if (!node) {
-            throw new Error('No such element found in the snapshot');
+            throw new Error('No such element found in the snapshot.');
         }
-        const handle = await node.elementHandle();
-        if (!handle) {
-            throw new Error('No such element found in the snapshot');
+        const message = `Element with uid ${uid} no longer exists on the page.`;
+        try {
+            const handle = await node.elementHandle();
+            if (!handle) {
+                throw new Error(message);
+            }
+            return handle;
+        }
+        catch (error) {
+            throw new Error(message, {
+                cause: error,
+            });
         }
-        return handle;
     }
     /**
      * Creates a snapshot of the pages.
      */
     async createPagesSnapshot() {
         const allPages = await this.browser.pages(this.#options.experimentalIncludeAllPages);
+        for (const page of allPages) {
+            if (!this.#pageIdMap.has(page)) {
+                this.#pageIdMap.set(page, this.#nextPageId++);
+            }
+        }
         this.#pages = allPages.filter(page => {
             // If we allow debugging DevTools windows, return all pages.
             // If we are in regular mode, the user should only see non-DevTools page.
@@ -396,10 +457,24 @@ export class McpContext {
         // will be used for the tree serialization and mapping ids back to nodes.
         let idCounter = 0;
         const idToNode = new Map();
+        const seenUniqueIds = new Set();
         const assignIds = (node) => {
+            let id = '';
+            // @ts-expect-error untyped loaderId & backendNodeId.
+            const uniqueBackendId = `${node.loaderId}_${node.backendNodeId}`;
+            if (this.#uniqueBackendNodeIdToMcpId.has(uniqueBackendId)) {
+                // Re-use MCP exposed ID if the uniqueId is the same.
+                id = this.#uniqueBackendNodeIdToMcpId.get(uniqueBackendId);
+            }
+            else {
+                // Only generate a new ID if we have not seen the node before.
+                id = `${snapshotId}_${idCounter++}`;
+                this.#uniqueBackendNodeIdToMcpId.set(uniqueBackendId, id);
+            }
+            seenUniqueIds.add(uniqueBackendId);
             const nodeWithId = {
                 ...node,
-                id: `${snapshotId}_${idCounter++}`,
+                id,
                 children: node.children
                     ? node.children.map(child => assignIds(child))
                     : [],
@@ -428,6 +503,12 @@ export class McpContext {
             this.#textSnapshot.hasSelectedElement = true;
             this.#textSnapshot.selectedElementUid = this.resolveCdpElementId(data?.cdpBackendNodeId);
         }
+        // Clean up unique IDs that we did not see anymore.
+        for (const key of this.#uniqueBackendNodeIdToMcpId.keys()) {
+            if (!seenUniqueIds.has(key)) {
+                this.#uniqueBackendNodeIdToMcpId.delete(key);
+            }
+        }
     }
     getTextSnapshot() {
         return this.#textSnapshot;
@@ -456,6 +537,8 @@ export class McpContext {
         }
     }
     storeTraceRecording(result) {
+        // Clear the trace results because we only consume the latest trace currently.
+        this.#traceResults = [];
         this.#traceResults.push(result);
     }
     recordedTraces() {
@@ -464,12 +547,12 @@ export class McpContext {
     getWaitForHelper(page, cpuMultiplier, networkMultiplier) {
         return new WaitForHelper(page, cpuMultiplier, networkMultiplier);
     }
-    waitForEventsAfterAction(action) {
+    waitForEventsAfterAction(action, options) {
         const page = this.getSelectedPage();
         const cpuMultiplier = this.getCpuThrottlingRate();
         const networkMultiplier = getNetworkMultiplierFromString(this.getNetworkConditions());
         const waitForHelper = this.getWaitForHelper(page, cpuMultiplier, networkMultiplier);
-        return waitForHelper.waitForEventsAfterAction(action);
+        return waitForHelper.waitForEventsAfterAction(action, options);
     }
     getNetworkRequestStableId(request) {
         return this.#networkCollector.getIdForResource(request);
@@ -502,4 +585,19 @@ export class McpContext {
         });
         await this.#networkCollector.init(await this.browser.pages());
     }
+    async installExtension(extensionPath) {
+        const id = await this.browser.installExtension(extensionPath);
+        await this.#extensionRegistry.registerExtension(id, extensionPath);
+        return id;
+    }
+    async uninstallExtension(id) {
+        await this.browser.uninstallExtension(id);
+        this.#extensionRegistry.remove(id);
+    }
+    listExtensions() {
+        return this.#extensionRegistry.list();
+    }
+    getExtension(id) {
+        return this.#extensionRegistry.getById(id);
+    }
 }