Как сделать расширение для Chrome — за вечер, даже если не кодишь

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

Шаг 1. Придумай одну мелкую задачу

Не замахивайся. Хорошее первое расширение делает ровно одну видимую вещь: подсвечивает все ссылки, считает слова на странице, прячет ленту рекомендаций на ютубе, вытаскивает все картинки. Мы возьмём «подсветить все ссылки жёлтым» — результат виден сразу, а кода минимум.

Что получится на этом шаге: чёткая цель в одну фразу. Это и есть половина дела.

Шаг 2. Создай папку и файл-описание

Заведи папку, например my-extension. Внутри создай файл manifest.json — это «паспорт» расширения: браузер читает его первым. Формат — обычный JSON, тот самый текст в фигурных скобках.

{
  "manifest_version": 3,
  "name": "Подсветка ссылок",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

Что тут важно: manifest_version: 3 — актуальная версия формата (вторая уже не принимается). content_scripts говорит: «на всех страницах (<all_urls>) запусти мой файл content.js». Пока это всё.

Шаг 3. Напиши код, который меняет страницу

Рядом с манифестом создай content.js. Этот код выполнится прямо на открытой странице и поменяет её вид — он работает с DOM, деревом элементов сайта.

document.querySelectorAll("a").forEach((link) => {
  link.style.backgroundColor = "yellow";
});

По-человечески: «найди все ссылки (a) на странице и залей каждой фон жёлтым». Одна строчка по делу.

Не хочешь писать сам — и не надо. Скажи ИИ-редактору: «напиши content.js для расширения Chrome, который подсвечивает все ссылки жёлтым». Он выдаст ровно это. Твоя задача — понимать, что в файле, а не печатать по буквам.

Что получится: папка с двумя файлами — manifest.json и content.js. Это уже готовое расширение, осталось его подключить.

Шаг 4. Загрузи папку в Chrome

Тут самый приятный момент — никакого магазина.

1. Открой в браузере адрес chrome://extensions.
2. Включи тумблер Developer mode (Режим разработчика) в правом верхнем углу.
3. Нажми Load unpacked (Загрузить распакованное) и выбери свою папку my-extension.

Всё. Расширение появилось в списке и уже работает.

Что получится: карточка твоего расширения среди остальных — как настоящее, только сделал его ты.

Шаг 5. Проверь и правь на живую

Открой любой сайт. Ссылки залиты жёлтым — работает. Поменял что-то в content.js (например, цвет на lightgreen)? Вернись на chrome://extensions и нажми кружок-обновление на карточке расширения, потом обнови страницу. Правка — обновил — увидел. Цикл занимает секунды.

Не сработало? Не паникуй — это норма. Чаще всего дело в опечатке в manifest.json (JSON капризен к запятым и кавычкам) или в неверном имени файла. Скорми ошибку и оба файла ИИ — разобрать баг вместе с ним обычно быстрее, чем гадать самому.

Что дальше — от «для себя» к настоящему

Когда захочешь кнопку вместо автозапуска — добавь в манифест action и файл popup.html с кнопкой. Когда захочешь поделиться — есть Chrome Web Store: там разовый взнос разработчика и короткая проверка, после чего расширением сможет пользоваться любой. Но всё это потом. Сегодня у тебя уже есть рабочая штука, которую ты собрал за вечер.

Нужно ли уметь программировать?

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

В каких браузерах это заработает?

Расширение на manifest v3 подхватят почти все браузеры на движке Chromium: Chrome, Edge, Brave, Opera, «Яндекс.Браузер» — способ загрузки везде похожий. Firefox использует близкий, но чуть свой формат — туда расширение переносится с небольшими правками. Начни с Chrome, остальное приложится.