斗鱼扩展--notifications提示(十二)

来说下 桌面通知 Notification，HTML5支持 Web Notifications 的实例，但是要经过用户允许，

chrome://settings/content/notifications

设置/高级设置/内容设置/通知里查看哪些是禁止或授权的，还可以在网页栏左边查看

代码如下

 if (window.Notification) {

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

         Notification.requestPermission(function (permission) {

             MyNotification();

         });

     }else{

         MyNotification();

     }

     //禁止了弹窗

     function MyNotification() {

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

             var notification = new Notification("标题", {

                 body: "内容",

                 icon: "https://www.baidu.com/img/bd_logo1.png"

             });

             //消息框被点击事件

             notification.onclick = function () {

                 notification.close();

             };

             notification.onshow = function () {

                 setTimeout(function () {

                     notification.close();

                 }, 5000);

             };

         }

     }

 } else {

     alert("不支持Notification");

 }

效果如下：

Chrome 自己的notifications 的授权是在manifest.json 文件中，需要用户点击授权按钮。

事说下扩展结构，3个文件，manifest.json，一个js文件，一个图片icon文件。

manifest.json 代码如下

 {

     "manifest_version": 2,

     "name": "消息提示",

     "version": "1.0.0",

     "permissions": [

         "notifications"

     ],

     "background": {"scripts": [

         "notifications.js"

     ]}

 }

notifications.js 代码如下

 /*    桌面消息通知

 *    _msg 消息内容

 *    _title 标题

 *    _ico 图标

 *    _time 多少毫秒后销毁

 */

 function myNotification(_msg,_title,_ico,_time){

     var ico = _ico || "ico/icon.png";

     var title = _title || "通知";

     var msg = String(_msg)|| "消息！";

     var time = _time || 5000;

     //显示一个桌面通知

     if(window.webkitNotifications){

         var notification = window.webkitNotifications.createNotification(ico,title,msg);

         notification.show();

         setTimeout(function(){notification.cancel();}, time);

     }else if(chrome.notifications){

         var opt = {

             type: 'basic',

             title: title,

             message: msg,

             iconUrl:ico,

         }

         chrome.notifications.create('', opt, function(id){

             setTimeout(function(){

                 chrome.notifications.clear(id, function(){});

             }, time);

         });

     }

 };

这段代码是运行在后台的，所以只能后台调用

如 myNotification("标题","你好世界");

这样就能以弹窗的形式，提示用户已抢了多少宝箱了，，收益如何。。

巴特西

斗鱼扩展--notifications提示(十二)

最新文章

热门文章