@wordbricks/playwright-mcp 0.1.20 → 0.1.22

package/lib/extension/cdpRelay.js

@@ -20,15 +20,15 @@
  * - /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');
+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-expect-error
+const { registry } = await import("playwright-core/lib/server/registry/index");
+const debugLogger = debug("pw:mcp:relay");
 export class CDPRelayServer {
     _wsHost;
     _browserChannel;
@@ -42,7 +42,7 @@ export class CDPRelayServer {
     _nextSessionId = 1;
     _extensionConnectionPromise;
     constructor(server, browserChannel, userDataDir) {
-        this._wsHost = httpAddressToString(server.address()).replace(/^http/, 'ws');
+        this._wsHost = httpAddressToString(server.address()).replace(/^http/, "ws");
         this._browserChannel = browserChannel;
         this._userDataDir = userDataDir;
         const uuid = crypto.randomUUID();
@@ -50,7 +50,7 @@ export class CDPRelayServer {
         this._extensionPath = `/extension/${uuid}`;
         this._resetExtensionConnection();
         this._wss = new WebSocketServer({ server });
-        this._wss.on('connection', this._onConnection.bind(this));
+        this._wss.on("connection", this._onConnection.bind(this));
     }
     cdpEndpoint() {
         return `${this._wsHost}${this._cdpPath}`;
@@ -59,23 +59,23 @@ export class CDPRelayServer {
         return `${this._wsHost}${this._extensionPath}`;
     }
     async ensureExtensionConnectionForMCPContext(clientInfo, abortSignal) {
-        debugLogger('Ensuring extension connection for MCP context');
+        debugLogger("Ensuring extension connection for MCP context");
         if (this._extensionConnection)
             return;
         this._connectBrowser(clientInfo);
-        debugLogger('Waiting for incoming extension connection');
+        debugLogger("Waiting for incoming extension connection");
         await Promise.race([
             this._extensionConnectionPromise,
-            new Promise((_, reject) => abortSignal.addEventListener('abort', reject))
+            new Promise((_, reject) => abortSignal.addEventListener("abort", reject)),
         ]);
-        debugLogger('Extension connection established');
+        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 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)
@@ -91,11 +91,11 @@ export class CDPRelayServer {
             windowsHide: true,
             detached: true,
             shell: false,
-            stdio: 'ignore',
+            stdio: "ignore",
         });
     }
     stop() {
-        this.closeConnections('Server stopped');
+        this.closeConnections("Server stopped");
         this._wss.close();
     }
     closeConnections(reason) {
@@ -113,17 +113,17 @@ export class CDPRelayServer {
         }
         else {
             debugLogger(`Invalid path: ${url.pathname}`);
-            ws.close(4004, 'Invalid path');
+            ws.close(4004, "Invalid path");
         }
     }
     _handlePlaywrightConnection(ws) {
         if (this._playwrightConnection) {
-            debugLogger('Rejecting second Playwright connection');
-            ws.close(1000, 'Another CDP client already connected');
+            debugLogger("Rejecting second Playwright connection");
+            ws.close(1000, "Another CDP client already connected");
             return;
         }
         this._playwrightConnection = ws;
-        ws.on('message', async (data) => {
+        ws.on("message", async (data) => {
             try {
                 const message = JSON.parse(data.toString());
                 await this._handlePlaywrightMessage(message);
@@ -132,17 +132,17 @@ export class CDPRelayServer {
                 debugLogger(`Error while handling Playwright message\n${data.toString()}\n`, error);
             }
         });
-        ws.on('close', () => {
+        ws.on("close", () => {
             if (this._playwrightConnection !== ws)
                 return;
             this._playwrightConnection = null;
-            this._closeExtensionConnection('Playwright client disconnected');
-            debugLogger('Playwright WebSocket closed');
+            this._closeExtensionConnection("Playwright client disconnected");
+            debugLogger("Playwright WebSocket closed");
         });
-        ws.on('error', error => {
-            debugLogger('Playwright WebSocket error:', error);
+        ws.on("error", (error) => {
+            debugLogger("Playwright WebSocket error:", error);
         });
-        debugLogger('Playwright MCP connected');
+        debugLogger("Playwright MCP connected");
     }
     _closeExtensionConnection(reason) {
         this._extensionConnection?.close(reason);
@@ -162,89 +162,91 @@ export class CDPRelayServer {
     }
     _handleExtensionConnection(ws) {
         if (this._extensionConnection) {
-            ws.close(1000, 'Another extension connection already established');
+            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);
+            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._extensionConnection.onmessage =
+            this._handleExtensionMessage.bind(this);
         this._extensionConnectionPromise.resolve();
     }
     _handleExtensionMessage(method, params) {
         switch (method) {
-            case 'forwardCDPEvent':
+            case "forwardCDPEvent": {
                 const sessionId = params.sessionId || this._connectedTabInfo?.sessionId;
                 this._sendToPlaywright({
                     sessionId,
                     method: params.method,
-                    params: params.params
+                    params: params.params,
                 });
                 break;
-            case 'detachedFromTab':
-                debugLogger('← Debugger detached from tab:', params);
+            }
+            case "detachedFromTab":
+                debugLogger("← Debugger detached from tab:", params);
                 this._connectedTabInfo = undefined;
                 break;
         }
     }
     async _handlePlaywrightMessage(message) {
-        debugLogger('← Playwright:', `${message.method} (id=${message.id})`);
+        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);
+            debugLogger("Error in the extension:", e);
             this._sendToPlaywright({
                 id,
                 sessionId,
-                error: { message: e.message }
+                error: { message: e.message },
             });
         }
     }
     async _handleCDPCommand(method, params, sessionId) {
         switch (method) {
-            case 'Browser.getVersion': {
+            case "Browser.getVersion": {
                 return {
-                    protocolVersion: '1.3',
-                    product: 'Chrome/Extension-Bridge',
-                    userAgent: 'CDP-Bridge-Server/1.0.0',
+                    protocolVersion: "1.3",
+                    product: "Chrome/Extension-Bridge",
+                    userAgent: "CDP-Bridge-Server/1.0.0",
                 };
             }
-            case 'Browser.setDownloadBehavior': {
+            case "Browser.setDownloadBehavior": {
                 return {};
             }
-            case 'Target.setAutoAttach': {
+            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');
+                const { targetInfo } = await this._extensionConnection.send("attachToTab");
                 this._connectedTabInfo = {
                     targetInfo,
                     sessionId: `pw-tab-${this._nextSessionId++}`,
                 };
-                debugLogger('Simulating auto-attach');
+                debugLogger("Simulating auto-attach");
                 this._sendToPlaywright({
-                    method: 'Target.attachedToTarget',
+                    method: "Target.attachedToTarget",
                     params: {
                         sessionId: this._connectedTabInfo.sessionId,
                         targetInfo: {
                             ...this._connectedTabInfo.targetInfo,
                             attached: true,
                         },
-                        waitingForDebugger: false
-                    }
+                        waitingForDebugger: false,
+                    },
                 });
                 return {};
             }
-            case 'Target.getTargetInfo': {
+            case "Target.getTargetInfo": {
                 return this._connectedTabInfo?.targetInfo;
             }
         }
@@ -252,14 +254,18 @@ export class CDPRelayServer {
     }
     async _forwardToExtension(method, params, sessionId) {
         if (!this._extensionConnection)
-            throw new Error('Extension not connected');
+            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 });
+        return await this._extensionConnection.send("forwardCDPCommand", {
+            sessionId,
+            method,
+            params,
+        });
     }
     _sendToPlaywright(message) {
-        debugLogger('→ Playwright:', `${message.method ?? `response(id=${message.id})`}`);
+        debugLogger("→ Playwright:", `${message.method ?? `response(id=${message.id})`}`);
         this._playwrightConnection?.send(JSON.stringify(message));
     }
 }
@@ -271,9 +277,9 @@ class ExtensionConnection {
     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));
+        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)
@@ -286,7 +292,7 @@ class ExtensionConnection {
         });
     }
     close(message) {
-        debugLogger('closing extension connection:', message);
+        debugLogger("closing extension connection:", message);
         if (this._ws.readyState === WebSocket.OPEN)
             this._ws.close(1000, message);
     }
@@ -323,7 +329,7 @@ class ExtensionConnection {
             }
         }
         else if (object.id) {
-            debugLogger('← Extension: unexpected response', object);
+            debugLogger("← Extension: unexpected response", object);
         }
         else {
             this.onmessage?.(object.method, object.params);
@@ -340,7 +346,7 @@ class ExtensionConnection {
     }
     _dispose() {
         for (const callback of this._callbacks.values())
-            callback.reject(new Error('WebSocket closed'));
+            callback.reject(new Error("WebSocket closed"));
         this._callbacks.clear();
     }
 }

package/lib/extension/extensionContextFactory.js

@@ -13,14 +13,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import debug from 'debug';
-import * as playwright from 'playwright-core';
-import { startHttpServer } from '../utils/httpServer.js';
-import { CDPRelayServer } from './cdpRelay.js';
-const debugLogger = debug('pw:mcp:relay');
+import debug from "debug";
+import * as playwright from "playwright-core";
+import { startHttpServer } from "../utils/httpServer.js";
+import { CDPRelayServer } from "./cdpRelay.js";
+const debugLogger = debug("pw:mcp:relay");
 export class ExtensionContextFactory {
-    name = 'extension';
-    description = 'Connect to a browser using the Playwright MCP extension';
+    name = "extension";
+    description = "Connect to a browser using the Playwright MCP extension";
     _browserChannel;
     _userDataDir;
     constructor(browserChannel, userDataDir) {
@@ -32,9 +32,9 @@ export class ExtensionContextFactory {
         return {
             browserContext: browser.contexts()[0],
             close: async () => {
-                debugLogger('close() called for browser context');
+                debugLogger("close() called for browser context");
                 await browser.close();
-            }
+            },
         };
     }
     async _obtainBrowser(clientInfo, abortSignal) {
@@ -49,7 +49,7 @@ export class ExtensionContextFactory {
             throw new Error(abortSignal.reason);
         }
         const cdpRelayServer = new CDPRelayServer(httpServer, this._browserChannel, this._userDataDir);
-        abortSignal.addEventListener('abort', () => cdpRelayServer.stop());
+        abortSignal.addEventListener("abort", () => cdpRelayServer.stop());
         debugLogger(`CDP relay server started, extension endpoint: ${cdpRelayServer.extensionEndpoint()}.`);
         return cdpRelayServer;
     }

package/lib/frameworkPatterns.js

@@ -3,33 +3,33 @@
  */
 export const FRAMEWORK_STATE_PATTERNS = [
     // React/Next.js
-    '__NEXT_DATA__',
-    '__reactServerState',
+    "__NEXT_DATA__",
+    "__reactServerState",
     // Remix
-    '__remixContext',
-    '__remixManifest',
-    '__remixRouteModules',
+    "__remixContext",
+    "__remixManifest",
+    "__remixRouteModules",
     // Apollo GraphQL
-    '__APOLLO_STATE__',
-    '__APOLLO_CLIENT__',
+    "__APOLLO_STATE__",
+    "__APOLLO_CLIENT__",
     // Redux/State Management
-    '__PRELOADED_STATE__',
-    '__INITIAL_STATE__',
-    '__REDUX_STATE__',
+    "__PRELOADED_STATE__",
+    "__INITIAL_STATE__",
+    "__REDUX_STATE__",
     // Vue/Nuxt
-    '__NUXT__',
+    "__NUXT__",
     // Gatsby
-    '___gatsby',
-    '___loader',
+    "___gatsby",
+    "___loader",
     // Generic SSR
-    '__SSR_DATA__',
-    '__APP_STATE__',
-    '__SERVER_STATE__',
+    "__SSR_DATA__",
+    "__APP_STATE__",
+    "__SERVER_STATE__",
     // Others
-    '__QWIK_STATE__',
-    '__SVELTE__',
-    '__ANGULAR__',
-    '__SOLID__',
-    '__ASTRO_DATA__',
+    "__QWIK_STATE__",
+    "__SVELTE__",
+    "__ANGULAR__",
+    "__SOLID__",
+    "__ASTRO_DATA__",
 ];
 export const MAX_DISPLAY_ITEMS = 5;

package/lib/hooks/antiBotDetectionHook.js

@@ -1,32 +1,35 @@
-import ms from 'ms';
-import { Ok } from '../utils/result.js';
-import { hookNameSchema } from './schema.js';
-import { getEventsAfter, isEventType, trackEvent } from './events.js';
-const RESOLUTION_WAIT_MS = ms('10s');
+import ms from "ms";
+import { Ok } from "../utils/result.js";
+import { getEventsAfter, isEventType, trackEvent } from "./events.js";
+import { hookNameSchema } from "./schema.js";
+const RESOLUTION_WAIT_MS = ms("10s");
 const lastProcessedEventIdByContext = new WeakMap();
 const detectedProvidersByContext = new WeakMap();
 const isLikelyResolved = async (ctx) => {
     if (!ctx.tab?.page)
         return false;
     const host = ctx.tab.page.url();
-    if (host.includes('challenges.cloudflare.com'))
+    if (host.includes("challenges.cloudflare.com"))
         return false;
     return ctx.tab.page.evaluate(() => {
         const challengeSelectors = [
-            '#challenge-stage',
-            '#cf-challenge-running',
+            "#challenge-stage",
+            "#cf-challenge-running",
             'iframe[src*="turnstile"]',
             'form[action*="/cdn-cgi/challenge-platform"]',
-            '[data-cf-challenge]'
+            "[data-cf-challenge]",
         ];
-        const hasChallengeDom = challengeSelectors.some(selector => document.querySelector(selector));
+        const hasChallengeDom = challengeSelectors.some((selector) => document.querySelector(selector));
         if (hasChallengeDom)
             return false;
         const title = document.title.toLowerCase();
-        const bodyText = (document.body?.innerText || '').slice(0, 2000).toLowerCase();
-        if (title.includes('just a moment') || bodyText.includes('just a moment'))
+        const bodyText = (document.body?.innerText || "")
+            .slice(0, 2000)
+            .toLowerCase();
+        if (title.includes("just a moment") || bodyText.includes("just a moment"))
             return false;
-        if (title.includes('checking your browser') || bodyText.includes('checking your browser'))
+        if (title.includes("checking your browser") ||
+            bodyText.includes("checking your browser"))
             return false;
         return true;
     });
@@ -48,17 +51,17 @@ const updateLastProcessedEventId = (context, events) => {
 const isStatusOk = (status) => status >= 200 && status < 400;
 const providerConfigs = [
     {
-        provider: 'cloudflare-turnstile',
-        match: event => isStatusOk(event.data.status) &&
-            event.data.url.includes('challenges.cloudflare.com') &&
-            event.data.url.includes('/turnstile/'),
+        provider: "cloudflare-turnstile",
+        match: (event) => isStatusOk(event.data.status) &&
+            event.data.url.includes("challenges.cloudflare.com") &&
+            event.data.url.includes("/turnstile/"),
     },
     {
-        provider: 'aws-waf',
-        match: event => isStatusOk(event.data.status) &&
-            event.data.method.toUpperCase() === 'POST' &&
-            event.data.url.includes('.awswaf.com') &&
-            event.data.url.includes('/telemetry'),
+        provider: "aws-waf",
+        match: (event) => isStatusOk(event.data.status) &&
+            event.data.method.toUpperCase() === "POST" &&
+            event.data.url.includes(".awswaf.com") &&
+            event.data.url.includes("/telemetry"),
     },
 ];
 export const getAntiBotProviderConfigs = () => providerConfigs;
@@ -72,7 +75,7 @@ const waitForResolution = async (ctx) => {
 };
 const detectAntiBot = (ctx, events) => {
     const detectedProviders = getDetectedProviders(ctx.context);
-    const networkEvents = events.filter(isEventType('network-request'));
+    const networkEvents = events.filter(isEventType("network-request"));
     return providerConfigs.reduce((acc, config) => {
         if (detectedProviders.has(config.provider))
             return acc;
@@ -87,52 +90,52 @@ const detectAntiBot = (ctx, events) => {
                     provider: config.provider,
                     url: match.data.url,
                     status: match.data.status,
-                }
+                },
             ],
         };
     }, { hits: [] });
 };
 export const antiBotDetectionPreHook = {
-    name: hookNameSchema.enum['anti-bot-detection-pre'],
+    name: hookNameSchema.enum["anti-bot-detection-pre"],
     handler: async (ctx) => {
         if (lastProcessedEventIdByContext.has(ctx.context))
             return Ok(undefined);
-        if (typeof ctx.eventStore.lastSeenEventId === 'number')
+        if (typeof ctx.eventStore.lastSeenEventId === "number")
             lastProcessedEventIdByContext.set(ctx.context, ctx.eventStore.lastSeenEventId);
         return Ok(undefined);
     },
 };
 export const antiBotDetectionPostHook = {
-    name: hookNameSchema.enum['anti-bot-detection-post'],
+    name: hookNameSchema.enum["anti-bot-detection-post"],
     handler: async (ctx) => {
         const newEvents = getEventsAfter(ctx.eventStore, lastProcessedEventIdByContext.get(ctx.context));
         if (newEvents.length === 0)
             return Ok(undefined);
         const detection = detectAntiBot(ctx, newEvents);
         if (detection.hits.length > 0) {
-            detection.hits.forEach(hit => {
+            detection.hits.forEach((hit) => {
                 trackEvent(ctx.context, {
-                    type: 'anti-bot',
+                    type: "anti-bot",
                     data: {
                         provider: hit.provider,
-                        detectionMethod: 'network-request',
+                        detectionMethod: "network-request",
                         url: hit.url,
                         status: hit.status,
-                        action: 'detected',
+                        action: "detected",
                         waitMs: RESOLUTION_WAIT_MS,
                     },
                 });
             });
             const waitResult = await waitForResolution(ctx);
-            detection.hits.forEach(hit => {
+            detection.hits.forEach((hit) => {
                 trackEvent(ctx.context, {
-                    type: 'anti-bot',
+                    type: "anti-bot",
                     data: {
                         provider: hit.provider,
-                        detectionMethod: 'network-request',
+                        detectionMethod: "network-request",
                         url: hit.url,
                         status: hit.status,
-                        action: waitResult.resolved ? 'resolved' : 'still-blocked',
+                        action: waitResult.resolved ? "resolved" : "still-blocked",
                         waitMs: waitResult.waitedMs,
                     },
                 });
@@ -147,25 +150,29 @@ export const antiBotDetectionHooks = {
     post: antiBotDetectionPostHook,
 };
 export const formatAntiBotEvent = (event) => {
-    if (event.data.action === 'still-blocked') {
-        const waitSeconds = event.data.waitMs ? Math.round(event.data.waitMs / 1000) : 0;
-        if (event.data.provider === 'cloudflare-turnstile')
-            return `Anti-bot still active: Cloudflare Turnstile after ${waitSeconds || '<1'}s wait`;
-        if (event.data.provider === 'aws-waf')
-            return `Anti-bot still active: AWS WAF after ${waitSeconds || '<1'}s wait`;
-        return 'Anti-bot mechanism still active';
+    if (event.data.action === "still-blocked") {
+        const waitSeconds = event.data.waitMs
+            ? Math.round(event.data.waitMs / 1000)
+            : 0;
+        if (event.data.provider === "cloudflare-turnstile")
+            return `Anti-bot still active: Cloudflare Turnstile after ${waitSeconds || "<1"}s wait`;
+        if (event.data.provider === "aws-waf")
+            return `Anti-bot still active: AWS WAF after ${waitSeconds || "<1"}s wait`;
+        return "Anti-bot mechanism still active";
     }
-    if (event.data.action === 'resolved') {
-        const waitSeconds = event.data.waitMs ? Math.round(event.data.waitMs / 1000) : 0;
-        if (event.data.provider === 'cloudflare-turnstile')
-            return `Anti-bot resolved: Cloudflare Turnstile after ${waitSeconds || '<1'}s wait`;
-        if (event.data.provider === 'aws-waf')
-            return `Anti-bot resolved: AWS WAF after ${waitSeconds || '<1'}s wait`;
-        return 'Anti-bot mechanism resolved';
+    if (event.data.action === "resolved") {
+        const waitSeconds = event.data.waitMs
+            ? Math.round(event.data.waitMs / 1000)
+            : 0;
+        if (event.data.provider === "cloudflare-turnstile")
+            return `Anti-bot resolved: Cloudflare Turnstile after ${waitSeconds || "<1"}s wait`;
+        if (event.data.provider === "aws-waf")
+            return `Anti-bot resolved: AWS WAF after ${waitSeconds || "<1"}s wait`;
+        return "Anti-bot mechanism resolved";
     }
-    if (event.data.provider === 'cloudflare-turnstile')
+    if (event.data.provider === "cloudflare-turnstile")
         return `Anti-bot detected: Cloudflare Turnstile (${event.data.status})`;
-    if (event.data.provider === 'aws-waf')
+    if (event.data.provider === "aws-waf")
         return `Anti-bot detected: AWS WAF telemetry request (${event.data.status})`;
-    return 'Anti-bot mechanism detected';
+    return "Anti-bot mechanism detected";
 };