diff --git a/README.md b/README.md index a570d9c..5cb6d3b 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,8 @@
+ + ## Comparison ### BrowserMCP @@ -34,3 +36,28 @@ Navigation: - `browsermcp_browser_press_key` - Press a key on the keyboard Utilities: - `browsermcp_browser_wait` - Wait for a specified time in seconds + + +### Using with Playwright + +You can use playwriter programmatically with playwright-core: + +```typescript +import { chromium } from 'playwright-core' +import { startPlayWriterCDPRelayServer, getCdpUrl } from 'playwriter' + +const port = 19987 +const server = await startPlayWriterCDPRelayServer({ port }) + + +const browser = await chromium.connectOverCDP(getCdpUrl({ port })) + +const context = browser.contexts()[0] +const page = context.pages()[0] + +await page.goto('https://example.com') +await page.screenshot({ path: 'screenshot.png' }) + +await browser.close() +server.close() +``` diff --git a/playwriter/package.json b/playwriter/package.json index 4663278..215191c 100644 --- a/playwriter/package.json +++ b/playwriter/package.json @@ -3,6 +3,8 @@ "description": "", "version": "0.0.5", "type": "module", + "main": "dist/index.js", + "types": "dist/index.d.ts", "repository": "https://github.com/remorses/playwriter", "scripts": { "build": "rm -rf dist *.tsbuildinfo && mkdir dist && cp src/resource.md src/prompt.md dist/ && tsc", diff --git a/playwriter/src/extension/cdp-relay.ts b/playwriter/src/extension/cdp-relay.ts index 4e596ef..b3f505c 100644 --- a/playwriter/src/extension/cdp-relay.ts +++ b/playwriter/src/extension/cdp-relay.ts @@ -20,7 +20,7 @@ type PlaywrightClient = { ws: WSContext } -export async function startPlayWriterCDPRelayServer({ port = 19988, logger = console }: { port?: number; logger?: { log(...args: any[]): void; error(...args: any[]): void } } = {}) { +export async function startPlayWriterCDPRelayServer({ port = 19988, host = '127.0.0.1', logger = console }: { port?: number; host?: string; logger?: { log(...args: any[]): void; error(...args: any[]): void } } = {}) { const connectedTargets = new Map() const playwrightClients = new Map() @@ -461,20 +461,20 @@ export async function startPlayWriterCDPRelayServer({ port = 19988, logger = con } })) - const server = serve({ fetch: app.fetch, port }) + const server = serve({ fetch: app.fetch, port, hostname: host }) injectWebSocket(server) - const wsHost = `ws://localhost:${port}` + const wsHost = `ws://${host}:${port}` const cdpEndpoint = `${wsHost}/cdp` const extensionEndpoint = `${wsHost}/extension` logger.log('CDP relay server started') + logger.log('Host:', host) + logger.log('Port:', port) logger.log('Extension endpoint:', extensionEndpoint) logger.log('CDP endpoint:', cdpEndpoint) return { - cdpEndpoint, - extensionEndpoint, close() { for (const client of playwrightClients.values()) { client.ws.close(1000, 'Server stopped') diff --git a/playwriter/src/index.ts b/playwriter/src/index.ts index 26c53f3..bade296 100644 --- a/playwriter/src/index.ts +++ b/playwriter/src/index.ts @@ -1 +1,2 @@ export * from './extension/cdp-relay.js' +export * from './utils.js' diff --git a/playwriter/src/mcp.ts b/playwriter/src/mcp.ts index 12594e4..cbb0bdd 100644 --- a/playwriter/src/mcp.ts +++ b/playwriter/src/mcp.ts @@ -7,6 +7,7 @@ import path from 'node:path' import { spawn } from 'node:child_process' import { createRequire } from 'node:module' import vm from 'node:vm' +import { getCdpUrl } from './utils.js' const require = createRequire(import.meta.url) @@ -67,7 +68,7 @@ async function ensureConnection(): Promise<{ browser: Browser; page: Page }> { await ensureRelayServer() - const cdpEndpoint = `ws://localhost:${RELAY_PORT}/cdp/${Date.now()}` + const cdpEndpoint = getCdpUrl({ port: RELAY_PORT }) const browser = await chromium.connectOverCDP(cdpEndpoint) const contexts = browser.contexts() diff --git a/playwriter/src/utils.ts b/playwriter/src/utils.ts new file mode 100644 index 0000000..dfbf33e --- /dev/null +++ b/playwriter/src/utils.ts @@ -0,0 +1,4 @@ +export function getCdpUrl({ port = 19988, host = '127.0.0.1', clientId }: { port?: number; host?: string; clientId?: string } = {}) { + const id = clientId || Date.now().toString() + return `ws://${host}:${port}/cdp/${id}` +}