Google Chromeがいくら便利だと言っても、全ユーザがデフォルトの機能で満足できるわけではありません。Chromeの利便性はサードパーティー製の機能拡張によって支えられている面が大きいでしょう。 そこで今回はGoogle Chrome機能拡張を作る際に使えるGenerator Chrome Extensionを紹介します。

Generator Chrome Extensionの使い方

Generator Chrome ExtensionはYeomanやgulpを使ってセットアップします。

まず必要なライブラリをインストールします。

npm install --global yo gulp bower

そしてGenerator Chrome Extensionをインストールします。

npm install -g generator-chrome-extension

終わったらディレクトリを作って、中に入ります。

mkdir my-new-chrome-extension && cd $_

あとは機能拡張のベースを生成します。

yo chrome-extension

生成されたファイル構成です。

あとはgulpを使って開発を進めていくだけです。babelサブコマンドでES6を変換したり、watchサブコマンドで管理状態になります。

gulp babel
gulp watch
gulp build

watchを実行したら、あとは開発していくだけです。

$ gulp watch
[11:46:44] Requiring external module babel-register
[11:46:44] Using gulpfile /path_to/my-new-chrome-extension/gulpfile.babel.js
[11:46:44] Starting 'lint'...
[11:46:45] Starting 'babel'...
[11:46:45] Starting 'html'...
[11:46:45] Finished 'lint' after 554 ms
[11:46:45] Finished 'babel' after 412 ms
[11:46:45] Finished 'html' after 407 ms
[11:46:45] Starting 'watch'...
[11:46:45] Finished 'watch' after 73 ms

Generator Chrome Extensionはウィザード形式で作っていけるので分かりやすいです。

これからGoogle Chrome機能拡張を作ってみたいと思っていた方はGenerator Chrome Extensionを使ってみましょう。また、社内向けの小さな機能拡張を開発してみるのも良さそうです。

Generator Chrome Extensionはnode/JavaScript製のオープンソース・ソフトウェア（BSD License）です。

yeoman/generator-chrome-extension: Scaffold out a Chrome extension