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 化して渡してあげれば良い。