TypeScript で Chrome Extension を開発する際の環境準備

IDE・エディタ

手慣れたエディタか、TypeScript をサポートしている WebStorm が便利。

TypeScript をインストールする

npm install -g typescript

tsd と、必要となる d.ts をインストールする

TypeScript の開発で外部ライブラリを利用する場合、型定義ファイル (d.ts) が必要となる。
型定義ファイルは https://github.com/DefinitelyTyped/tsd で管理されているが、
1つずつ落としてくるのも面倒なので、管理ツールである tsd をインストールする。

npm install -g tsd

Chrome Extension 関連の d.ts は chrome という名称で登録されている。
以下のコマンドでインストール可能。

tsd query chrome --resolve --overwrite --save --action install

インストールに成功すると、

tsd.json (tsd 設定ファイル)
typings (d.ts 配置ディレクトリ)

が作成される。

その他、開発時に必要なものが出てきたら都度インストールしていけば良い。

Bower をインストールする

Bower を利用することで、Extension で利用するCSS/JSライブラリを簡単にインストール・配置することが出来る。
開発に必須ではないが、使ったほうが楽。

npm install -g bower

bower init で設定ファイルを生成し、必要なライブラリをインストールしていけば良い。

$ bower init
[?] name: hoge
[?] version: 0.0.0
[?] description:
[?] main file:
...

bower install で配置されるディレクトリ変更したい場合は、.bowerrc を作成しておく。

{
  "directory": "src/bower_components"
}

Grunt をインストールする

TypeScript のコンパイル、crx ファイルのビルドのため、Grunt をインストールする。

npm install -g grunt-cli

package.json を用意して、npm install する。

{
  "name": "xxx",
  "description": "",
  "version": "0.0.1",
  "engines": {
    "node": ">=0.10.8"
  },
  "dependencies": {},
  "devDependencies": {
    "grunt": "0.4.5",
    "grunt-cli": "0.1.13",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-crx": "^0.3.3",
    "grunt-typescript": "^0.3.8"
  }
}

Gruntfile.js を用意する。
開発時は grunt debug、ビルド時は grunt を実行する。

module.exports = function(grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    manifest: grunt.file.readJSON('src/manifest.json'),
    watch: {
      scripts: {
        files: ['src/**/*.ts', 'src/**/*.html'],
        tasks: ['typescript']
      }
    },
    typescript: {
      base: {
        src: ['src/scripts/**.ts'],
        dest: 'src/scripts/',
        options: {
          module: 'commonjs',
          target: 'es5',
          basePath: 'src/scripts'
        }
      }
    },
    crx: {
      production: {
        'src': 'src/',
        'dest': '<%= pkg.name %>.crx',
        'privateKey': '<%= pkg.name %>.pem'
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-typescript');
  grunt.loadNpmTasks('grunt-crx');

  grunt.registerTask('default', [
    'typescript',
    'crx'
  ]);

  grunt.registerTask('debug', [
    'typescript',
    'watch'
  ]);

};

ディレクトリ構成例

本投稿に記載されているサンプルは、以下のディレクトリ構成を前提とした設定例となっている。

├── src
│   ├── _locales/...
│   ├── bower_components/...
│   ├── css/...
│   ├── images/...
│   ├── scripts/...
│   ├── manifest.json
│   └── xxx.html
│
├── typings/...
├── .bowerrc
├── bower.json
├── Gruntfile.js
├── package.json
└── tsd.json