ファイル構成：
manifest.json
background.js
window.html
app.js
calculator-128.png
calculator-64.png
まずはPackaged AppsやExtensionお決まりのマニフェストファイル manifest.json
{
"name": "Hello XMLHttpRequest!",
"description": "XMLHttpRequest sample app.",
"version": "0.1",
"app": {
"background": {
"scripts": ["background.js"]
}
},
"icons": { "16": "calculator-16.png", "128": "calculator-128.png" },
"permissions": [
"http://*/"
]
}
permissionsの中身は非常に重要。
"http://*/"
この記述法なら全てのURLに対応する。
httpsに対応させる場合は、
"https://*/"
とする。
次にこちらもお決まりの background.js
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('window.html', {
'bounds': {
'width': 400,
'height': 500
}
});
});
次に画面。
window.html
<!DOCTYPE html> <html> <head> </head> <body> <button id="send">Send</button> <div id="msg">ここにレスポンス表示</div> <script src="app.js"></script> </body> </html>
最後に重要なJavascript本体。
app.js
document.getElementById('send').onclick = function() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://echo.jsontest.com/message/Hello_XMLHttpRequest", true);
xhr.onreadystatechange = function() {
if (xhr.readyState != 4) {
return;
}
if (xhr.status == 200) {
var obj = JSON.parse(xhr.responseText);
document.getElementById('msg').innerText = obj.message;
}
}
xhr.send();
};
使い方は見ても分かる通り簡単。
xhr.open()の3番目の引数は非同期通信かどうか。trueなら非同期で呼び出す。
xhr.send()すると、上のWebサーバ側から {"message": "Hello_XMLHttpRequest"} なJSON文字列がレスポンスされてくるので、onreadystatechangeの中で JSON.parse して <div id="msg"> のinnerTextにmessageをセットしている。
参考
Cross-Origin XMLHttpRequest - Google Chrome
How to set script-src in a Chrome packaged app? - Stack Overflow
Cross-Origin XMLHttpRequest in chrome extensions - Stack Overflow
関連エントリ
JS用MVCフレームワーク「AngularJS」を使ってChrome Packaged Apps【基本編】
【Chrome】Packaged Apps で OAuth2認証する超簡単なサンプル【Google】
【Chrome】Packaged Apps アプリをHelloWorld【Google】
スマホOSの主導権争いの行方
