Ваш первый расширение

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

mkdir borderify
cd borderify

Используя подходящий текстовый редактор, создайте новый файл с именем «manifest.json» непосредственно в папке «borderify». Вставьте в него следующее содержимое:

{

  "manifest_version": 2,
  "name": "Borderify",
  "version": "1.0",

  "description": "Adds a red border to all webpages matching mozilla.org.",

  "icons": {
    "48": "icons/border-48.png"
  },

  "content_scripts": [
    {
      "matches": ["*://*.mozilla.org/*"],
      "js": ["borderify.js"]
    }
  ]

}

• Первые три ключа: manifest_version, name и version, являются обязательными и содержат основные метаданные расширения.
• description является необязательным, но рекомендуется: он отображается в менеджере дополнений.
• icons является необязательным, но рекомендуется: он позволяет указать значок для расширения, который будет отображаться в менеджере дополнений.

Наиболее интересным ключом здесь является content_scripts, который сообщает Firefox о загрузке скрипта в веб-страницы, URL которых соответствуют определённому шаблону. В данном случае мы просим Firefox загрузить скрипт с именем «borderify.js» во все страницы HTTP или HTTPS, обслуживаемые с «mozilla.org» или любыми его поддоменами.

• Узнайте больше о скриптах содержимого.
• Узнайте больше о шаблонах сопоставления.

"browser_specific_settings": {
  "gecko": {
    "id": "borderify@example.com"
  }
}

Расширение должно иметь значок. Он будет отображаться рядом с записью расширения в менеджере дополнений. В нашем manifest.json обещается, что у нас будет значок в «icons/border-48.png».

Создайте папку «icons» непосредственно в папке «borderify». Сохраните там значок под названием «border-48.png». Вы можете использовать значок из нашего примера, который взят из набора значков Google Material Design и используется в соответствии с лицензией Creative Commons Attribution-ShareAlike.

Если вы решите использовать свой собственный значок, он должен иметь размер 48x48 пикселей. Вы также можете добавить значок размером 96x96 пикселей для дисплеев высокого разрешения. В этом случае он будет указан как свойство 96 объекта icons в manifest.json:

"icons": {
  "48": "icons/border-48.png",
  "96": "icons/border-96.png"
}

В качестве альтернативы вы можете использовать SVG-файл, который будет правильно масштабирован. (Однако, если вы используете SVG, и ваш значок содержит текст, вы можете использовать инструмент «преобразовать в контур» в своём редакторе SVG, чтобы сплющить текст, чтобы он масштабировался с постоянным размером/положением.)

• Узнайте больше о спецификации значков.

Наконец, создайте файл с именем «borderify.js» непосредственно в папке «borderify». Вставьте в него это содержимое:

document.body.style.border = "5px solid red";

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

• Узнайте больше о скриптах содержимого.

Сначала убедитесь, что у вас правильные файлы в правильных местах:

borderify/
    icons/
        border-48.png
    borderify.js
    manifest.json

В Firefox: Откройте страницу about:debugging, выберите вариант «Этот Firefox», нажмите кнопку «Загрузить временное дополнение», а затем выберите любой файл в каталоге вашего расширения.

Теперь расширение установлено и остаётся установленным до перезапуска Firefox.

В качестве альтернативы, вы можете запустить расширение из командной строки, используя инструмент web-ext.

Чтобы другие пользователи могли использовать ваше расширение, вам необходимо упаковать его и отправить в Mozilla для подписания. Чтобы узнать больше об этом, см. «Публикация вашего расширения».

Теперь вы ознакомились с процессом разработки веб-расширения для Firefox:

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