node.jsのモジュールを使ってChrome拡張機能を作る #webpack

久々にChrome拡張機能を作ろうとした時、node.jsのパッケージとか使ってES2015で書きたいなーと思って探してみたところ、generator-chrome-extension-kickstartというめっちゃ便利なテンプレがあったので紹介したいと思います。

どういうもの？

generator-chrome-extension-kickstartはyeomanという雛形生成ツールを使って、gulp、webpack、babelが使えるChrome拡張機能開発環境を構築してくれます。
これを使う利点は、node.jsのモジュールが使える、ES2015で書けるといったことが挙げられます。(ES2015に関してはブラウザが対応しつつありますが…)
また、gulpでwatchしておくと、コード編集後にすぐにブラウザで試せるので、とても便利です。
また、Chrome以外にもFirefoxやOpera向けの拡張機能も生成できるようです。

インストール

yeomanとgenerator-chrome-extension-kickstartをグローバルインストールします。

$ npm install -g yo generator-chrome-extension-kickstart

インストールできたら、ディレクトリを作成して移動し、雛形を生成コマンドを実行します。

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

幾つかの質問に答え終わると雛形が生成され、自動的にnpm installされます。

? What would you like to call this extension? my new chrome extension
? And how would you call it if you only had 12 characters (short_name)? myChromeApp
? How would you like to describe this extension? Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
? Would you like to use UI Action? Browser
? Would you like to a override chrome page? No
? Would you like more UI Features?
? Would you like to use permissions?
? Would you like to install promo images for the Chrome Web Store? No
   create package.json
   create gulpfile.babel.js
   create tasks/lib/applyBrowserPrefixesFor.js
   create tasks/lib/args.js
   create tasks/build.js
   create tasks/clean.js
   create tasks/default.js
   create tasks/fonts.js
   create tasks/images.js
   create tasks/livereload.js
   create tasks/locales.js
   create tasks/manifest.js
   create tasks/pack.js
   create tasks/pages.js
   create tasks/scripts.js
   create tasks/styles.js
   create tasks/version.js
   create README.md
   create .gitignore
   create .gitattributes
   create .eslintrc
   create .editorconfig
   create app/manifest.json
   create app/pages/popup.html
   create app/scripts/popup.js
   create app/styles/popup.less
   create app/images/icon-19.png
   create app/images/icon-38.png
   create app/scripts/background.js
   create app/scripts/lib/livereload.js
   create app/_locales/en/messages.json
   create app/images/icon-16.png
   create app/images/icon-128.png
   create app/images/icon-large.svg
   create app/fonts/.gitkeep

開発

開発時は主にappディレクトリの中にあるファイルを編集することになります。
下のようにnpmスクリプトを実行しておくと、ファイルの変更を検知して、自動的にdistディレクトリにビルド後のファイルを出力してくれます。

$ npm run dev:chrome

Chrome拡張機能のページ(chrome://extensions)を開いて、「パッケージ化されていない拡張機能を読み込む...」ボタンを押し、dist/chromeディレクトリを選択してブラウザに拡張機能を適応させましょう。

リリース

Chrome ウェブストアにアップロードするために、作成したChrome拡張機能をzipにまとめたい時は、以下のコマンドを実行します。

$ npm run build:chrome

そうするとpackagesディレクトリにzipファイルが生成されます。
このコマンドでビルドする時は、JavaScriptやCSSのファイルはminifyしてくれます！
このzipファイルはそのままChrome ウェブストアにアップロードできます。

まとめ

generator-chrome-extension-kickstartを使うことで、gulp、webpack、babelでChrome拡張機能を作れるようになれます。
普段から頻繁にnode.jsのモジュールやES2015の記法を使ってる人にはすごく便利なツールだと思うので、これを使ってスマートにChrome拡張機能を開発しましょう！