VS CodeでChrome Appを開発する #JavaScript

まず適当なフォルダを作成して、チュートリアルを参考に必要なファイルをフォルダ内に配置します。必要なのは以下のファイルです。

manifest.json
background.js
calculator-128.png
calculator-16.png
window.html

manifest.json以外の名前は任意ですが、チュートリアルの通りにmanifest.jsonを記述する場合は上記ファイル名になります。

ファイル一覧

manifest.json

{
  "name": "Hello World!",
  "description": "My first Chrome App.",
  "version": "0.1",
  "manifest_version": 2,
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  },
  "icons": { "16": "calculator-16.png", "128": "calculator-128.png" }
}

background.js

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('window.html', {
    'outerBounds': {
      'width': 400,
      'height': 500
    }
  });
});

window.html

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>Hello, world!</div>
  </body>
</html>

calculator-16.png

calculator-128.png

ビルド設定

ここからがVS Codeの本領発揮です。このフォルダをVS Codeで開きます。開いたらCtrl+Shift+Bを押します。
すると、No task runner configured.(タスクランナーが設定されていません)というメッセージが出ます。

このメッセージが出たら、Configure Task Runner(タスクランナーを設定する)をクリックしてください。

すると.vscode/tasks.jsonというファイルが作成されて、tasks.jsonを開いた状態になります。
tasks.jsonにはテンプレートとしてTypeScript用の設定が記述されています。今回はTypeScriptではないのでいったん全て削除して、下記内容で書きまえます。

tasks.json

{
  "version": "0.1.0",
  "command": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
  "isShellCommand": true,
  "showOutput": "silent",
  "args": [
    "--load-and-launch-app=${workspaceRoot}"
  ]
}

"command"に指定するのはChromeのインストールされているフルパスです。Windowsだったら上記パスだと思いますが、違う場合は各自の環境に合わせて設定してください。
調べ方はデスクトップのショートカットアイコンを右クリック→プロパティ→リンク先を見るのが簡単です。

ここまで設定したら、VS Codeでもう一度Ctrl+Shift+Bを押します。今度はビルド設定がされているので、Chromeアプリが起動するはずです。

Chrome Dev Editorが終了してしまって手軽にChrome App開発をするのが難しくなったかと思ったけど、これならいけそうです。