下のサンプルはブランク・プロジェクトとしてもお使いいただけるかと。
ファイル構成
- manifest.json
- background.js
- index.html
- app.js
- 128.png
128.png は、アプリのアイコン(128px x 128px)です。ペイントアプリなどで適当に作っておいて下さい。
manifest.json
{
"name": "HelloWorld App",
"description": "The 1st step for development of Chrome Packaged Apps",
"version": "0.1",
"app": {
"background": {
"scripts": ["background.js"]
}
},
"icons": { "128": "128.png" }
}background.js
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html', {
'bounds': {
'width': 400,
'height': 500
}
});
});index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <button id="hello_btn">hello</button> <div id="res_div"></div> </body> <script src="app.js"></script> </html>
app.js
// コントロールのDOM取得
var hello_btn = document.querySelector('#hello_btn');
var res_div = document.querySelector('#res_div');
/*
* onclick 'hello' button
*/
hello_btn.onclick = function(e) {
console.log('HelloWorld.');
res_div.innerText = 'HelloWorld.';
}Chromeブラウザでテスト実行
1. Chromeの設定から ツール -> 拡張機能 を開く。
2. デベロッパーモードのチェックボックスをONにする。
3. パッケージ化されていない拡張機能を読み込む...ボタンを押すと選択ダイアログが開きますので、さきほど作ったプロジェクトを指定。
これでChromeの拡張機能一覧に作ったアプリが表示されます。
サンプルアプリのアイコンをクリック実行して、helloボタンを押してみてください。
下のようなログが出力されて、 #res_div に "HelloWorld." が表示されていれば成功です。
HelloWorld. app.js:9これでChromeアプリ開発の一連の流れが理解できたのではないでしょうか。
参考サイト
What Are Packaged Apps? - Google ChromeWhat are extensions? - Google Chrome
0 件のコメント:
コメントを投稿