Help us understand the problem. What is going on with this article?

VS CodeでChrome Appを開発する

More than 3 years have passed since last update.

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

  • 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.pngcalculator-16.png

calculator-128.pngcalculator-128.png

ビルド設定

ここからがVS Codeの本領発揮です。このフォルダをVS Codeで開きます。開いたらCtrl+Shift+Bを押します。
すると、No task runner configured.(タスクランナーが設定されていません)というメッセージが出ます。
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だったら上記パスだと思いますが、違う場合は各自の環境に合わせて設定してください。
調べ方はデスクトップのショートカットアイコンを右クリック→プロパティ→リンク先を見るのが簡単です。

Chromeのインストール先の調べ方

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

起動した様子

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away