@wordbricks/playwright-mcp 0.1.20 → 0.1.23

package/lib/context.js

@@ -1,309 +0,0 @@
-/**
- * Copyright (c) Microsoft Corporation.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import debug from 'debug';
-import { logUnhandledError } from './utils/log.js';
-import { Tab } from './tab.js';
-import { applyHooksToTools, hookRegistryMap } from './hooks/core.js';
-import { buildHookRegistry } from './hooks/registry.js';
-import { setEventStore, createEventStore } from './hooks/events.js';
-import { setupNetworkTracking } from './hooks/networkSetup.js';
-import { outputFile } from './config.js';
-import * as codegen from './utils/codegen.js';
-import { shouldBlockRequest } from './utils/adBlockFilter.js';
-const testDebug = debug('pw:mcp:test');
-const protocolPattern = /^[a-zA-Z][a-zA-Z0-9+.-]*:\/\//;
-const defaultPortForProtocol = (protocol) => {
-    if (protocol === 'http:')
-        return '80';
-    if (protocol === 'https:')
-        return '443';
-    return '';
-};
-const matchesOriginHost = (requestUrl, candidate) => {
-    const normalized = candidate.trim();
-    if (!normalized)
-        return false;
-    const hasProtocol = protocolPattern.test(normalized);
-    const parsed = (() => {
-        try {
-            return new URL(hasProtocol ? normalized : `http://${normalized}`);
-        }
-        catch {
-            return undefined;
-        }
-    })();
-    if (!parsed)
-        return false;
-    const candidateHost = parsed.hostname.toLowerCase().replace(/\.+$/, '');
-    if (!candidateHost)
-        return false;
-    const requestHost = requestUrl.hostname.toLowerCase();
-    if (requestHost !== candidateHost && !requestHost.endsWith(`.${candidateHost}`))
-        return false;
-    if (hasProtocol && parsed.protocol !== requestUrl.protocol)
-        return false;
-    if (parsed.port === '')
-        return true;
-    const candidatePort = parsed.port || defaultPortForProtocol(parsed.protocol);
-    if (!candidatePort)
-        return false;
-    const requestPort = requestUrl.port || defaultPortForProtocol(requestUrl.protocol);
-    return requestPort === candidatePort;
-};
-export class Context {
-    tools;
-    config;
-    sessionLog;
-    options;
-    _browserContextPromise;
-    _browserContextFactory;
-    _tabs = [];
-    _currentTab;
-    _clientInfo;
-    static _allContexts = new Set();
-    _closeBrowserContextPromise;
-    _isRunningTool = false;
-    _abortController = new AbortController();
-    constructor(options) {
-        // Set up hook registry and event store first
-        hookRegistryMap.set(this, buildHookRegistry());
-        setEventStore(this, createEventStore());
-        // Apply hooks to tools
-        this.tools = applyHooksToTools(options.tools, this);
-        this.config = options.config;
-        this.sessionLog = options.sessionLog;
-        this.options = options;
-        this._browserContextFactory = options.browserContextFactory;
-        this._clientInfo = options.clientInfo;
-        testDebug('create context');
-        Context._allContexts.add(this);
-    }
-    static async disposeAll() {
-        await Promise.all([...Context._allContexts].map(context => context.dispose()));
-    }
-    tabs() {
-        return this._tabs;
-    }
-    currentTab() {
-        return this._currentTab;
-    }
-    currentTabOrDie() {
-        if (!this._currentTab)
-            throw new Error('No open pages available. Use the "browser_navigate" tool to navigate to a page first.');
-        return this._currentTab;
-    }
-    async newTab() {
-        const { browserContext } = await this._ensureBrowserContext();
-        const page = await browserContext.newPage();
-        this._currentTab = this._tabs.find(t => t.page === page);
-        return this._currentTab;
-    }
-    async selectTab(index) {
-        const tab = this._tabs[index];
-        if (!tab)
-            throw new Error(`Tab ${index} not found`);
-        await tab.page.bringToFront();
-        this._currentTab = tab;
-        return tab;
-    }
-    async ensureTab() {
-        const { browserContext } = await this._ensureBrowserContext();
-        if (!this._currentTab)
-            await browserContext.newPage();
-        return this._currentTab;
-    }
-    async closeTab(index) {
-        const tab = index === undefined ? this._currentTab : this._tabs[index];
-        if (!tab)
-            throw new Error(`Tab ${index} not found`);
-        const url = tab.page.url();
-        await tab.page.close();
-        return url;
-    }
-    async outputFile(name) {
-        return outputFile(this.config, this._clientInfo.rootPath, name);
-    }
-    _onPageCreated(page) {
-        const tab = new Tab(this, page, tab => this._onPageClosed(tab));
-        this._tabs.push(tab);
-        if (!this._currentTab)
-            this._currentTab = tab;
-        // Set up network tracking via hooks system
-        setupNetworkTracking(this, page);
-    }
-    _onPageClosed(tab) {
-        const index = this._tabs.indexOf(tab);
-        if (index === -1)
-            return;
-        this._tabs.splice(index, 1);
-        if (this._currentTab === tab)
-            this._currentTab = this._tabs[Math.min(index, this._tabs.length - 1)];
-        if (!this._tabs.length)
-            void this.closeBrowserContext();
-    }
-    async closeBrowserContext() {
-        if (!this._closeBrowserContextPromise)
-            this._closeBrowserContextPromise = this._closeBrowserContextImpl().catch(logUnhandledError);
-        await this._closeBrowserContextPromise;
-        this._closeBrowserContextPromise = undefined;
-    }
-    isRunningTool() {
-        return this._isRunningTool;
-    }
-    setRunningTool(isRunningTool) {
-        this._isRunningTool = isRunningTool;
-    }
-    async _closeBrowserContextImpl() {
-        if (!this._browserContextPromise)
-            return;
-        testDebug('close context');
-        const promise = this._browserContextPromise;
-        this._browserContextPromise = undefined;
-        await promise.then(async ({ browserContext, close }) => {
-            if (this.config.saveTrace)
-                await browserContext.tracing.stop();
-            await close();
-        });
-    }
-    async dispose() {
-        this._abortController.abort('MCP context disposed');
-        await this.closeBrowserContext();
-        Context._allContexts.delete(this);
-    }
-    async _setupRequestInterception(context) {
-        await context.route('**', route => {
-            const request = route.request();
-            const url = request.url();
-            const resourceType = request.resourceType();
-            let urlObj;
-            try {
-                urlObj = new URL(url);
-            }
-            catch {
-                void route.continue();
-                return;
-            }
-            const domain = urlObj.hostname;
-            if (shouldBlockRequest(url, domain, resourceType)) {
-                void route.abort('blockedbyclient');
-                return;
-            }
-            if (this.config.network?.allowedOrigins?.length) {
-                const isAllowed = this.config.network.allowedOrigins.some(allowed => matchesOriginHost(urlObj, allowed));
-                if (!isAllowed) {
-                    void route.abort('blockedbyclient');
-                    return;
-                }
-            }
-            if (this.config.network?.blockedOrigins?.length) {
-                const isBlocked = this.config.network.blockedOrigins.some(blocked => matchesOriginHost(urlObj, blocked));
-                if (isBlocked) {
-                    void route.abort('blockedbyclient');
-                    return;
-                }
-            }
-            void route.continue();
-        });
-    }
-    _ensureBrowserContext() {
-        if (!this._browserContextPromise) {
-            this._browserContextPromise = this._setupBrowserContext();
-            this._browserContextPromise.catch(() => {
-                this._browserContextPromise = undefined;
-            });
-        }
-        return this._browserContextPromise;
-    }
-    async _setupBrowserContext() {
-        if (this._closeBrowserContextPromise)
-            throw new Error('Another browser context is being closed.');
-        // TODO: move to the browser context factory to make it based on isolation mode.
-        const result = await this._browserContextFactory.createContext(this._clientInfo, this._abortController.signal);
-        const { browserContext } = result;
-        await this._setupRequestInterception(browserContext);
-        if (this.sessionLog)
-            await InputRecorder.create(this, browserContext);
-        for (const page of browserContext.pages())
-            this._onPageCreated(page);
-        browserContext.on('page', page => this._onPageCreated(page));
-        if (this.config.saveTrace) {
-            await browserContext.tracing.start({
-                name: 'trace',
-                screenshots: false,
-                snapshots: true,
-                sources: false,
-            });
-        }
-        return result;
-    }
-    lookupSecret(secretName) {
-        // if (!this.config.secrets?.[secretName])
-        return { value: secretName, code: codegen.quote(secretName) };
-        // return {
-        //   value: this.config.secrets[secretName]!,
-        //   code: `process.env['${secretName}']`,
-        // };
-    }
-}
-export class InputRecorder {
-    _context;
-    _browserContext;
-    constructor(context, browserContext) {
-        this._context = context;
-        this._browserContext = browserContext;
-    }
-    static async create(context, browserContext) {
-        const recorder = new InputRecorder(context, browserContext);
-        await recorder._initialize();
-        return recorder;
-    }
-    async _initialize() {
-        const sessionLog = this._context.sessionLog;
-        await this._browserContext._enableRecorder({
-            mode: 'recording',
-            recorderMode: 'api',
-        }, {
-            actionAdded: (page, data, code) => {
-                if (this._context.isRunningTool())
-                    return;
-                const tab = Tab.forPage(page);
-                if (tab)
-                    sessionLog.logUserAction(data.action, tab, code, false);
-            },
-            actionUpdated: (page, data, code) => {
-                if (this._context.isRunningTool())
-                    return;
-                const tab = Tab.forPage(page);
-                if (tab)
-                    sessionLog.logUserAction(data.action, tab, code, true);
-            },
-            signalAdded: (page, data) => {
-                if (this._context.isRunningTool())
-                    return;
-                if (data.signal.name !== 'navigation')
-                    return;
-                const tab = Tab.forPage(page);
-                const navigateAction = {
-                    name: 'navigate',
-                    url: data.signal.url,
-                    signals: [],
-                };
-                if (tab)
-                    sessionLog.logUserAction(navigateAction, tab, `await page.goto('${data.signal.url}');`, false);
-            },
-        });
-    }
-}

package/lib/extension/cdpRelay.js

@@ -1,346 +0,0 @@
-/**
- * Copyright (c) Microsoft Corporation.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-/**
- * WebSocket server that bridges Playwright MCP and Chrome Extension
- *
- * Endpoints:
- * - /cdp/guid - Full CDP interface for Playwright MCP
- * - /extension/guid - Extension connection for chrome.debugger forwarding
- */
-import { spawn } from 'child_process';
-import debug from 'debug';
-import { WebSocket, WebSocketServer } from 'ws';
-import { httpAddressToString } from '../utils/httpServer.js';
-import { logUnhandledError } from '../utils/log.js';
-import { ManualPromise } from '../utils/manualPromise.js';
-// @ts-ignore
-const { registry } = await import('playwright-core/lib/server/registry/index');
-const debugLogger = debug('pw:mcp:relay');
-export class CDPRelayServer {
-    _wsHost;
-    _browserChannel;
-    _userDataDir;
-    _cdpPath;
-    _extensionPath;
-    _wss;
-    _playwrightConnection = null;
-    _extensionConnection = null;
-    _connectedTabInfo;
-    _nextSessionId = 1;
-    _extensionConnectionPromise;
-    constructor(server, browserChannel, userDataDir) {
-        this._wsHost = httpAddressToString(server.address()).replace(/^http/, 'ws');
-        this._browserChannel = browserChannel;
-        this._userDataDir = userDataDir;
-        const uuid = crypto.randomUUID();
-        this._cdpPath = `/cdp/${uuid}`;
-        this._extensionPath = `/extension/${uuid}`;
-        this._resetExtensionConnection();
-        this._wss = new WebSocketServer({ server });
-        this._wss.on('connection', this._onConnection.bind(this));
-    }
-    cdpEndpoint() {
-        return `${this._wsHost}${this._cdpPath}`;
-    }
-    extensionEndpoint() {
-        return `${this._wsHost}${this._extensionPath}`;
-    }
-    async ensureExtensionConnectionForMCPContext(clientInfo, abortSignal) {
-        debugLogger('Ensuring extension connection for MCP context');
-        if (this._extensionConnection)
-            return;
-        this._connectBrowser(clientInfo);
-        debugLogger('Waiting for incoming extension connection');
-        await Promise.race([
-            this._extensionConnectionPromise,
-            new Promise((_, reject) => abortSignal.addEventListener('abort', reject))
-        ]);
-        debugLogger('Extension connection established');
-    }
-    _connectBrowser(clientInfo) {
-        const mcpRelayEndpoint = `${this._wsHost}${this._extensionPath}`;
-        // Need to specify "key" in the manifest.json to make the id stable when loading from file.
-        const url = new URL('chrome-extension://jakfalbnbhgkpmoaakfflhflbfpkailf/connect.html');
-        url.searchParams.set('mcpRelayUrl', mcpRelayEndpoint);
-        url.searchParams.set('client', JSON.stringify(clientInfo));
-        const href = url.toString();
-        const executableInfo = registry.findExecutable(this._browserChannel);
-        if (!executableInfo)
-            throw new Error(`Unsupported channel: "${this._browserChannel}"`);
-        const executablePath = executableInfo.executablePath();
-        if (!executablePath)
-            throw new Error(`"${this._browserChannel}" executable not found. Make sure it is installed at a standard location.`);
-        const args = [];
-        if (this._userDataDir)
-            args.push(`--user-data-dir=${this._userDataDir}`);
-        args.push(href);
-        spawn(executablePath, args, {
-            windowsHide: true,
-            detached: true,
-            shell: false,
-            stdio: 'ignore',
-        });
-    }
-    stop() {
-        this.closeConnections('Server stopped');
-        this._wss.close();
-    }
-    closeConnections(reason) {
-        this._closePlaywrightConnection(reason);
-        this._closeExtensionConnection(reason);
-    }
-    _onConnection(ws, request) {
-        const url = new URL(`http://localhost${request.url}`);
-        debugLogger(`New connection to ${url.pathname}`);
-        if (url.pathname === this._cdpPath) {
-            this._handlePlaywrightConnection(ws);
-        }
-        else if (url.pathname === this._extensionPath) {
-            this._handleExtensionConnection(ws);
-        }
-        else {
-            debugLogger(`Invalid path: ${url.pathname}`);
-            ws.close(4004, 'Invalid path');
-        }
-    }
-    _handlePlaywrightConnection(ws) {
-        if (this._playwrightConnection) {
-            debugLogger('Rejecting second Playwright connection');
-            ws.close(1000, 'Another CDP client already connected');
-            return;
-        }
-        this._playwrightConnection = ws;
-        ws.on('message', async (data) => {
-            try {
-                const message = JSON.parse(data.toString());
-                await this._handlePlaywrightMessage(message);
-            }
-            catch (error) {
-                debugLogger(`Error while handling Playwright message\n${data.toString()}\n`, error);
-            }
-        });
-        ws.on('close', () => {
-            if (this._playwrightConnection !== ws)
-                return;
-            this._playwrightConnection = null;
-            this._closeExtensionConnection('Playwright client disconnected');
-            debugLogger('Playwright WebSocket closed');
-        });
-        ws.on('error', error => {
-            debugLogger('Playwright WebSocket error:', error);
-        });
-        debugLogger('Playwright MCP connected');
-    }
-    _closeExtensionConnection(reason) {
-        this._extensionConnection?.close(reason);
-        this._extensionConnectionPromise.reject(new Error(reason));
-        this._resetExtensionConnection();
-    }
-    _resetExtensionConnection() {
-        this._connectedTabInfo = undefined;
-        this._extensionConnection = null;
-        this._extensionConnectionPromise = new ManualPromise();
-        void this._extensionConnectionPromise.catch(logUnhandledError);
-    }
-    _closePlaywrightConnection(reason) {
-        if (this._playwrightConnection?.readyState === WebSocket.OPEN)
-            this._playwrightConnection.close(1000, reason);
-        this._playwrightConnection = null;
-    }
-    _handleExtensionConnection(ws) {
-        if (this._extensionConnection) {
-            ws.close(1000, 'Another extension connection already established');
-            return;
-        }
-        this._extensionConnection = new ExtensionConnection(ws);
-        this._extensionConnection.onclose = (c, reason) => {
-            debugLogger('Extension WebSocket closed:', reason, c === this._extensionConnection);
-            if (this._extensionConnection !== c)
-                return;
-            this._resetExtensionConnection();
-            this._closePlaywrightConnection(`Extension disconnected: ${reason}`);
-        };
-        this._extensionConnection.onmessage = this._handleExtensionMessage.bind(this);
-        this._extensionConnectionPromise.resolve();
-    }
-    _handleExtensionMessage(method, params) {
-        switch (method) {
-            case 'forwardCDPEvent':
-                const sessionId = params.sessionId || this._connectedTabInfo?.sessionId;
-                this._sendToPlaywright({
-                    sessionId,
-                    method: params.method,
-                    params: params.params
-                });
-                break;
-            case 'detachedFromTab':
-                debugLogger('← Debugger detached from tab:', params);
-                this._connectedTabInfo = undefined;
-                break;
-        }
-    }
-    async _handlePlaywrightMessage(message) {
-        debugLogger('← Playwright:', `${message.method} (id=${message.id})`);
-        const { id, sessionId, method, params } = message;
-        try {
-            const result = await this._handleCDPCommand(method, params, sessionId);
-            this._sendToPlaywright({ id, sessionId, result });
-        }
-        catch (e) {
-            debugLogger('Error in the extension:', e);
-            this._sendToPlaywright({
-                id,
-                sessionId,
-                error: { message: e.message }
-            });
-        }
-    }
-    async _handleCDPCommand(method, params, sessionId) {
-        switch (method) {
-            case 'Browser.getVersion': {
-                return {
-                    protocolVersion: '1.3',
-                    product: 'Chrome/Extension-Bridge',
-                    userAgent: 'CDP-Bridge-Server/1.0.0',
-                };
-            }
-            case 'Browser.setDownloadBehavior': {
-                return {};
-            }
-            case 'Target.setAutoAttach': {
-                // Forward child session handling.
-                if (sessionId)
-                    break;
-                // Simulate auto-attach behavior with real target info
-                const { targetInfo } = await this._extensionConnection.send('attachToTab');
-                this._connectedTabInfo = {
-                    targetInfo,
-                    sessionId: `pw-tab-${this._nextSessionId++}`,
-                };
-                debugLogger('Simulating auto-attach');
-                this._sendToPlaywright({
-                    method: 'Target.attachedToTarget',
-                    params: {
-                        sessionId: this._connectedTabInfo.sessionId,
-                        targetInfo: {
-                            ...this._connectedTabInfo.targetInfo,
-                            attached: true,
-                        },
-                        waitingForDebugger: false
-                    }
-                });
-                return {};
-            }
-            case 'Target.getTargetInfo': {
-                return this._connectedTabInfo?.targetInfo;
-            }
-        }
-        return await this._forwardToExtension(method, params, sessionId);
-    }
-    async _forwardToExtension(method, params, sessionId) {
-        if (!this._extensionConnection)
-            throw new Error('Extension not connected');
-        // Top level sessionId is only passed between the relay and the client.
-        if (this._connectedTabInfo?.sessionId === sessionId)
-            sessionId = undefined;
-        return await this._extensionConnection.send('forwardCDPCommand', { sessionId, method, params });
-    }
-    _sendToPlaywright(message) {
-        debugLogger('→ Playwright:', `${message.method ?? `response(id=${message.id})`}`);
-        this._playwrightConnection?.send(JSON.stringify(message));
-    }
-}
-class ExtensionConnection {
-    _ws;
-    _callbacks = new Map();
-    _lastId = 0;
-    onmessage;
-    onclose;
-    constructor(ws) {
-        this._ws = ws;
-        this._ws.on('message', this._onMessage.bind(this));
-        this._ws.on('close', this._onClose.bind(this));
-        this._ws.on('error', this._onError.bind(this));
-    }
-    async send(method, params, sessionId) {
-        if (this._ws.readyState !== WebSocket.OPEN)
-            throw new Error(`Unexpected WebSocket state: ${this._ws.readyState}`);
-        const id = ++this._lastId;
-        this._ws.send(JSON.stringify({ id, method, params, sessionId }));
-        const error = new Error(`Protocol error: ${method}`);
-        return new Promise((resolve, reject) => {
-            this._callbacks.set(id, { resolve, reject, error });
-        });
-    }
-    close(message) {
-        debugLogger('closing extension connection:', message);
-        if (this._ws.readyState === WebSocket.OPEN)
-            this._ws.close(1000, message);
-    }
-    _onMessage(event) {
-        const eventData = event.toString();
-        let parsedJson;
-        try {
-            parsedJson = JSON.parse(eventData);
-        }
-        catch (e) {
-            debugLogger(`<closing ws> Closing websocket due to malformed JSON. eventData=${eventData} e=${e?.message}`);
-            this._ws.close();
-            return;
-        }
-        try {
-            this._handleParsedMessage(parsedJson);
-        }
-        catch (e) {
-            debugLogger(`<closing ws> Closing websocket due to failed onmessage callback. eventData=${eventData} e=${e?.message}`);
-            this._ws.close();
-        }
-    }
-    _handleParsedMessage(object) {
-        if (object.id && this._callbacks.has(object.id)) {
-            const callback = this._callbacks.get(object.id);
-            this._callbacks.delete(object.id);
-            if (object.error) {
-                const error = callback.error;
-                error.message = object.error;
-                callback.reject(error);
-            }
-            else {
-                callback.resolve(object.result);
-            }
-        }
-        else if (object.id) {
-            debugLogger('← Extension: unexpected response', object);
-        }
-        else {
-            this.onmessage?.(object.method, object.params);
-        }
-    }
-    _onClose(event) {
-        debugLogger(`<ws closed> code=${event.code} reason=${event.reason}`);
-        this._dispose();
-        this.onclose?.(this, event.reason);
-    }
-    _onError(event) {
-        debugLogger(`<ws error> message=${event.message} type=${event.type} target=${event.target}`);
-        this._dispose();
-    }
-    _dispose() {
-        for (const callback of this._callbacks.values())
-            callback.reject(new Error('WebSocket closed'));
-        this._callbacks.clear();
-    }
-}