chrome擴充套件開發：[12]桌面提醒

2019-12-19 11:02:50

介紹chrome api的桌面提醒（notifications），並提供簡單範例

1

桌面提醒（notifications）是什麼？顯示在螢幕右下角（system tray）的那個小視窗：

2

要使用桌面提醒，chrome版本需要28及以上，並且需要在manifest檔案中新增notifications許可權：

3

建立桌面提醒的主要程式碼如下：

function notify(){

var opt = {

type: "list",

title: "桌面提醒",

message: "msg",

iconUrl: "icon128.png",

items: [{ title: "1.", message: "下班了"},

{ title: "2.", message: "吃飯了."},

{ title: "3.", message: "中獎了."}]

}

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

})

}

其顯示效果如下圖所示：

4

桌面提醒共四種型別：basicimagelistprogress下面用例子分別說明

1

建立basic型別提醒的程式碼如下:

2

建立image型別提醒的程式碼如下:

3

建立list型別提醒的程式碼如下:

4

建立progress型別提醒的程式碼如下:

5

顯示提醒：

6

將上面的程式碼加到background.js檔案中，放到一個單獨的函數中：function notify(ntype){var opt=null;switch(ntype){case 'basic':opt= {type: ntype,title: "桌面提醒",message: "中大獎了！",iconUrl: "icon128.png",?}break;case 'image':opt= {type: ntype,title: "桌面提醒",message: "中大獎了！",iconUrl: "icon128.png",i

mageUrl:"image.jpg",?}break;case 'list':opt= {type: ntype,title: "桌面提醒",message: "中大獎了！",iconUrl: "icon128.png",items: [{ title: "1.", message: "下班了"},{ title: "2.", message: "吃飯了."},{ title: "3.", message: "中獎了."}]?}break;case 'progress':opt= {type: ntype,title: "桌面提醒",message: "當前進度...",iconUrl: "icon128.png",progress:80}break;}? chrome.notifications.create('',opt,function(id){? })}

！",iconUrl: "icon128.png",items: [{ title: "1.", message: "下班了"},{ title: "2.", message: "吃飯了."},{ title: "3.", message: "中獎了."}]?}break;case 'progress':opt= {type: ntype,title: "桌面提醒",message: "當前進度...",iconUrl: "icon128.png",progress:80}break;}? chrome.notifications.create('',opt,function(id){? })}