Browser Extension Skills — 12 скиллов для разработки Chrome-расширений с AI-агентами

Browser Extension Skills — набор из 12 готовых скиллов для AI-кодинг-агентов, который закрывает весь цикл разработки браузерных расширений: от создания проекта до публикации в Chrome Web Store. Репозиторий распространяется под лицензией MIT и спонсируется платформой Extension Booster.

Зачем нужны эти скиллы

Разработка расширений для Chrome — болезненная тема даже для опытных разработчиков. Документация разбросана по разным местам, предупреждения о разрешениях запутывают, отладка ведётся сразу в нескольких контекстах: service worker, content script, popup. А ревью в Chrome Web Store похоже на чёрный ящик — непонятно, за что работу могут отклонить.

Скиллы превращают кодинг-агента в эксперта по расширениям, который умеет:

• собрать каркас проекта за секунды;
• разрабатывать фичи с правильным использованием Chrome API;
• генерировать оптимальный manifest.json с минимальным набором разрешений;
• проверять код на уязвимости и соответствие правилам Chrome Web Store;
• тестировать во всех контекстах расширения;
• создавать иконки и материалы для карточки магазина;
• публиковать расширение с автоматизацией через CI/CD;
• переносить старые расширения с Manifest V2 на V3.

Двенадцать скиллов

Отдельно стоит extension-review: скилл сканирует код по официальному списку причин отклонения — удалённый код, обфускация, лишние разрешения, отсутствие политики приватности, майнинг криптовалют. На выходе — отчёт с серьёзностью проблемы, файлом и готовыми правками, плюс вердикт: «скорее одобрят», «нужны правки» или «отклонят».

Совместимые агенты

Нативная загрузка скиллов работает в Claude Code. Остальные агенты подключают их через файлы правил проекта:

Установка

Рекомендуемый способ — Skills CLI от Vercel (vercel-labs/skills):

# Все скиллы в текущий проект
npx skills add quangpl/browser-extension-skills

# Глобально, доступны во всех проектах
npx skills add quangpl/browser-extension-skills -g

# Только нужные скиллы
npx skills add quangpl/browser-extension-skills -s extension-create,extension-dev

Ручной вариант — склонировать репозиторий и скопировать папки в каталог скиллов агента:

git clone https://github.com/quangpl/browser-extension-skills.git
cp -r browser-extension-skills/skills/* .claude/skills/

Для глобальной установки в Claude Code копируйте в ~/.claude/skills/, для выборочной — только нужные папки, например skills/extension-create.

Быстрый старт

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

1. «Создай Chrome-расширение, которое подсвечивает все ссылки на странице» — агент вызывает extension-create, спрашивает предпочтения по фреймворку, выбирает WXT или create-crxjs и собирает каркас.
2. «Добавь попап со счётчиком ссылок и переключателем подсветки» — включается extension-dev, определяет WXT + React и реализует popup через chrome.tabs.
3. «Сгенерируй все иконки и скриншоты для магазина» — за дело берётся extension-assets и создаёт иконки 16/32/48/128 px.
4. «Проверь расширение на уязвимости и соответствие правилам» — extension-analyze сканирует разрешения, CSP и обработчики сообщений.
5. «Подготовь и опубликуй расширение в Chrome Web Store» — extension-publish проверяет карточку, пакует и отправляет на модерацию.

Архитектура: progressive disclosure

Каждый скилл построен по паттерну progressive disclosure ради экономии токенов:

skills/
├── extension-create/
│   ├── SKILL.md              # краткая шпаргалка (< 150 строк, грузится всегда)
│   └── references/           # подробные доки (агент читает по необходимости)
│       ├── wxt-scaffold-guide.md
│       ├── wxt-entrypoints.md
│       ├── extension-templates.md
│       └── chrome-samples-reference.md
├── extension-dev/
├── extension-manifest/
└── ...

Файл SKILL.md всегда попадает в контекст при активации скилла. Он короткий — до 150 строк. Подробные документы из references/ агент подгружает только когда нужна глубина, и каждый тоже ограничен 150 строками.

Требования

Советы из репозитория

Авторы собрали практику, которую сами скиллы и применяют:

• Разрешения. Предпочитайте activeTab вместо широких tabs и host-разрешений. Несущественные возможности выносите в optional permissions.
• Производительность. Держите content scripts до 50 КБ, тяжёлую логику подгружайте лениво. Service worker должен работать по событиям, без поллинга. Временные данные храните в chrome.storage.session.
• Безопасность. Проверяйте отправителя каждого сообщения (sender.id === chrome.runtime.id). Не используйте innerHTML с недоверенными данными. Не храните API-ключи в коде — выносите на прокси-сервер.
• Тестирование. Расширения не запускаются в headless-режиме Chrome, поэтому E2E-тесты идут с headless: false. На каждый тест — свежий экземпляр браузера, а chrome.*-API мокайте через jest-chrome.
• Публикация. Первые 150 символов описания попадают в поисковую выдачу магазина. Скриншоты 1280x800 с живыми фичами конвертируют лучше всего. Одна позиция в политике — одна понятная функция у расширения.

Итог

Проект молодой, но уже собрал первые звёзды и форки на GitHub. Для тех, кому мало, авторы предлагают премиум-версию набора с расширенными шаблонами и дополнительными скиллами. Если вы делаете расширения для Chrome с помощью агентов — это самый полный набор скиллов под эту задачу: от пустой папки до кнопки «опубликовать». Подробные правила для контрибьюторов описаны в CONTRIBUTING.md.