Ваше первое расширение

Написание расширения

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

mkdir borderify
cd borderify

manifest.json

Используя удобный текстовый редактор, создайте в папке borderify новый файл с именем manifest.json и таким содержимым:

{
  "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"
  }
}

icons/border-48.png

Если у расширения есть значок, то он будет отображаться в списке расширений Управления дополнениями. Наш файл 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 файл с именем borderify.js с таким содержимым:

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.

Тестирование

Теперь перейдите на любую страницу "https://www.mozilla.org/ru/" и вы должны будете увидеть красную границу вокруг страницы.

Попробуйте немного поэкспериментировать. Измените цвет границы или сделайте что-нибудь ещё с содержимым страницы. Для этого внесите изменения в скрипт и перезагрузите файлы расширения, нажав кнопку Обновить в about:debugging. Сразу после этого изменения станут видны.

• Узнать больше о временной установке расширений в Firefox

Упаковка и публикация

Чтобы другие люди могли использовать ваше дополнение, необходимо запаковать его и отправить в Mozilla для добавления подписи. Узнать больше об этом можно в разделе "Publish" Мастер-класса по расширениям Firefox.

Что дальше?

Теперь, когда вы имеете представление о разработке расширений для Firefox, вы можете:

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