ファイル構成:
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の主導権争いの行方