В этом руководстве мы рассмотрим, как создать надстройку Firefox, которая позволяет пользователю создавать будильники в указанное время с помощью настраиваемого текста. Мы расскажем, как создать базовую надстройку, добавить всплывающее окно и страницу параметров, добавить разрешения, сохранить информацию, отправить уведомления и создать фоновый скрипт для отправки уведомлений.
Это руководство не требует предварительного опыта создания надстроек Firefox или каких-либо расширений браузера. Вам нужно будет знать только некоторые основы JavaScript. Вы можете найти код этого руководства в этом репозитории GitHub, а также можете найти созданное дополнение, опубликованное здесь.
Настройка надстройки Firefox
Первым шагом к созданию надстройки Firefox является создание manifest.jsonфайла. Этот файл — единственный файл, необходимый для надстройки Firefox. Базовый формат manifest.jsonфайла должен включать следующие ключи:
- name: имя надстройки в формате ярлыка, например my-extension.
- version: текущая версия дополнения. При обновлении чего-либо в расширении вам необходимо обновить эту версию, поэтому рекомендуется начинать с низкого уровня.
- manifest_version: на момент написания Firefox поддерживает только Manifest V2, поэтому значение для этого должно быть 2. Однако, если в будущем будет добавлена поддержка V3, это тоже может быть 3полезно.
Это обязательные поля для любого дополнения. Следующие два необязательны, но рекомендуются:
- description: краткое описание вашего дополнения, объясняющее его назначение.
- icons: список иконок разных размеров. Эти значки будут использоваться в настройках, на панели инструментов браузера и в других местах. Рекомендуемые размеры добавляемых 16px, 32px, 48px, и 128px.
Для нашего дополнения давайте начнем с создания папки с именем firefox-alarms-addon. Затем добавьте manifest.jsonследующий контент:
{ "name": "personalized-alarms", "version": "0.0.1", "description": "Create personalized alarms", "manifest_version": 2, "icons": { "16": "assets/images/icon16.png", "32": "assets/images/icon32.png", "48": "assets/images/icon48.png", "128": "assets/images/icon128.png" } }
Как видите, iconsключ — это объект с ключами размера файла и пути к нему. Путь указывается относительно корня надстройки, в котором manifest.jsonнаходится. Для этого урока я использую значок, загруженный с сайта iconscout через Twitter Emoji, откуда я также могу загрузить различные необходимые размеры.
Если вы продолжаете, возьмите эти файлы из нашего репо и поместите их в соответствующий каталог ( assets/images/).
Это все, что нужно для создания надстройки Firefox!
Загрузка дополнения в Firefox
Чтобы протестировать нашу надстройку Firefox и иметь возможность отлаживать ее позже, прежде чем загружать ее в Центр разработчиков Mozilla, откройте Firefox, затем выберите «Надстройки и темы» в правом меню или с помощью ярлыка ctrl+ shift+ A. Затем щелкните значок «Настройки» рядом с полем «Управление расширениями» и выберите » Отладка надстроек».
Откроется новая страница временных расширений.
Нажмите кнопку » Загрузить временное дополнение» и выберите manifest.json только что созданный файл. Если все было сделано правильно, вы увидите недавно созданное дополнение с некоторой информацией о нем и значком, который мы указали в файле manifest.json.
Добавление всплывающего окна
Надстройки Firefox можно сделать доступными с помощью различных методов, и один из них — путем добавления всплывающей страницы. При добавлении всплывающей страницы значок вашего расширения будет отображаться на панели инструментов, и как только пользователь щелкнет по нему, появится указанная всплывающая страница.
Мы будем использовать всплывающую страницу, чтобы показать пользователю список предстоящих сигналов тревоги и ссылку для добавления нового сигнала тревоги, который переводит пользователя на страницу параметров (о которой мы поговорим в следующем разделе).
Создайте popup.htmlв корне проекта файл со следующим содержимым:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Personalized Alarms</title> <link href="assets/css/bootstrap.min.css" rel="stylesheet" /> </head> <body class="p-3"> <h1>Upcoming Alarms</h1> <ul class="list-group" id="alarmsList"> </ul> <div class="mt-3"> <a href="#" class="link-primary" id="optionsLink">Add an Alarm</a> </div> <script src="assets/js/jquery.min.js"></script> </body> </html>
Как видите, это всего лишь HTML-документ. Мы также добавили bootstrap.min.cssк assets/cssи связали его здесь, и jquery.min.jsпод assets/js/jquery.min.jsи связан его. Эти две библиотеки предназначены только для упрощения работы, но вам не обязательно их использовать. Вы можете получить их из нашего репо здесь и здесь.
В содержимом страницы мы покажем список предстоящих сигналов тревоги и ссылку на страницу параметров.
Следующим шагом по созданию всплывающего окна является добавление следующего manifest.json:
"browser_action": { "default_popup": "popup.html", "browser_style": true }
browser_action- это объект, у которого есть несколько параметров, но обязательным является только один default_popup, который представляет собой относительный путь к всплывающему окну из корневого каталога надстройки. browser_styleне является обязательным, но рекомендуется установить значение true. Это означает, что Firefox будет внедрять стили браузера по умолчанию, чтобы убедиться, что стиль всплывающих окон надстройки похож на стиль остальной части браузера.
Это все, что требуется для добавления всплывающего окна. Перейдите на страницу временных надстроек, на которую мы заходили раньше, и нажмите кнопку » Обновить» для надстройки. Это заставит Firefox проверить manifest.jsonналичие изменений и применить их.
Как только вы это сделаете, вы сможете увидеть значок вашего расширения в меню панели инструментов.
Если вы нажмете на нее, вы увидите только что созданную всплывающую страницу.
В нашем всплывающем окне еще остались две вещи, чтобы сделать его полностью функциональным: использование хранилища для получения предстоящих сигналов тревоги и создание ссылки «Добавить сигнал тревоги» для перехода пользователя на страницу параметров.
Использование хранилища
Хранилище в расширениях браузера позволяет нам хранить данные, относящиеся к расширению или пользователю, либо локально на компьютере, либо синхронно в зависимости от их учетной записи. Локальное хранилище хранит информацию локально в браузере, а это означает, что если пользователь вошел в Firefox с тем же адресом электронной почты с другого компьютера, эта сохраненная информация там не будет. Хранилище синхронизации хранит информацию о текущем вошедшем пользователе, что позволяет этой информации быть доступной, где бы пользователь ни вошел в систему.
Хранилище синхронизации следует использовать для определенных настроек, которые пользователь хочет, чтобы они были доступны повсюду, тогда как локальное хранилище следует использовать для информации или параметров, которые актуальны только для текущей установки браузера.
В нашем примере мы сделаем сигналы тревоги доступными везде, где пользователь вошел в систему, поэтому мы будем хранить их в хранилище синхронизации. Но предположим, что мы хотим добавить параметр «временного отключения», который на некоторое время отключает сигналы тревоги. В этом случае, вероятно, будет удобнее использовать локальное хранилище.
Доступ к хранилищу можно легко получить через Storage API с помощью методов get и set, но сначала нам нужно запросить разрешение на использование storageв нашей надстройке. Сделать это можно внутри manifest.json:
"permissions": [ "storage" ],
Когда пользователь установит вашу надстройку, он увидит, какие разрешения вам требуются и нужно будет принять их для установки надстройки.
Есть еще одна вещь, которую нам нужно добавить, чтобы иметь возможность тестировать надстройку локально: явный идентификатор надстройки, чтобы иметь возможность использовать хранилище. Для этого также добавьте это в manifest.json:
"browser_specific_settings": { "gecko": { "id": "addon@example.com", "strict_min_version": "42.0" } }
Это просто возможность протестировать его локально. После публикации мы удалим это из манифеста.
Следующее, что мы сделаем, — это создадим новый assets/js/popup.jsфайл, который будет получать аварийные сигналы из хранилища и отображать их.
Чтобы получить элементы из хранилища, вы можете использовать browser.storage.sync.get или browser.storage.local.get. Это зависит от того, храните ли вы информацию в хранилище синхронизации или локальном хранилище. В нашем случае мы храним сигналы тревоги в хранилище синхронизации, поэтому мы будем использовать browser.storage.sync.get. Следует отметить, что все методы browser.storage.sync.*и browser.storage.local.*имеют одинаковую подпись и принимают / возвращают одни и те же типы.
browser.storage.sync.getпринимает один параметр: массив строк, которые являются ключами данных, которые мы получаем. Эти ключи определяются, когда мы устанавливаем хранилище (о котором мы поговорим в следующем разделе). Эта функция возвращает обещание, которое преобразуется в resultsобъект, содержащий ключи, которые мы указали в первых параметрах, и их значения, если они существуют.
Создайте assets/js/popup.jsсо следующим содержанием:
$(document).ready(() => { const listElement = $('#alarmsList'); browser.storage.sync.get(['alarms']) .then((result) => { if (result.alarms && result.alarms.length) { //loop over the alarms and display them result.alarms.forEach((alarm) => { appendItem(alarm.content, alarm.time); }); } else { //show no items available appendItem('No alarms are available'); } }); function appendItem(content, badgeContent = null) { listElement.append(` <li class="list-group-item d-flex justify-content-between align-items-center"> ${content} ${badgeContent ? `<span class="badge bg-primary rounded-pill">${badgeContent}</span>` : ''} </li> `); } });
Вам также необходимо включить этот файл в popup.html:
... <script src="assets/js/popup.js"></script> </body> </html>
Когда документ готов, мы используем его browser.storage.sync.getдля получения сигналов тревоги, созданных пользователем. Затем мы проверяем, есть ли сигналы тревоги. Если есть, мы перебираем их и отображаем с помощью appendItemвспомогательной функции, которая просто добавляет элемент списка HTML liв #alarmsList. Если нет доступных сигналов тревоги, мы просто показываем «нет доступных элементов».
А если мы перезагрузим надстройку сейчас, вы заметите, что была добавлена новая установка надстройки. Это потому, что мы явно указали идентификатор в файле manifest.json. Вы можете удалить старую, чтобы избежать конфликта.
Вы заметите, что в нашем всплывающем окне ничего не изменилось, так как мы еще не добавили никаких сигналов тревоги. Мы сделаем это в следующем разделе.
Добавление страницы параметров
Чтобы позволить вашим пользователям настраивать или редактировать параметры или параметры в надстройке, вы создаете HTML-страницу, которая содержит параметры и логику, лежащую в основе их установки или изменения. Затем вы ссылаетесь на него в manifest.jsonфайле.
В нашем дополнении мы будем использовать страницу параметров, чтобы позволить пользователю создавать будильники. Сначала создадим файл options.html. Вы можете создать его в любом месте каталога надстройки проекта. Мы создадим его в корне проекта со следующим содержанием:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Options</title> <link href="assets/css/bootstrap.min.css" rel="stylesheet" /> </head> <body class="p-3"> <h1>Add Alarm</h1> <form> <div class="form-group"> <label for="name">Alarm Name</label> <input type="text" class="form-control" name="name" id="name" placeholder="Wake up" /> </div> <div class="form-group"> <label for="time">Time</label> <input type="time" class="form-control" name="time" id="time" /> </div> <button type="submit" class="btn btn-primary mt-3"> Add a New Alarm </button> </form> <script src="assets/js/jquery.min.js"></script> <script src="assets/js/options.js"></script> </body> </html>
Здесь мы просто отображаем форму с двумя полями ввода: «Название будильника», которое будет текстом, отображаемым в будильнике при отправке уведомления, и «Время», которое является временем для установки будильника.
Нам нужно будет создать assets/js/options.js, который будет прослушивать submitсобытие formи задавать его alarmsв хранилище синхронизации, добавляя новый сигнал тревоги в массив.
Подобно нашему использованию getметода, для установки хранилища мы можем использовать browser.storage.sync.set или browser.storage.local.set, в зависимости от того, храним ли мы данные только локально или синхронно между всеми вошедшими в систему экземпляры. Поскольку мы храним наши будильники sync, мы будем использовать browser.storage.sync.set.
set Метод принимает один параметр, это объект ключей и значений. Ключ — это то, что мы используем для получения значения позже, как и раньше get.
Создайте assets/js/options.jsсо следующим содержанием:
$(document).ready(() => { const nameElm = $('#name'); const timeElm = $('#time'); const formElm = $('form'); formElm.on('submit', () => { $('.alert').remove(); //remove previous success alerts, if any //get existing alarms browser.storage.sync.get(['alarms']) .then((result) => { let alarms = result.alarms; const alarmName = nameElm.val().trim() + '_' + (Math.random() * 100); if (!alarms) { alarms = []; } alarms.push({ content: nameElm.val().trim(), time: timeElm.val(), alarmName }); //set alarms in the storage browser.storage.sync.set({alarms}) .then(() => { //TODO schedule notification formElm.prepend('<div class="alert alert-success">Alarm added successfully</div>'); nameElm.val(''); timeElm.val(''); }); }); return false; //disable default form submit action }); });
При отправке формы мы сначала получаем сохраненные алармы, если они есть. Затем мы отправляем новый сигнал тревоги, который мы создаем через форму, в alarmsмассив. Обратите внимание, как мы также создаем alarmNameпеременную. Мы будем использовать эту переменную для создания уникального будильника, а затем отменим его, когда пользователь удалит его. Наконец, мы используем browser.storage.sync.setдля установки нового alarmsмассива.
Вы также можете заметить, что мы добавили TODOкомментарий, для которого мы запланируем уведомления в следующем разделе.
Наша страница параметров теперь готова. Чтобы сделать его доступным, нам сначала нужно добавить следующее manifest.json:
"options_ui": { "page": "options.html", "browser_style": false }
Это сообщает Firefox, где найти нашу страницу настроек. Мы также устанавливаем это browser_styleзначение, falseпотому что мы не хотим, чтобы стиль Firefox переопределял стиль Bootstrap.
Во-вторых, теперь мы сделаем так, чтобы ссылка во всплывающем окне перенаправляла пользователя на страницу параметров. Для этого мы используем метод browser.runtime.openOptionsPage () в новом прослушивателе событий, прикрепленном к #optionsLink. Мы добавим следующее assets/js/popup.js:
$(document).ready(() => { ... // New code here $('#optionsLink').on('click', () => { browser.runtime.openOptionsPage(); }); function appendItem(content, badgeContent = null) { ... } });
Теперь, когда пользователь щелкает ссылку «Добавить сигнал тревоги», он переходит на страницу параметров.
Перейдите на страницу временных надстроек и нажмите кнопку перезагрузки. Теперь наша страница настроек будет зарегистрирована.
Давайте проверим это. Откройте всплывающее окно и нажмите «Добавить будильник». Вы должны перейти на вкладку » Настройки » на странице надстройки, и содержимое будет тем содержимым, которое мы добавили на options.htm lстраницу.
Теперь попробуйте добавить тестовую тревогу с любым именем и временем и нажмите «Добавить тревогу». После этого вы должны увидеть его во всплывающем окне.
Нам все еще нужно внести одно изменение assets/js/popups.js, а именно, чтобы отображать будильники, время которых больше текущего. Измените вызов browser.storage.sync.getна следующее:
browser.storage.sync.get(['alarms']) .then((result) => { if (result.hasOwnProperty('alarms') && result.alarms) { //get current time const minutes = (new Date).getMinutes().toString().padStart(2, '0'); const hours = (new Date).getHours().toString().padStart(2, '0'); const now = new Date('1970-01-01T' + hours + ':' + minutes + 'Z').getTime(); //loop over the alarms and display them result.alarms.forEach((alarm) => { const alarmTime = new Date('1970-01-01T' + alarm.time + 'Z').getTime(); if (alarmTime > now) { appendItem(alarm.content, alarm.time); } }); } else { //show no items available appendItem('No alarms are available'); } });
Это проверяет для каждого сигнала тревоги, если его время больше текущего времени, а затем отображает его. Причина, по которой мы форматируем время как таковое, ’1970-01-01T’ + alarm.time + ’Z’заключается в том, что мы создаем будильники независимо от даты. Это сделано для упрощения учебника. Мы также дополняя hoursи minutesнулями, когда они одна цифра при расчете текущего времени, так как требуемый формат для new Dateдолжен иметь две цифры для обоих номеров.
Если вы проверите сейчас, вы заметите, что предыдущий добавленный нами будильник отображается или не отображается в зависимости от того, когда его время. Вы также можете протестировать добавление нового будильника в другое время, чтобы увидеть, появляется ли он во всплывающем окне или нет.
Планирование уведомлений
Для отправки уведомлений, необходимо использовать Notifications API и API Alarms. API аварийных сигналов позволяет нам планировать «аварийные сигналы», которые срабатывают в определенное время. Затем мы можем добавить прослушиватель событий для события onAlarm и отправлять уведомления в это время с помощью API уведомлений.
Чтобы использовать API уведомлений и API сигналов тревоги, нам нужно добавить необходимые разрешения для каждого manifest.jsonвхода, как мы это делали раньше с API хранилища:
"permissions": [ "storage", "alarms", "notifications" ],
Следующее, что мы сделаем, это заменим TODOкод, который у нас был раньше, на код, необходимый для создания сигнала тревоги внутри assets/js/options.js.
Для создания будильника мы используем функцию browsers.alarms.create, которой передаем два параметра. Первый — это название будильника. Это позволяет нам иметь разные типы сигналов тревоги в надстройке и действовать по-разному в зависимости от названия. Второй — объект опций:
- when: время срабатывания будильника (в виде отметки времени)
- delayInMinutes: задержка в минутах перед срабатыванием сигнала тревоги, если необходимо
- periodInMinutes: количество минут между каждым огнем
Все эти опции не являются обязательными. Если вы не пройдете ни один из них, сигнал тревоги будет активирован один раз сразу после создания. Если вам нужно активировать сигнализацию один раз в указанное время, просто рассчитайте whenвремя, по которому нужно выстрелить. А также если вы хотите активировать сигнал тревоги один раз через определенное количество минут, вы можете просто пропустить delayInMinutes. Если вы хотите повторно активировать сигнал тревоги через указанное количество минут, вы можете просто передать periodInMinutes. Если не periodInMinutesбудет пройдено, сигнализация сработает только один раз.
В нашем дополнении нам нужно, чтобы будильник срабатывал один раз в день в указанное время, которое пользователь ввел при создании будильника. Итак, мы будем использовать комбинацию whenи periodInMinutes.
Замените TODOкомментарий assets/js/options.jsследующим:
//create a new alarm const currentDate = new Date(); const currentMonth = (currentDate.getMonth() + 1).toString().padStart(2, '0'); const currentDay = currentDate.getDate().toString().padStart(2, '0'); //same as before, add 0 to month and day if they're less than 10 browser.alarms.create(alarmName, { when: new Date( currentDate.getFullYear() + '-' + currentMonth + '-' + currentDay + 'T' + timeElm.val() ).getTime(), periodInMinutes: 1440, });
В качестве первого аргумента мы передаем уникальное имя сигнала тревоги, которое мы создали ранее. Имена алармов в надстройках должны быть уникальными, потому что, если они не добавлены, новое будет иметь приоритет над предыдущим с тем же именем. В объекте параметров мы передаем время, которое пользователь выбирает в whenсвойстве, а periodInMinutesмы передаем 1440, поскольку это количество минут в день.
Как и раньше, мы также дополняем месяц и день, 0если они меньше одной цифры. Чтобы убедиться, что это две цифры, поскольку это требуемый формат для new Date.
Это означает, что будильник будет срабатывать в указанное пользователем время один раз в день.
Теперь, когда мы успешно создали сигналы тревоги, следующее, что нам нужно сделать, это прислушаться к срабатыванию этих сигналов тревоги, а когда они срабатывают, отправить уведомление пользователю. Для этого нам нужно использовать фоновый скрипт.
Фоновые скрипты
Надстройки, всплывающие окна, страницы параметров или любые другие страницы активны только тогда, когда мы их открываем. Это означает, что если мы будем прослушивать события внутри всплывающего окна или любой другой страницы, слушатели будут работать только после того, как мы их откроем. Это не поможет при прослушивании сигналов будильника в разное время дня.
По этой причине нам нужен фоновый скрипт. Фоновые сценарии всегда выполняются в фоновом режиме, даже если всплывающее окно, страница параметров или любая другая страница надстройки не открыта. Итак, внутри фонового скрипта мы можем добавить слушателей к любому событию и убедиться, что они будут работать соответствующим образом.
Чтобы добавить фоновый скрипт, нам сначала нужно добавить его manifest.json:
"background": { "scripts": ["assets/js/background.js"] }
После того, как мы создадим assets/js/background.jsи перезагрузим расширение, этот скрипт всегда будет работать в фоновом режиме.
Мы подслушаем background.jsсрабатывание сигнализации. Для этого нам нужно использовать browser.alarms.onAlarm.addListener, который принимает функцию, которая будет выполняться каждый раз, когда срабатывает сигнал тревоги. Функция имеет alarmInfoобъект в качестве параметра, который содержит информацию о сработавшей тревоге.
Создайте assets/js/background.jsсо следующим содержанием:
browser.alarms.onAlarm.addListener((alarmInfo) => { const alarmName = alarmInfo.name.split('_')[0]; console.log(alarmName); //TODO send notification });
Мы получаем имя будильника alarmInfo, также удаляя присоединенное к нему случайное целое число. Затем мы отправим уведомление с содержанием alarmName. А пока мы только что разместили TODOкомментарий. Мы также добавили console.logв целях тестирования.
Как только мы перезагрузим расширение, этот фоновый скрипт начнет работать и прослушивать сигналы тревоги. Давайте проверим это. Перезагрузите расширение, затем перейдите на страницу параметров и добавьте сигнал, который сработает через минуту. Затем на странице «Временные надстройки» нажмите кнопку » Проверить» для надстройки. Это откроет новое окно, в котором вы увидите консоль. Если вы дождетесь времени срабатывания будильника, вы сможете увидеть название будильника в консоли. Это потому, что в настоящее время мы прослушиваем сигнал тревоги и просто записываем его имя в консоль.
Теперь у нас есть рабочий фоновый скрипт! Следующим шагом является отправка уведомлений при срабатывании будильника.
Отправка уведомлений
Для создания и отправки уведомления воспользуемся browser.notifications.createметодом. Этот метод, как и все методы в API уведомлений, доступен только после добавления notificationsразрешения manifest.json, которое мы уже добавляли ранее.
browser.notifications.create принимает два аргумента:
- id: строка для идентификации уведомления. Это может быть полезно, если позже вам потребуется обновить уведомление или удалить его. Если такое же есть в другом уведомлении id, старое будет заменено новым. Если этот параметр опущен, idбудет сгенерирован.
- notificationOptions: объект опций для уведомления. Этот объект имеет три обязательных свойства: type, title, message. Исходя из этого type, потребуются и другие варианты. Допустимые типы: basicпросто отображаются значок расширения, заголовок и сообщение; image, который показывает изображение в уведомлении; list, который показывает список элементов, хотя в основном это работает только в macOS; и progress, который показывает индикатор выполнения.
На данный момент Firefox поддерживает только basicтип, со свойствами type, title, messageи, возможно, iconUrlс указанием на значок, чтобы показать.
В assets/background.jsмы заменим TODOкомментарий следующим:
browser.alarms.onAlarm.addListener((alarmInfo) => { const alarmName = alarmInfo.name.split('_')[0]; browser.notifications.create({ type: 'basic', title: alarmName, message: 'The alarm you created' }); });
В качестве заголовка мы покажем сообщение, которое пользователь ввел в форму при создании будильника, и мы просто добавляем описательное message.
Вернитесь на страницу временных надстроек и перезагрузите расширение, затем протестируйте его. Создайте будильник с указанием времени закрытия и проверьте полученное уведомление.
Если вы не получаете никаких уведомлений и используете macOS, убедитесь, что уведомления разрешены из Firefox.
Удаление уведомлений
Последняя функция, которую мы добавим, — это удаление уведомлений. Мы позволим пользователю удалять уведомления, которые они видят во всплывающем окне, и отменять сигналы для удаленного уведомления, используя имя сигнала.
Прежде чем мы начнем, мы воспользуемся иконкой корзины из Feather. Вы можете скачать его оттуда или получить из репозитория GitHub этого руководства. Его следует добавить в assets/images/trash.svg.
Нам нужно внести изменения, чтобы assets/js/popup.jsрядом с временем каждого будильника отображалась кнопка корзины. Мы также будем использовать индекс сигнала тревоги в alarmsмассиве в хранилище в качестве идентификатора элемента, чтобы иметь возможность легко получить к нему доступ позже.
Мы добавим новый необязательный параметр для appendItemвызываемого idи покажем новую кнопку:
function appendItem (content, badgeContent = null, id = null) { listElement.append(` <li class="list-group-item d-flex justify-content-between align-items-center alarm-item" ${id !== null ? `id="alarm_${id}"` : ''}> ${content} ${badgeContent ? ` <div> <span class="badge bg-primary rounded-pill">${badgeContent}</span> <button class="trash-btn p-0"><img src="assets/images/trash.svg" alt="delete" /></button> </div> ` : ''} </li> `); }
Затем внутри forEachцикла мы добавим indexв список параметров:
result.alarms.forEach((alarm, index) => { const alarmTime = new Date('1970-01-01T' + alarm.time + 'Z').getTime(); if (alarmTime > now) { appendItem(alarm.content, alarm.time, index); } });
Затем мы добавим clickпрослушиватель событий,.trash-btnкоторый сначала извлекает индекс сигнала тревоги от его родителя:
$('body').on('click', '.trash-btn', function () { const parent = $(this).parents('.alarm-item'); const parentId = parent.attr('id'); const alarmIndex = parentId.split('_')[1]; //TODO delete alarm from alarms array in storage });
После этого мы получим alarmsмассив из хранилища, затем удалим тревогу по индексу alarmIndexс помощью splice и alarmsснова установим массив в хранилище:
//get alarms from storage browser.storage.sync.get(['alarms']) .then((result) => { let alarms = []; let alarmName = ''; if (result.alarms && result.alarms.length > alarmIndex) { alarmName = result.alarms[alarmIndex].alarmName; result.alarms.splice(alarmIndex, 1); } browser.storage.sync.set({alarms}) .then(() => { //TODO cancel the alarm }); });
Затем нам нужно отменить будильник, чтобы он не звонил позже. Для этого мы будем использовать browser.alarms.clear, который принимает имя сигнала тревоги в качестве параметра для его отмены. Наконец, мы удалим элемент будильника из всплывающего окна:
//remove alarm by name browser.alarms.clear(alarmName); //remove alarm item from list parent.remove();
И с этим мы добавили функцию удаления, которая удаляет будильник из хранилища, а также отменяет его срабатывание в фоновом режиме.
Давайте добавим немного стиля к только что добавленной кнопке. Создайте файл assets/css/popup.cssсо следующим содержимым:
.trash-btn { background-color: transparent; border: none; } .trash-btn img { width: 15px; height: 15px; }
Затем добавьте эту таблицу стилей в popup.html:
<link href="assets/css/popup.css" rel="stylesheet" />
Проверьте всплывающее окно сейчас. Должно получиться так:
Попробуйте добавить будильник, который должен отправлять уведомление в ближайшие несколько минут. Затем удалите это. Ни один будильник не должен звучать в то время, которое вы запланировали.
Это оно! Мы создали расширение, которое хранит информацию для пользователя в syncхранилище. Затем мы узнали, как создавать сигналы тревоги, которые срабатывают через определенные промежутки времени. Затем мы создали фоновый скрипт, который прослушивает срабатывание сигналов тревоги, и, наконец, мы узнали, как отправлять уведомления пользователю после прослушивания срабатывания сигналов тревоги.
Следующим шагом в жизненном цикле создания надстройки является ее публикация в Центре разработчиков Mozilla.
Публикация надстройки
Теперь, когда мы готовы опубликовать надстройку, мы можем удалить browser_specific_settingsключ manifest.json, поэтому обязательно сделайте это в первую очередь.
Вам необходимо войти в свою учетную запись или создать новую. Вы можете сделать это здесь.
Как только вы войдете в систему, вы увидите раздел «Мои дополнения». Нажмите кнопку » Отправить новое дополнение» в правом нижнем углу.
После этого начнется процесс отправки нового дополнения. Сначала вас спросят, опубликуете ли вы надстройку в Менеджере надстроек Firefox или вы будете распространять ее самостоятельно. Оставьте первый вариант по умолчанию отмеченным и нажмите «Продолжить».
Затем вам будет предложено загрузить расширение. Для этого перейдите в каталог, в котором вы создали надстройку, и создайте сжатый ZIP-файл со всем содержимым. Убедитесь, что корнем надстройки является корень ZIP-файла, то есть он manifest.jsonдолжен находиться в корне ZIP-файла. Затем загрузите этот ZIP-файл. Вы также можете сделать надстройку доступной для Firefox Android.
Примечание. Если вы получаете сообщение об ошибке «Обнаружен повторяющийся идентификатор надстройки», убедитесь, что вы удалили browser_specific_settingsключ из manifest.json.
Когда файл загрузится без ошибок, нажмите » Продолжить».
На следующем шаге вас попросят указать, использует ли ваша надстройка какие-либо компиляторы, минификаторы или какой-либо инструмент. Который выполняет какую-либо обработку кода надстройки. Причина этого в том, что Firefox затем потребуется, чтобы вы отправили исходный код на проверку. Поскольку наша надстройка не использует ни один из этих инструментов, просто отметьте » Нет» и нажмите » Продолжить».
На последнем этапе вам будет предложено ввести некоторую информацию о надстройке. Эту информацию увидит любой пользователь, который хочет установить ваше дополнение, поэтому постарайтесь сделать ее как можно более ясной и описательной. Введите название надстройки, описание, категории и т.д. Когда вы закончите, нажмите » Отправить версию». Если вы не готовы ввести какую-либо информацию, не волнуйтесь, вы можете отредактировать ее позже.
Вот и все! После того, как вы нажмете » Отправить версию», ваше дополнение будет ожидать рассмотрения, что не займет много времени. Процесс проверки может занять до суток. После утверждения вы получите уведомление по электронной почте, а затем сможете просмотреть надстройку в магазине Firefox. Вы также можете перейти на информационную страницу надстройки и добавить или отредактировать любую информацию, такую как ее описание, изображения и т.д.
Обновить надстройку тоже просто. Вы можете просто загрузить обновленную версию, и она будет доступна сразу же! Это делает публикацию надстроек в Firefox проще и быстрее, чем в большинстве других браузеров.
Обеспечение совместимости надстроек с Chrome
Чтобы только что созданное расширение было совместимо с Chrome, нам необходимо внести следующие изменения:
Заменить все вхождения *с chrome.*.
В Chrome все его API-интерфейсы используют обратные вызовы вместо возврата обещаний. Это означает, что вместо использования обещаний в нашем коде нам нужно передать функцию обратного вызова в качестве последнего параметра.
Пример внесения этих изменений будет в assets/js/popups.js. Мы использовали следующий код для получения storageи отображения сигналов тревоги:
browser.storage.sync.get(['alarms']) .then((result) => { //... });
Мы заменим этот код следующим:
chrome.storage.sync.get(['alarms'], (result) => { //... });
Вот и все. Мы просто перемещаем остальной код внутрь функции обратного вызова.
Заключение
В этом руководстве мы рассмотрели, как создать надстройку с основными и необходимыми функциями, такими как использование хранилища, отправка уведомлений, создание фонового скрипта и многое другое. Знание того, как все это делать, может помочь вам создавать надстройки с множеством функций. Начни создавать что-нибудь потрясающее!
