- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 | - - - - -7x -7x -7x - - - -7x - - - - - - - -1x -1x - - - - - -1x - - - -2x -1x -1x -1x -1x - - - - -44x -12x - -32x - - - -9x -9x -8x - - - -3x -3x -2x -2x - - - -1x -1x - - - -4x -4x - - - - - - - - - - - - - - - -4x -4x -4x -3x - - - -4x -4x - - - -4x -4x -3x - - - -2x -2x -1x - - - -2x -2x -1x - - - -3x -3x -2x - - - -3x -3x - - - -3x -1x - -2x - - - -5x -5x - - - -28x -28x - -4x -3x - - -2x -1x - - -1x - - - -2x -1x - - -2x -1x - - -2x -1x - - -2x -1x - - -2x -1x - - -2x -1x - - -2x -1x - - -2x -1x - - -2x -1x - - -1x -1x - - -2x -1x - - - - - - - -13x - - - - | import { resolve } from 'node:path';
-import { type Browser, type BrowserContext, type Page, webkit } from 'playwright';
-import type { BrowserCommand, BrowserOptions, CommandResponse, ElementInfo } from './types.js';
-
-export class ClaudeBrowser {
- private browser: Browser | null = null;
- private context: BrowserContext | null = null;
- private page: Page | null = null;
- private options: Required<BrowserOptions>;
-
- constructor(options: BrowserOptions = {}) {
- this.options = {
- headless: options.headless ?? true,
- width: options.width ?? 1280,
- height: options.height ?? 800,
- };
- }
-
- async launch(): Promise<void> {
- this.browser = await webkit.launch({ headless: this.options.headless });
- this.context = await this.browser.newContext({
- viewport: {
- width: this.options.width,
- height: this.options.height,
- },
- });
- this.page = await this.context.newPage();
- }
-
- async close(): Promise<void> {
- if (this.browser) {
- await this.browser.close();
- this.browser = null;
- this.context = null;
- this.page = null;
- }
- }
-
- private ensurePage(): Page {
- if (!this.page) {
- throw new Error('Browser not launched. Call launch() first.');
- }
- return this.page;
- }
-
- async goto(url: string): Promise<{ url: string; title: string }> {
- const page = this.ensurePage();
- await page.goto(url, { waitUntil: 'networkidle' });
- return { url: page.url(), title: await page.title() };
- }
-
- async click(selector: string): Promise<{ url: string }> {
- const page = this.ensurePage();
- await page.click(selector);
- await page.waitForLoadState('networkidle').catch(() => {});
- return { url: page.url() };
- }
-
- async type(selector: string, text: string): Promise<void> {
- const page = this.ensurePage();
- await page.fill(selector, text);
- }
-
- async query(selector: string): Promise<ElementInfo[]> {
- const page = this.ensurePage();
- return page.$$eval(selector, (nodes) =>
- nodes.map((el) => {
- const attrs: Record<string, string> = {};
- for (const attr of el.attributes) {
- attrs[attr.name] = attr.value;
- }
- return {
- tag: el.tagName.toLowerCase(),
- text: el.textContent?.trim().slice(0, 200) || '',
- attributes: attrs,
- };
- })
- );
- }
-
- async screenshot(path?: string, fullPage = false): Promise<{ path: string; buffer?: Buffer }> {
- const page = this.ensurePage();
- const resolvedPath = resolve(path || 'screenshot.png');
- const buffer = await page.screenshot({ path: resolvedPath, fullPage });
- return { path: resolvedPath, buffer };
- }
-
- async getUrl(): Promise<{ url: string; title: string }> {
- const page = this.ensurePage();
- return { url: page.url(), title: await page.title() };
- }
-
- async getHtml(full = false): Promise<string> {
- const page = this.ensurePage();
- const html = await page.content();
- return full ? html : html.slice(0, 10000);
- }
-
- async back(): Promise<{ url: string }> {
- const page = this.ensurePage();
- await page.goBack();
- return { url: page.url() };
- }
-
- async forward(): Promise<{ url: string }> {
- const page = this.ensurePage();
- await page.goForward();
- return { url: page.url() };
- }
-
- async reload(): Promise<{ url: string }> {
- const page = this.ensurePage();
- await page.reload();
- return { url: page.url() };
- }
-
- async wait(ms = 1000): Promise<void> {
- const page = this.ensurePage();
- await page.waitForTimeout(ms);
- }
-
- async newPage(): Promise<void> {
- if (!this.context) {
- throw new Error('Browser not launched. Call launch() first.');
- }
- this.page = await this.context.newPage();
- }
-
- async eval(script: string): Promise<unknown> {
- const page = this.ensurePage();
- return page.evaluate(script);
- }
-
- async executeCommand(cmd: BrowserCommand): Promise<CommandResponse> {
- try {
- switch (cmd.cmd) {
- case 'goto': {
- const result = await this.goto(cmd.url);
- return { ok: true, ...result };
- }
- case 'click': {
- const result = await this.click(cmd.selector);
- return { ok: true, ...result };
- }
- case 'type': {
- await this.type(cmd.selector, cmd.text);
- return { ok: true };
- }
- case 'query': {
- const elements = await this.query(cmd.selector);
- return { ok: true, count: elements.length, elements };
- }
- case 'screenshot': {
- const result = await this.screenshot(cmd.path, cmd.fullPage);
- return { ok: true, path: result.path };
- }
- case 'url': {
- const result = await this.getUrl();
- return { ok: true, ...result };
- }
- case 'html': {
- const html = await this.getHtml(cmd.full);
- return { ok: true, html };
- }
- case 'back': {
- const result = await this.back();
- return { ok: true, ...result };
- }
- case 'forward': {
- const result = await this.forward();
- return { ok: true, ...result };
- }
- case 'reload': {
- const result = await this.reload();
- return { ok: true, ...result };
- }
- case 'wait': {
- await this.wait(cmd.ms);
- return { ok: true };
- }
- case 'newpage': {
- await this.newPage();
- return { ok: true };
- }
- case 'close': {
- await this.close();
- return { ok: true };
- }
- case 'eval': {
- const result = await this.eval(cmd.script);
- return { ok: true, result };
- }
- default: {
- const _exhaustive: never = cmd;
- return { ok: false, error: `Unknown command: ${(_exhaustive as { cmd: string }).cmd}` };
- }
- }
- } catch (err) {
- return { ok: false, error: (err as Error).message };
- }
- }
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| browser.ts | -
-
- |
- 91.01% | -81/89 | -89.18% | -33/37 | -85.71% | -18/21 | -91.01% | -81/89 | -
| logger.ts | -
-
- |
- 97.36% | -37/38 | -85.71% | -36/42 | -93.75% | -15/16 | -100% | -37/37 | -
| server.ts | -
-
- |
- 50% | -26/52 | -70% | -7/10 | -61.53% | -8/13 | -49.01% | -25/51 | -
| types.ts | -
-
- |
- 0% | -0/0 | -0% | -0/0 | -0% | -0/0 | -0% | -0/0 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 | - - - -2x - - - - - - - - - - - - - - - - - -2x - - - - - - - - - - - - - - - - - -45x - - - -8x - - - - - - - - - - - - - - -32x - -4x - - -6x - -2x - -3x - -3x - -3x - -3x - -8x - - - - -19x -19x -19x -19x -19x - - - - - - - - - - - - - -2x -3x -3x -2x -2x -3x -2x -2x - - - -25x -1x - -24x -24x -25x -25x - - - - - -6x - -17x - - -16x - - - - - -2x - - -2x - | import chalk from 'chalk';
-import logSymbols from 'log-symbols';
-
-// Icons for commands
-export const icons: Record<string, string> = {
- goto: '→',
- click: '◉',
- type: '⌨',
- query: '?',
- screenshot: '📷',
- url: '🔗',
- html: '<>',
- back: '←',
- forward: '→',
- reload: '↻',
- wait: '⏳',
- newpage: '+',
- close: '✕',
- eval: '⚡',
-};
-
-// Colors for command types
-export const cmdColor: Record<string, (s: string) => string> = {
- goto: chalk.cyan,
- click: chalk.yellow,
- type: chalk.magenta,
- query: chalk.blue,
- screenshot: chalk.green,
- url: chalk.cyan,
- html: chalk.blue,
- back: chalk.yellow,
- forward: chalk.yellow,
- reload: chalk.yellow,
- wait: chalk.gray,
- newpage: chalk.green,
- close: chalk.red,
- eval: chalk.magenta,
-};
-
-export function ts(): string {
- return chalk.gray(`[${new Date().toISOString()}]`);
-}
-
-export function truncate(str: string, max: number): string {
- return str.length > max ? `${str.slice(0, max)}...` : str;
-}
-
-export interface CommandLike {
- cmd: string;
- url?: string;
- selector?: string;
- text?: string;
- path?: string;
- full?: boolean;
- ms?: number;
- script?: string;
-}
-
-export function getCommandDetail(cmd: CommandLike): string | undefined {
- switch (cmd.cmd) {
- case 'goto':
- return chalk.white(cmd.url);
- case 'click':
- case 'query':
- return chalk.white(cmd.selector);
- case 'type':
- return `${chalk.white(cmd.selector)} ${chalk.dim(`="${cmd.text}"`)}`;
- case 'screenshot':
- return chalk.dim(cmd.path || 'screenshot.png');
- case 'html':
- return cmd.full ? chalk.dim('(full)') : undefined;
- case 'wait':
- return chalk.dim(`${cmd.ms || 1000}ms`);
- case 'eval':
- return chalk.dim(truncate(cmd.script || '', 50));
- default:
- return undefined;
- }
-}
-
-export function formatCommand(cmd: CommandLike): string {
- const color = cmdColor[cmd.cmd] || chalk.white;
- const icon = icons[cmd.cmd] || '•';
- const detail = getCommandDetail(cmd);
- const suffix = detail ? ` ${detail}` : '';
- return `${ts()} ${chalk.bold(color(icon))} ${color(cmd.cmd.toUpperCase())}${suffix}`;
-}
-
-export interface ResultLike {
- ok: boolean;
- error?: string;
- title?: string;
- url?: string;
- count?: number;
- path?: string;
- html?: string;
- result?: unknown;
-}
-
-const resultFormatters: Record<string, (r: ResultLike) => string | undefined> = {
- goto: (r) => r.title,
- click: (r) => (r.url ? `→ ${r.url}` : undefined),
- query: (r) => (r.count !== undefined ? `Found ${r.count} element(s)` : undefined),
- screenshot: (r) => (r.path ? `Saved to ${r.path}` : undefined),
- url: (r) => r.url,
- html: (r) => (r.html !== undefined ? `${r.html.length} chars` : undefined),
- eval: (r) => (r.result !== undefined ? truncate(JSON.stringify(r.result), 80) : undefined),
-};
-
-export function formatResult(cmd: CommandLike, result: ResultLike): string {
- if (!result.ok) {
- return `${ts()} ${logSymbols.error} ${chalk.red(result.error)}`;
- }
- const formatter = resultFormatters[cmd.cmd];
- const msg = formatter ? formatter(result) : undefined;
- const suffix = msg ? ` ${chalk.dim(msg)}` : '';
- return `${ts()} ${logSymbols.success}${suffix}`;
-}
-
-export type LogFn = (msg: string) => void;
-
-export function createLogger(logFn: LogFn = console.log) {
- return {
- command(cmd: CommandLike): void {
- logFn(formatCommand(cmd));
- },
- result(cmd: CommandLike, result: ResultLike): void {
- logFn(formatResult(cmd, result));
- },
- };
-}
-
-// Default logger to stdout
-export const logger = createLogger();
-
-// Logger to stderr (for MCP)
-export const stderrLogger = createLogger((msg) => process.stderr.write(`${msg}\n`));
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -3x -3x - - - -3x -3x -3x -3x - - - -3x -3x - - - -15x - - - -15x -15x -15x - -15x - - - - - - -15x -14x -14x - -1x -1x -1x - - - - - - - - - - - - - - - -1x -1x - - - -1x -1x - - - -2x - - - -15x - - - - - - - - - | import chalk from 'chalk';
-import express, { type Request, type Response } from 'express';
-import logSymbols from 'log-symbols';
-import { ClaudeBrowser } from './browser.js';
-import { logger, ts } from './logger.js';
-import type { BrowserCommand, BrowserOptions } from './types.js';
-
-export interface ServerOptions extends BrowserOptions {
- port?: number;
-}
-
-function printBanner(port: number): void {
- console.log();
- console.log(chalk.cyan.bold(' 🌐 Claude Browse Server'));
- console.log(chalk.dim(' ─────────────────────────'));
- console.log(` ${logSymbols.success} Listening on ${chalk.bold(`http://localhost:${port}`)}`);
- console.log();
- console.log(chalk.dim(' Commands:'));
- console.log(
- ` ${chalk.cyan('goto')} ${chalk.yellow('click')} ${chalk.magenta('type')} ${chalk.blue('query')} ${chalk.green('screenshot')}`
- );
- console.log(
- ` ${chalk.cyan('url')} ${chalk.blue('html')} ${chalk.yellow('back')} ${chalk.yellow('forward')} ${chalk.yellow('reload')} ${chalk.gray('wait')} ${chalk.red('close')}`
- );
- console.log();
- console.log(chalk.dim(' Example:'));
- console.log(
- chalk.gray(` curl -X POST localhost:${port} -d '{"cmd":"goto","url":"https://example.com"}'`)
- );
- console.log();
-}
-
-export class BrowserServer {
- private browser: ClaudeBrowser;
- private app = express();
- private server: ReturnType<typeof this.app.listen> | null = null;
- private port: number;
-
- constructor(options: ServerOptions = {}) {
- this.browser = new ClaudeBrowser(options);
- this.port = options.port ?? 13373;
- this.setupMiddleware();
- this.setupRoutes();
- }
-
- private setupMiddleware(): void {
- this.app.use(express.json());
- this.app.use(express.text({ type: '*/*' }));
- }
-
- private setupRoutes(): void {
- this.app.post('/', (req, res) => this.handleCommand(req, res));
- }
-
- private async handleCommand(req: Request, res: Response): Promise<void> {
- try {
- const cmd: BrowserCommand = typeof req.body === 'string' ? JSON.parse(req.body) : req.body;
- logger.command(cmd);
-
- Iif (cmd.cmd === 'close') {
- logger.result(cmd, { ok: true });
- res.json({ ok: true });
- await this.stop();
- process.exit(0);
- }
-
- const result = await this.browser.executeCommand(cmd);
- logger.result(cmd, result);
- res.json(result);
- } catch (err) {
- const error = (err as Error).message;
- console.log(`${ts()} ${logSymbols.error} ${chalk.red(error)}`);
- res.status(500).json({ ok: false, error });
- }
- }
-
- async start(): Promise<void> {
- await this.browser.launch();
-
- return new Promise((resolve) => {
- this.server = this.app.listen(this.port, () => {
- printBanner(this.port);
- resolve();
- });
- });
- }
-
- async stop(): Promise<void> {
- console.log(chalk.dim('\n Shutting down...'));
- Iif (this.server) {
- this.server.close();
- this.server = null;
- }
- await this.browser.close();
- console.log(` ${logSymbols.success} Browser closed\n`);
- }
-
- getPort(): number {
- return this.port;
- }
-
- getApp() {
- return this.app;
- }
-}
-
-export async function startServer(options: ServerOptions = {}): Promise<BrowserServer> {
- const server = new BrowserServer(options);
- await server.start();
- return server;
-}
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | export interface BrowserOptions {
- headless?: boolean;
- width?: number;
- height?: number;
-}
-
-export interface ElementInfo {
- tag: string;
- text: string;
- attributes: Record<string, string>;
-}
-
-// Command types
-export interface GotoCommand {
- cmd: 'goto';
- url: string;
-}
-
-export interface ClickCommand {
- cmd: 'click';
- selector: string;
-}
-
-export interface TypeCommand {
- cmd: 'type';
- selector: string;
- text: string;
-}
-
-export interface QueryCommand {
- cmd: 'query';
- selector: string;
-}
-
-export interface ScreenshotCommand {
- cmd: 'screenshot';
- path?: string;
- fullPage?: boolean;
-}
-
-export interface UrlCommand {
- cmd: 'url';
-}
-
-export interface HtmlCommand {
- cmd: 'html';
- full?: boolean;
-}
-
-export interface BackCommand {
- cmd: 'back';
-}
-
-export interface ForwardCommand {
- cmd: 'forward';
-}
-
-export interface ReloadCommand {
- cmd: 'reload';
-}
-
-export interface WaitCommand {
- cmd: 'wait';
- ms?: number;
-}
-
-export interface NewPageCommand {
- cmd: 'newpage';
-}
-
-export interface CloseCommand {
- cmd: 'close';
-}
-
-export interface EvalCommand {
- cmd: 'eval';
- script: string;
-}
-
-export type BrowserCommand =
- | GotoCommand
- | ClickCommand
- | TypeCommand
- | QueryCommand
- | ScreenshotCommand
- | UrlCommand
- | HtmlCommand
- | BackCommand
- | ForwardCommand
- | ReloadCommand
- | WaitCommand
- | NewPageCommand
- | CloseCommand
- | EvalCommand;
-
-// Response types
-export interface SuccessResponse {
- ok: true;
- url?: string;
- title?: string;
- path?: string;
- html?: string;
- count?: number;
- elements?: ElementInfo[];
- result?: unknown;
-}
-
-export interface ErrorResponse {
- ok: false;
- error: string;
-}
-
-export type CommandResponse = SuccessResponse | ErrorResponse;
- |