最近 Chrome 拡張機能の開発を簡単に始める方法を調べていたのですが、その中で chrome-extension-webpack-boilerplate を使うと簡単に始められたので紹介します。
筆者の前提
- Chrome 拡張機能を開発するのが初めて。チュートリアルをこなした程度
- Webpack は触ったことがある
chrome-extension-webpack-boilerplate とは
GitHub - samuelsimoes/chrome-extension-webpack-boilerplate
Chrome 拡張機能の開発を楽にしてくれる boilerplate は調べると色々あります。
その中でも、chrome-extension-webpack-boilerplate は、Webpack で 開発に使う JavaScript のモジュールを管理できるようにしてくれる boilerplate です。
使い方
README に書いてあるのですが、自分で試したときの手順を記載します。
環境の前提
- Node.js 6 以上がインストールされていること
- yarn がインストールされていること
準備手順
リポジトリを clone して yarn を実行するだけで OK です。
$ git clone https://github.com/samuelsimoes/chrome-extension-webpack-boilerplate
$ cd chrome-extension-webpack-boilerplate
$ yarn
Chrome 拡張機能として起動するには
下記コマンドを実行します。
$ npm run start
実行すると、Chrome 拡張機能としてロードするためのファイルが build/ ディレクトリ以下に生成されます。
その後、Chrome 拡張機能としてロードするための手順を実行します。
-
chrome://extensions/にアクセス - Developer mode に変更
- 「Load unpacked extension」クリック
-
build/以下のフォルダを指定
指定が終わると Chrome 拡張機能として登録され、アイコンをクリックすると以下のサンプルアラートが表示されます。
所感
初めて Chrome 拡張機能を開発始めようとするとき、どんなファイルを準備すればいいか、どんな JavaScript のモジュールを使おうか見通しが立ちづらいと思います。
しかし chrome-extension-webpack-boilerplate を使うことで、必要なファイルや、モジュール管理に悩まず手早く開発を始められるようになると思いました。
試しに自分で fork して 色々 yarn add したものは以下に置いてみました。bootstrap や fontawesome など yarn で突っ込んで Webpack で管理できていい感じでした。