Dev Browser: State‑ful Browser Automation for Claude Code

As AI agents become increasingly capable of writing code, the next logical step is giving them the ability to interact with real‑world web pages. Dev Browser is an open‑source Skill for Claude Code that does exactly this—while keeping all the state of your browser alive between calls.

Why Dev Browser Matters

• Persistent pages – Navigate to a page once and keep it in memory. No need to re‑load the DOM for every script you run.
• Flexible execution – Either run a full script in one go or step through actions when you’re exploring.
• LLM‑friendly DOM snapshots – Structured, lightweight representations of the page that Claude can parse quickly.
• Chrome extension – Control an existing Chrome profile to leverage logged‑in sessions, cookies, and extensions.

These features give Claude Code agents a practical edge for testing, data extraction, and interactive demos.

Quick Start Guide

1. Prerequisites
2. Claude Code CLI installed

3. Node.js v18+ with npm

4. Install the Skill

   # Using the Claude Code marketplace
   /plugin marketplace add sawyerhood/dev-browser
   /plugin install dev-browser@sawyerhood/dev-browser
   
   # Or clone the repo for local development
   SKILLS_DIR=~/.claude/skills   # Amp
   # SKILLS_DIR=~/.codex/skills # Codex
   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
   

5. (Optional) Chrome Extension
6. Download the latest extension.zip from the releases page.
7. Unzip somewhere permanent, e.g., ~/.dev-browser-extension.
8. Load the unpacked folder in Chrome’s extensions page with developer mode on.
9. Enable the extension and ask Claude to "connect to my Chrome".
10. Run a sample interaction

    Claude: Open https://example.com and take a screenshot.