Google Chrome Extensionを作ってみた-その6-

ともだつばさ

2011.09.09

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

今回はノティフィケーションについてです。デフォルト設定だと、画面の右下から出てくる小窓です。(windowsの場合)
例えば「Clip to Evernote」エクステンションだと、記事のクリップが終了した時にノティフィケーションを使ってそれをお知らせしてくれます。

作るもの

ツールバーボタンをクリックしたら、ノティフィケーションが出る様にしてみましょう。

作ってみる

まずは、manifest.jsonです。manifest.jsonでは、permissionsに"notifications"を指定しましょう。
コードは次の通りです。

{
	"name": "NotificationSample",
	"version": "1.0",
	"background_page": "background.html",
	"permissions": [
		"notifications"
	],
	"browser_action": {
		"default_icon": "icon_128.png",
		"name": "Notification"
	}
}

ノティフィケーションを出すのは簡単です。

webkitNotifications.createNotification({表示するアイコンのパス}, {タイトル}, {メッセージ});

このメソッドによって、notificationオブジェクトが返されるので、あとはshowメソッドで表示するだけです。
background.htmlは次の様にしました。

<html>
<head>
<script>
	chrome.browserAction.onClicked.addListener(
		function(tab){
				var notification = webkitNotifications.createNotification(
					chrome.extension.getURL("icon_128.png"), "クリック!!", "ツールバーボタンがクリックされました。");
				notification.show();
		}
	);
</script>
</head>
</html>

ツールバーアイコンをクリックすると、右下に小窓が開きます。