ONEDEV

dev-browser

Web Scraping & CrawlingskillTypeScript

★ 6,626주당 +15조회 4

무엇인가

dev-browser는 코딩 에이전트가 Chrome을 짧은 JavaScript 스크립트로 다루도록 절차와 API 규약을 주입하는 Claude Code 스킬이다. 브라우저 자동화에서 페이지 상태 유지, 요소 지목, 결과 검증을 한 세션 안에서 끝내는 영역을 규율한다.

어떻게 동작하나

스킬은 dev-browser CLI가 띄우는 상주 데몬과 결합해 동작한다. 각 명령은 데몬 안의 새 node:vm 컨텍스트에서 실행되고, 스크립트에는 browser.getPage(nameOrId)·browser.newPage()·browser.listPages()·browser.closePage(name)와 saveFile/readFile, console 출력이 전역으로 주어진다. 페이지는 실제 Puppeteer Page 객체이며 page.snapshot({interactive:true})가 e12 같은 ref를 단 접근성 트리를 돌려주고, page.click("ref/e12")·page.ref("e12")·page.shot()·page.waitForLoad()·page.fill() 헬퍼가 추가된다. 최상위 await가 허용되고 마지막 표현식이 명령 결과가 된다.

무엇과 다른가

프롬프트에 브라우저 조작 절차를 직접 적어 넣는 방식과 달리, 규칙이 실행 가능한 API 계약으로 고정된다. 0.2의 Playwright/QuickJS 구현을 Puppeteer/Bun 구현으로 교체했고 snapshotForAI()·getByRef()는 snapshot()·ref/eN으로 대체됐다. MCP만 노출하는 도구와 달리 CLI와 MCP 서버가 같은 웜 데몬을 공유하며, --connect로 이미 열려 있는 브라우저에 붙을 수도 있다.

어떻게 쓰나

설치는 npm install -g dev-browser 후 dev-browser install로 Chrome을 잡고, dev-browser --headless -e '<script>'로 첫 스크립트를 실행한다. Claude Code에서 권한 프롬프트를 없애려면 .claude/settings.json 또는 ~/.claude/settings.json의 permissions.allow에 "Bash(dev-browser *)"를 넣는다. 레거시 플러그인 경로는 /plugin marketplace add sawyerhood/dev-browser 후 /plugin install dev-browser@sawyerhood/dev-browser이며 설치 뒤 재시작이 필요하다. MCP로 쓰려면 claude mcp add dev-browser -- dev-browser mcp --headless를 실행한다.

전제와 한계

macOS와 glibc Linux만 지원하고 Windows와 musl Linux는 지원하지 않는다. node:vm은 스크립트 전역을 분리할 뿐 보안 샌드박스가 아니며, 같은 이름의 페이지를 쓰는 두 스크립트는 서로 끼어들 수 있다. 스냅 패키지 Chromium은 기본 ~/.dev-browser/v1 디렉터리를 읽지 못하므로 dev-browser install이나 DEV_BROWSER_CHROME 지정이 필요하다. --connect로 붙인 브라우저는 사용자 소유로 취급되어 유휴 타임아웃으로 닫히지 않는다.

유사 도구