谷歌插件开发之notifications通知API全解析

 

在谷歌插件开发的过程中，经常需要跟各种类型的扩展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镜像查看链接

  谷歌浏览器开发官网查看链接

 

 ~~  欢迎关注我的原博客地址： 小青蛙博客