browser-daemon

80
0
Source

Persistent browser automation via Playwright daemon. Keep a browser window open and send it commands (navigate, execute JS, inspect console). Perfect for interactive debugging, development, and testing web applications. Use when you need to interact with a browser repeatedly without opening/closing it.

Install

mkdir -p .claude/skills/browser-daemon && curl -L -o skill.zip "https://mcp.directory/api/skills/download/254" && unzip -o skill.zip -d .claude/skills/browser-daemon && rm skill.zip

Installs to .claude/skills/browser-daemon

About this skill

Browser Daemon - Persistent Browser Automation

Persistent browser daemon that keeps Chrome open and accepts commands via file-based IPC.

Quick Start

Start the daemon (once per session)

cd ~/.claude/skills/playwright-skill
node browser-daemon.js

Or ask: "Start the browser daemon in the background"

The browser window opens and stays open.

Send commands

Use absolute paths (cleaner, no directory changes):

# Navigate
~/.claude/skills/playwright-skill/browser-client.js navigate "http://localhost:8080/..."

# Execute JavaScript
~/.claude/skills/playwright-skill/browser-client.js exec "document.title"
~/.claude/skills/playwright-skill/browser-client.js exec "document.querySelectorAll('div').length"

# Console logs
~/.claude/skills/playwright-skill/browser-client.js console
~/.claude/skills/playwright-skill/browser-client.js console-clear

# Status
~/.claude/skills/playwright-skill/browser-client.js status

# Resize viewport
~/.claude/skills/playwright-skill/browser-client.js resize 1920 1080

Both scripts have shebangs and are executable, so they can be called directly.

Architecture

Claude (Bash tool)
    ↓
browser-client.js (writes .browser-command)
    ↓
browser-daemon.js (polls, executes, writes .browser-result)
    ↓
Chrome Browser (Playwright-controlled)

IPC Files:

  • .browser-command - Command input (JSON)
  • .browser-result - Command output (JSON)
  • .browser-ready - Ready signal (exists when daemon is running)

Files created/deleted automatically during operation.

Commands

navigate

Navigate to URL and wait for page load.

node browser-client.js navigate "http://localhost:8080/page"

Returns: { success: true, url: string, title: string }

exec

Execute JavaScript in browser context.

node browser-client.js exec "document.querySelectorAll('div').length"

Returns: { success: true, result: any }

console

Get all captured console logs.

node browser-client.js console

Returns: { success: true, logs: [{ type, text, location }] }

console-clear

Clear console log buffer.

node browser-client.js console-clear

Returns: { success: true }

status

Check daemon status and current page info.

node browser-client.js status

Returns: { success: true, url, title, consoleLogsCount }

resize

Resize browser viewport.

node browser-client.js resize 1920 1080

Returns: { success: true, width, height }

Daemon Behavior

  • Launches Chrome (not Chromium) for H.264 codec support
  • Viewport set to full available screen size on startup
  • Automatically captures all console output (log, warn, error, debug, pageerror)
  • Polls for commands every 100ms
  • Lazy restart: When browser is closed and command is sent, daemon detects closure, restarts browser, restores last URL, then executes command

Browser Configuration

chromium.launch({
  channel: 'chrome',      // Use Google Chrome, not Chromium
  headless: false,        // Visible window
  args: ['--start-maximized']
})

Important Quirks

Manual window resizing does NOT work:

  • Playwright controls viewport independently from window
  • Manually resizing browser window does NOT change viewport
  • Window resize does NOT trigger JavaScript resize events
  • Use resize command instead: node browser-client.js resize 1024 768

DevTools overlay:

  • Opening DevTools does NOT resize viewport - overlays on top
  • Does NOT trigger resize events
  • Does NOT change window.innerWidth/Height

Viewport vs Window:

  • window.innerWidth/Height - The viewport (controlled by Playwright)
  • window.outerWidth/Height - The window size
  • Only viewport can be changed via resize command

Use Cases

Interactive development: Keep browser open while testing changes, reload and check console without manual interaction.

Debugging console logs: Track down log sources with automatic source location capture.

Inspecting page state: Query DOM, check element counts, inspect computed styles via JavaScript execution.

Testing workflows: Automate multi-step browser interactions (navigate, fill forms, submit, check results).

Troubleshooting

Daemon not responding:

ls ~/.claude/skills/playwright-skill/.browser-ready
cd ~/.claude/skills/playwright-skill && node browser-daemon.js

Commands timing out:

  • Check if browser window is still open
  • Kill daemon and restart
  • Clean up stuck files: rm -f .browser-command .browser-result

Browser window closed:

  • Kill daemon (Ctrl+C)
  • Restart: node browser-daemon.js
  • Or send any command - lazy restart will trigger automatically

Setup (First Time)

cd ~/.claude/skills/playwright-skill
npm install

This installs Playwright and downloads Chrome browser.

Advanced Capabilities

See META_COMMANDS.md for comprehensive reference of Playwright's meta-level capabilities beyond basic testing:

  • Page events (console, network, dialogs, workers, frames, lifecycle)
  • Content capture (screenshots, PDFs, HTML, video)
  • Network control (interception, mocking, HAR replay, WebSockets)
  • Script injection and Node.js function exposure
  • Performance metrics and garbage collection
  • Chrome DevTools Protocol (CDP) access for low-level browser control
  • Browser context events and meta methods

Integration Notes

When user requests browser interaction:

  1. Check if daemon is running (.browser-ready file exists)
  2. If not, offer to start as background task
  3. Use browser-client.js commands to perform actions
  4. Report results back to user

User can request additional features - the codebase is straightforward and well-documented for extensions.

You might also like

flutter-development

aj-geddes

Build beautiful cross-platform mobile apps with Flutter and Dart. Covers widgets, state management with Provider/BLoC, navigation, API integration, and material design.

219765

drawio-diagrams-enhanced

jgtolentino

Create professional draw.io (diagrams.net) diagrams in XML format (.drawio files) with integrated PMP/PMBOK methodologies, extensive visual asset libraries, and industry-standard professional templates. Use this skill when users ask to create flowcharts, swimlane diagrams, cross-functional flowcharts, org charts, network diagrams, UML diagrams, BPMN, project management diagrams (WBS, Gantt, PERT, RACI), risk matrices, stakeholder maps, or any other visual diagram in draw.io format. This skill includes access to custom shape libraries for icons, clipart, and professional symbols.

172398

godot

bfollington

This skill should be used when working on Godot Engine projects. It provides specialized knowledge of Godot's file formats (.gd, .tscn, .tres), architecture patterns (component-based, signal-driven, resource-based), common pitfalls, validation tools, code templates, and CLI workflows. The `godot` command is available for running the game, validating scripts, importing resources, and exporting builds. Use this skill for tasks involving Godot game development, debugging scene/resource files, implementing game systems, or creating new Godot components.

158268

nano-banana-pro

garg-aayush

Generate and edit images using Google's Nano Banana Pro (Gemini 3 Pro Image) API. Use when the user asks to generate, create, edit, modify, change, alter, or update images. Also use when user references an existing image file and asks to modify it in any way (e.g., "modify this image", "change the background", "replace X with Y"). Supports both text-to-image generation and image-to-image editing with configurable resolution (1K default, 2K, or 4K for high resolution). DO NOT read the image file first - use this skill directly with the --input-image parameter.

192225

ui-ux-pro-max

nextlevelbuilder

"UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient."

151185

fastapi-templates

wshobson

Create production-ready FastAPI projects with async patterns, dependency injection, and comprehensive error handling. Use when building new FastAPI applications or setting up backend API projects.

126166

Stay ahead of the MCP ecosystem

Get weekly updates on new skills and servers.