YeomanをつかったChrome extension開発のメモ

Chrome extension開発にYeoman generator-chrome-extensionを使用したときのメモ。

とりあえず、Yeomanと、gegneratorをinstallする。ちなみにbower、grunt-cliはYeomanインストール時にインストールされる。
テストランナーはmochaなのでインストール。

引き続いてgeneratorを実行。
作成するExtentionのタイプに合わせて各項目は選択できる。

これで以下のような環境が構築される。

個人的にcoffeeで使いたいので、Gruntfileをcoffeeにで使う。

Grunt pluginとGruntタスクはそれぞれ次のタスクを実行する。

load-grunt-tasksでpackage.jsonのdependencies/devDependencies/peerDependencies のpluginを自動的に読込む。これで
grunt.loadNpmTasks を省略できる。

chromeManifestはmanifest.jsonをもとにbackground.jsとcontent_script.jsについてファイル結合とCSSとJavaScriptの圧縮を行う。
タスク実行の度にバージョン番号をアップデートすることも可能。

useminPrepareタスクはhtmlファイルにあるコメント箇所を認識してファイルの結合と圧縮を行う。
例えば.tmpディレクトリ内のscripts/config.jsとscripts/popup.jsを結合、圧縮したファイルをscripts/popup.jsに生成する場合は

となる。

concurrentはsass,compassやcoffeeのコンパイルのような時間を要するタスクを同時に行う。gruntの実行時間を短縮できる。

Gruntfileのbuildタスクは最終的にpackageディレクトリにzip圧縮された状態でextentionファイルを生成する。

Chrome Extension自体は難しいものではないけど、しっかりした開発環境をgenerator-chrome-extensionで作成することでより快適に開発できそう。

ちなみにextensionizrというサービスでもひな形だけであれば作成できる。