В этом руководстве уже предполагается, что вы немного знакомы с расширениями Chrome и структурой кода.
Разрешения
Первое, что вам нужно сделать, это добавить разрешение на уведомления в ваш manifest.json.
"permissions": [
"notifications",
....
],
Структура уведомлений
Далее я хочу сначала пройтись по основам отправки уведомления Chrome. Для любого приложения, которое вы пытаетесь сделать, я рекомендую создать функцию для создания уведомления, например:
//Call this notification() funtion for every notification you want to send
function notification(title, message){
chrome.notifications.create(
{
title: title,
message: message,
iconUrl: "<imageurl>",
type: "basic",
requireInteraction: true
}
);
}
Есть очевидные компоненты, которые вы ожидаете; заголовок, сообщение и изображение. Есть и другие переменные, такие как тип (указывает, какое уведомление отправлять) и requireInteraction (чтобы оно не исчезало через несколько секунд, если хотите). Вот официальная документация разработчиков Chrome о том, как полностью настроить уведомления: https://developer.chrome.com/docs/extensions/reference/notifications/
Сроки и отмена ваших уведомлений
В этом разделе я собираюсь использовать вышеуказанную функцию, установив время ожидания уведомления («Через 5 минут отправить это уведомление»), а также как его отменить.
В этой части я пишу в фоновом режиме. Я доберусь до того, почему позже. Делается это довольно просто, как в:
var timeouts = [];
.
.
.
timeouts.push(
setTimeout(function() {
notification("Title", "Message");
}, 1000);
)
В этом примере я использую метод «setTimeout», который также принимает число в миллисекундах, например, после того, когда нужно выполнить «function()». Кроме того, setTimeouts — это просто объекты, которые вы можете хранить в простом массиве. Таким образом, мне лично нравится хранить эти тайм-ауты в массиве.
Это полезно, потому что вы не можете на самом деле назначить «идентификатор» тайм-ауту, а console.log этого тайм-аута на основе этого идентификатора на случай, если вы захотите отладить. К сожалению, даже если вы хотите распечатать тайм-аут из массива timeout[], вы получите только целое число, но не содержимое тайм-аута (наше уведомление). Таким образом, уведомления могут рассматриваться как плохо оптимизированные.
Однако есть одна важная причина, по которой мне нравится хранить эти тайм-ауты в массиве, а также использовать фоновую страницу. Если это было сделано в обычном сценарии src, а расширение Chrome было закрыто, любое их хранилище будет потеряно, тогда как они не будут потеряны на фоновой странице.
var timeouts = [];
.
.
.
timeouts.push(
setTimeout(function() {
notification("Title", "Message");
}, 1000);
);
.
.
.
for (var i=0; i<timeouts.length; i++) {
clearTimeout(timeouts[i]);
}
В этом примере я использую метод clearTimeout() для очистки всего списка установленных таймаутов. Это также очищает уведомления.
Если это руководство помогло вам, не забудьте поставить аплодисменты и проверить мой проект, в котором используется эта функция:
