chrome-cdp-live-browser — скилл для Claude Code
Подключает агента к уже открытому Chrome по Chrome DevTools Protocol. Работает с вашими вкладками, логинами и текущим состоянием страницы.
npx skills add reason-machines/trending-skills --skill chrome-cdp-live-browser -a claude-codeЧто делает chrome-cdp-live-browser
Скилл даёт агенту доступ к запущенному браузеру через CDP. В отличие от инструментов, которые поднимают отдельный чистый браузер, здесь агент видит те вкладки, что у вас уже открыты, вместе с cookies и активными сессиями. Список вкладок, скриншот, семантическое дерево доступности, HTML целиком или по CSS-селектору, выполнение JavaScript, переход по URL, клик по элементу или по координатам, ввод текста, тайминги сетевых ресурсов — всё это отдельные команды через scripts/cdp.mjs. Есть и сырой проброс команд CDP.
Устройство простое: на каждую вкладку держится один WebSocket-демон, поэтому модальное окно «Allow debugging» появляется один раз, а не на каждой команде. Ставить npm-пакеты не нужно, хватит Node.js 22+. Команда type работает и внутри cross-origin iframe. Демоны останавливаются через stop, для одной вкладки — stop <target>.
Перед первым запуском включите удалённую отладку: откройте chrome://inspect/#remote-debugging и переключите тумблер. Скрипт сам находит Chrome, Chromium, Brave, Edge и Vivaldi на macOS, Linux и Windows; для нестандартной установки путь к DevToolsActivePort задаётся переменной CDP_PORT_FILE. Без включённой отладки ни одна команда не сработает, а open дополнительно вызывает запрос «Allow» в самом Chrome.
Какие задачи решает
- прочитать страницу, на которой вы уже авторизованы
- заполнить форму и отправить её из агента
- снять скриншот открытой вкладки
- вытащить данные со страницы через JavaScript
- догрузить пагинацию кликами по кнопке
Примеры запросов агенту
- Покажи список открытых вкладок в Chrome
- Сделай скриншот вкладки с Gmail
- Вытащи заголовок страницы через
evalна вкладке A1B2
Как установить chrome-cdp-live-browser
1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill chrome-cdp-live-browser -a claude-code2Вручную: положить файлы
~/.claude/skills/chrome-cdp-live-browser/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/chrome-cdp-live-browser/
1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill chrome-cdp-live-browser -a codex2Вручную: положить файлы
.agents/skills/chrome-cdp-live-browser/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill chrome-cdp-live-browser -a cursor2Вручную: положить файлы
.cursor/skills/chrome-cdp-live-browser/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install reason-machines/trending-skills chrome-cdp-live-browser2Вручную: положить файлы
.github/skills/chrome-cdp-live-browser/SKILL.md1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill chrome-cdp-live-browser -a gemini-cli2Командой платформы
gemini skills install https://github.com/reason-machines/trending-skills --path skills/chrome-cdp-live-browserВручную: положить файлы
.devin/skills/chrome-cdp-live-browser/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill chrome-cdp-live-browser -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о chrome-cdp-live-browser
Как установить chrome-cdp-live-browser в Claude Code?
Выполните npx skills add reason-machines/trending-skills --skill chrome-cdp-live-browser -a claude-code. Скилл окажется в ~/.claude/skills/chrome-cdp-live-browser/SKILL.md.
Что делает chrome-cdp-live-browser?
Соединяет агента с вашим работающим Chrome по Chrome DevTools Protocol. Агент читает и меняет открытые вкладки, сохраняя ваши логины и cookies.
Что нужно, чтобы скилл заработал?
Node.js 22+ и включённый тумблер удалённой отладки на chrome://inspect/#remote-debugging. Для нестандартной установки браузера укажите путь к DevToolsActivePort в CDP_PORT_FILE.
