Найти в Дзене

Chrome расширения: 5 шагов к созданию расширений Google без сложности

Иногда смотришь на магазин расширений Google Chrome и думаешь: а кто все эти люди, которые клепают плагины пачками, а у тебя вкладки до сих пор вручную открываются, тексты копируются, отчеты по клиентам вбиваются руками в таблицу. И где-то между третей кружкой кофе и тридцатой открытой вкладкой ты ловишь себя на мысли: «А что, если сделать свое расширение для браузера Chrome, которое будет работать за меня?». А потом вспоминаешь слово «JavaScript», внутренне вздрагиваешь и идешь дальше листать Яндекс Chrome расширения. Знакомо? Вот об этом и поговорим: как подойти к созданию своего chrome расширения без того, чтобы уходить в полугодовой курс фронтенда и рыдать над документацией. Более того, мы подрубим тяжелую артиллерию — Make.com, который заточен под автоматизацию без кода. Да, тут тоже нужно думать головой, зато не нужно жить в консоли и спорить с npm. Я покажу 5 шагов, как превратить идею в работающее расширение Google Chrome, которое не стыдно загрузить в Chrome магазин расширений
Оглавление
   Пошаговое руководство по созданию Chrome расширений Артур Хорошев
Пошаговое руководство по созданию Chrome расширений Артур Хорошев

Иногда смотришь на магазин расширений Google Chrome и думаешь: а кто все эти люди, которые клепают плагины пачками, а у тебя вкладки до сих пор вручную открываются, тексты копируются, отчеты по клиентам вбиваются руками в таблицу. И где-то между третей кружкой кофе и тридцатой открытой вкладкой ты ловишь себя на мысли: «А что, если сделать свое расширение для браузера Chrome, которое будет работать за меня?». А потом вспоминаешь слово «JavaScript», внутренне вздрагиваешь и идешь дальше листать Яндекс Chrome расширения. Знакомо?

Вот об этом и поговорим: как подойти к созданию своего chrome расширения без того, чтобы уходить в полугодовой курс фронтенда и рыдать над документацией. Более того, мы подрубим тяжелую артиллерию — Make.com, который заточен под автоматизацию без кода. Да, тут тоже нужно думать головой, зато не нужно жить в консоли и спорить с npm. Я покажу 5 шагов, как превратить идею в работающее расширение Google Chrome, которое не стыдно загрузить в Chrome магазин расширений и, при желании, даже продавать. Ну или использовать только для себя, чтобы больше никогда не делать руками то, что может делать машина.

Шаг 1. Зачем вообще вам свое расширение для Google Chrome

Самое странное, но честное: начать надо не с кода, а с вопроса «зачем». Потому что, когда человек сначала задается вопросом «как создать расширение для Chrome», а не «зачем оно мне», обычно получается очередной пылесборник в интернет магазине расширений Chrome — вроде поставил, покликал, забыл. Поэтому сядьте, налейте чай и честно ответьте себе, что именно вы хотите автоматизировать. Не «все», а конкретно.

Например, вы работаете с заявками из рекламных кабинетов и каждый день копируете данные в Google Таблицы. Или пишете посты в VK, Telegram и на сайте, и вам нужен быстрый доступ к заготовкам текстов и картинкам через иконку в панели браузера. Или хотите свой «мини CRM» прямо в браузере, чтобы фиксировать заметки по клиентам, не открывая отдельные сервисы. Или мечтаете о плагине уровня sweezy cursors кастомный курсор для Chrome, только не с блестками и котиками, а с пользой для денег.

Важно поймать не красивую идею, а болезненное место: то, на что вы тратите время каждый день. Потому что хорошее расширение Google Chrome — это не игрушка «ну прикольно», а таблетка от рутинной боли. Как только вы находите этот сценарий, становится легко прикинуть: что расширение должно уметь, какие сервисы трогать, нужно ли вам, скажем, vpn расширение Chrome для работы с зарубежными сервисами, или все живет в пределах привычных российских инструментов.

Шаг 2. Make.com — как не писать бэкенд, а все равно быть молодцом

С классической разработкой расширений все честно: ты пишешь фронт для плагина, а потом еще отдельно городишь сервер, API, базы данных, авторизацию и прочий зоопарк. Для большинства задач по автоматизации бизнес-процессов это все, мягко говоря, лишнее. Здесь на сцену выходит Make.com — платформа автоматизации, где бэкенд за вас уже придумали, нарисовали и дали красивый интерфейс из шариков и стрелочек вместо тысячи строк кода.

Через Make.com можно связать между собой интернет сервисы: Google Таблицы, Notion, AmoCRM, Битрикс24, Telegram, почту, разные API и даже сам браузер. Вы создаете визуальный сценарий (его там называют «сценарием», не мудрствуя), который, например, принимает данные из вашего расширения Google Chrome, обрабатывает их и складывает в таблицу или CRM. И все это без поднятия серверов и серии нервных срывов. Зарегистрироваться можно по ссылке через официальный сайт Make.com и начать с бесплатного тарифа — там есть лимит на операции, но для тестов и первых версий расширения этого более чем хватает.

Тут важно принять простую мысль: ваше chrome расширение становится красивой и удобной дверцей в ваши автоматизации на Make.com. Кнопка в браузере — действие на сценарии. Контекстное меню «отправить в CRM» — три модуля в Make, которые всё сами записали и пересчитали. И если вы уже когда-то думали о том, как автоматизировать бизнес процессы, но пугались кода, связка «Chrome + Make.com» — это тот компромисс, когда вы не лезете в низкоуровневую разработку, но получаете довольно серьезный результат.

Шаг 3. Архитектура без боли: из идеи в понятный сценарий

Вот тут начинается самое вкусное. У вас есть идея: скажем, расширение для браузера Chrome, которое по клику по иконке забирает выделенный текст со страницы, отправляет его в Make.com, а система уже решает, что с этим делать. Можно сложить в Google Таблицы, отправить в Telegram-канал, засунуть в CRM, запустить генерацию ответа с помощью нейросети, а потом вернуть результат обратно в браузер. Звучит страшно, а по факту разбивается на спокойные шаги.

Сначала вы описываете схему на бумаге: откуда данные берутся, куда летят, что с ними должно происходить. Например: «Пользователь выделяет текст, жмет на кнопку расширения, расширение дергает вебхук Make.com, тот принимает текст, записывает в Google Sheets, параллельно отправляет его в Telegram и, если стоит галочка «создать задачу», создает новый лид в CRM». Уже неплохо. Потом вы создаете сам сценарий в Make.com: добавляете модуль Webhooks, который принимает запросы из расширения, дальше цепочкой подключаете Google, CRM, мессенджеры. Если где-то ошиблись — ничего страшного, легко поправить (я сам иногда сначала делаю криво, а потом переделываю, это нормально).

На этом этапе вы как раз начинаете понимать, что без кода жить можно, если все логически разложить. То, что раньше требовало разработчика на пару недель, сейчас собирается за вечер-другой. При этом ваши сценарии работают в «облаке», не нагружают компьютер и могут обслуживать не только вас, но и ваших сотрудников или клиентов. Особенно приятно, когда понимаешь, что одно удачное расширение Chrome плюс несколько сценариев на Make.com могут заменить часть рутинной работы целого отдела, а люди пусть занимаются тем, что реально приносит деньги, а не копипастой.

Шаг 4. Собираем минимальное Chrome расширение вокруг Make

Теперь к тому, что всех пугает — к самому расширению. Тут тоже всё проще, чем кажется. Базовое chrome расширение — это по сути папка с несколькими файлами: manifest.json, иконки и небольшой скрипт. В манифесте вы описываете, какие права нужны вашему плагину, что он делает, какие страницы может обрабатывать, и какие кнопки вы показываете пользователю. Если вы хотите, чтобы расширение, например, отправляло выделенный текст на вебхук Make.com, вам нужен минимальный код, который берет этот текст и отправляет его через запрос. Звучит грозно, но в сети полно примеров. Один раз разобрались — дальше копируете как шаблон.

Главный трюк здесь в том, что саму «умную» часть вы уже вынесли на сторону Make.com. То есть вам не нужно реализовывать логику обработки данных в самом расширении, не нужно городить авторизацию, очереди, парсинг. Расширение просто является интерфейсом: собрал данные, отправил, принял ответ, показал. Если вы когда-то искали, где скачать расширение Chrome для разных задач, то заметили, что многие из них по сути являются кнопкой на внешний сервис. Вы делаете примерно то же, только сервис — ваш.

Самое приятное, что базовую структуру можно один раз сделать с разработчиком (если совсем не хотите вникать в код), а дальше штамповать разные версии под разные задачи, меняя только ссылки на вебхуки, подписи и логику сценариев в Make.com. У вас появляется свой внутренний «набор расширений» под бизнес, который работает ровно так, как нужно вам, а не «как предусмотрели разработчики какого-нибудь очередного модного плагина».

-2

Обучение по make.com: курс по созданию автоматизаций и связки с Chrome

Шаг 5. Публикация, тесты и превращение хобби в продукт

Когда у вас уже есть работающий прототип расширения Google Chrome, который стучится в сценарии на Make.com и делает полезные вещи, наступает момент «а что с этим делать дальше». Вариантов несколько. Можно оставить проект сугубо внутренним: раздать плагин команде, подключить сотрудников, сделать короткую инструкцию, и пусть все спокойно пользуются, пока конкуренты играются с Excel. Можно пойти дальше и загрузить расширение в магазин расширений Google Chrome, чтобы им могли воспользоваться другие люди. Для публикации потребуется разработчикский аккаунт и аккуратное описание: что делает расширение, какие права запрашивает и зачем.

Конечно, сейчас рынок перенасыщен: интернет расширения Chrome исчисляются сотнями тысяч, и быть еще одним «плагином ради плагина» не очень интересно. Но если вы решаете реальную задачу, особенно в нише автоматизации для малого бизнеса, маркетинга, продаж, аналитики, у такого расширения есть шанс. Тем более, если вы можете предложить связку: расширение + готовые сценарии на Make.com. То есть человек ставит плагин, получает сразу рабочую логику автоматизации, а не просто красивую кнопку. По сути, это уже не игрушка, а продукт.

Отдельная тема — внутренняя монетизация. Можно продавать доступ к сценариям, к «премиальной логике», к шаблонам интеграций. Можно делать платное обучение по Make.com, показывая, как именно собирать такие связки. Можно предлагать бизнесу индивидуальную настройку: под их CRM, их отчеты, их сервисы. И да, это уже не история «я просто сделал себе тул», а вполне нормальное направление заработка. Особенно на фоне того, что многие всё еще не понимают, насколько можно разгрузить процессы с помощью автоматики.

Где всему этому научиться и как не зарыться

Если вы дочитали до этого места и в голове не «нет, это всё какая-то магия», а «вроде понятно, но нужно, чтобы кто-то провел за руку», вы в здоровой зоне. Самостоятельно ковыряться можно, но на практике большинство людей сливаются где-то между «первый сценарий в Make.com» и попыткой правильно оформить расширение для Chrome Web Store. Нормально. Мозг просто не любит, когда на него навешивают сразу много новых штук.

Поэтому есть смысл идти структурно. Для начала можно подписаться на наш Telegram-канал, где я регулярно разбираю кейсы по автоматизации, показываю живые сценарии, отвечаю на вопросы и иногда разбираю чужие «кривые» процессы. Дальше уже подключается обучение: мы сделали отдельную программу по Make.com, где разбираем, как настраивать сценарии, работать с вебхуками, соединять это с браузером и превращать в реальные инструменты для бизнеса — от воронок продаж до систем сбора аналитики. Ссылка тут: Обучение по make.com.

Если вы уже что-то пробовали и хотите ускориться, есть еще один вариант — готовые шаблоны. Мы сделали блюпринты по make.com — это готовые сценарии, которые можно импортировать к себе в аккаунт, чуть допилить под свои сервисы и уже запускать в бой. Очень удобно, если вы делаете набор корпоративных расширений и хотите, чтобы за каждым стоял не «кустарный» сценарий, а логика, протестированная на живых бизнесах.

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

FAQ: коротко о частых вопросах

Нужно ли уметь программировать, чтобы сделать свое расширение Chrome с Make.com?
Желательно понимать базовую логику: что такое переменные, запросы, вебхуки. Но писать сложный код не обязательно. Основная логика живет на Make.com, а для самого расширения можно использовать готовый шаблон или привлечь разработчика на несколько часов, а дальше просто менять настройки и сценарии.

Можно ли сделать VPN расширение Chrome через Make.com?
Нет, полноценное vpn расширение Chrome через Make.com не собрать. VPN — это история про сетевую инфраструктуру и шифрование, тут нужна классическая разработка и свои сервера. Make.com хорош для автоматизации процессов, интеграций и обработки данных, а не для подмены трафика.

Где брать идеи для расширений, которые реально полезны?
Смотрите на то, что болит у вас и у коллег: повторяющиеся действия в браузере, ручные отчеты, копирование данных между сервисами, ввод информации в CRM. Часто хорошее расширение рождается из фразы «я уже устал каждый день делать одно и то же». Пара дней наблюдений за собой — и список идей готов.

Сколько времени нужно, чтобы сделать первое рабочее расширение Google Chrome?
Если не уходить в суперсложные сценарии, то за 1–2 вечера можно собрать первый сценарий в Make.com и базовый прототип расширения. Еще день-два на отладку и тесты с коллегами. Я знаю случаи, когда люди за неделю проходили путь от «я вообще не понимаю, что такое вебхук» до «мы поставили расширение всей отделе продаж».

Можно ли на этом зарабатывать, а не только для себя автоматизировать?
Да. Минимум три пути: продажа доступа к расширению и связанным с ним сценариям, настройка индивидуальных автоматизаций под бизнес клиента, обучение по Make.com и построению таких связок. Особенно в России сейчас огромный спрос на автоматизацию без тяжелых и дорогих внедрений, и сочетание Chrome расширений и Make попадает прямо в эту нишу.

Где посмотреть примеры и разборы живых сценариев?
В нашем
Telegram-канале я регулярно показываю разборы автоматизаций, в том числе со связкой браузера и Make.com. Плюс на странице курса — Обучение по make.com — есть подробное описание модулей и кейсов, которые мы разбираем на обучении.