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

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

More than 5 years have passed since last update.

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
Why do not you register as a user and use Qiita more conveniently?
  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