Chrome 拡張のリッチ通知で外部サイトのイメージを表示するには

最新の Windows (ChromeOS も) 版 Chrome で webkitNotifications.createHTMLNotification メソッドが非対応になってしまった。

代わりにリッチ通知という、いくつかのテンプレートに従って表現できるデスクトップ通知が追加された。

• Google Chrome 28提供開始。リッチ通知に対応(Windows)、Blinkエンジン採用 - Engadget Japanese
• 「Google Chrome 28」の安定版リリース Blink採用と「リッチ通知」機能（Windowsのみ） - ITmedia ニュース

ただ、このリッチ通知、CSP が厳しくなってしまい、外部サイトのイメージを簡単に表示できなくなった。回避するには、Ajax で取得してローカルに保存してパスを渡すか、data URI で指定する必要がある。

ここでは後者の方法で実装した例をメモしておく。HTML5 ではその辺を Blob オブジェクトによってわりと簡単に実装できる。

var notOpt = {
    type: "basic",
    title: "タイトル",
    message: "メッセージ"
};

var xhr = new XMLHttpRequest();
xhr.open("GET", "＜イメージURL＞");
xhr.responseType = "blob";
xhr.onload = function(){
        var blob = this.response;
        notOpt.iconUrl = window.URL.createObjectURL(blob);
        chrome.notifications.create("", notOpt, function(notId){});
    };
xhr.send(null);

画像を responseType を blob として XMLHttpRequest で取得すると、レスポンス自体が既に Blob オブジェクトになっている。
あとは、createObjectURL で data URI 化して渡してあげれば良い。