來說下 桌面通知 Notification，HTML5支持 Web Notifications 的實例，但是要經過用戶允許， 

chrome://settings/content/notifications

設置/高級設置/內容設置/通知 裏查看哪些是禁止或授權的，還可以在網頁欄左邊查看

代碼如下

 1 if (window.Notification) {
 2     if (Notification.permission != "granted") {
 3         Notification.requestPermission(function (permission) {
 4
 
             MyNotification();
 5         });
 6     }else{
 7         MyNotification();
 8     }
 9     //禁止了彈窗
10     function MyNotification() {
11         if (Notification.permission == "granted") {
12             var notification = new Notification("標題", {
13                 body: "內容", 
14                 icon: "https://www.baidu.com/img/bd_logo1.png" 
15
 
             });
16             //消息框被點擊事件
17             notification.onclick = function () {
18                 notification.close();
19             };
20             notification.onshow = function () {
21                 setTimeout(function () {
22                     notification.close();
23                 }, 5000);
 
24             };
25         }
26     }
27 } else {
28     alert("不支持Notification");
29 }

效果如下：

Chrome 自己的notifications 的授權是在manifest.json 文件中，需要用戶點擊授權按鈕。

事說下擴展結構 ，3個文件，manifest.json，一個js文件，一個圖片icon文件。

manifest.json 代碼如下

 1 {
 2     "manifest_version": 2,
 3     "name": "消息提示",
 4     "version": "1.0.0",
 5     "permissions": [
 6         "notifications"
 7     ],
 8     "background": {"scripts": [
 9         "notifications.js"
10     ]}     
12 }

notifications.js 代碼如下

 1 /*    桌面消息通知
 2 *    _msg 消息內容
 3 *    _title 標題
 4 *    _ico 圖標
 5 *    _time 多少毫秒後銷毀
 6 */
 7 function myNotification(_msg,_title,_ico,_time){
 8     var ico = _ico || "ico/icon.png";
 9     var title = _title || "通知";
10     var msg = String(_msg)|| "消息！";
11     var time = _time || 5000;
12     //顯示一個桌面通知
13     if(window.webkitNotifications){
14         var notification = window.webkitNotifications.createNotification(ico,title,msg);
15         notification.show();
16         setTimeout(function(){notification.cancel();}, time); 
17     }else if(chrome.notifications){
18         var opt = {
19             type: ‘basic‘,
20             title: title,
21             message: msg,
22             iconUrl:ico,
23         }
24         chrome.notifications.create(‘‘, opt, function(id){
25             setTimeout(function(){
26                 chrome.notifications.clear(id, function(){});
27             }, time);
28         });
29     }
30 };

這段代碼是運行在 後臺的，所以只能後臺調用

如 myNotification("標題","你好世界");

這樣就能 以彈窗的形式 ，提示用戶 已搶了多少寶箱了，，收益如何。。

鬥魚擴展--notifications提示(十二)