claudeers.

🔓 unclaimed — this page was auto-generated from GitHub. Are you the creator?

Claim this page →
// Claude Skills

dev-browser

A Claude Skill to give your agent the ability to use a web browser

// Claude Skills[ cli ][ api ][ web ][ claude ]#claude#claude-code#playwright#skillsMIT$open-sourceupdated 15 days ago
Actively maintained
99/100
last commit about 1 month ago
last release about 1 month ago
releases 9
open issues 4
// install
git clone https://github.com/SawyerHood/dev-browser

Dev Browser - Browser automation for Claude Code

Brought to you by Do Browser.

A browser automation tool that lets AI agents and developers control browsers with sandboxed JavaScript scripts.

Key features:

  • Sandboxed execution - Scripts run in a QuickJS WASM sandbox with no host access
  • Persistent pages - Navigate once, interact across multiple scripts
  • Auto-connect - Connect to your running Chrome or launch a fresh Chromium
  • Full Playwright API - goto, click, fill, locators, evaluate, screenshots, and more

Demo

https://github.com/user-attachments/assets/c6cf7fb9-b1dc-46ed-93b9-6e7240990c53

CLI Installation

npm install -g dev-browser
dev-browser install    # installs Playwright + Chromium

Quick start

# Launch a headless browser and run a script
dev-browser --headless <<'EOF'
const page = await browser.getPage("main");
await page.goto("https://example.com", { waitUntil: "domcontentloaded" });
console.log(await page.title());
EOF

# Connect to your running Chrome (enable at chrome://inspect/#remote-debugging)
dev-browser --connect <<'EOF'
const tabs = await browser.listPages();
console.log(JSON.stringify(tabs, null, 2));
EOF

PowerShell (Windows)

@"
const page = await browser.getPage("main");
await page.goto("https://example.com", { waitUntil: "domcontentloaded" });
console.log(await page.title());
"@ | dev-browser

With --connect:

@"
const page = await browser.getPage("main");
console.log(await page.title());
"@ | dev-browser --connect

Windows notes

PowerShell install:

npm install -g dev-browser
dev-browser install

To attach to a running Chrome instance on Windows:

chrome.exe --remote-debugging-port=9222
dev-browser --connect

Windows npm installs download the native dev-browser-windows-x64.exe release asset during postinstall, and the generated npm shims invoke that executable directly.

Using with AI agents

After installing, just tell your agent to run dev-browser --help — the help output includes a full LLM usage guide with examples and API reference. No plugin or skill installation needed.

Allowing dev-browser in Claude Code without permission prompts

By default, Claude Code asks for approval each time it runs a bash command. You can pre-approve dev-browser so it runs without permission checks by adding it to the allow list in your settings.

Per-project — add to .claude/settings.json in your project root:

{
  "permissions": {
    "allow": [
      "Bash(dev-browser *)"
    ]
  }
}

Per-user (global) — add to ~/.claude/settings.json:

{
  "permissions": {
    "allow": [
      "Bash(dev-browser *)"
    ]
  }
}

The pattern Bash(dev-browser *) matches any command starting with dev-browser followed by arguments (e.g. dev-browser --headless, dev-browser --connect). This is safe because dev-browser scripts run in a sandboxed QuickJS WASM environment with no host filesystem or network access.

You can also allow related commands in the same list:

{
  "permissions": {
    "allow": [
      "Bash(dev-browser *)",
      "Bash(npx dev-browser *)"
    ]
  }
}

Tip: If you've already been prompted and clicked "Always allow", Claude Code adds the specific command pattern automatically. The settings file approach lets you pre-approve it before the first run.

Legacy plugin installation (Claude Code / Amp / Codex)

Claude Code

/plugin marketplace add sawyerhood/dev-browser
/plugin install dev-browser@sawyerhood/dev-browser

Restart Claude Code after installation.

Amp / Codex

Copy the skill to your skills directory:

# For Amp: ~/.claude/skills | For Codex: ~/.codex/skills
SKILLS_DIR=~/.claude/skills  # or ~/.codex/skills

mkdir -p $SKILLS_DIR
git clone https://github.com/sawyerhood/dev-browser /tmp/dev-browser-skill
cp -r /tmp/dev-browser-skill/skills/dev-browser $SKILLS_DIR/dev-browser
rm -rf /tmp/dev-browser-skill

Script API

Scripts run in a sandboxed QuickJS runtime (not Node.js). Available globals:

// Browser control
browser.getPage(nameOrId)    // Get/create named page, or connect to tab by targetId
browser.newPage()            // Create anonymous page (cleaned up after script)
browser.listPages()          // List all tabs: [{id, url, title, name}]
browser.closePage(name)      // Close a named page

// File I/O (restricted to ~/.dev-browser/tmp/)
await saveScreenshot(buf, name)   // Save screenshot buffer, returns path
await writeFile(name, data)       // Write file, returns path
await readFile(name)              // Read file, returns content

// Output
console.log/warn/error/info       // Routed to CLI stdout/stderr

Pages are full Playwright Page objectsgoto, click, fill, locator, evaluate, screenshot, and everything else, including page.snapshotForAI({ track?, depth?, timeout? }), which returns { full, incremental? } for AI-friendly page snapshots.

Every page also exposes two computer-use toolsets:

  • page.cua.* — pixel/vision tier: screenshot() saves a JPEG whose pixels map 1:1 onto CSS coordinates at any DPR and returns { path, width, height }; click, doubleClick, drag, move, scroll, keypress, and type act at those coordinates.
  • page.domCua.* — DOM-id tier: getVisibleDom() snapshots visible interactive elements as pseudo-HTML lines with node_id=N; click, doubleClick, and scroll act by node id (ids are only valid against the latest snapshot of the current document), plus type and keypress for the focused element.

Benchmarks

MethodTimeCostTurnsSuccess
Dev Browser3m 53s$0.8829100%
Playwright MCP4m 31s$1.4551100%
Playwright Skill8m 07s$1.453867%
Claude Chrome Extension12m 54s$2.8180100%

See dev-browser-eval for methodology.

License

MIT

Author

Sawyer Hood

// compatibility

Platformscli, api, web
Operating systems
AI compatibilityclaude
LicenseMIT
Pricingopen-source
LanguageTypeScript

// faq

What is dev-browser?

A Claude Skill to give your agent the ability to use a web browser. It is open-source on GitHub.

Is dev-browser free to use?

dev-browser is open-source under the MIT license, so it is free to use.

What category does dev-browser belong to?

dev-browser is listed under skills in the Claudeers registry of Claude-compatible tools.

0 views
6,379 stars
unclaimed
updated 15 days ago

// embed badge

dev-browser on Claudeers
[![Claudeers](https://claudeers.com/api/badge/dev-browser.svg)](https://claudeers.com/dev-browser)

// retro hit counter

dev-browser hit counter
[![Hits](https://claudeers.com/api/counter/dev-browser.svg)](https://claudeers.com/dev-browser)

// reviews

// guestbook

0/500

// related in Claude Skills

🔓

An agentic skills framework & software development methodology that works.

// skillsobra/Shell249,840MIT[ claude ]
🔓

💫 Toolkit to help you get started with Spec-Driven Development

// skillsgithub/Python117,790MIT[ claude ]
🔓

Public repository for Agent Skills

// skillsanthropics/Python159,495[ claude ]
🔓

AI coding assistant skill (Claude Code, Codex, OpenCode, Cursor, Gemini CLI, and more). Turn any folder of code, SQL schemas, R scripts, shell scripts, docs,…

// skillsGraphify-Labs/Python77,228MIT[ claude ]

// built by

→ see how dev-browser connects across the ecosystem