在谷歌插件开发的过程中，经常需要跟各种类型的扩展API打交道，我们今天介绍的就是谷歌扩展中的通知信息栏的API : chrome.notifications
1. 最终效果预览：
（1）windows下面：
（2）Mac os上面预览
（3）windows下图片类型的通知
2. 其涉及的主要方法：create()、update()、clear()、getAll()、getPermissionLevel()
3. 配置文件 manifest.json:
{
"name": "Click icon popup a info box",
"description": "Click browser action icon to change color and popup a infoBox !",
"version": "1.3",
"background": {
"scripts": ["background.js"],
"persistent": false
},
"permissions": ["storage","notifications"],
"browser_action": {
"name": "Click to change the icon's color"
},
"manifest_version": 2
}
4. 创建一个通知信息框面板：
//创建一个通知面板
chrome.notifications.create(
Math.random()+'', // id
{
type: 'list',
iconUrl: 'img2.jpg',
appIconMaskUrl: 'img.jpg',
title: '通知主标题',
message: '通知副标题',
contextMessage: '好开心呀，终于会使用谷歌扩展里面的API了！',
buttons: [{title:'按钮1的标题',iconUrl:'icon3.png'},{title:'按钮2的标题',iconUrl:'icon4.png'}],
items: [{title:'消息1',message: '今天天气真好！'},{title:'消息2',message: '明天天气估计也不错！'}],
eventTime: Date.now() + 2000
},
(id)=>{
console.log(id);
}
);
5. 更新已经发出的通知：
chrome.notifications.update(cid,{
type: 'image',
iconUrl: 'img2.jpg',
imageUrl: 'img3.jpg',
title: '更新标题',
message: '更新副标题',
contextMessage: '好开心呀，终于会更新了通知里面的内容！'
},function(wasUpdated){
wasUpdated ? console.log('更新完成') : console.log('更新失败');
});
6. 获取所有的通知：
chrome.notifications.getAll(function(object,notifications){
console.log(object,notifications);
});
7. 监听通知面板内点击事件：
chrome.notifications.onClicked.addListener(()=>{
console.log('点击面板内除按钮的其他地方!');
});
8. 监听通知面板内关闭按钮点击事件：
chrome.notifications.onClosed.addListener(function(){
console.log('点击了关闭按钮!');
});
9. 其他常用事件或API：
//点击自定义的按钮
chrome.notifications.onButtonClicked.addListener((notificationId,index)=>{
console.log(notificationId,index); //当前通知的ID和当前点击按钮的index
});
chrome.notifications.getPermissionLevel((level)=>{
console.log(level); //granted ( 批注：默认 granted )
});
8. 其他API请参看官方文档：
国内API镜像查看链接
谷歌浏览器开发官网查看链接
~~ 欢迎关注我的原博客地址： 小青蛙博客
更多推荐
谷歌插件开发之notifications通知API全解析
发布评论