↑ を作ってみたシリーズ、前回の記事 の続きです。
タイトルにもありますが、今回初めて Chrome 拡張機能を作るに当たって、以前 勉強会 に参加してから気になっていた Yeoman の Chrome Extension Generator を使ってみました。
node.js のサイト から node.js および npm をインストールし、続いて
Getting started with Yeoman | Yeoman にあるように
$ npm install -g yo bower grunt-cli
などとして Yeoman、Bower、Grunt を呼べる状態にします。
続いて Chrome Extension Generator に書いてある通り
$ npm install -g generator-chrome-extension
として準備完了。
$ yo chrome-extension
とするとシェルが起動し、インタラクティブに Chrome Extension のテンプレートを作成することができます。
$ yo chrome-extension
? What would you like to call this extension? Colored Hashtag for Trello
? How would you like to describe this extension? This is my first chrome extension
? Would you like to use UI Action? No
? Would you like more UI Features?
? Would you like to use permissions?
create Gruntfile.js
create package.json
identical .gitignore
identical .gitattributes
identical .bowerrc
...
grunt-contrib-imagemin@0.7.2 ../node_modules/grunt-contrib-imagemin
├── pretty-bytes@0.1.2
├── async@0.7.0
├── chalk@0.4.0 (ansi-styles@1.0.0, has-color@0.1.7, strip-ansi@0.1.1)
└── imagemin@0.4.9 (stat-mode@0.2.0, ware@0.3.0, rimraf@2.2.8, image-type@0.1.4, nopt@3.0.1, tempfile@0.1.3, fs-extra@0.10.0, imagemin-svgo@0.1.1, imagemin-pngquant@0.1.3, imagemin-jpegtran@0.1.0, imagemin-gifsicle@0.1.1, imagemin-optipng@0.1.0)
というように Bower と Grunt が走り、Chrome 拡張機能の開発に必要なパッケージ群がセットアップされます。
ディレクトリ構成はこんな感じ。
$ ls -l
total 32
-rw-r--r-- 1 beniyama beniyama 7582 1 4 17:45 Gruntfile.js
drwxr-xr-x 7 beniyama beniyama 238 1 4 17:45 app
-rw-r--r-- 1 beniyama beniyama 112 10 1 08:36 bower.json
drwxr-xr-x 23 beniyama beniyama 782 1 4 17:45 node_modules
-rw-r--r-- 1 beniyama beniyama 893 1 4 17:45 package.json
drwxr-xr-x 7 beniyama beniyama 238 1 4 17:45 test
この状態でもすでに manifest.json などに適当な値が入っている状態ですので、
$ grunt build
などとすると
$ grunt build
Running "clean:dist" (clean) task
Running "chromeManifest:dist" (chromeManifest) task
Build number has changed to 0, 0, 2
Running "useminPrepare:html" (useminPrepare) task
Going through to update the config
Looking for build script HTML comment blocks
Configuration is now:
concat:
{ background:
{ src: [ 'app/scripts/background.js' ],
dest: 'dist/scripts/background.js' } }
uglify:
{ 'dist/scripts/background.js': 'dist/scripts/background.js' }
cssmin:
{}
...
のように バージョン番号のインクリメントや JS ファイルの uglify、結合などをデフォルトで行ってくれます。package ディレクトリ下には Colored Hashtag for Trello-0.0.2.zip というような名前でパッケージが生成されますので、最終的に Chrome ウェブストアに登録するのはこのファイルになります。
開発フェーズでは、Chrome から直接ローカルのプロジェクトを読み込んで開発・テストを行うことができます。Chrome で chrome://extensions/ にアクセスすると『パッケージ化されていない拡張機能を読み込む』というボタンがありますので、そこから manifest.json のある app ディレクトリを指定すると下記のようになります。
デフォルトでは Yeoman のアイコン画像をはめておいてくれます。また『リロード』というリンクを押すことで、grunt build し直したプロジェクトをブラウザに反映させることができます。livereload もサポートしているようなのでこの辺はソースを変更すると勝手に反映する、というのもできそうです。
ちなみに IDE ですが、IntelliJ IDEA を試してみたところなんと Grunt 用のコンソールが用意されていたりして、かなり開発しやすかったです。
この Grunt Console を開くと
のような小窓が開いて Gruntfile.js に定義されているタスクを GUI から呼べたりします。時代は Gulp という話も昔聞いたのですが、この辺ちゃんとサポートされていて驚きました。なんとなく Java の IDE というイメージを持っていましたが、web 開発全般で活躍してくれそうだったので PHP Storm に引き続き有償版を購入してしまいました。
次回は内部実装の話を書きたいと思います。
↓ 続きの記事
↓ 前回の記事
↓ Yeoman 周りの話題が出た勉強会
