dev-browser - Claude Code용 브라우저 자동화 스킬

QuickJS WASM 샌드박스에서 Playwright 스크립트 실행. 플러그인 없이 CLI만으로 동작하며, 기존 도구들보다 빠르고 저렴함.

핵심 특징

  • 샌드박스 실행 — QuickJS WASM에서 스크립트 실행 (호스트 접근 없음)
  • Persistent pages — 한 번 탐색 후 여러 스크립트에서 상호작용 가능
  • Auto-connect — 실행 중인 Chrome에 연결하거나 Chromium 실행
  • Full Playwright API — goto, click, fill, locators, evaluate, screenshots 등

설치

npm install -g dev-browser
dev-browser install  # Playwright + Chromium 설치

사용법

Headless 모드

dev-browser --headless <<'EOF'
const page = await browser.getPage("main");
await page.goto("https://example.com");
console.log(await page.title());
EOF

Chrome 연결

# Chrome에서 chrome://inspect/#remote-debugging 활성화
dev-browser --connect <<'EOF'
const tabs = await browser.listPages();
console.log(JSON.stringify(tabs, null, 2));
EOF

Claude Code 권한 사전 승인

.claude/settings.json에 추가:

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

API

// Browser control
browser.getPage(nameOrId)  // 이름으로 페이지 생성/조회
browser.newPage()          // 익명 페이지 생성
browser.listPages()        // 모든 탭 목록: [{id, url, title, name}]
browser.closePage(name)    // 페이지 닫기
 
// File I/O (~/.dev-browser/tmp/ 제한)
await saveScreenshot(buf, name)  // 스크린샷 저장
await writeFile(name, data)      // 파일 쓰기
await readFile(name)             // 파일 읽기
 
// AI용 스냅샷
page.snapshotForAI({ track?, depth?, timeout? })  // { full, incremental? }

성능 비교

도구시간비용성공률
Dev Browser3m 53s$0.8829100%
Playwright MCP4m 31s$1.4551100%
Playwright Skill8m 07s$1.453867%
Claude Chrome Extension12m 54s$2.8180100%

→ 가장 빠르고 저렴하며 턴 수도 적음

관련 프로젝트

설치 방법 (레거시 플러그인)

Claude Code / Amp / Codex

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

수동 설치

SKILLS_DIR=~/.claude/skills  # 또는 ~/.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