Смотри. Расширение для браузера — это маленькая программа, которая живёт прямо в Chrome и делает что-то полезное на страницах, которые ты открываешь. Кнопка, счётчик, таймер, помощник — всё это расширения.
И это лучший первый проект, если ты только сел за агента. Причина простая: результат видно сразу. Не надо покупать домен, поднимать сервер, разбираться с базой данных. Собрал папку, закинул в браузер — и оно уже работает у тебя перед глазами. Маленький результат, который можно потрогать руками сегодня.
Ниже — разбор того, что происходит на записи: я в Codex собираю расширение с нуля. Текста хватит, чтобы повторить самому, даже если видео ты не откроешь.
Что такое расширение и из чего оно состоит
Чтобы не пугаться дальше, разберём на пальцах. Расширение — это обычная папка с несколькими файлами. Браузер её читает и делает то, что в ней написано.
- Манифест — файл-паспорт. В нём написано, как расширение называется, что ему разрешено и какие файлы запускать. Без него браузер папку не примет.
- Скрипт — то, что собственно делает работу: читает страницу, нажимает, считает, сохраняет.
- Окошко — то, что ты видишь, когда кликаешь по иконке расширения. Нужно не всегда.
- Иконка — картинка на панели браузера.
В папке будет несколько файлов. Агент предложит их содержимое, а тебе нужно проверить, что лежит в каждом файле, какие разрешения запрошены и зачем.
Что нужно до старта
- Установленный Codex. Это агент от OpenAI, ставится и на Windows, и на macOS. Как ставить и что он умеет — в уроке Codex: что это, как установить и лимиты.
- Аккаунт с доступом к Codex. Перед стартом проверь текущий тариф и лимиты на официальной странице OpenAI. Как платить из России — разбирал в уроке как оплатить нейросети из России.
- Chrome. Ну тут понятно.
- Никаких скиллов и агентов сверху. Сейчас мода такая: все топят за скиллы, за наборы агентов, за навороченные надстройки. Пока ты сам не разобрался, всё это только уводит агента по ложным путям. Взял голый интерфейс — и пошёл делать.
Шаг 1. Создаём проект
Интерфейс Codex показывает проекты и диалог с агентом. Их расположение может меняться между версиями; для урока важны выбранная папка проекта, режим работы и история задачи.
Создай локальный проект и выбери отдельную пустую папку. Названия кнопок могут меняться, поэтому ориентируйся на действие: агент должен работать только с этой папкой.
Проект локальный — значит папка лежит у тебя на компьютере, и агент работает именно с ней. Всё остальное в этом окне на старте можно не трогать.
Шаг 2. Включаем режим плана
Вот это — главное место всего урока. Перед тем как ставить задачу, переключи агента в режим планирования.
В режиме планирования попроси сначала описать шаги, файлы и проверки. До подтверждения убедись, что агент действительно остаётся на этапе плана: поведение зависит от версии и настроек клиента.
Почему так. Если сразу дать задачу, агент бросается делать — и ты получаешь не то, что ждал. А когда есть план, вы оба понимаете, к какому результату идёте. Без плана двигаться сложно: непонятно, куда придёшь.
Задача на записи звучала так: «создаём расширение для Chrome, которое будет скачивать видео с платформы». Одна фраза человеческим языком — этого достаточно, чтобы агент начал думать.
Если не знаешь, с чего начать формулировку, — вот рабочий шаблон. Подставь своё и отдай агенту:
Сделай расширение для браузера Chrome.
Что оно должно делать: <опиши одной фразой, своими словами>.
На каких сайтах работает: <адреса или «на любых»>.
Что я вижу: <кнопка на панели / окошко со списком / просто работает в фоне>.
Сначала покажи план, код пока не пиши.
Если чего-то не хватает для плана — задай мне вопросы.
Последние две строки — самые важные: это явная просьба сначала уточнить недостающий контекст. Проверь, что агент действительно задал вопросы до изменения файлов. Подробнее про то, как формулировать задачи, — в уроке правила, по которым пишут промты.
Рядом переключается модель. Правило простое: на план ставь самую сильную модель, на исполнение можно попроще. План — это мышление, тут экономить глупо. Сборка по готовому плану — работа механическая.
Шаг 3. Агент задаёт вопросы — отвечай
Дальше начинается то, чего многие не ждут: агент сам спрашивает. На записи он задал три вопроса — на каких сайтах должна работать первая версия, как ставить расширение, будет ли тестовая страница.
Если агент предлагает несколько вариантов, попроси назвать рекомендуемый и объяснить компромиссы. Рекомендацию всё равно сверяй со своей задачей и доступами.
И вот на этих вопросах ты как раз видишь, в ту ли сторону он двинулся. Спрашивает про то, что ты и правда имел в виду, — отлично. Спрашивает про какую-то дичь — значит понял тебя неправильно, и лучше поправить сейчас, а не после сборки.
Отвечать можно не только с клавиатуры — надиктовывать голосом тоже. Кому как удобнее. По сути у тебя на компьютере появился личный разработчик, с которым ты просто разговариваешь.
Шаг 4. Читай план, даже если ничего не понял
План готов — открывай и читай. Да, там будет куча незнакомых слов. Это нормально, тема новая, термины новые. Пугаться нечего.
Читать всё равно надо. С каждым разом ловишь себя: о, это слово я уже знаю. А это где-то встречал. Так и набирается понимание — не из учебника, а из практики.
Я это на себе прошёл, когда лез в арбитраж трафика. Попал в чат, где сидели люди в теме, и месяца два вообще не понимал, о чём они пишут. Слова знакомые, а смысл — нет. Посидел, почитал, что-то погуглил — и начал разбираться. Тут ровно то же самое.
Не понял вообще ничего — так и напиши: «я тут ничего не понимаю, объясни подробнее, что ты собираешься делать». Он объяснит. Понял и согласен — жмёшь «да», и агент идёт собирать.
Шаг 5. Доступы и автоподтверждение
Пока агент работает, он периодически останавливается и просит подтверждение — на доступ к папке, на действие. Это защита, а не тормоза.
В некоторых версиях клиента можно менять режим подтверждений. Для первого проекта оставь подтверждение действий включённым: так видно, какие файлы и команды запрашивает агент.
Клиент может предлагать расширенные разрешения на интернет, команды и файлы. Их название и оформление меняются, но правило постоянное: первому учебному проекту полный доступ не нужен.
Запомни правило: чем шире доступ ты выдал, тем меньше контролируешь, что происходит. Для тренировочного проекта хватит обычного режима с подтверждениями.
Шаг 6. Загружаем расширение в Chrome: режим разработчика
Агент собрал папку. Теперь её надо скормить браузеру. Своё расширение ставится не из магазина, а вручную — через режим разработчика. Магазин, проверки и взносы нужны, только если ты собрался раздавать его людям; себе — не нужны.
- Открой в Chrome адрес chrome://extensions — вбей его прямо в адресную строку.
- Включи справа сверху тумблер «Режим разработчика». Пока он выключен, следующей кнопки просто не видно.
- Нажми «Загрузить распакованное расширение».
- Укажи ту папку, которую собрал агент. Именно папку — не архив и не отдельный файл.
- Расширение появится в списке. Закрепи иконку на панели, затем открой тестовую страницу и проверь основной сценарий.
Путь к папке спроси у самого агента — он подскажет, куда сложил результат. На записи это заняло меньше минуты: скопировал команду, нашёл папку, выбрал, загрузил.
В Яндекс Браузере всё то же самое. Он собран на том же движке, что и Chrome: адрес browser://extensions, тот же режим разработчика, та же кнопка загрузки распакованного расширения. Папка подойдёт та же самая, пересобирать ничего не надо.
Если у тебя уже стоят похожие расширения — отключи их на время теста. Иначе не поймёшь, какое из них сработало, а какое мешает.
Собралось красиво, но не работает
А теперь честная часть, ради которой стоит досмотреть запись до конца. На эфире расширение не заработало.
Загрузилось с ошибками. Интерфейс получился красивый, с анимациями, всё как надо. А нажимаешь — не качает. Так бывает, и это нормальная часть процесса, а не признак того, что ты бездарь.
Дальше — самое важное: не бросаться переделывать всё подряд, а понять причину. Причина нашлась быстро: видео на той странице лежало вообще не там, где мы предполагали, — не на самой платформе, а на стороннем видеосервисе. Расширение искало в одном месте, а файл был в другом. Логично, что не нашло.
Отсюда правило, которое экономит часы. Когда что-то не работает — сделай самый дешёвый тест, который может опровергнуть твою догадку. Не переписывай код, не строй новую архитектуру. Проверь живьём одну вещь: а там ли вообще лежит то, что мы ищем?
У меня был случай, когда агенты сутки бились над задачей. Сутки. Я вмешался, попросил сделать самую простую проверку — открыть в браузере и посмотреть, что реально происходит. Проверка заняла минуты и всё расставила по местам. Теперь этот дешёвый тест зашит у меня в систему первым шагом на любую жалобу «не работает».
Так что базово расширение мы собрали. Дальше — отладка. Это обычный рабочий этап, через него проходят все.
И ещё пара мест, где спотыкаются чаще всего. Расширение не появилось в списке — проверь, что выбрана папка с manifest.json. Chrome ругается на манифест — передай агенту полный текст ошибки и проверяй исправление новым запуском. Иконка есть, а по клику ничего — проверь разрешённые сайты и консоль расширения.
Где вообще ломается код от нейросети и почему — разбирал отдельно в уроке нейросеть, которая пишет код: с чего начать.
Какое расширение сделать первым
Бери что-то своё, мелкое и полезное лично тебе. Вот что делали ребята на курсе:
- Таймер против прокрастинации. Показывает, что ты уже слишком долго залипаешь во вкладках, и гонит отдохнуть. Человек добавил игровую механику: пока держишь режим — растёт дерево, нарушил — дерево гибнет, и выращивай заново.
- ИИ-помощник по подбору косметики на конкретном сайте корейской косметики. Уже серьёзная штука, а начиналась так же — с пустой папки.
- Своя кнопка на нужном сайте: собрать данные со страницы, посчитать, переслать себе.
Дальше — второе расширение, третье, потом чат-бот, потом подключил нейронку. И полетело. Эти маленькие дофаминовые результаты и держат весь процесс: мозг запоминает, что рабочая штука появляется после сборки, отладки и проверки.
Тот же приём работает и на других агентах — если хочешь попробовать бесплатно, посмотри урок про бесплатного агента с открытым кодом и подключение моделей.
Сколько это стоит
Перед стартом проверь текущий тариф и лимиты Codex на официальной странице OpenAI. Фактический расход зависит от модели, размера контекста и числа параллельных задач — следи за ним в аккаунте.
И держи в голове простую вещь: не привязывайся намертво к одному инструменту. Codex удобный, привычный, но если завтра его не будет — есть Claude Code и ещё десяток альтернатив, на которых ты доделаешь тот же проект. Даже свою команду агентов можно перенести. Инструмент — это бензин, а не святыня.
Что делать прямо сейчас
Открой Codex, создай локальный проект в пустой папке, выбери режим планирования и опиши, какое расширение хочешь. Если контекста не хватает, прямо попроси агента задать вопросы до кода.
Соберётся криво — нормально. На записи первая версия тоже не заработала. Исправляй по одной причине, проверяй результат после каждого шага и доведи расширение до рабочего состояния. Погнали.