Web前端►Extension►WebExtension

browser.notifications

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/02/28/browser-notifications/

摘要

本文主要讲述了：

  1. 作用
  2. 许可配置
  3. 方法
  4. 事件
  5. Chrome

正文

作用

在background.scripts中创建通知

许可配置

  • notifications

方法

create()

创建并显示 1 个通知

语法：browser.notifications.create(notificationId?, options)

参数：

  • notificationId：通知 Id，选填
  • options：通知选项，必填

返回值类型：Promise

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
browser.notifications
  .create({
    type: 'basic',
    title: '我是标题',
    message: '我是消息',
  })
  .then(function (id) {
    // id为消息的id。
    // 如果不指定消息的id，方法会自动分配1个id。
    console.log(id);
  })
  .catch(function (error) {
    console.log(error);
  });

事件

onClicked

通知点击事件，当用户点击通知的非按钮区域时触发

示例：

1
2
3
4
5
function callback(notificationId) {
  // notificationId为通知的id。
  console.log(notificationId);
}
browser.notifications.onClicked.addListener(callback);

onClosed

通知关闭事件，当通知被系统或用户关闭时触发

示例：

1
2
3
4
5
6
7
function callback(notificationId, byUser) {
  // notificationId为通知的id。
  // 通知被用户关闭时为true，否则为false。
  console.log(notificationId);
  console.log(byUser);
}
browser.notifications.onClosed.addListener(callback);

Chrome

注意：

  1. 在 Chrome 中，options.iconUrl是必填参数

示例：

background_script.js

1
2
3
4
5
6
7
8
9
10
11
chrome.notifications.create(
  {
    type: 'basic',
    iconUrl: 'icons/icon.png',
    title: '我是标题',
    message: '我是消息',
  },
  function (id) {
    console.log(id);
  }
);

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/02/28/browser-notifications/

本文对你有帮助？请支持我

支付宝
微信