Generator Chrome Extension - Google Chrome機能拡張のベースを生成
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