У цій статті ми пройдемо весь шлях створення WebExtension для Firefox, від початку і до кінця. Це доповнення буде просто додавати червону рамку до всіх сторінок, завантажених з "mozilla.org" або будь-якого з його піддоменів.
Для початку вам потрібен Firefox 45 або пізнішої версії.
написання WebExtension
Створіть нову директорію (папку) і перейдіть в неї:
manifest.json
Тепер створіть новий файл, назвіть його "manifest.json" в папці "borderify". Вставте туди наступний код:
- Перші три ключа: manifest_version. name і version. є обов'язковими і містять основні метадані про доповнення.
- description не обов'язковий, але рекомендується: це опис відображається в Менеджері Додатків.
- icons не обов'язковий, але рекомендується: дозволяє вказати значок для доповнення, який буде видно в менеджері Додатків.
- applications є обов'язковим для Firefox. і визначає ID доповнення. Він так само може використовуватися для вказівки мінімальної та максимальної версії Firefox, підтримуваної розширенням.
Найцікавіший ключ тут - це content_scripts. який говорить Firefox завантажувати скрипт на Web сторінках, чий URL збігається з заданим шаблоном. У нашому випадку, ми просимо Firefox завантажити скрипт з назвою "borderify.js" на всіх HTTP або HTTPS сторінках, отриманих з "mozilla.org" або будь-якого з його піддоменів.
У деяких випадках вам потрібно вказати ID для вашого доповнення. Якщо вам потрібно вказати ID доповнення включите ключ applications в manifest.json і встановіть його властивість gecko.id:
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:
Також Ви можете створити іконку в форматі SVG і вона буде коректно масштабироваться.
borderify.js
Нарешті, створіть в директорії "borderify" файл з ім'ям "borderify.js" і помістіть туди наступний код:
Цей скрипт буде вбудовуватися в сторінку, яка збігається з шаблоном, зазначеному в ключі content_scripts файлу manifest.json. Цей скрипт має прямий доступ до всього документа, як якщо б він був завантажений самої сторінкою.
Спочатку уважно перевірте, що Ви правильно розмістили файли і дали їм правильні імена:
Починаючи з версії Firefox 45 Ви можете тимчасово встановити WebExtension з локального диска.
Відкрийте сторінку "about: debugging", клікніть "Load Temporary Add-on" і виберіть файл manifest.json:
Тепер ваше додаток встановлено і залишиться в браузері до його перезапуску.
Для перевірки, зайдіть на сторінку "about: addons" щоб відкрити Менеджер Додатків. Ви повинні побачити своє доповнення з ім'ям і іконкою:
Також, Ви можете запускати WebExtension з командного рядка, використовуючи web-ext.
тестування
Тепер зайдіть на будь-яку сторінку домена "mozilla.org" і ви повинні будете побачити червону кордон навколо сторінки:
Експериментуйте небагато. Поміняйте колір кордону або зробіть ще що-небудь з вмістом на сторінці. Після того, як змінений скрипт буде збережений, а сторінка перезавантажена, ви відразу побачите зміни:
Зверніть увагу, що після зміни файлу manifest.json, ви повинні вручну перезавантажити своє доповнення. На даний момент це означає, що вам потрібно перезавантажити Firefox, а потім знову завантажити своє доповнення на сторінці "about: debugging". Ми працюємо над покращенням цього процесу.
Упаковка і публікація
Щоб інші люди могли використовувати ваше додаток, вам необхідно запакувати його. Додатки для Firefox в запакованому вигляді є XPI файлами, які представляють собою звичайні ZIP архіви з розширенням "xpi".
При упаковці необхідно враховувати наступне: в ZIP архіві повинні бути тільки файли, а не містить їх директорія (директорія "borderify" не повинна потрапити в архів). Для того, щоб створити правильний XPI файл з вашого доповнення, в командному рядку перейдіть в директорію "borderify" і виконайте наступну команду:
zip -r. /borderify.xpi *
Починаючи з Firefox 43 всі додатки повинні бути підписані перш ніж вони будуть встановлені в браузер. Ви можете зняти це обмеження тільки в Firefox Developer Edition або Firefox Nightly за допомогою наступних кроків:
- перейдіть на сторінку about: config в Firefox
- за допомогою рядка пошуку знайдіть xpinstall.signatures.required
- двічі клікнувши на цю властивість або за допомогою локального меню (через клік правою кнопкою миші), виберіть "Toggle", щоб встановити значення false.
Що далі?
Тепер, коли ви маєте уявлення про розробку додатків для Firefox, ви можете: