Теперь делаем специальный модуль ip_background.js, который будет выполнять всю работу нашего аддона, во время работы браузера.
Создаем файл ip_background.js и копируем из файла ip_popup.js все содержимое, кроме строк с addEventListener, т.к. слушатели событий в background будут другие. Функцию doRequest пока оставим в покое, ей займемся чуть позже.
Из функции onGot(item) удаляем строку document.getElementById("script").value = curAddr;, т.к. никаких текстовых полей в бэкграунде нет и не предвидится, менять элементы нам тут не надо.
Еще я переименовал функцию bodyLoad в listinerRun, она у нас будет одна, на все три обрабатываемых события.
В целом, логика работы остается такой же, как и во всплывающей странице, только вместо заполнения элементов нам нужно будет менять картинку на кнопке и ее же всплывающую подсказку.
Так, начало положена, у нас есть «болванка» нашего background-скрипта, сохраняем ее и модифицируем manifest.json
В manifest.json следует добавить секцию "background", где перечислить в массиве "scripts" скрипты, запускаемые браузером во время работы нашего расширения. Понадобятся два скрипта, собственно ip_background.js и библиотека JQuery jquery-3.4.1.min.js:
"background": {
"scripts": [
"jquery-3.4.1.min.js",
"ip_background.js"
]
}
Новый manifest.json на PasteBin
Теперь необходимо модифицировать обработчик GET-запроса, чтобы по его результату менять картинку на кнопке. А заодно и всплывающую подсказку, которая показывается, когда подносишь мышку к кнопке.
Подсказка меняется функцией browser.browserAction.setTitle(object). В объект записывается несколько свойств, необязательные: tabId и windowId и обязательный title. Пример:
var btitle = '';
//...
btitle = "Working...";
browser.browserAction.setTitle({title: btitle});
Поскольку кнопка у нас одна и подсказку нам не нужно ставить разную, в зависимости от окна или вкладки, то заполняем только один параметр, т.е. текст подсказки.
Также меняем иконку, иконка меняется функцией browser.browserAction.setIcon(object). Обязательный параметр в передаваемом объекте тоже один, path — путь к изображению. Остальные параметры в данном случае не нужны. Пример:
browser.browserAction.setIcon({
path: 'flags/1working.png'
});
Подробности:
browser.browserAction.setIcon()
browser.browserAction.setTitle()
browserAction
В соответствии с вышеизложенным модифицируем функцию doRequest, меняя обращения к элементам страницы (вида document.getElementById("flag").src = 'flags/3unknow.png';) на код, для изменения иконки и подсказки.
Новая функция doRequest:
function doRequest() //main request function
{
var btitle = '';
browser.browserAction.setIcon({
path: 'flags/1working.png'
});
btitle = "Working...";
browser.browserAction.setTitle({title: btitle});
$.get(curAddr)
.done (function (data) {
//data processing code here
var json = $.parseJSON(data);
if (json.cc.trim() == '') //no country code
{
browser.browserAction.setIcon({
path: 'flags/3unknow.png'
});
btitle = json.ip + " " + "Unknow country";
browser.browserAction.setTitle({title: btitle});
}
else //country code exist
{
browser.browserAction.setIcon({
path: 'flags/' + json.cc.trim() + '.png'
});
btitle = json.ip + " " + json.country + " (" + json.cc + ")";
browser.browserAction.setTitle({title: btitle});
}
})
.fail(function () {
//error processing code here
browser.browserAction.setIcon({
path: 'flags/2error.png'
});
btitle = "Error";
browser.browserAction.setTitle({title: btitle});
});
Сначала выбираем нужные события для объекта «вкладка». Для обновления данных выбираем три события:
— создание вкладки, событие происходит, когда пользователь новую создает вкладку, например, нажимая кнопку «+». (tabs.onCreated)
— обновление вкладки. Происходит при перезагрузке страницы, дозагрузке новой информации, или при нажатии кнопки обновить. (tabs.onUpdated)
— активация вкладки. Когда пользователь выбирает вкладку (tabs.onActivated).
В callback-функции, привязанные к этим событиям, передаются дополнительные параметры. Например, объект tab, содержащий дополнительную информацию о вкладке для tabs.onCreated, объект activeInfo для tabs.onActivated и множество дополнительных параметров для tabs.onUpdated. Но в данном случае, все эти параметры нас не интересуют, достаточно того, что событие просто произошло. Поэтому callback-функция будет без параметров:
function listinerRun()
{
loadSettings()
.then(doRequest);
}
Подключаем слушатели:
browser.tabs.onActivated.addListener(listinerRun);
browser.tabs.onCreated.addListener(listinerRun);
browser.tabs.onUpdated.addListener(listinerRun);
Подробности:
tabs.onActivated
tabs.onCreated
tabs.onUpdated
Скриншоты кнопок на панели:
ip_background.js целиком на PasteBin
Теперь все готово, осталось собрать дополнение, а также опубликовать и получить цифровую подпись, чтобы поделиться им с другими.
О цифровой подписи. Современный Firefox не будет устанавливать дополнение, если у него нет цифровой подписи от Мозиллы. В некоторых версиях, а именно в Firefox ESR (с длительной поддержкой) и Firefox Developer Edition обязательную цифровую подпись для дополнений можно отключить, но они стоят не у всех, так что проще пройти валидацию и одобрение в Мозилле, получить свою страничку для дополнения и делиться им с товарищами оттуда.
Необходимо поправить параметр "id" в секции "applications" "gecko". id не должен заканчиваться на @mozilla.org, а также на @shield.mozilla.org, @pioneer.mozilla.org, @mozilla.com, в остальном, там может быть написано все что угодно, хоть реальный домен, как у меня, хоть выдуманный, как, например у Foxy Proxy, где после знака @ имя разработчика (foxyproxy@eric.h.jung).
"applications": {
"gecko": {
"id": "external-ip-geoip@tolik-punkoff.com"
}
Рекомендую также наделать скриншотов, если вы собрались публиковать дополнение на сайте дополнений.
На самом деле расширение Firefox (с расширением .xpi) это обычный zip-архив, содержащий в себе файлы и структуру каталогов дополнения. Поэтому просто архивируем содержимое каталога дополнения в ZIP-архив и переименовываем файл в *.xpi.
Сначала регистрируемся на https://addons.mozilla.org. Регистрация там простая, требуется только электропочта, ну и пароль придумать.
После регистрации логинимся, кликаем по своему имени пользователя. Или временному вида firefox user<цифры> (имя можно будет потом задать в профиле) и выбираем «Представить новое дополнение»
Далее с нас спросят, как распространять эту версию. Если выбрать «Самостоятельно», то нам предложат загрузить файл, ответить на вопрос, с какими версиями Firefox совместимо дополнение и не использовали ли мы обфускаторы кода. Если ответить на второй вопрос «нет», то дополнение будет тут же подписано и отдано вам.
Но мы пойдем другим путем, попробуем добиться публикации на сайте Firefox и выберем «На этом сайте»
Примечание: Некоторые скриншоты ниже будут от тестового дополнения, потому что мое уже прошло валидацию и одобрение.
Загружаем дополнение:
Автоматическая валидация прошла успешно:
Теперь нас спрашивают, не использовали ли мы обфускаторы кода. Мы не использовали (если была использована библиотека jquery-?.?.?.min.js), чей код ужат, чтоб занимал меньше места — ничего страшного, Мозилла автоматом определяет, что используется известная версия библиотеки.
Далее нас переведут на страницу, где нужно ввести детальное описание дополнения, категории, и прочее. Для нашего дополнения были выбраны категории «Приватность и защита» и «Оповещения и обновления».
Обязательные поля помечены звездочкой, но заполнять лучше как можно подробнее.
Лицензию, кроме представленных, можно выбрать свою. Я, например, опубликовал дополнение под WTFPL
Далее дополнение будет ожидать проверки, а вы можете перейти на специальную страницу, где неспешно (до поступления на проверку проходит примерно двое суток, так что время у вас есть) заполнить всю остальную информацию. Чем лучше заполните, тем лучше будет проверяющим.
На страницу можно перейти из меню Мои дополнения —> <Имя дополнения>
Скриншоты страницы для моего дополнения:
Единственное, что мне не удалось сделать — поменять локаль на английскую, так русской и осталась, хотя весь интерфейс на английском (правда того интерфейса там, кот разберется).
Внешний скрипт на PHP, который можно использовать, как замену api.myip.com (копия)
На GitHub
Страница дополнения на mozilla.org
Исходники на GitHub
Скачать подписанный xpi с GitHub
Этот мануал в PDF + весь код в одном архиве:
С Mega.nz
С Google.Drive