Отладка расширений Chrome с помощью агентов искусственного интеллекта.

Инструменты разработчика Chrome для агентов позволяют вашему агенту запускать сеанс браузера и устанавливать расширения Chrome или взаимодействовать с ними, используя сервер MCP. Это позволяет вашему агенту-программисту контролировать жизненный цикл расширения: установку, перезагрузку и запуск действий.

Вместо того чтобы вручную загружать распакованное расширение, каждый раз нажимать кнопку обновления на странице управления расширениями при изменении кода и вручную запускать тестирование расширения, дайте указание вашему ИИ-агенту управлять всем процессом автономно. Это устраняет разрыв между статической генерацией кода и тестированием расширений в реальном времени.

С помощью инструментов расширения вы можете выполнить следующие действия:

  • Установка расширений: Установите распакованное расширение Chrome из локальной директории.
  • Список расширений: Получить список всех установленных расширений Chrome, включая их название, идентификатор, версию и статус включения.
  • Перезагрузка расширений: Перезагрузите распакованное расширение Chrome по его идентификатору, чтобы мгновенно применить изменения кода.
  • Запуск действий: Запуск действия по умолчанию для расширения по его идентификатору, например, открытие меню или выполнение фонового скрипта (см. chrome.action в документации API ).
    • Удаление расширений: Удалите расширение Chrome из сессии браузера по его идентификатору.

Предварительные требования

Перед использованием инструментов расширения убедитесь, что у вас установлено следующее:

  • Экспериментальный флаг: Категория «Расширения» по умолчанию не активна в DevTools for Agents. Необходимо настроить сервер MCP с флагом --categoryExtensions .
  • Распакованные расширения: Инструменты, подобные install_extension требуют указания абсолютного пути к распакованной папке расширения, что делает их идеальными для локальной разработки.

Примеры использования расширений Chrome

Поручите своему агенту управлять жизненным циклом вашего расширения во время разработки и исправления ошибок.

Примечание: Этапы выполнения агента являются примерами возможного поведения. Ваш агент может действовать иначе.

Быстро обновляйте и перезагружайте расширение.

Ручная перезагрузка расширения после каждого изменения файла замедляет разработку. Поручите своему агенту применить исправление кода и немедленно перезагрузить расширение, чтобы проверить новое поведение без ручного вмешательства.

Пример подсказки:

Можно использовать общий подход:

Verify the extension has access to the active tab.

Или вы можете быть более подробными:

Update the manifest.json to include the "activeTab" permission. Then, reload the extension with ID 'abc123xyz' and trigger its default action to ensure it works.

Пример выполнения агента: Ваш агент редактирует файл manifest.json в вашей файловой системе. Затем он вызывает инструмент reload_extension , используя предоставленный ID. Наконец, он вызывает инструмент trigger_extension_action для активации расширения и проверки отсутствия ошибок доступа в консоли.

Проверьте действие по умолчанию расширения на целевой странице.

Часто возникает необходимость проверить, как скрипт контента или действие расширения взаимодействует с конкретным веб-сайтом. Автоматизируйте этот процесс, дав указание вашему агенту перейти на сайт, установить расширение и запустить его.

Пример подсказки:

Можно использовать общий подход:

Test my extension on example.com and verify it works correctly.

Или вы можете быть более подробными:

Navigate to example.com, install the unpacked extension located at '/Users/dev/my-extension', and trigger the extension action. Check the console logs to verify the content script executed correctly.

Пример выполнения агента: Ваш агент переходит по целевому URL-адресу с помощью navigate_page . Затем он использует install_extension с указанным абсолютным путем. После загрузки расширения он выполняет trigger_extension_action для имитации щелчка пользователя. Наконец, он использует list_console_messages для подтверждения того, что скрипт содержимого выполнился и выдал ожидаемый результат.

Проверьте установленные расширения и выполните очистку.

В процессе автоматизированного тестирования может потребоваться проверить, правильно ли загружено расширение с нужной версией, или удалить его, чтобы обеспечить корректное состояние для следующего теста.

Пример подсказки:

Uninstall 'My Test Extension' from the browser.

Пример выполнения агента: Ваш агент использует инструмент list_extensions для получения списка установленных расширений и их метаданных. Он анализирует выходные данные, чтобы определить идентификатор, связанный с "Моим тестовым расширением". Затем он использует инструмент uninstall_extension с этим идентификатором для безопасного удаления расширения из браузера.

Создайте новое расширение и протестируйте его.

Создание нового расширения для Chrome с нуля обычно требует создания шаблонных файлов и ручной загрузки распакованной директории в браузер для тестирования. Чтобы избежать этой ручной настройки, поручите вашему агенту сгенерировать начальный код, загрузить расширение и проверить его базовую функциональность от начала до конца за один шаг.

Пример подсказки:

Build a Chrome extension that turns the page background gray when I click its icon. Save the files to '/tmp/gray-bg-ext', navigate to example.com, load the extension, and verify that it works.

Пример выполнения агента: Ваш агент создает базовый файл manifest.json (Manifest V3) и фоновый сервис-воркер, который прослушивает событие chrome.action.onClicked . Затем он переходит на тестовую страницу, вызывает install_extension и использует trigger_extension_action для имитации клика пользователя. Наконец, он проверяет DOM или делает снимок экрана, чтобы подтвердить, что фон стал серым, доказывая работоспособность шаблона.