@wordbricks/playwright-mcp 0.1.25 → 0.1.27

package/lib/extension/extensionContextFactory.js

@@ -0,0 +1,56 @@
+/**
+ * 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 * 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";
+    _browserChannel;
+    _userDataDir;
+    constructor(browserChannel, userDataDir) {
+        this._browserChannel = browserChannel;
+        this._userDataDir = userDataDir;
+    }
+    async createContext(clientInfo, abortSignal) {
+        const browser = await this._obtainBrowser(clientInfo, abortSignal);
+        return {
+            browserContext: browser.contexts()[0],
+            close: async () => {
+                debugLogger("close() called for browser context");
+                await browser.close();
+            },
+        };
+    }
+    async _obtainBrowser(clientInfo, abortSignal) {
+        const relay = await this._startRelay(abortSignal);
+        await relay.ensureExtensionConnectionForMCPContext(clientInfo, abortSignal);
+        return await playwright.chromium.connectOverCDP(relay.cdpEndpoint());
+    }
+    async _startRelay(abortSignal) {
+        const httpServer = await startHttpServer({});
+        if (abortSignal.aborted) {
+            httpServer.close();
+            throw new Error(abortSignal.reason);
+        }
+        const cdpRelayServer = new CDPRelayServer(httpServer, this._browserChannel, this._userDataDir);
+        abortSignal.addEventListener("abort", () => cdpRelayServer.stop());
+        debugLogger(`CDP relay server started, extension endpoint: ${cdpRelayServer.extensionEndpoint()}.`);
+        return cdpRelayServer;
+    }
+}

package/lib/frameworkPatterns.js

@@ -0,0 +1,35 @@
+/**
+ * Shared framework state patterns used by framework state detection hook
+ */
+export const FRAMEWORK_STATE_PATTERNS = [
+    // React/Next.js
+    "__NEXT_DATA__",
+    "__reactServerState",
+    // Remix
+    "__remixContext",
+    "__remixManifest",
+    "__remixRouteModules",
+    // Apollo GraphQL
+    "__APOLLO_STATE__",
+    "__APOLLO_CLIENT__",
+    // Redux/State Management
+    "__PRELOADED_STATE__",
+    "__INITIAL_STATE__",
+    "__REDUX_STATE__",
+    // Vue/Nuxt
+    "__NUXT__",
+    // Gatsby
+    "___gatsby",
+    "___loader",
+    // Generic SSR
+    "__SSR_DATA__",
+    "__APP_STATE__",
+    "__SERVER_STATE__",
+    // Others
+    "__QWIK_STATE__",
+    "__SVELTE__",
+    "__ANGULAR__",
+    "__SOLID__",
+    "__ASTRO_DATA__",
+];
+export const MAX_DISPLAY_ITEMS = 5;

package/lib/hooks/antiBotDetectionHook.js

@@ -0,0 +1,178 @@
+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"))
+        return false;
+    return ctx.tab.page.evaluate(() => {
+        const challengeSelectors = [
+            "#challenge-stage",
+            "#cf-challenge-running",
+            'iframe[src*="turnstile"]',
+            'form[action*="/cdn-cgi/challenge-platform"]',
+            "[data-cf-challenge]",
+        ];
+        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"))
+            return false;
+        if (title.includes("checking your browser") ||
+            bodyText.includes("checking your browser"))
+            return false;
+        return true;
+    });
+};
+const getDetectedProviders = (context) => {
+    const detectedProviders = detectedProvidersByContext.get(context);
+    if (detectedProviders)
+        return detectedProviders;
+    const newSet = new Set();
+    detectedProvidersByContext.set(context, newSet);
+    return newSet;
+};
+const updateLastProcessedEventId = (context, events) => {
+    const lastEvent = events[events.length - 1];
+    if (!lastEvent)
+        return;
+    lastProcessedEventIdByContext.set(context, lastEvent.id);
+};
+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: "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;
+const waitForResolution = async (ctx) => {
+    const start = Date.now();
+    if (!ctx.tab?.page)
+        return { resolved: false, waitedMs: 0 };
+    await ctx.tab.page.waitForTimeout(RESOLUTION_WAIT_MS);
+    const resolved = await isLikelyResolved(ctx);
+    return { resolved, waitedMs: Date.now() - start };
+};
+const detectAntiBot = (ctx, events) => {
+    const detectedProviders = getDetectedProviders(ctx.context);
+    const networkEvents = events.filter(isEventType("network-request"));
+    return providerConfigs.reduce((acc, config) => {
+        if (detectedProviders.has(config.provider))
+            return acc;
+        const match = networkEvents.find(config.match);
+        if (!match)
+            return acc;
+        detectedProviders.add(config.provider);
+        return {
+            hits: [
+                ...acc.hits,
+                {
+                    provider: config.provider,
+                    url: match.data.url,
+                    status: match.data.status,
+                },
+            ],
+        };
+    }, { hits: [] });
+};
+export const antiBotDetectionPreHook = {
+    name: hookNameSchema.enum["anti-bot-detection-pre"],
+    handler: async (ctx) => {
+        if (lastProcessedEventIdByContext.has(ctx.context))
+            return Ok(undefined);
+        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"],
+    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) => {
+                trackEvent(ctx.context, {
+                    type: "anti-bot",
+                    data: {
+                        provider: hit.provider,
+                        detectionMethod: "network-request",
+                        url: hit.url,
+                        status: hit.status,
+                        action: "detected",
+                        waitMs: RESOLUTION_WAIT_MS,
+                    },
+                });
+            });
+            const waitResult = await waitForResolution(ctx);
+            detection.hits.forEach((hit) => {
+                trackEvent(ctx.context, {
+                    type: "anti-bot",
+                    data: {
+                        provider: hit.provider,
+                        detectionMethod: "network-request",
+                        url: hit.url,
+                        status: hit.status,
+                        action: waitResult.resolved ? "resolved" : "still-blocked",
+                        waitMs: waitResult.waitedMs,
+                    },
+                });
+            });
+        }
+        updateLastProcessedEventId(ctx.context, newEvents);
+        return Ok(undefined);
+    },
+};
+export const antiBotDetectionHooks = {
+    pre: antiBotDetectionPreHook,
+    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 === "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")
+        return `Anti-bot detected: Cloudflare Turnstile (${event.data.status})`;
+    if (event.data.provider === "aws-waf")
+        return `Anti-bot detected: AWS WAF telemetry request (${event.data.status})`;
+    return "Anti-bot mechanism detected";
+};

package/lib/hooks/core.js

@@ -0,0 +1,145 @@
+import { reduce } from "@fxts/core";
+import { consumeEvents } from "./eventConsumer.js";
+import { getEventStore, trackEvent } from "./events.js";
+import { toolNameSchema } from "./schema.js";
+export { Err, Ok } from "../utils/result.js";
+export const runHook = async (hook, ctx) => {
+    const result = await hook.handler(ctx);
+    if (!result.ok)
+        throw result.error;
+    return ctx;
+};
+export const hookRegistryMap = new WeakMap();
+export const createHookRegistry = () => ({
+    tools: new Map(),
+});
+export const setToolHooks = (registry, toolHooks) => ({
+    tools: new Map([...registry.tools, [toolHooks.toolName, toolHooks]]),
+});
+export const getToolHooks = (registry, toolName) => {
+    return registry.tools.get(toolName);
+};
+export const wrapToolWithHooks = (tool, registry) => {
+    const parsedName = toolNameSchema.safeParse(tool.schema.name);
+    if (!parsedName.success)
+        return tool; // Tool name not in our schema, don't apply hooks
+    // NOTE: This means tool call events won't be tracked for tools not in toolNameSchema.
+    // All tools exposed by this MCP server should be added to the schema.
+    const toolName = parsedName.data;
+    const toolHooks = getToolHooks(registry, toolName);
+    // Even if no hooks configured, we still need to consume events and track tool calls
+    if (!toolHooks ||
+        (toolHooks.preHooks.length === 0 && toolHooks.postHooks.length === 0)) {
+        return {
+            ...tool,
+            handle: async (context, params, response) => {
+                const eventStore = getEventStore(context);
+                // Consume pre-tool events
+                consumeEvents(context, eventStore, response);
+                // Track tool execution
+                const startTime = Date.now();
+                let success = true;
+                try {
+                    await tool.handle(context, params, response);
+                }
+                catch (error) {
+                    success = false;
+                    throw error;
+                }
+                finally {
+                    // Record tool call completion
+                    const executionTime = Date.now() - startTime;
+                    trackEvent(context, {
+                        type: "tool-call",
+                        data: {
+                            toolName,
+                            params: params,
+                            executionTime,
+                            success,
+                        },
+                        timestamp: startTime,
+                    });
+                    // Consume post-tool events
+                    consumeEvents(context, eventStore, response);
+                }
+            },
+        };
+    }
+    return {
+        ...tool,
+        handle: async (context, params, response) => {
+            const eventStore = getEventStore(context);
+            // Consume pre-tool events
+            consumeEvents(context, eventStore, response);
+            // Track tool execution
+            const startTime = Date.now();
+            // Run pre-hooks
+            const hookContext = {
+                context,
+                tab: context.currentTab(),
+                params,
+                toolName,
+                response,
+                eventStore,
+            };
+            try {
+                await reduce(async (ctx, hook) => runHook(hook, await ctx), Promise.resolve(hookContext), toolHooks.preHooks);
+            }
+            catch (error) {
+                // Pre-hook already handled messaging (e.g., require-tab pre-hook sets tabs section)
+                // Avoid adding a duplicate error line in the Result section.
+                return;
+            }
+            // Run original tool
+            let success = true;
+            try {
+                await tool.handle(context, params, response);
+            }
+            catch (error) {
+                success = false;
+                throw error;
+            }
+            finally {
+                // Record tool call completion
+                const executionTime = Date.now() - startTime;
+                trackEvent(context, {
+                    type: "tool-call",
+                    data: {
+                        toolName,
+                        params: params,
+                        executionTime,
+                        success,
+                    },
+                    timestamp: startTime,
+                });
+            }
+            // Run post-hooks
+            const postHookContext = {
+                context,
+                tab: context.currentTab(),
+                params,
+                toolName,
+                response,
+                eventStore: getEventStore(context),
+            };
+            try {
+                await reduce(async (ctx, hook) => runHook(hook, await ctx), Promise.resolve(postHookContext), toolHooks.postHooks);
+            }
+            catch (error) {
+                response.addError(error instanceof Error ? error.message : "Post-hook failed");
+            }
+            // Consume post-tool events
+            consumeEvents(context, eventStore, response);
+        },
+    };
+};
+export const getHookRegistry = (context) => {
+    const registry = hookRegistryMap.get(context);
+    return registry || createHookRegistry();
+};
+export const applyHooksToTools = (tools, context) => {
+    const registry = getHookRegistry(context);
+    if (registry.tools.size === 0)
+        return tools;
+    return tools.map((tool) => wrapToolWithHooks(tool, registry));
+};

package/lib/hooks/eventConsumer.js

@@ -0,0 +1,52 @@
+import { formatAntiBotEvent, getAntiBotProviderConfigs, } from "./antiBotDetectionHook.js";
+import { getEventsAfter, isEventType, updateLastSeenId } from "./events.js";
+import { formatToolCallEvent } from "./formatToolCallEvent.js";
+import { formatFrameworkStateEvent } from "./frameworkStateHook.js";
+import { planGroupedMessages } from "./grouping.js";
+import { formatJsonLdEvent } from "./jsonLdDetectionHook.js";
+import { isAntiBotUrl } from "./networkFilters.js";
+import { formatNetworkEvent } from "./networkTrackingHook.js";
+import { formatPageHeightEvent } from "./pageHeightHook.js";
+import { formatWaitEvent } from "./waitHook.js";
+const eventFormatters = {
+    wait: formatWaitEvent,
+    "page-height-change": formatPageHeightEvent,
+    "network-request": formatNetworkEvent,
+    "tool-call": formatToolCallEvent,
+    "framework-state": formatFrameworkStateEvent,
+    "json-ld": formatJsonLdEvent,
+    "anti-bot": formatAntiBotEvent,
+};
+const formatEvent = (event) => {
+    const formatter = eventFormatters[event.type];
+    return formatter(event);
+};
+const consumeEvent = (event, response, plan) => {
+    if (plan.skipIds.has(event.id))
+        return;
+    const replacement = plan.replacementById.get(event.id);
+    const formattedMessage = replacement ?? formatEvent(event);
+    response.addEvent(`[${event.id}] ${formattedMessage}`);
+};
+const shouldHideEvent = (event) => {
+    const isNetworkRequest = isEventType("network-request");
+    if (!isNetworkRequest(event))
+        return false;
+    if (isAntiBotUrl(event.data.url))
+        return true;
+    const configs = getAntiBotProviderConfigs().filter((config) => config.provider === "cloudflare-turnstile");
+    return configs.some((config) => config.match(event));
+};
+export const consumeEvents = (context, eventStore, response) => {
+    const unconsumedEvents = getEventsAfter(eventStore, eventStore.lastSeenEventId);
+    if (unconsumedEvents.length === 0)
+        return;
+    const visibleEvents = unconsumedEvents.filter((event) => !shouldHideEvent(event));
+    const plan = planGroupedMessages(visibleEvents);
+    // Consume all events in chronological order
+    for (const event of visibleEvents)
+        consumeEvent(event, response, plan);
+    // Update last seen event ID
+    const latestEvent = unconsumedEvents[unconsumedEvents.length - 1];
+    updateLastSeenId(context, latestEvent.id);
+};

package/lib/hooks/events.js

@@ -0,0 +1,42 @@
+import { filter, pipe, toArray } from "@fxts/core";
+export const isEventType = (type) => (event) => event.type === type;
+export const createEventStore = () => ({
+    events: new Map(),
+    lastSeenEventId: undefined,
+    nextEventId: 1,
+});
+export const trackEvent = (context, params) => {
+    const store = getEventStore(context);
+    const eventId = store.nextEventId++;
+    const event = {
+        id: eventId,
+        type: params.type,
+        data: params.data,
+        timestamp: params.timestamp ?? Date.now(),
+    };
+    store.events.set(eventId, event);
+    return eventId;
+};
+export const updateLastSeenId = (context, eventId) => {
+    const store = getEventStore(context);
+    store.lastSeenEventId = eventId;
+    return context;
+};
+export const getEventsAfter = (store, afterEventId) => {
+    if (!afterEventId) {
+        return pipe(store.events.values(), toArray);
+    }
+    return pipe(store.events.values(), filter((event) => event.id > afterEventId), toArray);
+};
+const eventStoreMap = new WeakMap();
+export const getEventStore = (context) => {
+    let store = eventStoreMap.get(context);
+    if (!store) {
+        store = createEventStore();
+        eventStoreMap.set(context, store);
+    }
+    return store;
+};
+export const setEventStore = (context, store) => {
+    eventStoreMap.set(context, store);
+};

package/lib/hooks/formatToolCallEvent.js

@@ -0,0 +1,12 @@
+export const formatToolCallEvent = (event) => {
+    const { toolName, params, executionTime, success } = event.data;
+    // Format parameters (truncate if too long)
+    const paramStr = params && Object.keys(params).length > 0
+        ? ` with params: ${JSON.stringify(params, null, 0).slice(0, 100)}`
+        : "";
+    // Format execution time if available
+    const timeStr = executionTime !== undefined ? ` (${executionTime}ms)` : "";
+    // Format success status if available
+    const statusStr = success !== undefined ? (success ? " ✓" : " ✗") : "";
+    return `Tool ${toolName}${paramStr}${timeStr}${statusStr}`;
+};