Chrome-расширение через вайбкодинг создается за один-два вечера: пишешь промт в Cursor или Claude Code, получаешь готовые файлы manifest.json, popup.html и JS, загружаешь в браузер через Developer mode. Без знания JavaScript, без найма разработчика.
В этой статье: структура любого расширения, пошаговый процесс через Cursor и Claude Code, как избежать типичных ошибок, и как опубликовать в Chrome Web Store.
Почему Chrome-расширения это перспективный продукт в 2026
Chrome-расширения — один из самых недооцененных способов монетизации через вайбкодинг. Посмотри на реальные цифры:
- GMass (рассылки через Gmail) — $130 000 в месяц
- Closet Tools (автопостинг на Poshmark) — $42 000 в месяц
- CSS Scan (инспектор стилей) — $100 000 в месяц
- GoFullPage (скриншоты) — $10 000 в месяц при цене $1 в месяц
Что общего у всех этих продуктов? Простая идея, нишевая аудитория и UI, который можно собрать за день с помощью AI. Никакой сложной инфраструктуры, никакого бэкенда по умолчанию — просто несколько файлов в папке.
«Мы создали Chrome-расширение для Vibecoderz буквально за один вечер через Claude Code. Главный инсайт: начинай с максимально узкой проблемы — одна функция, один тип пользователя. Email Extractor зарабатывает $30K+ в месяц, занимая первое место по запросу "email extractor" с 10 000 поисков. Их UI не впечатляет — но проблема решена точно.» — Максим Наговицын, co-founder Vibecoderz
Из чего состоит Chrome-расширение
Прежде чем писать промт, нужно понять структуру. Chrome-расширение — это всего три типа файлов.
| Файл | Что делает | Обязателен |
|---|---|---|
| manifest.json | Конфигурация: имя, версия, permissions, иконки | Да |
| popup.html + popup.js | Интерфейс всплывающего окна при клике на иконку | Для большинства расширений |
| content_script.js | Код, который внедряется в страницы сайтов | Если расширение взаимодействует с контентом |
| background.js | Фоновый процесс, работает постоянно | Для сложной логики и хранения данных |
Минимально жизнеспособное расширение = manifest.json + popup.html + popup.js. Именно это и генерирует AI в первом ответе.
Permissions — главное, что нужно понять
Permissions в manifest.json — это разрешения, которые расширение запрашивает у браузера. Если расширение хочет читать URL текущей страницы, нужен "activeTab". Если хочет хранить данные — "storage". Если запрашивает лишние permissions, Chrome Web Store может отклонить публикацию.
Объясни AI конкретно, что расширение должно делать — и он сам пропишет нужные permissions.
Пошаговый гайд: создаем расширение через Cursor
Шаг 1. Определи одну конкретную функцию
Самая частая ошибка — слишком широкая идея. «Расширение для продуктивности» — плохо. «Расширение, которое сохраняет таймстамп YouTube-видео и при открытии запускает с этой точки» — хорошо.
Перед промтом ответь на три вопроса:
- Что именно делает расширение при клике?
- Взаимодействует ли оно с контентом сайта?
- Нужно ли хранить данные между сессиями?
Шаг 2. Напиши промт в Cursor
Открой Cursor, создай новую папку для проекта, открой AI-чат (Cmd+L) и напиши примерно так:
Создай Chrome-расширение с такой функцией: [опиши функцию].
Расширение должно:
- [конкретное действие 1]
- [конкретное действие 2]
Сгенерируй все необходимые файлы: manifest.json, popup.html, popup.js.
Версия Manifest V3. Добавь только те permissions, которые реально нужны.Cursor создаст файлы прямо в твоей папке. Прочитай manifest.json — там будет имя, версия и список permissions. Если что-то непонятно, спроси Cursor прямо в чате: «объясни что делает каждый permission».
Шаг 3. Создай иконки
Самая частая техническая ошибка при первой установке — ошибка Could not load icon. Чтобы её не получить:
- Создай папку
iconsвнутри папки расширения - Добавь три файла:
icon16.png,icon48.png,icon128.png - Убедись, что в manifest.json пути указаны правильно
Иконки можно сделать в Figma (три артборда 16x16, 48x48, 128x128), экспортировать как PNG. Или попроси Cursor сгенерировать placeholder SVG и конвертировать в PNG через любой онлайн-конвертер.
Шаг 4. Установи расширение локально
- Открой Chrome → три точки → Расширения → Управление расширениями
- Включи «Режим разработчика» (правый верхний угол)
- Нажми «Загрузить распакованное»
- Выбери папку с файлами расширения
Расширение появится в списке. Если есть ошибки — Chrome покажет их красным. Скопируй текст ошибки, вставь в Cursor и попроси исправить.
Лайфхак: итерация с Chrome-расширениями чуть медленнее, чем с обычными сайтами — после каждого изменения нужно обновить расширение в браузере (кнопка «обновить» рядом с карточкой расширения). Учитывай это при дебаге.
Создаем расширение через Claude Code
Claude Code дает больший контроль над структурой проекта. Используй, если хочешь расширение сложнее — с несколькими скриптами или интеграцией с внешним API.
Промт для Claude Code
Создай Chrome Manifest V3 расширение.
Функция: [описание]
Структура файлов:
- manifest.json с permissions: activeTab, storage
- popup.html — минималистичный UI
- popup.js — логика
- icons/icon16.png, icons/icon48.png, icons/icon128.png (создай placeholder)
После генерации объясни, что делает каждый файл, и дай инструкцию по локальной установке.Claude Code создает файлы и сразу пишет документацию. Это особенно удобно, если потом нужно будет итерировать или передавать кому-то.
Как Claude Code помогает с permissions
Если не уверен, какие permissions нужны — опиши сценарий использования, и Claude Code сам подберет минимальный набор. Это важно: Chrome Web Store строже относится к расширениям с избыточными permissions.
Таблица: какой инструмент выбрать для создания расширения
| Инструмент | Для кого | Плюсы | Минусы |
|---|---|---|---|
| Cursor | Кто хочет видеть и редактировать код | Полный контроль, работает с boilerplate | Нужно понимать структуру файлов |
| Claude Code | Кто хочет объяснений и документацию | Хорошо объясняет, минимальные permissions | Медленнее при итерациях |
| ChatGPT (GPT-4) | Новичкам без IDE | Быстро, удобно | Код надо копировать вручную в файлы |
| Emergent | Кто хочет all-in-one среду | GitHub sync, MCP tools, встроенный бэкенд | Платный Pro-план для расширенных возможностей |
Типичные ошибки и как их избежать
Ошибка 1: Could not load icon Решение: создай папку icons, добавь файлы icon16.png, icon48.png, icon128.png. Проверь, что пути в manifest.json совпадают с реальными именами файлов.
Ошибка 2: Manifest V2 вместо V3 Явно укажи в промте «Manifest V3» — это актуальный стандарт 2024-2026. V2 Chrome постепенно отключает.
Ошибка 3: Расширение не видит контент сайта Если нужно взаимодействовать с DOM страницы — нужен content_script.js и permission "activeTab". Объясни это AI в промте.
Ошибка 4: Данные не сохраняются между сессиями Для хранения данных нужен permission "storage" и использование chrome.storage.local.set/get вместо localStorage.
Ошибка 5: Расширение работает только на одном сайте По умолчанию content_script работает на всех сайтах ("matches": ["<all_urls>"]). Если нужно ограничить — укажи конкретный домен в промте.
Как прототипировать дизайн перед кодингом
Прежде чем кодировать popup.html, стоит нарисовать макет. Это сэкономит итерации.
Быстрый способ: Magic Path (no-code прототипирование). Описываешь компонент текстом, получаешь визуальный прототип на бесконечном канвасе. Затем копируешь описание и показываешь AI — он воспроизведет это в коде.
Альтернатива: Figma. Рисуешь экран popup (обычно 300x400px), делаешь скриншот и отправляешь в Cursor с запросом «сверстай этот дизайн в HTML/CSS».
Публикация в Chrome Web Store
Когда расширение работает локально и ты доволен результатом — можно публиковать.
Что нужно для публикации
- Аккаунт разработчика — одноразовый взнос $5 в Chrome Web Store Developer Dashboard
- ZIP-архив — упакуй папку с расширением (manifest.json должен быть в корне архива)
- Иконки — уже есть, если ты сделал их на шаге 3
- Промо-скриншоты — минимум 1 скриншот 1280x800 или 640x400
Процесс публикации
- Зайди на Chrome Web Store Developer Dashboard
- Нажми «New Item», загрузи ZIP
- Заполни описание, категорию, добавь скриншоты
- Укажи, зачем нужны каждый из permissions (Chrome требует обоснование)
- Нажми Submit — проверка занимает от нескольких часов до нескольких дней
Лайфхак: если расширение запрашивает чувствительные permissions (например, "history" или "tabs"), Chrome может запросить видео-демонстрацию использования. Снять ролик через Loom.
Монетизация
Самые простые модели для Chrome-расширений:
- Freemium — базовый функционал бесплатно, расширенный за подписку
- One-time purchase — одноразовая оплата за полный доступ
- Trial — бесплатный пробный период, потом подписка
Для приема платежей внутри расширения нужен бэкенд (Supabase + Stripe). Это уже следующий уровень — начни с бесплатного расширения, набери пользователей, потом добавляй монетизацию.
Реальные идеи для Chrome-расширений через вайбкодинг
Вот типы расширений, которые хорошо монетизируются и реально создать через AI за один-два дня:
| Идея | Сложность | Потенциал |
|---|---|---|
| Сохранение таймстампов YouTube | Низкая | Нишевый, лояльная аудитория |
| Экспорт email с сайтов | Средняя | Высокий (B2B) |
| Быстрые заметки прямо на странице | Низкая | Много конкурентов, но своя аудитория |
| Определение шрифта и цвета | Низкая | Аудитория дизайнеров |
| Счетчик слов / таймер чтения | Очень низкая | Узкая аудитория |
| AI-суммаризация статей | Средняя | Высокий, но нужен API-ключ |
| Блокировщик отвлекающих элементов | Средняя | Высокий, конкурентный рынок |
| Цена на Amazon/Wildberries по истории | Средняя | Высокий (e-commerce аудитория) |
Полные обзоры на VibeCoderz
- Cursor — AI IDE для вайбкодинга
- Claude Code — терминальный агент от Anthropic
- Каталог AI-инструментов для вайбкодинга
FAQ
Нужно ли знать JavaScript, чтобы создать Chrome-расширение через AI? Нет — AI пишет весь код за тебя. Но базовое понимание структуры файлов (manifest, popup, content script) поможет правильно формулировать промты и отлаживать ошибки. Cursor объяснит каждый файл по запросу.
Сколько стоит опубликовать расширение в Chrome Web Store? Одноразовый взнос $5 за аккаунт разработчика. После этого можно публиковать неограниченное количество расширений бесплатно.
Cursor или Claude Code: что выбрать для создания расширения? Cursor удобнее для итеративной разработки — видишь файлы, редактируешь напрямую. Claude Code лучше для сложных расширений с несколькими компонентами — дает больше объяснений и документации. Для первого расширения — Cursor.
Почему расширение выдает ошибку при загрузке? Самые частые причины: отсутствующий файл иконки (нужен icon16, icon48, icon128 PNG в папке icons), неправильные пути в manifest.json, или ошибка синтаксиса в JS. Скопируй текст ошибки из Chrome и вставь в AI с просьбой исправить.
Можно ли создать расширение с интеграцией ChatGPT или Claude? Да, это один из популярных кейсов. Расширению нужен API-ключ (можно хранить в chrome.storage) и fetch-запросы к API. Учти, что ключ будет в коде расширения — для публичного релиза лучше сделать прокси-сервер на Railway или Vercel.
Сколько времени занимает проверка расширения в Chrome Web Store? Обычно от нескольких часов до трех рабочих дней. Если расширение запрашивает чувствительные permissions — проверка может занять дольше и потребовать дополнительных пояснений.
Как получить первых пользователей для расширения? Оптимизируй описание в Chrome Web Store под ключевые запросы. Расскажи о расширении в тематических Telegram-каналах и Reddit-сообществах. Product Hunt и альтернативные каталоги дают хороший старт. Многие успешные нишевые расширения получили первых 1000 пользователей именно через SEO в Chrome Web Store.
Глоссарий
Manifest.json — главный файл конфигурации расширения. Содержит имя, версию, разрешения и указывает на все остальные файлы. Без него расширение не запустится.
Manifest V3 — актуальная версия стандарта Chrome Extensions (2023-2026). Отличается от V2 улучшенной безопасностью и ограничениями на background scripts.
Content Script — JavaScript-файл, который внедряется в веб-страницы и может читать и изменять их DOM. Работает в изолированном контексте.
Popup — всплывающее окно, которое открывается при клике на иконку расширения в браузере. Это HTML-файл с обычным веб-интерфейсом.
Background Script / Service Worker — фоновый процесс расширения. В Manifest V3 это Service Worker — запускается по событиям, а не работает постоянно.
Permissions — разрешения, которые расширение запрашивает у браузера. Чем меньше permissions — тем легче пройти проверку Chrome Web Store.
Load Unpacked — способ установить расширение локально для тестирования. Работает только при включенном «Режиме разработчика».
Developer Mode — режим Chrome, который разрешает загрузку неопубликованных расширений. Включается в chrome://extensions.
Статья подготовлена командой VibeCoderz — крупнейшей базы знаний по AI IDE и вайбкодингу в СНГ. Последнее обновление: апрель 2026.