Как отлаживать расширения Chrome с помощью ИИ-агентов

José Luis Zapata
Matthias Rohmer

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

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

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

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

Требования

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

  • Экспериментальный флаг. Категория "Расширения" неактивна по умолчанию в DevTools для агентов. Вам необходимо настроить MCP-сервер с флагом --categoryExtensions.
  • Распакованные расширения. Таким инструментам, как install_extension, требуется абсолютный путь к папке распакованного расширения, что делает их идеальными для локальной разработки.

  • Доступ к файлам в папке расширения. Сервер может только читать файлы в корневых папках рабочей области. Это корни, которые предоставляет ваш клиент MCP, например каталог проекта. Если клиент не предоставляет корневые каталоги, сервер может получить доступ только к временному каталогу ОС. В macOS этот каталог не является /tmp. Если папка расширения находится за пределами этих корневых папок, install_extension завершается с ошибкой Access denied. Чтобы разрешить другую папку, добавьте флаг --filesystemRoot (псевдоним --workspace) к аргументам сервера:

    "args": ["chrome-devtools-mcp@latest", "--categoryExtensions", "--filesystemRoot=/path/to/extensions"]

    Подробнее о том, как разрешить доступ к файлам за пределами временного каталога…

Примеры использования инструментов для расширений 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, используя предоставленный идентификатор. Наконец, он вызывает инструмент 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, чтобы получить список установленных расширений и их метаданные. Он анализирует выходные данные, чтобы определить идентификатор, связанный с "My Test Extension". Затем инструмент uninstall_extension использует этот идентификатор, чтобы безопасно удалить расширение из браузера.

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

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

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

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

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