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();

});