Chrome: управление браузером с помощью AI
📚 Навигация по серии: Предыдущая статья 39 Практический старт объединила изученные ранее инструменты в единый рабочий процесс. Эта статья открывает для Claude Code новые возможности — управление браузером Chrome: открытие веб-страниц, чтение ошибок в консоли разработчика, заполнение форм и извлечение данных с сайтов без необходимости покидать терминал.
⚠️ Экспериментальная функция, поведение которой может измениться. Интеграция с Chrome находится на этапе бета-тестирования. Поддерживаемые версии, команды и ограничения соответствуют официальной документации и могут быть изменены в будущих версиях.
Ребята, сегодня мы обсудим функцию, которая буквально «дает Claude Code руки» — управление браузером.
В предыдущих 39 статьях мы заставляли Claude работать в рамках файлов проекта и консоли: читать код, вносить правки, запускать скрипты. Но в реальной веб-разработке огромная часть задач завязана на браузер — проверить валидацию формы входа, прочитать красные ошибки в консоли разработчика (F12) или сверить верстку с макетом. Раньше для этого приходилось переключаться в Chrome, выполнять действия вручную, копировать логи или скриншоты и отправлять их обратно в терминал к Claude.
Теперь этого делать не нужно. Настроив интеграцию с Chrome, вы можете написать в терминале: «открой localhost:3000, отправь форму с неверными данными и проверь сообщение об ошибке». Claude сам запустит браузер, заполнит поля, отправит форму, прочитает текст ошибки и вернет вам отчет. Редактирование кода и его проверка в браузере теперь происходят в рамках одной сессии диалога без постоянного переключения между окнами приложений.
Когда я впервые подключил эту функцию и увидел, как в Chrome открывается новая вкладка, курсор наводится на строку поиска и вводит текст символ за символом, это произвело сильное впечатление. Одно дело — выполнение команд в изолированном контейнере, и совсем другое — когда AI управляет реальным интерфейсом на твоем экране.
Вспомним разделение: MCP-серверы (статья 22) подключают Claude к источникам данных (базы данных, Jira, Slack); интеграция с Chrome подключает AI к вашему повседневному браузеру со всеми сохраненными сессиями авторизации. В этой статье мы разберем возможности инструмента, настройку, ограничения и правила безопасности при работе с реальным браузером.
Прочитав эту статью, вы получите:
- Понимание сути интеграции с Chrome и её отличий от MCP и технологии computer use.
- Пошаговую инструкцию по настройке (установка расширения, запуск с флагом
--chrome, требования к подписке и версиям) и список ограничений. - Шесть сценариев использования (отладка в реальном времени, сверка верстки, заполнение форм, парсинг данных и др.) с примерами запросов.
- Анализ рисков безопасности при работе с реальным браузером и встроенные защитные механизмы.
- Практическое упражнение: подключим Chrome и попросим прочитать страницу.
01 Суть интеграции: как это устроено
Главная идея: интеграция с Chrome позволяет Claude Code использовать ваш текущий браузер со всеми авторизованными сессиями для открытия страниц, кликов, ввода текста и чтения логов.
Ключевой момент — «использовать ваш текущий браузер». В документации указано:
Claude открывает новые вкладки в вашем браузере, наследуя состояние авторизации. Это позволяет ему получать доступ к сайтам, на которых вы уже вошли в систему. Действия выполняются в видимом окне Chrome на вашем экране.
Разберем три важных момента для понимания принципа работы:
- Открываются новые вкладки в вашем текущем браузере, а не изолированное окно инкогнито.
- Наследуется состояние авторизации — если вы авторизованы в Gmail, Notion или панели управления хостингом, Claude сможет войти туда напрямую без настройки API-ключей или копирования токенов.
- Действия визуализируются — вы видите каждое движение курсора и ввод текста на экране, процесс прозрачен для пользователя.
Аналогия: услуга «трезвый водитель». Вы передаете управление своим автомобилем водителю. Он едет на вашей машине — использует ваш транспондер для оплаты дорог, заезжает по вашему пропуску на парковку и ориентируется по вашему навигатору. Ему не нужно оформлять новые документы. При этом контроль остается за вами: если на въезде во двор нужно пройти сканирование лица (которое водитель пройти не может), вы берете управление на себя. Claude в браузере ведет себя как такой «водитель» — он работает в вашем готовом окружении, а встретив страницу входа или капчу (CAPTCHA), останавливается и просит вас помочь.
Какие задачи можно решать с помощью этого инструмента? Выделим основные сценарии с примерами запросов:
- Отладка в реальном времени: чтение ошибок в консоли браузера и структуры DOM с последующим автоматическим исправлением кода проекта силами Claude. Это главное отличие от MCP — AI видит результат работы кода на экране.
- Сверка верстки: визуальное сравнение сверстанного интерфейса с макетом Figma (дополнение к материалам статьи 17).
- Тестирование сценариев: проверка валидации форм ввода, отсутствие сдвигов верстки при разных разрешениях экрана и тестирование путей пользователя.
- Работа в веб-приложениях: написание текстов или изменение настроек в Gmail, Notion, Google Docs без использования API-интеграторов.
- Парсинг данных: сбор табличных данных с веб-страниц (цены, каталоги, остатки) и сохранение их в локальный CSV-файл.
- Запись демонстраций: запись действий в браузере в формате GIF для прикладывания к документации или баг-репортам.
Пример из практики: при отладке верстки возникла ошибка, когда при загрузке страницы в консоли выскакивало предупреждение об обращении к undefined. Поиск ошибки в коде вручную занял бы время. После подключения Chrome достаточно было написать: «открой страницу панели управления, найди в консоли предупреждение при загрузке и укажи проблемную строку в коде». Claude прочитал консоль, нашел стек вызова и указал на пропущенную проверку переменной на null. На всё ушло меньше двух минут, без ручного открытия F12 и копирования логов.
💡 Резюме в одной фразе: Интеграция с Chrome позволяет Claude использовать ваш авторизованный браузер для тестирования интерфейсов, чтения консоли и работы с сайтами, объединяя написание кода и его проверку в единый процесс.
02 Отличия от MCP и технологии computer use
Перед настройкой разберем разницу между доступными инструментами взаимодействия Claude с внешним миром, чтобы вы понимали, какой инструмент выбрать для конкретной задачи.
В описании computer use приведена схема приоритета инструментов — Claude пытается решить задачу от наиболее точечных средств к наиболее общим:
При наличии MCP-сервера для целевого сервиса Claude использует его. Если задачу можно решить через консоль, запускается Bash. Если задача связана с веб-страницами и настроена интеграция с Chrome, используется браузер. В остальных случаях запускается сценарий computer use.
Аналогия: выбор средства связи. Если можно отправить текстовое сообщение — вы отправляете текст (быстро и просто). Если текста мало — вы звоните по телефону. Если вопрос требует личного присутствия — вы едете на встречу (дольше и сложнее). Claude выбирает инструменты по схожей логике — от простых и точечных к тяжелым системным инструментам.
Сравним три основных пути взаимодействия:
| Инструмент | Назначение | Когда применяется |
|---|---|---|
| MCP (статья 22) | Интеграция с сервисами через API (базы данных, Slack, Jira) | Для точечного обмена данными со сторонними системами (наивысший приоритет) |
| Chrome (эта статья) | Управление веб-страницами в браузере (клики, ввод, чтение DOM) | Для тестирования сайтов и работы в веб-интерфейсах |
| computer use | Управление рабочим столом ОС (клики по иконкам приложений, скриншоты экрана) | Для работы с нативными программами, эмуляторами и софтом без API (низший приоритет) |
Инструмент computer use (управление экраном компьютера) позволяет Claude выйти за рамки браузера, но требует больше ресурсов. Он шире, но работает медленнее: в отличие от Chrome, который видит структуру страницы, computer use буквально кликает по координатам на скриншоте вашего экрана.
Ключевые особенности computer use:
- Функция находится на этапе предварительного тестирования (Research Preview) и доступна только на macOS в режиме CLI (на Windows используется десктопное приложение, статья 10). Требуется подписка Pro / Max и не поддерживается неинтерактивный режим запуска
-p. - Инструмент регистрируется в меню
/mcpпод именемcomputer-useи по умолчанию выключен (требуется ручная активация). - Для работы требуются системные разрешения macOS на доступ к «Универсальному доступу» (Accessibility) и «Записи экрана» (Screen Recording).
Вывод: при наличии API используйте MCP, для работы с сайтами — Chrome, а для управления нативными приложениями ОС — computer use.
💡 Резюме в одной фразе: Взаимодействие с внешним миром строится по цепочке приоритетов: MCP (сервисы) → Chrome (веб-страницы) → computer use (весь экран). Для работы с сайтами оптимальным выбором является интеграция с Chrome.
03 Настройка подключения: расширение и флаг --chrome
Для интеграции вам понадобятся две вещи: установка расширения в Chrome и запуск сессии Claude Code с флагом --chrome. Перед этим проверьте соответствие системным требованиям.
Четыре обязательных требования
Для успешного подключения должны быть соблюдены следующие условия:
| Требование | Описание | Как проверить |
|---|---|---|
| Браузер | Google Chrome или Microsoft Edge | Другие браузеры не поддерживаются (см. ниже) |
| Расширение | Расширение «Claude in Chrome» версии v1.0.36 или выше | На странице chrome://extensions |
| Версия Claude Code | Версия v2.0.73 или выше | Командой claude --version в терминале |
| Тарифный план | Прямая подписка Anthropic (Pro / Max / Team / Enterprise) | Через команду /status в сессии |
Обратите внимание на тарифный план. Интеграция с Chrome недоступна при использовании сторонних провайдеров (Amazon Bedrock, Google Cloud Vertex AI или Microsoft Foundry). При такой схеме работы вам потребуется создать отдельный аккаунт на claude.ai с платной подпиской.
Ограничения по браузерам и окружению
Список систем, в которых подключение не сработает:
- Браузеры: поддерживаются только официальные Chrome и Edge. Браузеры Brave, Arc и другие Chromium-подобные сборки не поддерживаются разработчиками.
- Окружение: не поддерживается работа через WSL (Windows Subsystem for Linux). Запуск Claude Code внутри WSL не сможет подключиться к Chrome, запущенному в Windows.
Использование Arc или Brave Chromium-браузеров приведет к ошибкам подключения /chrome даже при установленном расширении. Для работы функций автоматизации необходимо установить официальный браузер Chrome или Edge.
Пошаговое подключение
Шаг 1: Устанавливаем расширение «Claude in Chrome». Найдите и установите его из интернет-магазина Chrome (или магазина Edge).
Установка расширения и его авторизация требуют стабильного подключения к серверам Anthropic.
Шаг 2: Запускаем Claude Code с флагом --chrome. В консоли введите:
claude --chromeЕсли вы уже находитесь в активной сессии, введите команду /chrome для активации подключения без перезапуска.
Этих шагов достаточно. После подключения с помощью команды /chrome вы сможете управлять разрешениями для сайтов, переподключать расширение или выбирать целевой браузер, если запущено несколько программ.
Автоматическая активация флага
Чтобы не писать флаг --chrome при каждом запуске, введите команду /chrome и выберите пункт «Enable by default» (включить по умолчанию).
Однако учитывайте влияние на контекст:
Включение Chrome по умолчанию увеличивает объем используемого контекста в каждой сессии, так как инструменты работы с браузером загружаются на старте. Если вы заметите быстрый расход лимитов токенов, отключите эту опцию и используйте флаг
--chromeтолько при необходимости.
Инструменты браузера занимают место в рабочей памяти (статья 19). Поэтому для большинства задач программирования, не связанных с вебом, флаг лучше не включать по умолчанию, а активировать его при необходимости.
В расширении для VS Code (статья 08) функции автоматизации браузера доступны по умолчанию при наличии установленного расширения в системе, дополнительных флагов запуска указывать не нужно.
Настройка разрешений для сайтов
Права на просмотр и изменение конкретных сайтов настраиваются на уровне браузера:
Разрешения для сайтов наследуются из настроек расширения Chrome. Управляйте списком разрешенных доменов в свойствах расширения «Claude in Chrome».
Вы можете ограничить список сайтов, к которым Claude будет иметь доступ, повышая безопасность работы.
💡 Резюме в одной фразе: Подключение настраивается установкой расширения в Chrome/Edge и запуском программы с флагом
claude --chrome. Учитывайте, что WSL и сторонние сборки Chromium (Brave, Arc) не поддерживаются, а постоянный запуск флага увеличивает расход токенов.
04 Практические примеры использования
Рассмотрим типовые запросы к браузеру, которые вы можете адаптировать под свои задачи. Все запросы формулируются на естественном языке.
Пример 1: Тестирование локальной верстки
Я обновил стили формы регистрации. Открой страницу localhost:3000,
заполни поля некорректными данными, отправь форму и проверь, появились ли сообщения об ошибках валидации.Claude перейдет по адресу, заполнит форму и пришлет скриншот или текстовый отчет. Это избавляет от необходимости проверять валидацию вручную при каждой правке.
Пример 2: Чтение логов консоли разработчика
Для экономии контекста просите AI искать конкретные ошибки, а не копировать весь лог:
Открой страницу личного кабинета и проверь консоль на наличие ошибок при загрузке.Claude просканирует консоль и отфильтрует системные ошибки.
Пример 3: Пакетное заполнение веб-форм
Прочитай данные контактов из файла contacts.csv. Для каждой строки
перейди в CRM по адресу crm.example.com, нажми кнопку «Создать контакт»
и заполни поля имени, телефона и почты данными из файла.AI последовательно откроет страницы и перенесет данные. Это полезно при рутинном переносе информации.
Пример 4: Создание записей в веб-сервисах
Благодаря общей сессии Claude может работать в ваших документах:
На основе последних коммитов составь отчет об изменениях и
добавь его в конец документа Google Docs по ссылке docs.google.com/document/d/abc123.Claude откроет вкладку, дождется загрузки редактора и внесет текст в документ. Поддерживаются любые сервисы (Notion, Gmail, Sheets), в которых вы авторизованы в браузере.
Пример 5: Извлечение данных (парсинг)
Открой каталог товаров на сайте, собери названия продуктов, их артикулы и цены,
после чего сохрани результат в локальный файл products.csv.AI соберет данные со страницы и запишет их в файл.
Пример 6: Запись обучающей анимации
Запиши GIF-анимацию процесса оформления заказа на сайте:
от добавления товара в корзину до перехода на страницу успешной оплаты.Claude сохранит видео ваших тестов в формате GIF для отчета.
Сравним возможности работы с браузером:
| Задача | Без интеграции с Chrome | С интеграцией с Chrome |
|---|---|---|
| Проверка верстки | Запуск сервера, ручной переход на страницу, сверка глазами | Запрос к AI проверить страницу и прислать отчет |
| Чтение ошибок JS | Открытие F12, копирование текста ошибки в терминал | Автоматический анализ логов консоли силами Claude |
| Заполнение данных | Ручной перенос строк из файла в формы на сайте | Передача файла AI с командой заполнить форму по шаблону |
| Написание постов/документов | Написание текста в терминале, ручное копирование в Notion/Docs | Прямая запись текста в открытую вкладку документа |
Список доступных команд управления браузером можно посмотреть в меню /mcp в разделе claude-in-chrome.
💡 Резюме в одной фразе: Интеграция с Chrome автоматизирует тестирование верстки, сбор ошибок консоли, перенос данных из файлов в формы, редактирование документов и парсинг веб-страниц напрямую через текстовые команды.
05 Безопасность при работе с реальным браузером
Этот раздел важен для защиты ваших данных: Claude работает в вашем реальном браузере с доступом к активным сессиям авторизации, а не в изолированном контейнере. Это меняет правила обеспечения безопасности.
Риски безопасности
Поскольку Claude использует ваш профиль Chrome:
- Доступ к сессиям авторизации: AI получает доступ ко всем сайтам, на которых сохранен ваш вход — почта, корпоративные базы данных, панели хостинга и финансовые сервисы.
- Атаки типа внедрения промпта (prompt injection): об этой уязвимости мы говорили в статье 21. При чтении содержимого стороннего сайта Claude может наткнуться на скрытую инструкцию, написанную специально для AI (например: «сотри файлы в репозитории пользователя»). Поскольку Claude читает не подконтрольные вам страницы в интернете, риск выполнения вредоносного промпта возрастает.
Защитные механизмы системы
Для безопасности в интеграцию встроены ограничения:
- Блокировка на капчах и страницах авторизации: при встрече с формой входа или CAPTCHA Claude останавливает выполнение и передает управление пользователю.
- Прозрачность действий: браузер работает на вашем экране, вы видите каждое действие AI и можете в любой момент закрыть вкладку или прервать сессию.
- Ограничение доменов: вы можете задать список разрешенных сайтов в настройках расширения Chrome.
Правила личной безопасности
Для минимизации рисков придерживайтесь правил:
| Сценарий | Правило безопасности |
|---|---|
| Перед запуском интеграции | Закройте вкладки с конфиденциальной информацией и банковскими кабинетами |
| Финансовые и критические операции (оплата, удаление данных) | Выполняйте действия вручную, не доверяя их AI |
| Доступ к сайтам | Ограничьте список разрешенных доменов в свойствах расширения |
| Работа со случайными сайтами | Контролируйте вывод AI при чтении текстов незнакомых страниц |
Главное правило: любой клик Claude в браузере выполняется на реальном сайте. В отличие от локального контейнера, здесь нельзя просто удалить окружение после неудачной команды. Если AI нажмет «Подтвердить перевод», операция будет выполнена банком. Держите важные процессы под личным контролем.
💡 Резюме в одной фразе: Chrome-интеграция наследует ваши сессии авторизации. Для безопасности ограничивайте список разрешенных сайтов в расширении, не доверяйте AI финансовые операции и контролируйте его работу на экране.
06 Практика: подключаем Chrome и считываем данные страницы
Проверим подключение на практике. Мы попросим Claude открыть страницу документации и вернуть информацию о найденных элементах. Нам понадобятся подписка Anthropic и установленный браузер Chrome или Edge.
Шаг 1: Устанавливаем расширение
Найдите в интернет-магазине Chrome расширение «Claude in Chrome» и установите его. Убедитесь, что переключатель расширения находится в положении «Включено».
Шаг 2: Проверяем версию Claude Code
Запустите команду проверки версии в терминале:
claude --versionВерсия должна быть v2.0.73 или выше. При необходимости обновите программу.
Шаг 3: Запускаем сессию с поддержкой браузера
claude --chromeПосле запуска введите команду /chrome для проверки статуса:
/chromeОжидаемый результат: статус должен указывать на успешное подключение к Chrome. Если соединение отсутствует, закройте и запустите браузер заново, чтобы расширение применило системные настройки обмена сообщениями.
Шаг 4: Отправляем запрос на чтение страницы
Попросим Claude открыть страницу документации:
Открой страницу code.claude.com/docs, найди на ней поисковую строку,
введи текст «hooks» и перечисли названия найденных разделов.Ожидаемый результат: на экране откроется окно вашего браузера Chrome, автоматически создастся новая вкладка, перейдет по указанному адресу, выполнит клик по строке поиска и введет слово «hooks». После завершения поиска Claude выведет список найденных заголовков обратно в терминал. Движение окон на экране подтверждает успешную работу интеграции.
Если в процессе выполнения страница зависнет, проверьте, не открылось ли модальное окно (alert) браузера, блокирующее интерфейс. Закройте его вручную. При долгой неактивности и потере связи выполните переподключение через команду /chrome → «Reconnect extension».
Пройдя эти шаги, вы настроили окружение и проверили базовый сценарий автоматизации браузера.
💡 Резюме в одной фразе: Практический тест состоит из установки расширения, запуска с флагом
--chrome, проверки статуса через/chromeи отправки запроса на чтение страницы. Визуальный контроль за открытием вкладок подтверждает успешную интеграцию.
07 Заключение
Мы настроили интеграцию Claude Code с браузером Chrome и разобрали сценарии её применения.
Резюмируем ключевые аспекты темы:
| Аспект | Описание |
|---|---|
| Что дает интеграция | Позволяет Claude управлять вашим браузером (открывать вкладки, заполнять формы, читать консоль разработчика) |
| Приоритет инструментов | Задачи решаются в порядке: MCP (API-сервисы) → Chrome (веб-интерфейсы) → computer use (весь экран) |
| Системные требования | Официальные Chrome/Edge, расширение версии v1.0.36+, Claude Code v2.0.73+ и подписка Anthropic |
| Ограничения | Не поддерживаются Arc, Brave, сторонние сборки Chromium и работа внутри WSL |
| Сценарии использования | Тестирование верстки, отладка ошибок JS в консоли, парсинг данных, заполнение форм и запись GIF |
| Безопасность | AI наследует ваши авторизованные сессии. Настраивайте права для сайтов в расширении и не доверяйте AI критические действия |
Интеграция с Chrome превращает Claude Code из консольного помощника в полноценного веб-тестировщика, способного самостоятельно проверять результаты изменений на страницах вашего приложения.
В следующей статье 41 «Параллельные задачи» мы научимся оптимизировать время работы. Что делать, если задач много, а один сеанс диалога заставляет выполнять их последовательно? Мы разберем, как запускать несколько параллельных сессий Claude для одновременного выполнения различных задач в вашем проекте, повышая общую скорость разработки.