Создание расширений с помощью агентов программирования

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

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

Мы создали навык для агентов, пишущих код, который предназначен специально для разработки расширений. Этот навык – часть нашей более широкой инициативы Modern Web Guidance, которая предоставляет ИИ-агентам по программированию знания о веб-платформе, лучшие практики и современные шаблоны API.

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

Настройка

Modern Web Guidance

Чтобы использовать пакет навыков, установите Modern Web Guidance в нужную среду и добавьте в нее навык расширений. Ниже приведены инструкции для некоторых популярных инструментов.

ИКС

Для большинства агентов программирования (включая Gemini CLI, Claude Code и Codex) рекомендуется установка через modern-web-guidance CLI, созданный командой Chrome. Установка навыков через CLI modern-web-guidance позволит автоматически поддерживать их в актуальном состоянии.

  npx modern-web-guidance@latest install --choose

Запустится интерактивный мастер, который поможет установить навыки в соответствии с вашими предпочтениями. Когда появятся варианты, выберите агентов по программированию и укажите chrome-extensions и modern-web-guidance.

Antigravity

При установке Antigravity вы можете выбрать плагин Modern Web Guidance, который включает навык расширений, или добавить его в разделе Customizations (Настройки) > Build With Google Plugins (Плагины Build with Google) > Modern Web Guidance.

Инструменты разработчика Chrome для агентов программирования

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

Ниже приведены инструкции для некоторых популярных агентов.

Antigravity

1. Скачайте Antigravity IDE (не рекомендуется, так как не позволяет вручную редактировать конфигурацию MCP-сервера).

2. При запуске или в разделе Настройки > Настройки в разделе Build with Google включите инструменты разработчика Chrome. Будет установлен только навык инструментов разработчика Chrome, но не MCP-сервер.

   

3. Чтобы добавить сервер MCP для инструментов разработчика Chrome, перейдите в Настройки > Персонализация, нажмите кнопку Добавить сервер MCP и найдите инструменты разработчика Chrome.

   

   

   

4. Нажмите Открыть конфигурацию MCP, чтобы открыть конфигурацию сервера MCP. Чтобы увидеть файл конфигурации в IDE, закройте настройки.

   

5. Добавьте два параметра конфигурации: --categoryExtensions (чтобы включить инструменты расширений) и --autoConnect (чтобы разрешить подключение к существующему профилю Chrome, что необходимо при использовании встроенных API ИИ Chrome или при необходимости входа).

   {
    "mcpServers": {
      "chrome-devtools-mcp": {
        "args": [
          "-y",
          "chrome-devtools-mcp@latest",
          "--categoryExtensions",
          "--autoConnect"
        ],
        "command": "npx"
      }
    }
   }
   

6. Чтобы включить удаленную отладку, откройте Chrome, перейдите на страницу chrome://inspect/#remote-debugging и выберите Разрешить удаленную отладку для этого экземпляра браузера.

   

7. Перезапустите Antigravity IDE.

8. Создайте рабочую область и тестовый запрос: "Создай расширение Chrome, которое выводит сообщение "Привет, мир!". Протестируйте сайт с помощью инструментов разработчика Chrome. Когда агент начнет тестировать расширение в браузере, Chrome покажет диалоговое окно с запросом разрешения на удаленную отладку. Нажмите Разрешить. Пока сеанс удаленной отладки включен, в Chrome будет показываться баннер "Браузером Chrome управляет автоматизированное тестовое ПО".

<figure>
  <img src="image/antigravityide--u84rk62f5t9.png" alt="The remote debugging warning banner and approval popup dialog in Chrome." class="screenshot" width="800">
  <figcaption>The remote debugging banner indicating automated browser control is active.</figcaption>
</figure>

Claude Code

  claude mcp add chrome-devtools --scope project -- npx chrome-devtools-mcp@latest --categoryExtensions --autoConnect

Другие агенты

Инструкции по настройке других агентов можно найти в документации по MCP для инструментов разработчика Chrome на GitHub.

Инструкции для агента CHROMEWEBSTORE.md

Важная часть публикации расширения – заполнение Личного кабинета разработчика. Этот навык решает эту проблему, позволяя вашему агенту по программированию создавать и поддерживать файл CHROMEWEBSTORE.md, в котором отслеживается необходимая информация, включая обоснования для каждого запроса разрешений в коде.

Навык будет активироваться, когда вы используете фразы вроде "Давай опубликуем это" или "Подготовь это расширение для магазина". Чтобы оптимизировать рабочие процессы агента, добавьте в его системные инструкции (например, ~/.gemini/GEMINI.md для Antigravity или ~/.claude/CLAUDE.md для Claude) следующее:

Whenever you are creating or making changes to a Chrome extension, create and manage a CHROMEWEBSTORE.md file. You can use the chrome-extensions skill to learn about the format of this file.

Как создавать и тестировать расширения с помощью агентов программирования

Навык расширения, включенный в Modern Web Guidance, помогает агентам тремя основными способами:

• Актуальные знания об API. Агенты получают информацию о последних API, которые могли быть выпущены после обучения используемой вами модели.
• Рекомендации. Агенты получают доступ ко всем рекомендациям, которые наша команда собрала за годы создания расширений Chrome.
• Готовность к отправке. Вы можете отслеживать, какая информация нужна для отправки расширения в интернет-магазин Chrome. Это упрощает распространение.

Modern Web Guidance также включает навыки, которые охватывают все, что нужно для обеспечения отличного пользовательского опыта, например производительность, специальные возможности и современные API. Например, встроенные навыки API ИИ гарантируют, что агенты ИИ-кодирования всегда используют последнюю версию API вместе с дополнительной информацией о явных архитектурных правилах и аппаратных ограничениях для использования этих API, чтобы обеспечить эффективное управление загрузками моделей, сосредоточиться на безопасности и стратегиях корректного отката.

Навык также помогает агенту отслеживать необходимую информацию для публикации, включая обоснования для каждого запроса разрешений в коде. Например, если вы попросите агента программирования создать расширение с помощью Side Panel API и опубликовать его в интернет-магазине Chrome, агент поймет, что ему нужно разрешение sidePanel. Затем будет создан файл CHROMEWEBSTORE.md с обоснованием. Когда вы будете готовы отправить расширение на проверку, вы сможете просмотреть обоснование, при необходимости скорректировать его и скопировать в Личный кабинет разработчика.

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

• Устанавливать и удалять расширения.
• Показать список всех установленных расширений и перезагрузить их.
• Запускать действия расширений.
• Проверьте все поверхности расширения (всплывающее окно, боковую панель, сервис-воркер).

Вот пример запроса и видео, показывающее, как это работает на практике:

Build a simple "Quick notes" extension that opens a popup text area to save notes and test it in the browser.

В этом случае агент должен создать файл Manifest V3 и запросить разрешение storage, поскольку ему нужно сохранять данные. Теперь агент может создать расширение, установить его, запустить и проверить стабильность работы, не выходя из чата.

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

Примеры запросов для оптимизации распространения с помощью CHROMEWEBSTORE.md

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

• Первая публикация. Выберите этот вариант, если расширение готово и вы хотите опубликовать его в интернет-магазине Chrome.

Prepare the extension for publication on the Chrome Web Store.

• Обновление разрешений и обоснований. В интернет-магазине Chrome действует правило, согласно которому расширение должно иметь только одно назначение. Кроме того, для каждого разрешения, запрашиваемого в файле manifest.json, требуется подробное обоснование.

We just added the 'declarativeNetRequest' and 'storage' permissions to our manifest. Let's update our store listing.

• Обработка отклонения в магазине. Если ваше расширение отклонено или помечено во время проверки, вы можете сообщить причину отклонения агенту и попросить его обновить метаданные соответствия.

Our extension submission was rejected because our privacy policy doesn't explicitly mention how we handle user data locally. Let's update the privacy policy section in CHROMEWEBSTORE.md to resolve this.

Заключение

Сочетание навыков Modern Web Guidance с инструментами разработчика Chrome для агентов помогает быстрее создавать высококачественные функции, а также обеспечивает стабильность расширения и его готовность к отправке в интернет-магазин Chrome.

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