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();
});
Chrome浏览器扩展开发系列之十:桌面通知Notification的更多相关文章
- Chrome浏览器扩展开发系列之十四
Chrome浏览器扩展开发系列之十四:本地消息机制Native messaging 时间:2015-10-08 16:17:59 阅读:1361 评论:0 收藏:0 ...
- Chrome浏览器扩展开发系列之十四:本地消息机制Native messagin
Chrome浏览器扩展开发系列之十四:本地消息机制Native messaging 2016-11-24 09:36 114人阅读 评论(0) 收藏 举报 分类: PPAPI(27) 通过将浏览器 ...
- Chrome浏览器扩展开发系列之十九:扩展开发示例
翻译总结了这么多的官网内容,下面以一款博主开发的“沪深股票价格变化实时追踪提醒”软件为例,介绍Chrome浏览器扩展程序的开发,开发环境为Eclipse IDE+Chrome Browser. “沪深 ...
- Chrome浏览器扩展开发系列之十六:扩展中可用的Chrome浏览器API
除了Chrome浏览器支持的chrome.* API之外,Chrome浏览器扩展还可以使用Chrome浏览器为Web页面或Chrome app提供的APIs.对于Chrome浏览器2支持的API,还可 ...
- Chrome浏览器扩展开发系列之十八:扩展的软件国际化chrome.i18n API
i18n是internationalization 的简写,这里将讨论软件国际化的问题.熟悉软件国际化的朋友应该知道,软件国际化要求,页面中所有用户可见的字符串都必须置于资源属性文件中.资源属性文件中 ...
- Chrome浏览器扩展开发系列之十五:跨域访问的XMLHttpRequest对象
XMLHttpRequest对象是W3C的标准API,用于访问服务器资源.XMLHttpRequest对象支持多种文本格式,如XML和JSON等.XMLHttpRequest对象可以通过HTTP和HT ...
- Chrome浏览器扩展开发系列之十四:本地消息机制Native messaging
通过将浏览器所在客户端的本地应用注册为Chrome浏览器扩展的“本地消息主机(native messaging host)”,Chrome浏览器扩展还可以与客户端本地应用之间收发消息. 客户端的本地应 ...
- Chrome浏览器扩展开发系列之十二:Content Scripts
Content Scripts是运行在Web页面的上下文的JavaScript文件.通过标准的DOM,Content Scripts 可以操作(读取并修改)浏览器当前访问的Web页面的内容. Cont ...
- Chrome浏览器扩展开发系列之十一:NPAPI插件的使用
在Chrome浏览器扩展中使用HTML和JavaScript非常容易,但是如何重用已有的非JavaScript遗留系统代码呢?答案是将NPAPI插件绑定到Chrome浏览器扩展,从而实现在Chrome ...
随机推荐
- input输入框控制字数
HTML: <input class = "remark" type = "text" maxlength = "500"> J ...
- kali虚拟机安装提示安装系统步骤失败
首先虚拟机不论是VM还是VirtualBox都可以直接安装kali镜像文件的,不过如果你采用虚拟机默认硬盘8G设置的话,到的系统安装步骤会出错无法继续,具体原因不明. 解决办法却很简单,将虚拟机的硬盘 ...
- 2016.02.01日,UdoOS系统项目正式开通了
2016.02.01日,UdoOS系统项目正式开通了,源代码即将开放 Copyright (c) 2016
- 由Find All References引发的思考。,
今天在研究C#代码问题的时候遇到了一个Visual Studio的小问题.在Visual Studio 2013中,使用Find All References功能不能找到同一类型不同版本的所有引用,具 ...
- VR全景智慧城市,完美的将虚拟与现实结合
很多人都粗浅的认为,VR虚拟智慧城市只是简单的将智慧城市和虚拟现实相结合的产物,这样的VR虚拟智慧城市看起来更像是个VR内容产品,而非城市建设成果.但是我们换个角度来思考的话,现在很多VR虚拟智慧城市 ...
- vmware和centOS的安装
如果勾上了,会立即在本机开辟20g的空间,需要很长时间 选择电脑中ISO镜像的位置,之后点击开启虚拟机! 这个密码是root用户的密码!管理员密码! 可以选择我们的Minimal没有界面的!
- NLTK学习笔记(一):语言处理和Python
目录 [TOC] nltk资料下载 import nltk nltk.download() 其中,download() 参数默认是all,可以在脚本里面加上nltk.download(需要的资料库) ...
- jQuery杂项方法
前面的话 杂项方法其实也是工具类方法,但由于其不是定义在jQuery构造函数上的方法,所以不能称为工具方法.本文将详细介绍jQuery中的杂项方法 数据操作 [data()] 该方法用于在匹配元素上存 ...
- 启动 Eclipse 弹出“Failed to load the JNI shared library jvm.dll”的解决方法!
原因:eclipse的版本与jre或者jdk版本不一致 对策:要么两者都安装64位的,要么都安装32位的,不能一个是32位一个是64位. 这种错误的原因可能性比较大,不排除其他因素
- 【Python3之面向对象的程序设计】
一.面向对象的程序设计的由来 1.第一阶段:面向机器,1940年以前 最早的程序设计都是采用机器语言来编写的,直接使用二进制码来表示机器能够识别和执行的指令和数据. 简单来说,就是直接编写 0 和 1 ...