webpack を使った Google Chrome Extension づくり
イントロ
気が向いたので Google Chrome Extension を作成してみたくなった。
そこで最低限 webpack
を使って、開発環境を整備できる環境を作ってみた。
色々調べてみて、一先ずこんなところに落ち着いた、というメモを残します。
似たようなのあるやろ
はい。あります。
- HaNdTriX/generator-chrome-extension-kickstart
- samuelsimoes/chrome-extension-webpack-boilerplate
- jhen0409/react-chrome-extension-boilerplate
- EmailThis/extension-boilerplate
方針
この記事では webpack
を使って Google Chrome Extension を作り始められるところをまとめている。
というのも、既存のを参考にしながら試した結果、結局テンプレートを使うより、小さく自作するのが一番良いと思ったからです。
(一度 yeoman
使って、後で破綻し、とてもゲンナリした)
以下のようなルールを決めて環境を作っている。
ルールも小さく保って、今後も守りやすいようにしているつもり。
ディレクトリ構成
src
以下のディレクトリ構成は好きにすれば良いと思うけど、今のところ以下のようにしている。
% tree src/ -d src/ ├── _locales ├── images ├── scripts ├── styles └── views # React 使う場合は `components` のほうがいいかも
ディレクトリ構成は、Github で色々と repository を見て回ったものの、共通点が少なく、皆自由にやってるんだなという印象を受けた。 故に各自でしっくりくるディレクトリ構成を選べば良いと思う。自分は上記になった、という紹介。
ただ、i18n については _locales
固定なので注意が必要。
chrome.i18n - Google Chrome
初め方
webpack + ES6 を使った構成を作ってみる
$ yarn init $ yarn add -D webpack copy-webpack-plugin babel-loader babel-core babel-preset-es2015 $ touch .babelrc
webpack
以下は一例。
$ touch webpack.config.babel.js $ vi webpack.config.babel.js
import path from 'path'; import CopyWebpackPlugin from 'copy-webpack-plugin'; export default { entry: { contentScripts: path.join(__dirname, 'src', 'scripts', 'contentScripts.js'), }, output: { path: path.join(__dirname, "dist"), filename: 'scripts/[name].bundle.js', }, target: 'web', devServer: { contentBase: path.join(__dirname, 'dist'), port: 9000, hot: true, }, module: { rules: [ { test: /\.js$/, use: { loader: 'babel-loader' } }, ] }, plugins: [ new CopyWebpackPlugin( [ { from: path.join(__dirname, 'src', 'manifest.json'), to: path.join(__dirname, 'dist'), } ] ) ] };
補足
- entry は複数持つ可能性が高いので、object で指定したほうが良い気がする
content script
やbackground
など、複数のファイルで構成されることが多いため- この辺の用語は Chrome拡張の開発方法まとめ その1:概念編 - Qiita がすごいわかりやすかった
copy-webpack-plugin
はmanifest.json
をdist/
にコピーするために入れている- manifest.json とは、Google Chrome Extension の設定ファイル
- compile が不要なものは、まるっと dist にコピーする
manifest.json
以外でも、例えば html はべた書きで書いたりする場合はCopyWebpackPlugin
の設定を足せばいい
js
$ touch src/scripts/contentScripts.js $ vi src/scripts/contentScripts.js
% cat src/scripts/contentScripts.js console.log("Hello");
manifest.json
$ touch src/manifest.json
{ "manifest_version": 2, "name": "name", "version": "0.0.1", "description": "", "author": "mgi166", "content_scripts": [ { "matches": ["http://*/*", "https://*/*"], "js": ["scripts/contentScripts.bundle.js"] } ], }
いざ開発
- まずは「デベロッパーモード」にチェックを付ける
- その後パッケージ化されていない拡張機能を読み込む、というボタンを押して、
dist/
ディレクトリを読み込むようにする- 一度は webpack コマンドを実行し、
dist/
を作成する必要がある
- 一度は webpack コマンドを実行し、
これで自作する拡張機能が登録できたと思う。
後は
$ webpack --watch
で変更を監視して、後は src/
以下のファイルをいじれば ok
compile
が終わったソースを読み込む場合は、chrome://extensions/ の拡張機能で、リロードをするのを忘れないようにする。(これがめんどいのだが…)
まとめ
webpack
を通して Google Chrome Extension
を開発するまでの流れを書いてみた。
後はやりたいことに応じて、好きなようにできると思う。