JavaScript
Chrome
chrome-extension
webpack

chrome-extension-webpack-boilerplate で手早く Chrome 拡張機能の開発環境準備

最近 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 拡張機能としてロードするための手順を実行します。

  1. chrome://extensions/ にアクセス
  2. Developer mode に変更
  3. 「Load unpacked extension」クリック
  4. build/ 以下のフォルダを指定

指定が終わると Chrome 拡張機能として登録され、アイコンをクリックすると以下のサンプルアラートが表示されます。

image.png

所感

初めて Chrome 拡張機能を開発始めようとするとき、どんなファイルを準備すればいいか、どんな JavaScript のモジュールを使おうか見通しが立ちづらいと思います。

しかし chrome-extension-webpack-boilerplate を使うことで、必要なファイルや、モジュール管理に悩まず手早く開発を始められるようになると思いました。

試しに自分で fork して 色々 yarn add したものは以下に置いてみました。bootstrap や fontawesome など yarn で突っ込んで Webpack で管理できていい感じでした。

https://github.com/gotchane/chrome-extension-webpack-boilerplate