scramble cadenza

技術ネタのガラクタ置き場

webpack を使った Google Chrome Extension づくり

イントロ

気が向いたので Google Chrome Extension を作成してみたくなった。 そこで最低限 webpack を使って、開発環境を整備できる環境を作ってみた。

色々調べてみて、一先ずこんなところに落ち着いた、というメモを残します。

似たようなのあるやろ

はい。あります。

方針

この記事では 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 で指定したほうが良い気がする
  • copy-webpack-pluginmanifest.jsondist/ にコピーするために入れている
    • 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/ を作成する必要がある

screenshot_2017-05-28_20_36_53.png (153.6 kB)

これで自作する拡張機能が登録できたと思う。

後は

$ webpack --watch

で変更を監視して、後は src/ 以下のファイルをいじれば ok compile が終わったソースを読み込む場合は、chrome://extensions/ の拡張機能で、リロードをするのを忘れないようにする。(これがめんどいのだが…)

screenshot_2017-05-28_20_36_53.png (156.3 kB)

まとめ

webpack を通して Google Chrome Extension を開発するまでの流れを書いてみた。 後はやりたいことに応じて、好きなようにできると思う。