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

August 2, 2013

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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 化して渡してあげれば良い。

tilfin freelance software engineer