Теперь агенты искусственного интеллекта, занимающиеся разработкой кода, такие как Antigravity, могут генерировать код расширений с впечатляющей точностью. Однако, чтобы по-настоящему раскрыть их потенциал и обеспечить высокое качество результатов, необходимо предоставить им правильный контекст и инструменты.
В этом руководстве объясняется, как настроить необходимые инструменты в ваших агентах для разработки кода и как они могут помочь вам быстрее создавать более качественные расширения.
Мы разработали навык для программистов, специально предназначенный для разработки расширений. Этот навык является частью нашей более масштабной инициативы Modern Web Guidance , которая предоставляет ИИ-программистам экспертные знания о веб-платформах, лучшие практики и современные шаблоны API.
Но создание расширения — это только первый шаг. Чтобы помочь вам убедиться, что ваш код работает должным образом, Chrome DevTools для агентов позволяет помощникам по программированию на основе ИИ отлаживать расширения непосредственно в Chrome и пользоваться возможностями отладки DevTools и анализом производительности.
Настраивать
Современные рекомендации по веб-разработке
Чтобы использовать пакет навыков, установите Modern Web Guidance в предпочитаемую вами среду и добавьте к ней навык расширений. Ниже приведены инструкции для некоторых популярных инструментов.
CLI
Рекомендуемый способ установки большинства агентов для разработки кода (включая Gemini CLI, Claude Code и Codex) — использование CLI modern-web-guidance разработанного командой Chrome. Установка навыков через CLI modern-web-guidance автоматически обновляет эти навыки.
npx modern-web-guidance@latest install --choose
Это запустит интерактивный мастер для установки навыков в соответствии с вашими предпочтениями. При появлении вариантов выберите своего(их) агента(ов) программирования и укажите одновременно chrome-extensions и modern-web-guidance .
Антигравитация
При установке Antigravity вы можете выбрать плагин Modern Web Guidance , который включает в себя функцию расширений, или добавить его через «Настройки» > «Создать с помощью плагинов Google» > «Modern Web Guidance» .
Инструменты разработчика Chrome для агентов кодирования
Вы можете добавить Chrome DevTools для агентов к выбранному вами агенту разработки либо в виде плагина, расширения, либо в качестве сервера MCP.
Вот инструкции для некоторых из самых популярных агентов.
Антигравитация
Чтобы использовать сервер MCP из Chrome DevTools, следуйте инструкциям в документации Antigravity по установке пользовательского сервера MCP . Добавьте следующее в конфигурацию сервера MCP:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"chrome-devtools-mcp@latest",
"--category-extensions",
"-y"
]
}
}
}
Кодекс Клода
claude mcp add chrome-devtools --scope project -- npx chrome-devtools-mcp@latest --categoryExtensions
Другие агенты
Инструкции по настройке других агентов см. в документации Chrome DevTools MCP на 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 Web Store, упрощая его распространение.
В раздел «Современные веб-инструкции» также включены навыки, охватывающие все необходимое для обеспечения превосходного пользовательского опыта, такие как производительность, доступность и современные API. Например, встроенные навыки работы с API для ИИ гарантируют, что агенты ИИ всегда используют последнюю версию API вместе с дополнительной информацией о явных архитектурных правилах и аппаратных ограничениях для использования этих API, что позволяет эффективно управлять загрузкой моделей, уделять внимание безопасности и использовать стратегии резервного копирования.
Этот навык также помогает вашему агенту отслеживать необходимую информацию для публикации, включая обоснования для каждого запрашиваемого разрешения в коде. Например, если вы попросите своего агента-программиста создать расширение с использованием API боковой панели и опубликовать его в Chrome Web Store, агент распознает, что ему требуется разрешение на использование 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 .
- Первая публикация : Когда ваше расширение полностью функционально и вы хотите впервые появиться в магазине приложений.
Prepare the extension for publication on the Chrome Web Store.
- Обновление разрешений и обоснований : Chrome Web Store придерживается политики единственного назначения и требует подробного обоснования для каждого запрашиваемого разрешения в файле
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 DevTools для агентов помогает быстрее создавать высококачественные функции, а также гарантирует стабильность вашего расширения и его готовность к отправке в Chrome Web Store.
Начните экспериментировать с этими инструментами в своем следующем проекте, чтобы увидеть, как они могут оптимизировать разработку расширений от первоначального прототипа до публикации.