Настройка среды разработки

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

Создание рабочей директории

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

Понимание файла manifest.json

Основой любого расширения Firefox является файл manifest.json. Этот файл содержит все метаданные и разрешения, необходимые для работы вашего расширения.

Вот базовый пример файла manifest.json:

{
  "manifest_version": 2,
  "name": "Моё первое расширение",
  "version": "1.0",
  "description": "Простое расширение для начала работы",
  "permissions": ["activeTab"],
  "browser_action": {
    "default_popup": "popup/popup.html"
  }
}
  • manifest_version: в настоящее время Firefox поддерживает Manifest V2, но будущие версии могут поддерживать V3.
  • name и version: эти поля говорят сами за себя.
  • description: краткое описание вашего расширения.
  • permissions: список разрешений, необходимых вашему расширению. Например, activeTab позволяет вашему расширению взаимодействовать с текущей активной вкладкой.
  • browser_action: определяет действие браузера, включая всплывающий HTML-файл.

Пошаговое руководство по созданию расширения

Шаг 1: создание основных файлов

manifest.json

Как упоминалось ранее, этот файл является основой вашего расширения.

popup.html

Это HTML-файл для вашего всплывающего окна. Вот простой пример:

<!DOCTYPE html>
<html>
  <head>
    <title>Моё всплывающее окно</title>
    <style>
      body {
        width: 200px;
        height: 100px;
        font-family: Arial, sans-serif;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>Моё первое расширение</h1>
    <button id="мояКнопка">Нажми на меня!</button>
    <script src="popup.js"></script>
  </body>
</html>

popup.js

Этот JavaScript-файл управляет логикой вашего всплывающего окна.

document.addEventListener("DOMContentLoaded", function () {
  const мояКнопка = document.getElementById("мояКнопка");
  мояКнопка.addEventListener("click", function () {
    // Делаем что-то при нажатии на кнопку
    alert("Кнопка нажата!");
  });
});

Шаг 2: добавление скриптов содержимого (необязательно)

Если вашему расширению необходимо взаимодействовать с веб-страницами, вам нужно добавить скрипты содержимого.

{
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["contentScript.js"]
    }
  ]
}

contentScript.js

Этот скрипт выполняется в контексте веб-страницы.

console.log("Загружен скрипт содержимого!");
document.body.style.border = '5px solid red';

Шаг 3: запрос разрешений

Чтобы использовать более мощные API, вам необходимо запросить разрешения в вашем manifest.json.

{
  "permissions": [
    "activeTab",
    "закладки",
    "cookies"
  ]
}

Шаг 4: использование API WebExtensions

API WebExtensions позволяют вам взаимодействовать с различными аспектами браузера. Вот пример использования API browser.tabs:

function logTabs(tabs) {
  console.log(tabs);
}

browser.tabs.query({ currentWindow: true }, logTabs);

А вот пример использования API browser.cookies:

function logCookie(c) {
  console.log(c);
}

function logError(e) {
  console.error(e);
}

let setCookie = browser.cookies.set({ url: "https://developer.mozilla.org/" });
setCookie.then(logCookie, logError);

Отладка вашего расширения

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

Загрузка временного дополнения

  1. Перейдите на страницу about:debugging#/runtime/this-firefox.
  2. Нажмите Загрузить временное дополнение….
  3. Укажите на ваш файл manifest.json.

Перезагрузка изменений

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

Упаковка вашего расширения

Когда вы довольны своим расширением, пора упаковать его для распространения.

Создайте файл XPI

Расширения Firefox распространяются в виде файлов .xpi, которые по сути являются zip-файлами, переименованными так, чтобы они имели расширение .xpi.

  1. Заархивируйте все ваши файлы расширения.
  2. Переименуйте zip-файл так, чтобы он имел расширение .xpi.

Блок-схема создания расширения Firefox

Вот блок-схема, обобщающая шаги:

graph TD A("Создание рабочей директории") --> B("Создать manifest.json") B --> C("Создать popup.html и popup.js") C --> D("Добавить скрипты содержимого, если необходимо") D --> E("Запросить разрешения в manifest.json") E --> F("Использовать API WebExtensions") F --> G("Загрузить временное дополнение для тестирования") G --> H("Отладить и перезагрузить изменения") H --> B("Упаковать расширение в файл XPI")

Заключение

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

Удачного кодирования, и пусть ваши расширения будут такими же плавными, как хорошо смазанная машина!