Chrome Extentionで高機能なデスクトップ通知を作る

　ふと思いついたことがあって、Chrome Extentionを作っています。某所に対してごにょごにょしてデスクトップ通知をするのですが、単なる通知ではさびしいですし、なにより不便です。Opera標準のRSSリーダーのようなクリックしたらリンク先に飛ぶなどのリアクションがあるデスクトップ通知が欲しいのですが、意外とこのあたりの情報がまとまっていなくて苦労しましたのでまとめておきます。
　

デスクトップ通知する

　
　よく知られているようにChrome　ExtentionはHTML+JavaScript+CSSでChromeの拡張が作れる仕組みです。
　まず、Manifest Fileと呼ばれるJSON形式のファイルがあり、ここに記述された挙動やファイル構成を元に動作します。

　デスクトップ通知を行うにも、まず使用者からデスクトップ通知をしてもいいよ、という許可をもらう必要がありますので、このファイルに許可を求める記述を追加することになります。
　また、Chrome　Extentionはバックグラウンドで動くページを指定すると、Chromeが起動中に裏で動いてくれます。なので、Manifest Fileはこんな感じになります。

{
        "name": " Notify Test",
        "version": "0.1",
        "browser_action": {
                
                "default_tilte": "Notifi　Test",
                
        },
        "background_page": "background.html",
        "permissions":["notifications"]
}

　この記述ではManifest Fileと同じディレクトリに置いたbackground.htmlにバックグラウンドにデスクトップ通知をするコードを書く事になります。
　デスクトップ通知をする方法は二つあって、一つがアイコンとタイトル、メッセージを指定する簡単な方法。もう一つがファイルを指定する方法です。
　
　シンプルなやり方

webkitNotifications.createNotification('icon.png', 'タイトル', 'メッセージ')

　高機能なやり方

webkitNotifications.createNotification.createHTMLNotification(''notification.html')

もう解るかと思いますが、サンプルで指定されているnotification.htmlにリンクやイベントを記述すれば色々な操作が可能な通知を作ることができます。

通知用HTMLにデータを送る

　ただし、ここで一つ問題があります。どうやってbackground.htmlからnotification.htmlにデータを送るのか？
　ChromeのExtentionはHTML5標準に基づいており、フレームやタブの間でリソースを共有するドキュメント間通信のAPIなども使えます。
　ただサンプルコードなどを見ている限り、background.htmlのwindowオブジェクトに独自のプロパティを付与して、notification.html側でbackgroundのオブジェクトを取得するというのが手軽なこともあって基本的なデータ共有手法になっているようです。

　なので例えば起動して1秒後に通知を出す場合の構成ですと

　background.html

<html>
  <script>
  	var BG=this;
    var callback=function(){
        BG.message='テスト';//独自プロパティを付与
    	var notification = webkitNotifications.createHTMLNotification('notification.html');
     	notification.show();
    	
    }
  
    setTimeout(callback, 1000);
    
    
  </script>
</html>

notification.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


</head>
<body>

<h1></h1>
<script>

var BG=chrome.extension.getBackgroundPage();//background.html
document.querySelector('h1').innerText = BG.message;
</script>
<a href="http://code.google.com/chrome/extensions/background_pages.html" target='_blank'>リンクをしたい場合は別窓指定</a>
</body>
</html>

　
　適当なディレクトリに前述のManifest Fileとnotification.html、notification.htmlを入れて、chromeの設定メニューの「ツール」から拡張機能を開き、「デベロッパーモード」とあるリンクをクリックすると出てくる「パッケージ化されていない拡張機能を読み込む」ボタンを押してそのディレクトリを指定すると通知が立ち上がります。

まとめ

　
　まとめると、次のような手順にになります

Manifest Fileで通知を有効にする
通知に使うhtml.fileを用意する
webkitNotifications.createHTMLNotificationで通知を起動する
通知を起動する側のwindowオブジェクトを通じてデータを送る

　
　ネットがいつまでも素敵なおもちゃでありますように　