Преамбула

Увидел в LinkedIn пост друга: «Сделал своё первое Chrome-расширение». Чёт подумал — а почему бы и мне не попробовать? Стало интересно. Вечером сел, собрал прототип, на следующий день дополировал UX/UI и отправил в Chrome Web Store. Через неделю получил аппрув.

Хотя у меня есть технический бэкграунд, до этого я расширения не писал. Но связка AI + правильные промпты + продуктовый взгляд = готовый мини-продукт за пару вечеров.

Уже записал видео-демо на английском, прошёл верификацию и опубликовал расширение в Chrome Web Store ?

В этой статье расскажу, с чего начал и как выбирал стек, какой функционал реализовал, покажу скриншоты и дам ссылку, чтобы потестить. Поделюсь, чем и как кодил, и дам рекомендации — исключительно из собственного опыта.

Ссылки на мои контакты, на расширение (чтобы потестить, если захотите), документацию и демо-видео на английском — всё это будет внизу статьи.

Если вдруг будет интересно следить за дальнейшей судьбой этого расширения, за моими тестами и экспериментами с AI, а также за работой в блокчейне Solana (в том числе над арбитражным ботом) — заходите в мой Telegram. Там посты выходят чаще и короче, чем на Хабре, но иногда бывают не менее полезными. 

Зачем вообще городить расширение

Я не коллекционирую плагины, но несколько всегда под рукой: Phantom/MetaMask, Loom, тулза для теханализа сайтов, Grammarly, AdBlock, переводчик, iCloud Passwords. 

То есть я тоже активный пользователь — некоторые расширения реально полезны. И я подумал: а какие юзкейсы можно закрыть с помощью простого расширения, сделанного «на коленке»? Без сложной архитектуры, но чтобы реально снять боль.

Вспомнил свои ситуации. Огромная часть моего времени уходит на переписку в Gmail и LinkedIn — рекрутеры, коллеги, стартапы, краудфандинг, визы, производство, заказы в Китае… Нужно всё это прочитать, придумать ответ и оформить в правильном стиле.

Раньше я использовал Grammarly только для исправления ошибок, но сами ответы писал сам, потом начал копировать переписку в ChatGPT, формулировать запрос и получать ответ в нужном тоне. Это стало моим основным подходом к рабочей переписке.

Но сейчас каждый раз, когда нужно ответить на письмо, рука тянется к ChatGPT: скопировать контекст из Gmail/LinkedIn → вставить → попросить черновик → забрать обратно. Работает, но отвлекает и забирает фокус. Не критично, но явно можно придумать что-то более smooth.

Решение — сделать ответы «in‑place», без переключений. Идея простая: расширение в один клик вытягивает контекст переписки, даёт добавить короткую инструкцию (prompt), генерирует черновик с нужным тоном и автоматически подставляет его в поле ответа.

Что это даёт на практике:

• Минус копипаст: контекст и черновик живут прямо в окне письма.

• Контроль тона: Formal / Neutral / Friendly под ситуацию.

• Гибкость контекста: можно сократить/расширить, прежде чем отправлять в модель.

• Один клик до ответа: Generate → при необходимости Regenerate → Apply.

Порог входа минимальный: в настройках вбиваете свой API‑ключ, выбираете модель, при желании — задаёте системный промпт по умолчанию. Дальше всё работает из Gmail. (Но про детали поговорим чуть позже)

Как выглядит MVP: быстрый walkthrough за 60 секунд

Хочется, чтобы читатель сразу «почувствовал» продукт. Здесь — один живой сценарий с краткими шагами и скринами.

Коротко, без гайдов:

1. Настройки конфигурации

Закрепи иконку расширения, открой настройки, вставь OpenRouter API‑ключ и сохрани.

Выбери модель (Free для старта или платную, если есть);

Задай системный промпт.

2. Генерируем ответ с помощью AI в Gmail

Открой письмо в Gmail, нажми Reply — рядом появится иконка «A».

Клик — всплывает окно с подтянутым контекстом; при необходимости добавь custom prompt и выбери тон (Formal / Neutral / Friendly).

Generate → Regenerate → Apply — черновик подставится в поле ответа.

Хочешь подробный пошаговый гайд со скринами? Смотри документацию на GitBook.

Как это устроено под капотом (и почему так)

На старте было два пути.

A. Свой сервер и мой API ключ

Я проксирую запросы в модели, плачу за токены, несу риски за приватность переписок. Для MVP это слишком тяжело: платежи, хранение и защита данных, доказательства для ревью Chrome Web Store.

B. Ключ у пользователя и все локально

Путь, который я выбрал. Пользователь вставляет собственный API‑ключ, расширение берёт контент из DOM локально и отправляет его в LLM напрямую от имени пользователя. Я никаких данных не вижу и не храню. Ревью в магазине проще, а пользователю понятнее модель безопасности.

Дальше встал вопрос — на какой ИИ всё это повесить.

GPT? Логично, но не все будут возиться с API-ключами в нем — это сложновато с точки зрения UXUI для рядового юзера, да и сразу платить никто не захочет. Хотелось, чтобы можно было дать людям бесплатную модель для старта, чтобы они просто установили расширение и начали тестировать. Ну и самому для отладки удобно — не каждый запрос гонять за деньги.

Полазил по рынку — и нашёл отличный вариант: OpenRouter. Это такой агрегатор, через который можно подключать разные модели (включая GPT) и при этом давать пользователям доступ к бесплатным вариантам. Подключил — и можно сразу протестировать функционал без барьеров.

Почему OpenRouter: единый API поверх множества LLM. За пару кликов получаете ключ, сразу доступны бесплатные модели, а при желании — GPT/Gemini/DeepSeek и др. Код взаимодействия везде одинаковый — меньше условий и ветвлений.

Из этого родился простой набор настроек: 

• поле для API ключа;

• выпадающий список моделей (показываются именно те, что доступны для введённого ключа);

• системный промпт — общие правила для всех ответов (на каком языке отвечать, как использовать контекст, степень формальности и т.д.).

Как я это делал: промпт‑кодинг вместо марафона по JS

В 2025-м, конечно, можно «пилить всё руками», но для меня важнее скорость и результат. Я уже давно не разработчик — начинал карьеру в коде, но лет восемь назад ушёл в продуктовую историю.

Недавно, правда, ностальгия накрыла — сел и написал своего арбитражного бота: на TypeScript клиентскую часть, на Rust — ончейн-логику для смарт-контрактов под Solana. Так что «запачкать руки» я умею и готов, если надо.

Тут можете почитать мои статьи по теме Web3 разработке арюитражного бота под Solana

• Провалился в кроличью нору крипты — и вернулся с арбитражным ботом в кармане ?

• Сколько стоит стать валидатором Solana и реально ли обойти профи MEV?

• DEX изнутри: кто и как двигает цену

• 20,000$ профита за 1 транзакцию. Сколько даёт арбитраж крипты в Solana?

• $700,000 ликвидности, 4 млрд% роста mCap и 0 на выходе: как работает топовая скам-схема в Solana

• Слил $800 на CEX, поднял $2000 на DEX - реальный опыт копитрейдинга в Solana

Но как Product Manager я смотрю проще: если MVP можно собрать «на коленке» и проверить, полетит ли оно — зачем сразу строить дирижабль?

Я пошёл через coding‑through‑prompts. Начал с UI (поп‑ап, поля, кнопки, селекторы), затем добавил логику: парсинг DOM, вызовы OpenRouter, вставку ответа и мелочи по UX.

Claude

После того как я написал своего бота, сделал пост на эту тему — и в мой Telegram-канал пришло много людей. Часть — разработчики, с которыми мы запустили приватное комьюнити по ончейн-разработке и Web3, другая часть — потенциальные пользователи бота.

Некоторые писали в личку, делились опытом, спрашивали про технологии. С одним парнем разговор ушёл в сторону ИИ для разработки ботов. Я сказал, что использую GPT, а он посоветовал попробовать Claude: «В кодинге он в сто раз лучше».

Я тогда запомнил этот совет, и вот недавно решил протестировать. Что могу сказать — Claude сейчас реально выигрывает. Он уверенно держит длинные контексты и большие файлы, без потери нити рефакторит связки HTML/CSS/JS. В то время как GPT нередко отдаёт куски кода с ошибками, а с большими файлами вообще «спотыкается», Claude справляется на отлично.

На бесплатной версии я быстро упёрся в лимиты, поэтому перешёл на платную (~$20/мес). По мере роста проекта и кода ограничения стали прилетать чаще — в принципе, ожидаемо.

ChatGPT

Использовал точечно — там, где важнее точные подсказки по JS‑мелочам/DOM, а не длинный рефакторинг. Так-же потом нарисовать логотип, отричовать графику. Найти пакеты для парсинга DOM дерева...

Итерации короткие, артефакты реальные

1. Сгенерировал / пофиксил код промптом

2. Вставил файлы в VS Code

3. Сразу загрузил как unpacked в Chrome

4. Проверил руками. 

Так у промптов быстро появляется обратная связь. Иногда юзаем GPT как помощник в составлении промпта.

Таймлайн получился предельно прагматичным:

• Вечер 1. Рабочее MVP: парсинг переписки, тестовые вызовы OpenRouter, список моделей, генерация ответа в поп‑апе.

• День 2. Шлифовка UX и парсинга, фикс угловатостей.

• День 3 (полдня). Финальная полировка и подготовка к публикации.

Публикация в Chrome Web Store: что важно знать

Профиль расширения в магазине неожиданно объёмный: описания, политики, регионы, скриншоты в нужных размерах. С первого раза ревью не прошёл: в manifest.json оставил лишние permissions/зависимости, которыми не пользовался. Убрал — со второго раза апрув. Сейчас расширение доступно в маркете и работает отлично.

Несколько советов для MVP-расширения:

• Держите manifest.json минимальным — всё, что не используете прямо сейчас, лучше не включать.

• Не тяните в MVP сервер и хранение данных, если можно отдать API-ключ пользователю напрямую — это упростит ревью и снимет вопросы по приватности.

• Предоставьте тестовый API-ключ для модерации и первичной проверки — это ускорит процесс публикации.

• Избегайте сторонних API, если можно обойтись без них.

• Не грузите внешние скрипты — Google это не любит. Теоретически, во внешнем файле код можно заменить, и это может навредить пользователю. Держите всё в кодовой базе расширения.

• Сразу подготовьте скриншоты онбординга: где вводить ключ, где выбирать модель, как выглядит pop-up.

  • Я тут подготовил полноценную документацию и Privacy Policy документ.

Что уже работает и что планирую дальше

Сегодняшний функционал:

• Чтение контекста переписки из DOM в Gmail.

• Системный промпт по умолчанию + поле для кастомного промпта под конкретный ответ.

• Переключатель тона: Formal / Neutral / Friendly.

• Generate / Regenerate / Apply, автоматическая вставка ответа в форму письма.

• Настройки: API‑ключ OpenRouter, выбор модели, ссылка на документацию в GitBook.

Куда развивать:

• Поддержка платформ: LinkedIn → Glassdoor → Jinni (тот же принцип in‑place).

• Дизайн‑рефреш: сделать визуал современнее, добавить пресеты стилей.

• Онбординг: быстрый старт за 30 секунд — без чтения доков.

• Тонкая фильтрация контекста: выбор абзацев/собеседников, которые пойдут в модель.

• Шаблоны промптов - дать возможность сохранять промпты под разные цели и использовать в 1 клик.

Потестить расширение

• Если хотите потестить — ссылку оставлю здесь

• Вот тут демка видео

• А вот тут ссылка на документацию GitBook

Буду благодарен за обратную связь: что удобно, что мешает, чего не хватает. По спросу приоритизирую фичи на следующий релиз :)

Пара слов про ИИ‑инструменты шире

Не впервые закрываю рабочие задачи с помощью ИИ-инструментов. Например, для своего арбитражного бота Orbion я собрал SPA на Vercel, а для быстрых расшифровок аудио и видео — поднял Whisper прямо на ноутбуке. 

Сейчас в планах — простое кроссплатформенное мобильное приложение, которое тоже будет опираться на готовые AI-модели, решая вполне конкретные продуктовые задачи для чётко определённой аудитории. 

Сложного тут немного: правильная упаковка и удобный UX зачастую важнее дообучения моделей. Я использую ИИ каждый день и вижу, какой это даёт буст. Если у кого-то, кто читает, есть желание поучаствовать в запуске пары таких мини-продуктов — можно объединиться и выкатить их в продакшн. Сделать могу и сам (технический бэкграунд позволяет), но вместе будет быстрее и интереснее.

Мои соц. сети

Подписывайся, если интересно ?

• Telegram Channel

• Instagram

• Linkedin