↑ を作ってみたシリーズ、前回の記事 の続きです。
タイトルにもありますが、今回初めて 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 周りの話題が出た勉強会
