Используйте API уведомлений

API browser.notifications позволяет создавать уведомления с использованием шаблонов и отображать эти уведомления пользователям в системном трее:

Как они выглядят

Расширенные уведомления бывают четырех типов: базовые, с изображением, в виде списка и с отображением прогресса. Все уведомления включают заголовок, сообщение, небольшой значок, отображаемый слева от сообщения уведомления, и поле contextMessage , которое отображается в виде третьего текстового поля более светлым шрифтом.

Простое уведомление:

В уведомлениях списка отображается любое количество элементов списка:

В уведомлениях об изображениях отображается предварительный просмотр изображения:

В уведомлениях о ходе выполнения отображается индикатор выполнения:

Как они себя ведут

В ChromeOS уведомления отображаются в системном трее пользователя и остаются там до тех пор, пока пользователь их не закроет. В системном трее хранится счетчик всех новых уведомлений. Как только пользователь увидит уведомление в системном трее, счетчик обнуляется.

Уведомлениям можно присвоить приоритет от -2 до 2. Приоритеты меньше 0 отображаются в центре уведомлений ChromeOS и вызывают ошибку на других платформах. Приоритет по умолчанию равен 0. Приоритеты больше 0 отображаются с возрастающей длительностью, и в системном трее может отображаться больше уведомлений с более высоким приоритетом.

Настройка priority не влияет на порядок уведомлений в macOS.

Помимо отображения информации, все типы уведомлений могут включать до двух пунктов действия. Когда пользователи нажимают на пункт действия, ваше расширение может отреагировать соответствующим действием. Например, когда пользователь нажимает «Ответить» , открывается почтовое приложение, и пользователь может завершить ответ:

Как их разработать

Для использования этого API вызовите метод notifications.create() , передав сведения об уведомлении в качестве параметра options :

await browser.notifications.create(id, options);

Объект notifications.NotificationOptions должен содержать параметр notifications.TemplateType , определяющий доступные сведения об уведомлениях и способ их отображения.

Создать простое уведомление

Все типы шаблонов ( basic , image , list и progress ) должны включать title и message уведомления, а также iconUrl , который представляет собой ссылку на небольшой значок, отображаемый слева от сообщения уведомления.

Вот пример basic шаблона:

var opt = {
  type: "basic",
  title: "Primary Title",
  message: "Primary message to display",
  iconUrl: "url_to_small_icon"
}

Используйте изображение

Тип шаблона image также включает imageUrl , который представляет собой ссылку на изображение, отображаемое в предварительном просмотре уведомления. Обратите внимание, что изображения не отображаются пользователям в macOS.

var opt = {
  type: "image",
  title: "Primary Title",
  message: "Primary message to display",
  iconUrl: "url_to_small_icon",
  imageUrl: "url_to_preview_image"
}

Создать уведомление для списка

Шаблон list отображает items в виде списка. Обратите внимание, что на macOS пользователям отображается только первый элемент.

var opt = {
  type: "list",
  title: "Primary Title",
  message: "Primary message to display",
  iconUrl: "url_to_small_icon",
  items: [{ title: "Item1", message: "This is item 1."},
          { title: "Item2", message: "This is item 2."},
          { title: "Item3", message: "This is item 3."}]
}```

### Create progress notification {: #progress }

The `progress` template displays a progress bar where current progress ranges from 0 to 100. On macOS the progress bar displays as a percentage value in the notification title instead of in the progress bar.

```js
var opt = {
  type: "progress",
  title: "Primary Title",
  message: "Primary message to display",
  iconUrl: "url_to_small_icon",
  progress: 42
}

Внимательно следите за событиями и реагируйте на них.

Все уведомления могут включать обработчики событий, реагирующие на действия пользователя (см. browser.events ). Например, вы можете написать обработчик событий, реагирующий на событие notifications.onButtonClicked .

Обработчик событий:

browser.notifications.onButtonClicked.addListener(replyBtnClick);

Обработчик событий:

function replyBtnClick {
    //Write function to respond to user action.
}

Рекомендуется добавить обработчики событий в сервис-воркер, чтобы уведомления могли появляться даже тогда, когда расширение не запущено.