Chrome浏览器扩展开发系列之十：桌面通知Notification

Desktop Notification也称为Web Notification，是在Web页面之外，以弹出桌面对话框的形式通知用户发生了某事件。Web Notification于2015.9.10成为W3C推荐标准，网址https://www.w3.org/TR/notifications/。每个通知对话框都包括title, direction, language和origin。通知对话框还可以有body, tag, icon URL和icon image。

通知必须获得用户的授权才能够显示，从而避免非用户期望的通知干扰用户。对通知的授权有三种，分别由字符串”default”（用户未显式授权，同denied）, ”denied”, ”granted”表示。

由于通知的显示与浏览器的实现有关，与用户的授权有关，所以在使用桌面通知之前，往往要检查浏览器和用户的授权，示例如下：

function checkNotification(){

if (!("Notification" in window)) {

alert("This browser does not support desktop notification");

}

// check whether notification permissions have alredy been granted

else if (Notification.permission === "granted") {

// If it's okay let's create a notification

new Notification("Granted!");

}

// Otherwise, ask the user for permission

else if (Notification.permission !== 'denied') {

Notification.requestPermission(function (permission) {

// If the user accepts, let's create a notification

if (permission === "granted") {

new Notification("Request granted!");

}

});

}

}

Chrome浏览器的chrome.notifications.* API能够基于模板创建桌面通知，并在操作系统右下角的托盘中显示通知。

要在Chrome浏览器扩展中使用通知，首先要在manifest.json文件中声明notifications的权限如下：

{

"permissions": [

"notifications"

],

}

chrome.notifications.TemplateType是枚举类型，枚举值如下：

枚举值	注释
"basic"	默认模板 icon, title, message, expandedMessage位于两个button之上
"image"	icon, title, message, expandedMessage, image位于两个button之上
"list"	icon, title, message, items位于两个button之上
"progress"	icon, title, message, progress位于两个button之上

chrome.notifications. PermissionLevel是枚举类型，枚举值如下：

枚举值	注释
"granted"	默认值，用户授权显示通知
"denied"	用户未授权显示通知

chrome.notifications.NotificationOptions对象的属性如下：

属性名	类型	必选/可选	注释
type	TemplateType	可选	通知的类型， chrome.notifications.create()创建通知时必选
title	string	可选	通知的标题， chrome.notifications.create()创建通知时必选
message	string	可选	通知的主体内容， chrome.notifications.create()创建通知时必选
contextMessage	string	可选	通知的备选内容
buttons	array of object	可选	该数组最多2个元素，分别代表2个button。 每个button对象都有title和iconUrl两个属性（string类型），其中iconUrl属性可选
appIconMaskUrl	string	可选	应用图标URL的掩码，用以规范URL
iconUrl	string	可选	图标的URL
imageUrl	string	可选	"image"类型的通知的图片的URL
priority	integer	可选	优先级，有效范围[-2,2]，默认0
eventTime	double	可选	通知的时间戳，单位ms
items	array of object	可选	该数组中的每个元素代表一个通知。 每个通知对象都有title和message两个属性（string类型）
progress	integer	可选	当前的进度，有效范围[0,100]
isClickable	boolean	可选	通知窗口是否响应点击事件

chrome.notifications API中的常用方法：

· 创建并显示通知

chrome.notifications.create(

string notificationId,

NotificationOptions options,

function(string notificationId) {...}

)

其中属性说明如下：

属性名	类型	必选/可选	注释
notificationId	string	可选	通知的标识符。 如果未设置或设置为””，则自动生成唯一标识符； 如果设置的值与已有的通知相同，则替换已有的通知
options	NotificationOptions	必选	通知的具体内容

· 更新已有的通知

chrome.notifications.update(

string notificationId,

NotificationOptions options,

function (boolean wasUpdated) {...}

)

其中属性与create()类似。

· 清除指定的通知

chrome.notifications.clear(string notificationId, function(boolean wasCleared) {...})

· 获取所有通知

chrome.notifications.getAll(function(object notifications) {...})

 

最后介绍Chrome扩展中background与notification之间的互操作问题。

在处理通知的JavaScript脚本文件中，可以访问background页面的方法如下：

chrome.extension.getBackgroundPage().doThing();

在background页面的JavaScript脚本文件中，可以访问通知的JavaScript脚本文件中的方法如下：

chrome.extension.getViews({type:"notification"}).forEach(function(notificationWindow) {

notificationWindow.doOtherThing();

});