Как создать Chrome-расширение через вайбкодинг: гайд 2026

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

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.