← бесплатные уроки вход для учеников
бесплатный урок глава 1 из 16

Как сделать расширение для Chrome без кода

Смотри и повторяй: агент Codex собирает рабочее расширение для Chrome от пустой папки до кнопки в браузере. Без строчки кода — задачи ставим словами.

▶
загружаю видео…

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

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

Ниже — разбор того, что происходит на записи: я в Codex собираю расширение с нуля. Текста хватит, чтобы повторить самому, даже если видео ты не откроешь.

Что такое расширение и из чего оно состоит

Чтобы не пугаться дальше, разберём на пальцах. Расширение — это обычная папка с несколькими файлами. Браузер её читает и делает то, что в ней написано.

  • Манифест — файл-паспорт. В нём написано, как расширение называется, что ему разрешено и какие файлы запускать. Без него браузер папку не примет.
  • Скрипт — то, что собственно делает работу: читает страницу, нажимает, считает, сохраняет.
  • Окошко — то, что ты видишь, когда кликаешь по иконке расширения. Нужно не всегда.
  • Иконка — картинка на панели браузера.

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

Что нужно до старта

  • Установленный Codex. Это агент от OpenAI, ставится и на Windows, и на macOS. Как ставить и что он умеет — в уроке Codex: что это, как установить и лимиты.
  • Аккаунт с доступом к Codex. Перед стартом проверь текущий тариф и лимиты на официальной странице OpenAI. Как платить из России — разбирал в уроке как оплатить нейросети из России.
  • Chrome. Ну тут понятно.
  • Никаких скиллов и агентов сверху. Сейчас мода такая: все топят за скиллы, за наборы агентов, за навороченные надстройки. Пока ты сам не разобрался, всё это только уводит агента по ложным путям. Взял голый интерфейс — и пошёл делать.

Шаг 1. Создаём проект

Интерфейс Codex показывает проекты и диалог с агентом. Их расположение может меняться между версиями; для урока важны выбранная папка проекта, режим работы и история задачи.

Создай локальный проект и выбери отдельную пустую папку. Названия кнопок могут меняться, поэтому ориентируйся на действие: агент должен работать только с этой папкой.

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

Шаг 2. Включаем режим плана

Вот это — главное место всего урока. Перед тем как ставить задачу, переключи агента в режим планирования.

В режиме планирования попроси сначала описать шаги, файлы и проверки. До подтверждения убедись, что агент действительно остаётся на этапе плана: поведение зависит от версии и настроек клиента.

Почему так. Если сразу дать задачу, агент бросается делать — и ты получаешь не то, что ждал. А когда есть план, вы оба понимаете, к какому результату идёте. Без плана двигаться сложно: непонятно, куда придёшь.

Задача на записи звучала так: «создаём расширение для Chrome, которое будет скачивать видео с платформы». Одна фраза человеческим языком — этого достаточно, чтобы агент начал думать.

Если не знаешь, с чего начать формулировку, — вот рабочий шаблон. Подставь своё и отдай агенту:

Сделай расширение для браузера Chrome.
Что оно должно делать: <опиши одной фразой, своими словами>.
На каких сайтах работает: <адреса или «на любых»>.
Что я вижу: <кнопка на панели / окошко со списком / просто работает в фоне>.

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

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

Рядом переключается модель. Правило простое: на план ставь самую сильную модель, на исполнение можно попроще. План — это мышление, тут экономить глупо. Сборка по готовому плану — работа механическая.

Шаг 3. Агент задаёт вопросы — отвечай

Дальше начинается то, чего многие не ждут: агент сам спрашивает. На записи он задал три вопроса — на каких сайтах должна работать первая версия, как ставить расширение, будет ли тестовая страница.

Если агент предлагает несколько вариантов, попроси назвать рекомендуемый и объяснить компромиссы. Рекомендацию всё равно сверяй со своей задачей и доступами.

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

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

Шаг 4. Читай план, даже если ничего не понял

План готов — открывай и читай. Да, там будет куча незнакомых слов. Это нормально, тема новая, термины новые. Пугаться нечего.

Читать всё равно надо. С каждым разом ловишь себя: о, это слово я уже знаю. А это где-то встречал. Так и набирается понимание — не из учебника, а из практики.

Я это на себе прошёл, когда лез в арбитраж трафика. Попал в чат, где сидели люди в теме, и месяца два вообще не понимал, о чём они пишут. Слова знакомые, а смысл — нет. Посидел, почитал, что-то погуглил — и начал разбираться. Тут ровно то же самое.

Не понял вообще ничего — так и напиши: «я тут ничего не понимаю, объясни подробнее, что ты собираешься делать». Он объяснит. Понял и согласен — жмёшь «да», и агент идёт собирать.

Шаг 5. Доступы и автоподтверждение

Пока агент работает, он периодически останавливается и просит подтверждение — на доступ к папке, на действие. Это защита, а не тормоза.

В некоторых версиях клиента можно менять режим подтверждений. Для первого проекта оставь подтверждение действий включённым: так видно, какие файлы и команды запрашивает агент.

Клиент может предлагать расширенные разрешения на интернет, команды и файлы. Их название и оформление меняются, но правило постоянное: первому учебному проекту полный доступ не нужен.

Запомни правило: чем шире доступ ты выдал, тем меньше контролируешь, что происходит. Для тренировочного проекта хватит обычного режима с подтверждениями.

Шаг 6. Загружаем расширение в Chrome: режим разработчика

Агент собрал папку. Теперь её надо скормить браузеру. Своё расширение ставится не из магазина, а вручную — через режим разработчика. Магазин, проверки и взносы нужны, только если ты собрался раздавать его людям; себе — не нужны.

  1. Открой в Chrome адрес chrome://extensions — вбей его прямо в адресную строку.
  2. Включи справа сверху тумблер «Режим разработчика». Пока он выключен, следующей кнопки просто не видно.
  3. Нажми «Загрузить распакованное расширение».
  4. Укажи ту папку, которую собрал агент. Именно папку — не архив и не отдельный файл.
  5. Расширение появится в списке. Закрепи иконку на панели, затем открой тестовую страницу и проверь основной сценарий.

Путь к папке спроси у самого агента — он подскажет, куда сложил результат. На записи это заняло меньше минуты: скопировал команду, нашёл папку, выбрал, загрузил.

В Яндекс Браузере всё то же самое. Он собран на том же движке, что и Chrome: адрес browser://extensions, тот же режим разработчика, та же кнопка загрузки распакованного расширения. Папка подойдёт та же самая, пересобирать ничего не надо.

Если у тебя уже стоят похожие расширения — отключи их на время теста. Иначе не поймёшь, какое из них сработало, а какое мешает.

Собралось красиво, но не работает

А теперь честная часть, ради которой стоит досмотреть запись до конца. На эфире расширение не заработало.

Загрузилось с ошибками. Интерфейс получился красивый, с анимациями, всё как надо. А нажимаешь — не качает. Так бывает, и это нормальная часть процесса, а не признак того, что ты бездарь.

Дальше — самое важное: не бросаться переделывать всё подряд, а понять причину. Причина нашлась быстро: видео на той странице лежало вообще не там, где мы предполагали, — не на самой платформе, а на стороннем видеосервисе. Расширение искало в одном месте, а файл был в другом. Логично, что не нашло.

Отсюда правило, которое экономит часы. Когда что-то не работает — сделай самый дешёвый тест, который может опровергнуть твою догадку. Не переписывай код, не строй новую архитектуру. Проверь живьём одну вещь: а там ли вообще лежит то, что мы ищем?

У меня был случай, когда агенты сутки бились над задачей. Сутки. Я вмешался, попросил сделать самую простую проверку — открыть в браузере и посмотреть, что реально происходит. Проверка заняла минуты и всё расставила по местам. Теперь этот дешёвый тест зашит у меня в систему первым шагом на любую жалобу «не работает».

Так что базово расширение мы собрали. Дальше — отладка. Это обычный рабочий этап, через него проходят все.

И ещё пара мест, где спотыкаются чаще всего. Расширение не появилось в списке — проверь, что выбрана папка с manifest.json. Chrome ругается на манифест — передай агенту полный текст ошибки и проверяй исправление новым запуском. Иконка есть, а по клику ничего — проверь разрешённые сайты и консоль расширения.

Где вообще ломается код от нейросети и почему — разбирал отдельно в уроке нейросеть, которая пишет код: с чего начать.

Какое расширение сделать первым

Бери что-то своё, мелкое и полезное лично тебе. Вот что делали ребята на курсе:

  • Таймер против прокрастинации. Показывает, что ты уже слишком долго залипаешь во вкладках, и гонит отдохнуть. Человек добавил игровую механику: пока держишь режим — растёт дерево, нарушил — дерево гибнет, и выращивай заново.
  • ИИ-помощник по подбору косметики на конкретном сайте корейской косметики. Уже серьёзная штука, а начиналась так же — с пустой папки.
  • Своя кнопка на нужном сайте: собрать данные со страницы, посчитать, переслать себе.

Дальше — второе расширение, третье, потом чат-бот, потом подключил нейронку. И полетело. Эти маленькие дофаминовые результаты и держат весь процесс: мозг запоминает, что рабочая штука появляется после сборки, отладки и проверки.

Тот же приём работает и на других агентах — если хочешь попробовать бесплатно, посмотри урок про бесплатного агента с открытым кодом и подключение моделей.

Сколько это стоит

Перед стартом проверь текущий тариф и лимиты Codex на официальной странице OpenAI. Фактический расход зависит от модели, размера контекста и числа параллельных задач — следи за ним в аккаунте.

И держи в голове простую вещь: не привязывайся намертво к одному инструменту. Codex удобный, привычный, но если завтра его не будет — есть Claude Code и ещё десяток альтернатив, на которых ты доделаешь тот же проект. Даже свою команду агентов можно перенести. Инструмент — это бензин, а не святыня.

Что делать прямо сейчас

Открой Codex, создай локальный проект в пустой папке, выбери режим планирования и опиши, какое расширение хочешь. Если контекста не хватает, прямо попроси агента задать вопросы до кода.

Соберётся криво — нормально. На записи первая версия тоже не заработала. Исправляй по одной причине, проверяй результат после каждого шага и доведи расширение до рабочего состояния. Погнали.

Зачем
Расширение для Chrome — самый быстрый первый проект с агентом: результат видно за вечер, сервер и домен не нужны.
Главное
Сначала режим плана, потом код. План — на сильной модели, сборка — на модели попроще.
Установка
chrome://extensions → включить режим разработчика → «Загрузить распакованное расширение» → указать папку. В Яндекс Браузере — browser://extensions, всё то же.
Если не работает
Не переделывать вслепую, а сделать самый дешёвый тест, способный опровергнуть догадку о причине.

Как ставится задача

  • Создаёшь пустой проект — папку на своём компьютере.
  • Включаешь режим планирования: агент не пишет код, пока план не согласован.
  • Формулируешь задачу одной человеческой фразой.
  • Отвечаешь на уточняющие вопросы — по ним видно, туда ли он идёт.
  • Читаешь план целиком, даже если половина слов незнакома.

Доступы

  • Агент останавливается и просит подтверждения — это защита, а не тормоза.
  • «Подтверждать автоматически» экономит время, когда отходишь от компьютера.
  • Режим без ограничений помечен красным: полный доступ к файлам и интернету. Для учебного проекта не нужен.

Чем закончился эфир

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

Частые вопросы
Можно ли сделать расширение для браузера без программирования?
Да. Код пишет агент — твоя работа объяснить задачу человеческим языком, ответить на его вопросы и проверить результат. На записи всё делается фразами вроде «создаём расширение, которое будет скачивать видео». Понимать, что происходит, полезно, но писать код руками не требуется.
Как включить режим разработчика в Chrome?
Открой адрес chrome://extensions и включи тумблер «Режим разработчика» в правом верхнем углу. Пока он выключен, кнопки для загрузки своего расширения на странице просто нет. В Яндекс Браузере то же самое по адресу browser://extensions.
Как загрузить своё расширение в Chrome без магазина?
На странице chrome://extensions при включённом режиме разработчика нажми «Загрузить распакованное расширение» и укажи папку проекта — именно папку, а не архив. Публиковать в Chrome Web Store, чтобы пользоваться расширением самому, не нужно.
Будет ли такое расширение работать в Яндекс Браузере?
Да, папка подойдёт та же. Яндекс Браузер собран на том же движке, что и Chrome: адрес browser://extensions, тот же режим разработчика, та же загрузка распакованного расширения. Пересобирать ничего не надо.
Почему расширение не загружается и Chrome показывает ошибку?
Чаще всего выбрана не та папка — нужна та, в которой лежит файл манифеста, а не папка уровнем выше. Второй частый случай — ошибка в самом манифесте: скопируй текст ошибки целиком и отдай агенту, он поправит за одну итерацию.
Расширение собралось, но не работает. Что делать?
Не переписывать всё подряд. Сначала самым дешёвым способом проверить свою догадку о причине: открыть страницу и посмотреть живьём, там ли лежит то, что ищет расширение. На записи именно так и вышло — видео оказалось не на той платформе, под которую мы собирали. Причина находится за минуты, а слепая переделка съедает часы.
Зачем включать режим плана, если можно сразу дать задачу?
Потому что без плана агент бросается делать и выдаёт не то, что ты ждал. В режиме плана он сначала описывает, что собирается сделать, задаёт уточняющие вопросы — и по этим вопросам сразу видно, правильно ли он тебя понял. Согласовали план — только потом код.
Опасно ли давать агенту полный доступ к компьютеру?
Режим со снятыми ограничениями помечен красным не просто так: он даёт доступ к интернету и к любым файлам на твоём компьютере. Для первого учебного расширения это не нужно. Работай в обычном режиме с подтверждениями, а автоподтверждение включай осознанно, когда понимаешь, что именно подтверждаешь.
Что можно сделать с помощью Codex, кроме расширений?
Codex — обычный агент-разработчик: сайты, боты, скрипты для рутины, автоматизация. Расширение просто самый быстрый первый проект. Что это за инструмент, как его поставить и какие у него лимиты — разбирал в отдельном уроке про Codex, ссылка на него есть выше в тексте.
Какое расширение сделать первым?
Мелкое и полезное лично тебе. Ученики делали таймер против прокрастинации с игровой механикой (держишь режим — растёт дерево, сорвался — гибнет), ИИ-помощника по подбору косметики на конкретном сайте, свои кнопки для сбора данных со страниц. Смысл не в масштабе, а в том, чтобы за вечер получить работающую штуку.
Понравился урок?
это только часть — в полном курсе намного больше
Весь курс →
✓