dev-browser — скилл для Claude Code: автоматизация браузера
Управляй настоящим Chrome через короткие скрипты Puppeteer. Именованные страницы сохраняются между запусками, так что можно продолжить работу с того же места.
npx skills add SawyerHood/dev-browser --skill dev-browser -a claude-codeЧто делает dev-browser
dev-browser — это CLI для контроля Chrome с помощью Puppeteer-скриптов. Запускается как единый фоновый процесс, который держит браузер открытым и позволяет использовать именованные страницы. Каждая страница сохраняется между вызовами, поэтому если ты прошёл авторизацию на сайте, в следующий раз браузер помнит это состояние.
Устанавливается через npm install -g dev-browser, затем можно вызывать скрипты напрямую: перейти на сайт, кликнуть по элементам, заполнить формы, сделать скриншот, извлечь данные. Скрипты пишешь на JavaScript — вызываешь методы типа page.goto(), page.click(), page.snapshot(). Последнее выражение в скрипте выводится результатом.
Имей в виду, что page.click() не ждёт загрузки — используй waitForSelector() перед кликом, если нужно. Имена страниц привязаны к каждому браузеру отдельно (headless и headed — разные Chrome-ы), и ссылки на элементы (refs) сбрасываются при навигации, нужно вызвать snapshot() заново.
Какие задачи решает
- заполнить форму на сайте и отправить
- скрейпить данные со страницы и вернуть результат
- прокликать цепочку кнопок для тестирования интерфейса
- залогиниться и сохранить сессию для следующих запусков
- сделать скриншот или PDF-снимок страницы
Примеры запросов агенту
- Открой сайт example.com, сделай скриншот и вернись сюда
- Залогинься в мой аккаунт на github.com и проверь, что получилось
- Кликни по кнопке "Скачать отчёт" и дай мне ссылку на файл
Как установить dev-browser
1Через Skills CLI (Vercel)
npx skills add SawyerHood/dev-browser --skill dev-browser -a claude-code2Вручную: положить файлы
~/.claude/skills/dev-browser/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/dev-browser/
1Через Skills CLI (Vercel)
npx skills add SawyerHood/dev-browser --skill dev-browser -a codex2Вручную: положить файлы
.agents/skills/dev-browser/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add SawyerHood/dev-browser --skill dev-browser -a cursor2Вручную: положить файлы
.cursor/skills/dev-browser/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install SawyerHood/dev-browser dev-browser2Вручную: положить файлы
.github/skills/dev-browser/SKILL.md1Через Skills CLI (Vercel)
npx skills add SawyerHood/dev-browser --skill dev-browser -a gemini-cli2Командой платформы
gemini skills install https://github.com/SawyerHood/dev-browser --path skills/dev-browserВручную: положить файлы
.devin/skills/dev-browser/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add SawyerHood/dev-browser --skill dev-browser -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
Похожие
Вопросы о dev-browser
Как установить dev-browser в Claude Code?
Запусти npx skills add SawyerHood/dev-browser --skill dev-browser -a claude-code. Скилл установится в ~/.claude/skills/dev-browser/. После этого ты сможешь использовать dev-browser команды в Claude Code.
Что делает dev-browser?
Это инструмент для автоматизации браузера. Ты пишешь короткие скрипты на JavaScript, которые управляют Chrome: открывают сайты, кликают по элементам, заполняют формы, извлекают данные. Состояние браузера сохраняется между вызовами.
Почему ссылки на элементы (refs) сбрасываются?
Refs привязаны к конкретному состоянию страницы. Когда ты переходишь на новый URL через page.goto(), страница меняется и все старые ссылки становятся невалидными. Вызови page.snapshot() заново, чтобы получить актуальные refs.
Исходный текст
SKILL.md · MIT
---
name: dev-browser
description: Browser automation with persistent named pages via the dev-browser CLI. Use when users ask to navigate websites, fill forms, take screenshots, extract web data, test web apps, log into sites, or automate browser workflows. Trigger phrases include "go to [url]", "click on", "fill out the form", "take a screenshot", "scrape", "automate", "test the website", "log into", "open the browser", or any browser interaction request.
---
# dev-browser
CLI for controlling a real Chrome with short Puppeteer scripts. One warm daemon; named pages persist between runs.
```bash
npm install -g dev-browser # bun add -g dev-browser works too; the first run downloads the binary if the install script was blocked
dev-browser install # only if the first run says "No Chrome found"
```
Run `dev-browser --help` (full guide; `dev-browser help <topic>` for one section) before non-trivial work. Quick start:
```bash
dev-browser <<'EOF'
const page = await browser.getPage("main"); // named page persists across runs
await page.goto("https://example.com"); // default waitUntil: domcontentloaded
await page.snapshot({ interactive: true }) // ARIA tree with refs; last expression is printed
EOF
dev-browser -e 'const p = await browser.getPage("main"); await p.click("ref/e6"); await p.waitForLoad(); p.url()'
```
Gotchas: end lines with semicolons (a line starting with `(` continues the previous one); return an object as
`({ a, b })`; `page.click` never waits (use `waitForSelector` first); page names are per browser (`--headless` and
headed are separate Chromes and profiles); refs reset on navigation — re-snapshot; file paths resolve against your cwd
(uploadFile, screenshot/pdf `path`); do not run parallel dev-browser calls against the same named page.
© SawyerHood · MIT · SawyerHood/dev-browser