Использование Claude Code с Chrome (бета)
Подключите Claude Code к браузеру Chrome для тестирования веб-приложений, отладки с помощью логов консоли, автоматизации заполнения форм и извлечения данных со страниц.
Claude Code интегрируется с расширением Claude in Chrome для браузера, чтобы предоставить вам возможности автоматизации браузера из CLI или расширения VS Code. Создавайте свой код, а затем тестируйте и отлаживайте его в браузере без переключения контекста.
Claude открывает новые вкладки для задач браузера и использует состояние входа вашего браузера, поэтому он может получить доступ к любому сайту, на который вы уже вошли. Действия браузера выполняются в видимом окне Chrome в реальном времени. Когда Claude встречает страницу входа или CAPTCHA, он приостанавливается и просит вас обработать это вручную.
Возможности
С подключенным Chrome вы можете объединять действия браузера с задачами кодирования в единый рабочий процесс:
- Живая отладка: читайте ошибки консоли и состояние DOM напрямую, а затем исправьте код, который их вызвал
- Проверка дизайна: создайте пользовательский интерфейс на основе макета Figma, а затем откройте его в браузере, чтобы проверить соответствие
- Тестирование веб-приложений: тестируйте валидацию форм, проверяйте визуальные регрессии или проверяйте потоки пользователей
- Аутентифицированные веб-приложения: взаимодействуйте с Google Docs, Gmail, Notion или любым приложением, в которое вы вошли, без коннекторов API
- Извлечение данных: извлекайте структурированную информацию со страниц и сохраняйте её локально
- Автоматизация задач: автоматизируйте повторяющиеся задачи браузера, такие как ввод данных, заполнение форм или многосайтовые рабочие процессы
- Запись сеанса: записывайте взаимодействия браузера в виде GIF-файлов для документирования или обмена информацией о том, что произошло
Предварительные требования
Перед использованием Claude Code с Chrome вам необходимо:
- Браузер Google Chrome или Microsoft Edge
- Расширение Claude in Chrome версии 1.0.36 или выше, доступное в Chrome Web Store для обоих браузеров
- Claude Code версии 2.0.73 или выше
- Прямой план Anthropic (Pro, Max, Team или Enterprise)
Начало работы в CLI
Запустите Claude Code с Chrome
Запустите Claude Code с флагом --chrome:
claude --chrome
Вы также можете включить Chrome в существующем сеансе, выполнив /chrome.
Попросите Claude использовать браузер
Этот пример переходит на страницу, взаимодействует с ней и сообщает, что он находит, всё из вашего терминала или редактора:
Go to code.claude.com/docs, click on the search box,
type "hooks", and tell me what results appear
Выполните /chrome в любое время, чтобы проверить статус подключения, управлять разрешениями, переподключить расширение или выбрать, какой подключённый браузер использовать. Если при запуске действия браузера подключено более одного браузера, Claude предложит вам выбрать один.
Для VS Code см. автоматизацию браузера в VS Code.
Включение Chrome по умолчанию
Чтобы избежать передачи --chrome в каждом сеансе, выполните /chrome и выберите "Включено по умолчанию".
В расширении VS Code Chrome доступен всякий раз, когда установлено расширение Chrome. Дополнительный флаг не требуется.
Управление разрешениями сайта
Разрешения на уровне сайта наследуются из расширения Chrome. Управляйте разрешениями в параметрах расширения Chrome, чтобы контролировать, какие сайты Claude может просматривать, нажимать и вводить текст.
Примеры рабочих процессов
Эти примеры показывают распространённые способы объединения действий браузера с задачами кодирования. Выполните /mcp и выберите claude-in-chrome, чтобы увидеть полный список доступных инструментов браузера.
Тестирование локального веб-приложения
При разработке веб-приложения попросите Claude проверить, что ваши изменения работают правильно:
I just updated the login form validation. Can you open localhost:3000,
try submitting the form with invalid data, and check if the error
messages appear correctly?
Claude переходит на ваш локальный сервер, взаимодействует с формой и сообщает, что он наблюдает.
Отладка с помощью логов консоли
Claude может читать вывод консоли, чтобы помочь диагностировать проблемы. Скажите Claude, какие шаблоны искать, а не просите весь вывод консоли, так как логи могут быть многословными:
Open the dashboard page and check the console for any errors when
the page loads.
Claude читает сообщения консоли и может фильтровать по определённым шаблонам или типам ошибок.
Автоматизация заполнения форм
Ускорьте повторяющиеся задачи ввода данных:
I have a spreadsheet of customer contacts in contacts.csv. For each row,
go to the CRM at crm.example.com, click "Add Contact", and fill in the
name, email, and phone fields.
Claude читает ваш локальный файл, переходит по веб-интерфейсу и вводит данные для каждой записи.
Создание контента в Google Docs
Используйте Claude для прямого написания в ваших документах без настройки API:
Draft a project update based on the recent commits and add it to my
Google Doc at docs.google.com/document/d/abc123
Claude открывает документ, нажимает в редактор и вводит контент. Это работает с любым веб-приложением, в которое вы вошли: Gmail, Notion, Sheets и многое другое.
Извлечение данных со страниц
Извлекайте структурированную информацию с веб-сайтов:
Go to the product listings page and extract the name, price, and
availability for each item. Save the results as a CSV file.
Claude переходит на страницу, читает контент и компилирует данные в структурированный формат.
Запуск многосайтовых рабочих процессов
Координируйте задачи на нескольких веб-сайтах:
Check my calendar for meetings tomorrow, then for each meeting with
an external attendee, look up their company website and add a note
about what they do.
Claude работает на разных вкладках, чтобы собрать информацию и завершить рабочий процесс.
Запись демо-GIF
Создавайте общедоступные записи взаимодействий браузера:
Record a GIF showing how to complete the checkout flow, from adding
an item to the cart through to the confirmation page.
Claude записывает последовательность взаимодействий и сохраняет её как GIF-файл.
Troubleshooting
Расширение не обнаружено
Если Claude Code не может обнаружить расширение Chrome:
- Убедитесь, что расширение Chrome установлено и включено в
chrome://extensions - Убедитесь, что Claude Code обновлён, выполнив
claude --version - Проверьте, что Chrome запущен
- Выполните
/chromeи выберите "Reconnect extension", чтобы переустановить соединение - Если проблема сохраняется, перезагрузите Claude Code и Chrome
При первом включении интеграции с Chrome, Claude Code устанавливает файл конфигурации хоста собственного обмена сообщениями. Chrome читает этот файл при запуске, поэтому если расширение не обнаружено при первой попытке, перезагрузите Chrome, чтобы подобрать новую конфигурацию.
Если соединение по-прежнему не удаётся, убедитесь, что файл конфигурации хоста существует в:
Для Chrome:
- macOS:
~/Library/Application Support/Google/Chrome/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.json - Linux:
~/.config/google-chrome/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.json - Windows: проверьте
HKCU\Software\Google\Chrome\NativeMessagingHosts\в реестре Windows
Для Edge:
- macOS:
~/Library/Application Support/Microsoft Edge/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.json - Linux:
~/.config/microsoft-edge/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.json - Windows: проверьте
HKCU\Software\Microsoft\Edge\NativeMessagingHosts\в реестре Windows
Браузер не отвечает
Если команды браузера Claude перестают работать:
- Проверьте, не блокирует ли модальное диалоговое окно (alert, confirm, prompt) страницу. Диалоговые окна JavaScript блокируют события браузера и препятствуют получению команд Claude. Закройте диалоговое окно вручную, а затем скажите Claude продолжить.
- Попросите Claude создать новую вкладку и повторить попытку
- Перезагрузите расширение Chrome, отключив и повторно включив его в
chrome://extensions
Разрыв соединения во время длительных сеансов
Service worker расширения Chrome может перейти в режим ожидания во время расширенных сеансов, что нарушает соединение. Если инструменты браузера перестают работать после периода неактивности, выполните /chrome и выберите "Reconnect extension".
Проблемы, специфичные для Windows
На Windows вы можете столкнуться с:
- Конфликты именованных каналов (EADDRINUSE): если другой процесс использует тот же именованный канал, перезагрузите Claude Code. Закройте все остальные сеансы Claude Code, которые могут использовать Chrome.
- Ошибки хоста собственного обмена сообщениями: если хост собственного обмена сообщениями падает при запуске, попробуйте переустановить Claude Code, чтобы восстановить конфигурацию хоста.
Распространённые сообщения об ошибках
Это наиболее часто встречающиеся ошибки и способы их решения:
| Ошибка | Причина | Решение |
|---|---|---|
| "Browser extension is not connected" | Хост собственного обмена сообщениями не может достичь расширение | Перезагрузите Chrome и Claude Code, затем выполните /chrome для переподключения |
| "Extension not detected" | Расширение Chrome не установлено или отключено | Установите или включите расширение в chrome://extensions |
| "No tab available" | Claude попытался действовать до того, как вкладка была готова | Попросите Claude создать новую вкладку и повторить попытку |
| "Receiving end does not exist" | Service worker расширения перешёл в режим ожидания | Выполните /chrome и выберите "Reconnect extension" |
See also
- Использование компьютера: управление собственными приложениями macOS, когда задача не может быть выполнена в браузере
- Использование Claude Code в VS Code: автоматизация браузера в расширении VS Code
- Справочник CLI: флаги командной строки, включая
--chrome - Распространённые рабочие процессы: дополнительные способы использования Claude Code
- Данные и конфиденциальность: как Claude Code обрабатывает ваши данные
- Начало работы с Claude in Chrome: полная документация расширения Chrome, включая сочетания клавиш, планирование и разрешения