読者です 読者をやめる 読者になる 読者になる

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

Chrome

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

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

ただ、このリッチ通知、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);

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