Chrome Extension generatorを使ってChrome Extensionを開発する

Chrome Extensionの開発について今っぽくgruntとかbowerとか使って開発しようと思って調べていたら, Yeomanにgenerator-chrome-extensionというgeneratorがあって, これを使うとサクッとChrome Extension のテンプレートが作れたので, メモ代わりにブログに書いてみた.

インストール

インストールする前に, 当然yeomanが必要なので, yeomanをインストールする. node.js, npmがインストールされていれば以下のコマンドでyeomanをインストールする.

npm install -g yo mocha

generator-chrome-extensionでは, デフォルトのテストフレームワークとしてmochaを採用しているので, ついでにインストールしておくと良い. 次に, generator-chrome-extensionをインストールする. インストールは至って簡単で, 以下のコマンドでインストールする.

npm install -g generator-chrome-extension

使い方

まず, アプリのひな形を作成する. yeomanのコマンドを用いて作成する.

mkdir path-to-my-chrome-extension
cd  path-to-my-chrome-extension
yo chrome-extension

この時, アプリ名や初期アプリの構成を聞かれるので, 必要に応じてチェックをいれる.

ディレクトリ構成

ひな形作成時にすべてのチェックを外すと, 概ね以下のディレクトリ構成となる.

.
├── Gruntfile.js
├── app
│   ├── _locales
│   │   └── en
│   │       └── messages.json
│   ├── bower_components
│   ├── images
│   │   ├── icon-128.png
│   │   ├── icon-16.png
│   │   ├── icon-19.png
│   │   └── icon-38.png
│   ├── manifest.json
│   ├── popup.html
│   ├── scripts
│   │   ├── background.coffee
│   │   ├── background.js
│   │   ├── chromereload.coffee
│   │   ├── chromereload.js
│   │   ├── popup.coffee
│   │   └── popup.js
│   └── styles
│       └── main.scss
├── bower.json
├── dist
│   ├── _locales
│   │   └── en
│   │       └── messages.json
│   ├── images
│   │   ├── icon-128.png
│   │   ├── icon-16.png
│   │   ├── icon-19.png
│   │   └── icon-38.png
│   ├── manifest.json
│   ├── popup.html
│   ├── scripts
│   │   ├── background.js
│   │   ├── popup.js
│   │   └── vendor.js
│   └── styles
│       └── main.css
├── package
│   └── password generator-0.0.4.zip
├─node_modules
├── package.json
└── test
    ├── bower.json
    ├── index.html
    └── spec
        └── test.js

Gruntタスク

ひな形作成時に, 様々なタスクが追加されているが, 主に開発で利用するタスクを紹介する.

debug

debugタスクはgrunt-contrib-watchを用いて, 各ファイルの変更を監視し, bowerでインストールした外部ライブラリの自動ロード, SassやCoffeeScriptのコンパイル, エクステンションのリロードまで自動で行ってくれる. 開発中はずっと起動しっぱなしになると思う.

また, http://localhost:4000に/appディレクトリの内容を配信するローカルのサーバーが立ち上がるため, そちらでデバッグすることもできる. (もちろんlivereloadも行ってくれる)

build

buildタスクは/appディレクトリから, エクステンションをリリースするときに必要なzipの生成を行うタスク. この時, 各種ファイルのコンパイルやjs・cssの結合と圧縮など, 静的ファイルの最適化は自動で行ってくれる.

生成されたzipファイルは/packageに, {appname}-{version}.zipという名前で保存される. ちなみにバージョンは, その時のmanifest.jsonのバージョンに, ビルドバージョンがインクリメントされたものとなる(同時にmanifest.jsonも更新される).

zip圧縮前のアプリは/distに保存されている. リリース前には, 念の為にこちらのディレクトリをエクステンションとして読み込んで動作確認をした方がいいかもしれない.

Tips

エクステンションを開発していて気づいたTipsを上げていく.

外部ライブラリの読み込み

外部ライブラリの読み込みは, bowerを通じて行う. 例えばunderscore.jsを利用したい場合は以下のようにする.

bower install --save underscore

すると/appディレクトリにライブラリがインストールされ, 同時にライブラリを自動でロードされる. 具体的には, bower install後に, /appディレクトリ直下にあるHTMLファイルの,  , または と記述された場所に追記が行われる. なので自分でHTMLファイルを追加する際には, とを適切な箇所に記述しておく必要がある. だいたいyeomanが作ったHTMLファイルを参考に(というかコピペ)すれば良い.

ちなみにこれはgrunt-bower-installを用いてgruntが処理を行っている.

HTMLファイルの手動追加

HTMLファイルを/app内に作成したら, Gruntfile.jsのuserminPrepareタスクのhtmlの配列に, 作成したHTMLファイルを追記しておく. こうしないと, /distディレクトリにコピーが行われなく, パッケージ時にこまる.

Chromeに読み込んだエクステンションのデバッグ

Chromeに読み込んだエクステンションのコンソールは, 設定画面のExtensions > デバッグしたいエクステンション > Inspect viewsから確認できる.

Yucchiy's Note