@mcp-b/chrome-devtools-mcp 0.12.0-beta.0

package/build/src/PageCollector.js

@@ -0,0 +1,283 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { createIssuesFromProtocolIssue, IssueAggregator, } from '../node_modules/chrome-devtools-frontend/mcp/mcp.js';
+import { FakeIssuesManager } from './DevtoolsUtils.js';
+import { logger } from './logger.js';
+function createIdGenerator() {
+    let i = 1;
+    return () => {
+        if (i === Number.MAX_SAFE_INTEGER) {
+            i = 0;
+        }
+        return i++;
+    };
+}
+export const stableIdSymbol = Symbol('stableIdSymbol');
+export class PageCollector {
+    #browser;
+    #listenersInitializer;
+    #listeners = new WeakMap();
+    #maxNavigationSaved = 3;
+    /**
+     * This maps a Page to a list of navigations with a sub-list
+     * of all collected resources.
+     * The newer navigations come first.
+     */
+    storage = new WeakMap();
+    constructor(browser, listeners) {
+        this.#browser = browser;
+        this.#listenersInitializer = listeners;
+    }
+    async init(pages) {
+        for (const page of pages) {
+            this.addPage(page);
+        }
+        this.#browser.on('targetcreated', this.#onTargetCreated);
+        this.#browser.on('targetdestroyed', this.#onTargetDestroyed);
+    }
+    dispose() {
+        this.#browser.off('targetcreated', this.#onTargetCreated);
+        this.#browser.off('targetdestroyed', this.#onTargetDestroyed);
+    }
+    #onTargetCreated = async (target) => {
+        const page = await target.page();
+        if (!page) {
+            return;
+        }
+        this.addPage(page);
+    };
+    #onTargetDestroyed = async (target) => {
+        const page = await target.page();
+        if (!page) {
+            return;
+        }
+        this.cleanupPageDestroyed(page);
+    };
+    addPage(page) {
+        this.#initializePage(page);
+    }
+    #initializePage(page) {
+        if (this.storage.has(page)) {
+            return;
+        }
+        const idGenerator = createIdGenerator();
+        const storedLists = [[]];
+        this.storage.set(page, storedLists);
+        const listeners = this.#listenersInitializer(value => {
+            const withId = value;
+            withId[stableIdSymbol] = idGenerator();
+            const navigations = this.storage.get(page) ?? [[]];
+            navigations[0].push(withId);
+        });
+        listeners['framenavigated'] = (frame) => {
+            // Only split the storage on main frame navigation
+            if (frame !== page.mainFrame()) {
+                return;
+            }
+            this.splitAfterNavigation(page);
+        };
+        for (const [name, listener] of Object.entries(listeners)) {
+            page.on(name, listener);
+        }
+        this.#listeners.set(page, listeners);
+    }
+    splitAfterNavigation(page) {
+        const navigations = this.storage.get(page);
+        if (!navigations) {
+            return;
+        }
+        // Add the latest navigation first
+        navigations.unshift([]);
+        navigations.splice(this.#maxNavigationSaved);
+    }
+    cleanupPageDestroyed(page) {
+        const listeners = this.#listeners.get(page);
+        if (listeners) {
+            for (const [name, listener] of Object.entries(listeners)) {
+                page.off(name, listener);
+            }
+        }
+        this.storage.delete(page);
+    }
+    getData(page, includePreservedData) {
+        const navigations = this.storage.get(page);
+        if (!navigations) {
+            return [];
+        }
+        if (!includePreservedData) {
+            return navigations[0];
+        }
+        const data = [];
+        for (let index = this.#maxNavigationSaved; index >= 0; index--) {
+            if (navigations[index]) {
+                data.push(...navigations[index]);
+            }
+        }
+        return data;
+    }
+    getIdForResource(resource) {
+        return resource[stableIdSymbol] ?? -1;
+    }
+    getById(page, stableId) {
+        const navigations = this.storage.get(page);
+        if (!navigations) {
+            throw new Error('No requests found for selected page');
+        }
+        const item = this.find(page, item => item[stableIdSymbol] === stableId);
+        if (item) {
+            return item;
+        }
+        throw new Error('Request not found for selected page');
+    }
+    find(page, filter) {
+        const navigations = this.storage.get(page);
+        if (!navigations) {
+            return;
+        }
+        for (const navigation of navigations) {
+            const item = navigation.find(filter);
+            if (item) {
+                return item;
+            }
+        }
+        return;
+    }
+}
+export class ConsoleCollector extends PageCollector {
+    #subscribedPages = new WeakMap();
+    addPage(page) {
+        super.addPage(page);
+        if (!this.#subscribedPages.has(page)) {
+            const subscriber = new PageIssueSubscriber(page);
+            this.#subscribedPages.set(page, subscriber);
+            void subscriber.subscribe();
+        }
+    }
+    cleanupPageDestroyed(page) {
+        super.cleanupPageDestroyed(page);
+        this.#subscribedPages.get(page)?.unsubscribe();
+        this.#subscribedPages.delete(page);
+    }
+}
+class PageIssueSubscriber {
+    #issueManager = new FakeIssuesManager();
+    #issueAggregator = new IssueAggregator(this.#issueManager);
+    #seenKeys = new Set();
+    #seenIssues = new Set();
+    #page;
+    #session;
+    constructor(page) {
+        this.#page = page;
+        // @ts-expect-error use existing CDP client (internal Puppeteer API).
+        this.#session = this.#page._client();
+    }
+    #resetIssueAggregator() {
+        this.#issueManager = new FakeIssuesManager();
+        if (this.#issueAggregator) {
+            this.#issueAggregator.removeEventListener("AggregatedIssueUpdated" /* IssueAggregatorEvents.AGGREGATED_ISSUE_UPDATED */, this.#onAggregatedissue);
+        }
+        this.#issueAggregator = new IssueAggregator(this.#issueManager);
+        this.#issueAggregator.addEventListener("AggregatedIssueUpdated" /* IssueAggregatorEvents.AGGREGATED_ISSUE_UPDATED */, this.#onAggregatedissue);
+    }
+    async subscribe() {
+        this.#resetIssueAggregator();
+        this.#page.on('framenavigated', this.#onFrameNavigated);
+        this.#session.on('Audits.issueAdded', this.#onIssueAdded);
+        try {
+            await this.#session.send('Audits.enable');
+        }
+        catch (error) {
+            logger('Error subscribing to issues', error);
+        }
+    }
+    unsubscribe() {
+        this.#seenKeys.clear();
+        this.#seenIssues.clear();
+        this.#page.off('framenavigated', this.#onFrameNavigated);
+        this.#session.off('Audits.issueAdded', this.#onIssueAdded);
+        if (this.#issueAggregator) {
+            this.#issueAggregator.removeEventListener("AggregatedIssueUpdated" /* IssueAggregatorEvents.AGGREGATED_ISSUE_UPDATED */, this.#onAggregatedissue);
+        }
+        void this.#session.send('Audits.disable').catch(() => {
+            // might fail.
+        });
+    }
+    #onAggregatedissue = (event) => {
+        if (this.#seenIssues.has(event.data)) {
+            return;
+        }
+        this.#seenIssues.add(event.data);
+        this.#page.emit('issue', event.data);
+    };
+    // On navigation, we reset issue aggregation.
+    #onFrameNavigated = (frame) => {
+        // Only split the storage on main frame navigation
+        if (frame !== frame.page().mainFrame()) {
+            return;
+        }
+        this.#seenKeys.clear();
+        this.#seenIssues.clear();
+        this.#resetIssueAggregator();
+    };
+    #onIssueAdded = (data) => {
+        try {
+            const inspectorIssue = data.issue;
+            // @ts-expect-error Types of protocol from Puppeteer and CDP are
+            // incomparable for InspectorIssueCode, one is union, other is enum.
+            const issue = createIssuesFromProtocolIssue(null, inspectorIssue)[0];
+            if (!issue) {
+                logger('No issue mapping for for the issue: ', inspectorIssue.code);
+                return;
+            }
+            const primaryKey = issue.primaryKey();
+            if (this.#seenKeys.has(primaryKey)) {
+                return;
+            }
+            this.#seenKeys.add(primaryKey);
+            this.#issueManager.dispatchEventToListeners("IssueAdded" /* IssuesManagerEvents.ISSUE_ADDED */, {
+                issue,
+                // @ts-expect-error We don't care that issues model is null
+                issuesModel: null,
+            });
+        }
+        catch (error) {
+            logger('Error creating a new issue', error);
+        }
+    };
+}
+export class NetworkCollector extends PageCollector {
+    constructor(browser, listeners = collect => {
+        return {
+            request: req => {
+                collect(req);
+            },
+        };
+    }) {
+        super(browser, listeners);
+    }
+    splitAfterNavigation(page) {
+        const navigations = this.storage.get(page) ?? [];
+        if (!navigations) {
+            return;
+        }
+        const requests = navigations[0];
+        const lastRequestIdx = requests.findLastIndex(request => {
+            return request.frame() === page.mainFrame()
+                ? request.isNavigationRequest()
+                : false;
+        });
+        // Keep all requests since the last navigation request including that
+        // navigation request itself.
+        // Keep the reference
+        if (lastRequestIdx !== -1) {
+            const fromCurrentNavigation = requests.splice(lastRequestIdx);
+            navigations.unshift(fromCurrentNavigation);
+        }
+        else {
+            navigations.unshift([]);
+        }
+    }
+}

package/build/src/WaitForHelper.js

@@ -0,0 +1,139 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { logger } from './logger.js';
+export class WaitForHelper {
+    #abortController = new AbortController();
+    #page;
+    #stableDomTimeout;
+    #stableDomFor;
+    #expectNavigationIn;
+    #navigationTimeout;
+    constructor(page, cpuTimeoutMultiplier, networkTimeoutMultiplier) {
+        this.#stableDomTimeout = 3000 * cpuTimeoutMultiplier;
+        this.#stableDomFor = 100 * cpuTimeoutMultiplier;
+        this.#expectNavigationIn = 100 * cpuTimeoutMultiplier;
+        this.#navigationTimeout = 3000 * networkTimeoutMultiplier;
+        this.#page = page;
+    }
+    /**
+     * A wrapper that executes a action and waits for
+     * a potential navigation, after which it waits
+     * for the DOM to be stable before returning.
+     */
+    async waitForStableDom() {
+        const stableDomObserver = await this.#page.evaluateHandle(timeout => {
+            let timeoutId;
+            function callback() {
+                clearTimeout(timeoutId);
+                timeoutId = setTimeout(() => {
+                    domObserver.resolver.resolve();
+                    domObserver.observer.disconnect();
+                }, timeout);
+            }
+            const domObserver = {
+                resolver: Promise.withResolvers(),
+                observer: new MutationObserver(callback),
+            };
+            // It's possible that the DOM is not gonna change so we
+            // need to start the timeout initially.
+            callback();
+            domObserver.observer.observe(document.body, {
+                childList: true,
+                subtree: true,
+                attributes: true,
+            });
+            return domObserver;
+        }, this.#stableDomFor);
+        this.#abortController.signal.addEventListener('abort', async () => {
+            try {
+                await stableDomObserver.evaluate(observer => {
+                    observer.observer.disconnect();
+                    observer.resolver.resolve();
+                });
+                await stableDomObserver.dispose();
+            }
+            catch {
+                // Ignored cleanup errors
+            }
+        });
+        return Promise.race([
+            stableDomObserver.evaluate(async (observer) => {
+                return await observer.resolver.promise;
+            }),
+            this.timeout(this.#stableDomTimeout).then(() => {
+                throw new Error('Timeout');
+            }),
+        ]);
+    }
+    async waitForNavigationStarted() {
+        // Currently Puppeteer does not have API
+        // For when a navigation is about to start
+        const navigationStartedPromise = new Promise(resolve => {
+            const listener = (event) => {
+                if ([
+                    'historySameDocument',
+                    'historyDifferentDocument',
+                    'sameDocument',
+                ].includes(event.navigationType)) {
+                    resolve(false);
+                    return;
+                }
+                resolve(true);
+            };
+            this.#page._client().on('Page.frameStartedNavigating', listener);
+            this.#abortController.signal.addEventListener('abort', () => {
+                resolve(false);
+                this.#page._client().off('Page.frameStartedNavigating', listener);
+            });
+        });
+        return await Promise.race([
+            navigationStartedPromise,
+            this.timeout(this.#expectNavigationIn).then(() => false),
+        ]);
+    }
+    timeout(time) {
+        return new Promise(res => {
+            const id = setTimeout(res, time);
+            this.#abortController.signal.addEventListener('abort', () => {
+                res();
+                clearTimeout(id);
+            });
+        });
+    }
+    async waitForEventsAfterAction(action) {
+        const navigationFinished = this.waitForNavigationStarted()
+            .then(navigationStated => {
+            if (navigationStated) {
+                return this.#page.waitForNavigation({
+                    timeout: this.#navigationTimeout,
+                    signal: this.#abortController.signal,
+                });
+            }
+            return;
+        })
+            .catch(error => logger(error));
+        try {
+            await action();
+        }
+        catch (error) {
+            // Clear up pending promises
+            this.#abortController.abort();
+            throw error;
+        }
+        try {
+            await navigationFinished;
+            // Wait for stable dom after navigation so we execute in
+            // the correct context
+            await this.waitForStableDom();
+        }
+        catch (error) {
+            logger(error);
+        }
+        finally {
+            this.#abortController.abort();
+        }
+    }
+}

package/build/src/browser.js

@@ -0,0 +1,134 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { logger } from './logger.js';
+import { puppeteer } from './third_party/index.js';
+let browser;
+function makeTargetFilter() {
+    const ignoredPrefixes = new Set([
+        'chrome://',
+        'chrome-extension://',
+        'chrome-untrusted://',
+    ]);
+    return function targetFilter(target) {
+        if (target.url() === 'chrome://newtab/') {
+            return true;
+        }
+        // Could be the only page opened in the browser.
+        if (target.url().startsWith('chrome://inspect')) {
+            return true;
+        }
+        for (const prefix of ignoredPrefixes) {
+            if (target.url().startsWith(prefix)) {
+                return false;
+            }
+        }
+        return true;
+    };
+}
+export async function ensureBrowserConnected(options) {
+    if (browser?.connected) {
+        return browser;
+    }
+    const connectOptions = {
+        targetFilter: makeTargetFilter(),
+        defaultViewport: null,
+        handleDevToolsAsPage: true,
+    };
+    if (options.wsEndpoint) {
+        connectOptions.browserWSEndpoint = options.wsEndpoint;
+        if (options.wsHeaders) {
+            connectOptions.headers = options.wsHeaders;
+        }
+    }
+    else if (options.browserURL) {
+        connectOptions.browserURL = options.browserURL;
+    }
+    else {
+        throw new Error('Either browserURL or wsEndpoint must be provided');
+    }
+    logger('Connecting Puppeteer to ', JSON.stringify(connectOptions));
+    browser = await puppeteer.connect(connectOptions);
+    logger('Connected Puppeteer');
+    return browser;
+}
+export async function launch(options) {
+    const { channel, executablePath, headless, isolated } = options;
+    const profileDirName = channel && channel !== 'stable'
+        ? `chrome-profile-${channel}`
+        : 'chrome-profile';
+    let userDataDir = options.userDataDir;
+    if (!isolated && !userDataDir) {
+        userDataDir = path.join(os.homedir(), '.cache', 'chrome-devtools-mcp', profileDirName);
+        await fs.promises.mkdir(userDataDir, {
+            recursive: true,
+        });
+    }
+    const args = [
+        ...(options.args ?? []),
+        '--hide-crash-restore-bubble',
+    ];
+    if (headless) {
+        args.push('--screen-info={3840x2160}');
+    }
+    let puppeteerChannel;
+    if (options.devtools) {
+        args.push('--auto-open-devtools-for-tabs');
+    }
+    if (!executablePath) {
+        puppeteerChannel =
+            channel && channel !== 'stable'
+                ? `chrome-${channel}`
+                : 'chrome';
+    }
+    try {
+        const browser = await puppeteer.launch({
+            channel: puppeteerChannel,
+            targetFilter: makeTargetFilter(),
+            executablePath,
+            defaultViewport: null,
+            userDataDir,
+            pipe: true,
+            headless,
+            args,
+            acceptInsecureCerts: options.acceptInsecureCerts,
+            handleDevToolsAsPage: true,
+        });
+        if (options.logFile) {
+            // FIXME: we are probably subscribing too late to catch startup logs. We
+            // should expose the process earlier or expose the getRecentLogs() getter.
+            browser.process()?.stderr?.pipe(options.logFile);
+            browser.process()?.stdout?.pipe(options.logFile);
+        }
+        if (options.viewport) {
+            const [page] = await browser.pages();
+            // @ts-expect-error internal API for now.
+            await page?.resize({
+                contentWidth: options.viewport.width,
+                contentHeight: options.viewport.height,
+            });
+        }
+        return browser;
+    }
+    catch (error) {
+        if (userDataDir &&
+            error.message.includes('The browser is already running')) {
+            throw new Error(`The browser is already running for ${userDataDir}. Use --isolated to run multiple browser instances.`, {
+                cause: error,
+            });
+        }
+        throw error;
+    }
+}
+export async function ensureBrowserLaunched(options) {
+    if (browser?.connected) {
+        return browser;
+    }
+    browser = await launch(options);
+    return browser;
+}