Представьте: вы смотрите видео с кошками на любимом сайте, и вдруг — БАМ! — появляется безумная идея. А что, если бы Firefox мог приносить кофе, пока вы смотрите видео? Хотя наши веб-расширения пока не могут доставлять кофеин, они могут превратить ваш браузер в швейцарский армейский нож для повышения продуктивности. Давайте создадим немного магии для браузера!

Анатомия веб-расширения

Каждое великое расширение начинается с трёх основных компонентов:

  1. manifest.json (ДНК расширения).
  2. Контент-скрипты (шептуны DOM).
  3. Бэкграунд-скрипты (тихие лошадки).
graph TD A[Manifest.json] --> B[Content Scripts] A --> C[Background Scripts] B --> D[Web Page DOM] C --> E[Browser APIs] D --> F[UI Changes] E --> G[Browser Actions]

Думайте об этом как о бутерброде с арахисовым маслом — манифест — это хлеб, который всё скрепляет, контент-скрипты — это хрустящее арахисовое масло, а бэкграунд-скрипты — это варенье, которое никогда не остаётся на месте, где вы его положили.

Создание вашего первого расширения

Давайте создадим расширение, которое добавляет красные рамки на страницы mozilla.org — потому что даже Mozilla заслуживает немного изюминки!

Шаг 1: Магия манифеста

Создайте manifest.json:

{
  "manifest_version": 2,
  "name": "Border Sorcerer",
  "version": "1.0",
  "description": "Потому что всё выглядит лучше в рамке!",
  "content_scripts": [{
    "matches": ["*://*.mozilla.org/*"],
    "js": ["content-script.js"]
  }],
  "browser_action": {
    "default_icon": "icon.png"
  }
}

Это наш свод заклинаний — он говорит Firefox, где применять нашу магию (matches) и какие заклинания использовать (content_scripts).

Шаг 2: Волшебство DOM

Создайте content-script.js:

document.body.style.border = "5px solid red";
console.log("Абракадабра! Страница обрамлена!");

Наш контент-скрипт похож на художника-граффитиста — он пробирается на страницы и оставляет свой след (вежливо, конечно).

Повышение уровня: бэкграунд-скрипты

Что, если мы хотим, чтобы наше расширение реагировало на нажатия кнопок? На сцену выходят бэкграунд-скрипты — нервная система расширения.

Обновите манифест:

"background": {
  "scripts": ["background.js"]
},
"permissions": ["tabs"]

Создайте background.js:

browser.browserAction.onClicked.addListener(() => {
  browser.tabs.executeScript({
    code: 'document.body.style.backgroundColor = "papayawhip"'
  });
  console.log("Предупреждение: бэкграунд-скрипт превращает страницы в папайю!");
});

Теперь, если нажать на значок расширения, страницы приобретут тропический вид. Ведь почему папайе должно быть весело в одиночку?

Отладка: когда заклинания дают сбой

Инструмент web-ext — наше хрустальное шарило:

npm install -g web-ext
web-ext run

Эта команда:

  1. Запускает Firefox с загруженным расширением.
  2. Автоматически перезагружает изменения.
  3. Показывает логи консоли (где появляются наши сообщения console.log).

Совет эксперта: если ваше расширение ведёт себя как кошка, игнорирующая команды, проверьте эти распространённые ошибки:

  • Опечатки в манифесте (JSON-синтаксис неумолим).
  • Отсутствие необходимых разрешений.
  • Режим приватного просмотра (программа защиты свидетелей для расширений).

От хобби до героя

Как только ваше расширение будет готово:

  1. Соберите его с помощью web-ext build.
  2. Отправьте на addons.mozilla.org.
  3. Заработайте? (Ну, может быть, сначала интернет-слава).

Но помните — с большой силой приходит большая ответственность. Не будьте тем, кто заставляет браузер всех лаять как собака. Если, конечно, это не ваша настоящая цель — в таком случае, удачи вам!

Итак, вот и всё — ваш экспресс-курс по браузерной алхимии! Независимо от того, повышаете ли вы продуктивность, добавляете ли немного веселья или просто обрамляете mozilla.org в красный цвет, веб-расширения позволяют вам изменять веб по одной вкладке за раз. Теперь вперёд и кодируйте — интернет не станет странным сам по себе!