С помощью AI‑помощников можно быстро собрать полноценное Chrome‑расширение, получить все необходимые файлы и опубликовать его в пару вечеров, даже без знаний кода.
10+ лет в маркетинге, 300+ клиентских проектов: сайты, реклама, боты. Создатель GoBanana (228K+ пользователей, 11.6 млн ₽ выручки) и VibeCoderz. Делаю AI-продукты сам через Claude Code, Cursor, Windsurf и консультирую тех, кто хочет так же.
Об авторе →
Claude Code
free
Claude Code — это автономный AI-агент от Anthropic, который живёт прямо в вашем терминале, сам читает файлы, запускает тесты и пишет код без постоянного микроменеджмента.
Cursor
free
Cursor — это AI-нативная IDE (интегрированная среда разработки) на базе VS Code, которая превращает написание кода в управление автономными ИИ-агентами.
Плейбук основателя: как построить AI-нативный стартап в 2026
Раскроем, как в 2026 году AI‑нативные стартапы ускоряют путь от идеи до масштабирования: от превращения кода в агента до практических советов по использованию Claude и его инструментов.
Какая нейросеть лучше пишет код в 2026: честный тест Claude, DeepSeek и GPT
Сравнение лучших кодирующих ИИ в 2026: Claude Opus 4.7 побеждает на SWE‑bench Pro, GPT‑5.5 лидирует в терминальных задачах, а DeepSeek V4 остаётся самым экономичным решением.
Лучшие AI IDE в 2026: честный рейтинг Cursor, Windsurf, Claude Code и конкурентов
Сравниваем семь AI‑редакторов по пяти критериям: скорость до продакшна, порог входа, качество кода, гибкость стека и стоимость. Выясните, какой из них лучше всего подходит для вашего проекта в 2026 году.
Как подключить MCP сервер к Cursor и Claude: пошаговый гайд с командами
Пошаговый разбор, как подключить MCP‑сервер к Cursor, Claude Desktop и Claude Code: конкретные команды, пути к конфигу и типичные ошибки. Узнайте, почему единый протокол упрощает работу с API и сервисами.
MCP сервер для Figma: как AI начинает видеть ваш дизайн и генерировать точный код
Теперь AI‑агенты в Cursor и Claude Code могут читать ваш файл Figma напрямую и генерировать точный код, учитывая переменные, компоненты и Auto Layout, без скриншотов и ручных описаний.
Как создать свой MCP сервер на Python за один вечер: гайд с примером
Создайте MCP‑сервер на Python за один вечер, используя 50‑строчный код и официальный SDK Anthropic, чтобы быстро подключить AI‑инструменты к разным источникам данных без громоздкой интеграции.
Chrome-расширение через вайбкодинг создается за один-два вечера: пишешь промт в Cursor или Claude Code, получаешь готовые файлы manifest.json, popup.html и JS, загружаешь в браузер через Developer mode. Без знания JavaScript, без найма разработчика.
В этой статье: структура любого расширения, пошаговый процесс через Cursor и Claude Code, как избежать типичных ошибок, и как опубликовать в Chrome Web Store.
Chrome-расширения — один из самых недооцененных способов монетизации через вайбкодинг. Посмотри на реальные цифры:
Что общего у всех этих продуктов? Простая идея, нишевая аудитория и UI, который можно собрать за день с помощью AI. Никакой сложной инфраструктуры, никакого бэкенда по умолчанию — просто несколько файлов в папке.
«Мы создали Chrome-расширение для Vibecoderz буквально за один вечер через Claude Code. Главный инсайт: начинай с максимально узкой проблемы — одна функция, один тип пользователя. Email Extractor зарабатывает $30K+ в месяц, занимая первое место по запросу "email extractor" с 10 000 поисков. Их UI не впечатляет — но проблема решена точно.» — Максим Наговицын, co-founder Vibecoderz
Прежде чем писать промт, нужно понять структуру. Chrome-расширение — это всего три типа файлов.
| Файл | Что делает | Обязателен |
|---|---|---|
| manifest.json | Конфигурация: имя, версия, permissions, иконки | Да |
| popup.html + popup.js | Интерфейс всплывающего окна при клике на иконку | Для большинства расширений |
| content_script.js | Код, который внедряется в страницы сайтов | Если расширение взаимодействует с контентом |
| background.js | Фоновый процесс, работает постоянно | Для сложной логики и хранения данных |
Минимально жизнеспособное расширение = manifest.json + popup.html + popup.js. Именно это и генерирует AI в первом ответе.
Permissions в manifest.json — это разрешения, которые расширение запрашивает у браузера. Если расширение хочет читать URL текущей страницы, нужен "activeTab". Если хочет хранить данные — "storage". Если запрашивает лишние permissions, Chrome Web Store может отклонить публикацию.
Объясни AI конкретно, что расширение должно делать — и он сам пропишет нужные permissions.
Самая частая ошибка — слишком широкая идея. «Расширение для продуктивности» — плохо. «Расширение, которое сохраняет таймстамп YouTube-видео и при открытии запускает с этой точки» — хорошо.
Перед промтом ответь на три вопроса:
Открой Cursor, создай новую папку для проекта, открой AI-чат (Cmd+L) и напиши примерно так:
Создай Chrome-расширение с такой функцией: [опиши функцию].
Расширение должно:
- [конкретное действие 1]
- [конкретное действие 2]
Сгенерируй все необходимые файлы: manifest.json, popup.html, popup.js.
Версия Manifest V3. Добавь только те permissions, которые реально нужны.Cursor создаст файлы прямо в твоей папке. Прочитай manifest.json — там будет имя, версия и список permissions. Если что-то непонятно, спроси Cursor прямо в чате: «объясни что делает каждый permission».
Самая частая техническая ошибка при первой установке — ошибка Could not load icon. Чтобы её не получить:
icons внутри папки расширенияicon16.png, icon48.png, icon128.pngИконки можно сделать в Figma (три артборда 16x16, 48x48, 128x128), экспортировать как PNG. Или попроси Cursor сгенерировать placeholder SVG и конвертировать в PNG через любой онлайн-конвертер.
Расширение появится в списке. Если есть ошибки — Chrome покажет их красным. Скопируй текст ошибки, вставь в Cursor и попроси исправить.
Лайфхак: итерация с Chrome-расширениями чуть медленнее, чем с обычными сайтами — после каждого изменения нужно обновить расширение в браузере (кнопка «обновить» рядом с карточкой расширения). Учитывай это при дебаге.
Claude Code дает больший контроль над структурой проекта. Используй, если хочешь расширение сложнее — с несколькими скриптами или интеграцией с внешним API.
Создай 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 создает файлы и сразу пишет документацию. Это особенно удобно, если потом нужно будет итерировать или передавать кому-то.
Если не уверен, какие 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».
Когда расширение работает локально и ты доволен результатом — можно публиковать.
Лайфхак: если расширение запрашивает чувствительные permissions (например, "history" или "tabs"), Chrome может запросить видео-демонстрацию использования. Снять ролик через Loom.
Самые простые модели для Chrome-расширений:
Для приема платежей внутри расширения нужен бэкенд (Supabase + Stripe). Это уже следующий уровень — начни с бесплатного расширения, набери пользователей, потом добавляй монетизацию.
Вот типы расширений, которые хорошо монетизируются и реально создать через AI за один-два дня:
| Идея | Сложность | Потенциал |
|---|---|---|
| Сохранение таймстампов YouTube | Низкая | Нишевый, лояльная аудитория |
| Экспорт email с сайтов | Средняя | Высокий (B2B) |
| Быстрые заметки прямо на странице | Низкая | Много конкурентов, но своя аудитория |
| Определение шрифта и цвета | Низкая | Аудитория дизайнеров |
| Счетчик слов / таймер чтения | Очень низкая | Узкая аудитория |
| AI-суммаризация статей | Средняя | Высокий, но нужен API-ключ |
| Блокировщик отвлекающих элементов | Средняя | Высокий, конкурентный рынок |
| Цена на Amazon/Wildberries по истории | Средняя | Высокий (e-commerce аудитория) |
Нужно ли знать 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.