続・先取り! Google Chrome Extensions

第9回 Google Chrome拡張とHTML5 #3

この記事を読むのに必要な時間:およそ 4 分

Desktop Notifications

Chrome 4では,Windows版のみですがDesktop Notificationsをサポートしています。Mac,LinuxではChrome 5で正式にサポートする予定となっています。仕様はDesktop Notifications (The Chromium Projects) にあります。こちらは,拡張だけでなく通常のウェブサイトからも条件付きで使用できるAPIとなっています。

拡張からDesktop Notificationsを使用するためには,例によってmanifest.jsonのpermissionsに "notifications" という指定を加える必要があります。ウェブサイトから使用する場合は,ボタンなどをクリックした際に認証バーが表示され,そこでユーザーが許可を選択した場合,ウェブサイト側からデスクトップにポップアップを表示できるようになります。

図1 Desktop Notificationsによる通知

図1 Desktop Notificationsによる通知

まず,以下のようなmanifest.jsonを用意します。

Sample Notifyのmanifest.json

{
  "description": "Sample Notify",
  "name": "Sample Notify",
  "background_page": "background.html",
  "browser_action": {
    "default_title": "Show Notification",
    "default_icon": "icon.png"
  },
  "version": "0.0.3",
  "permissions": [
    "notifications"
  ]
}

続いて,Background PageでBrowser Actionをクリックした際にcreateHTMLNotificationで指定のURLを呼び出します。このcreateHTMLNotification(もしくはcreateNotification)で作られたオブジェクトは,showメソッドを実行するまで表示されませんので,ユーザーに何か通知をする必要があるタイミングでshowメソッドを呼び出します。

Sample NotifyのBackground Page

<!DOCTYPE html>
<html>
<head>
<script>
var list = [
  'chrome-extension://' + location.host + '/note.html',
  'http://www.google.co.jp/'
];
var notify = webkitNotifications;
chrome.browserAction.onClicked.addListener(function(tab){
  var url = list.shift();
  if (url) {
    var note = notify.createHTMLNotification(url);
    //or notify.createNotification(iconUrl,title,body);
    note.show();
  }
});
chrome.extension.onRequest.addListener(function(res){
  console.log(res);
});
</script>
</head>
<body>
</body>
</html>

note.htmlの中身は下記のようにしました。createNotificationで表示された拡張側のHTMLに含まれるJavaScriptはContent Scriptsのコンテキストで実行されるので,Background Pageと連携する場合はこのようにメッセージをやり取りする必要があります。

note.htmlのソース

<button onclick="chrome.extension.sendRequest('click');">
button
</button>

最後に,通常のウェブサイトなどから通知を行う場合は下記のようになります。拡張と違う点は,まずrequestPermissionでユーザーの承認を取ってから処理を行う必要があります。

ウェブサイトからのNotificationsの利用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>webkitNotifications sample</title>
<body>
<button id="requestPermission">デスクトップへの通知</button>
<script>
document.querySelector('#requestPermission').
addEventListener('click',function(){
  var n, wn = webkitNotifications;
  wn.requestPermission(function(){
    n = wn.createNotification('icon.png','title','body');
    n.show();
  });
},false);
</script>
</body>
</html>

なお,requestPermissionを呼び出せるタイミングはクリックイベントの中からのみという制限があるので注意が必要です。

まとめ

今回はWeb StorageとJSON関連のチップスに,Desktop Notificationsを紹介しました。次回はこれまでの内容から要点となる部分をまとめて,総復習としたいと思います。

著者プロフィール

太田昌吾(おおたしょうご,ハンドルネーム:os0x)

1983年生まれ。JavaScriptをメインに,HTML/CSSにFlashなどのクライアントサイドを得意とするウェブエンジニア。2009年12月より、Google Chrome ExtensionsのAPI Expertとして活動を開始。

URLhttp://d.hatena.ne.jp/os0x/