久々に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拡張機能を開発しましょう!