自分用のChromeアプリをつくるべく、いろいろ調べたのでメモを残しておきます。
カスタムの Chrome アプリと拡張機能を作成して公開する - Chrome Enterprise and Education ヘルプ
材料の準備
最低限用意しなければならないのはこんな感じでしょうか。
今回はそれぞれに最低限の加工を施して、とりあえずChromeで起動して見るところまでやってみましょう。
材料の加工
manifest.json
アプリの設定が書かれてます。
とりあえずいまのところ、manifest_version は 2 を指定しておけば良いようです。
versionはなぜかStringで指定しないとエラーが起こります。
{ "name": "Chrome App Sumple", "description": "Hello World.", "version": "1", "manifest_version": 2, "app": { "background": { "scripts": ["background.js"] } }, "icons": { "128": "package-128.png" } }
background.js
manifest.json の background と整合性がとれていれば名前はなんでも良いのですが、なんとなく background.js という名前になることが多いようです。
ここでは index.html を 400 × 400 のサイズで立ち上げています。
chrome.app.runtime.onLaunched.addListener(function(){ chrome.app.window.create('index.html', { 'bounds': { 'width': 400, 'height': 400, 'top': 0, 'left': 0 } }); });
index.html
background.js から呼ばれるHTMLファイルです。
とりあえずタイトルだけ書いておきました。
必要に応じで外部scriptをロードすることもできます。
<h1>HELLO WORLD.</h1>
package-128.png
128 × 128 の PNG画像です。
アイコンになります。
Chromeアプリの読み込み
以上のものが用意できたら早速 Chrome に読み込ませてみましょう。
- Chromeを起動
- 環境設定を開く
- 拡張機能のタブを選択
- ディベロッパーモードにチェックをいれる
- パッケージ化されていない拡張機能を読み込む... をクリック
- 先ほど用意したディレクトリを選択
とこれでアプリを登録できます。
Chromeアプリの起動
起動ボタンをクリックしてみましょう。
index.html が立ち上がれば成功です!
なんの役にも立たないアプリですが、まずは基本が大事ということで。
今回は以上です。