例えば、<img src="http://k.yimg.jp/images/top/sp2/cmn/logo-ns-131205.png" /> のような画像URLをHTMLから読み込んだとき、以下のエラーが発生します。
Refused to load the image 'http://k.yimg.jp/images/top/sp2/cmn/logo-ns-131205.png' because it violates the following Content Security Policy directive: "img-src 'self' data: chrome-extension-resource:".
これは Chrome apps の Content Security Policy (CSP) による規制のためです。
これを回避して、外部の画像を読み込むには以下のようにします。
まずは、HTMLを修正します。imgタグのsrc属性を削除しています。
main.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <img id="img1" /> </body> <script src="app.js"></script> </html>
background.js はいつもどおりに。
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('main.html', {
'bounds': {
'width': 400,
'height': 500
}
});
});次に manifest.json の permissions に参照可能なURLを設定します。<all_urls> の部分はURLを指定してもOK。
{
"name": "External resource loading Test",
"description": "External resource loading Test",
"version": "0.1.0",
"app": {
"background": {
"scripts": ["background.js"]
}
},
"icons": {
"128": "128.png"
},
"permissions": [
"<all_urls>"
]
}そして app.js (content script) の中で以下のように画像をロードします。
var url = "http://k.yimg.jp/images/top/sp2/cmn/logo-ns-131205.png";
var loadImage = function(uri) {
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = function() {
document.getElementById("img1").src
= window.URL.createObjectURL(xhr.response);
}
xhr.open('GET', uri, true);
xhr.send();
}
loadImage(url);
ポイントは、ダウンロードした画像のローカルなURIを createObjectURL で取得し、imgタグのsrc属性に設定しているところです。取得されるURIは、blob:chrome-extension%3A//*/* のような形式になります。
0 件のコメント:
コメントを投稿