Zenn
💻

最近はChrome拡張を自作するときはこんな手順でやってます

2020/02/27に公開
Chrome
tech

こんにちは、たつきちです。

エンジニア歴12年ぐらいで今はベンチャー企業のCTOをしています。

この記事では、Chrome拡張を自作するときに最近だと僕はこんな手順でやってますよという内容をまとめてみました。

ぜひ最後までお付き合いください。

TL;DR

結論から言うと、

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

このボイラープレートを使っています。めっちゃ簡単にChrome拡張が作れます👍

具体的な手順

https://github.com/samuelsimoes/chrome-extension-webpack-boilerplate#developing-a-new-extension

に書いてあるとおりですが、

(1) ボイラープレートを git clone する

$ git clone git@github.com:samuelsimoes/chrome-extension-webpack-boilerplate.git

(2) 依存をインストール（ yarn を使用）する

yarn コマンドがインストールされていない場合は、以下のようにしてあらかじめインストールしてください。

$ npm i -g yarn

$ cd chrome-extension-webpack-boilerplate
$ yarn

(3) package.json と src/manifest.json それぞれで name を変更する

// package.json
{
- "name": "chrome-extension-webpack",
+ "name": "sample-extension",

// src/manifest.json
{
- "name": "Chrome Extension Webpack",
+ "name": "Sample Extension",

(4) ビルドする

$ yarn run build
# または
$ yarn run start # ソースの変更監視状態になるので見かけ上完了しません

(5) Chromeにインストールする

  1. Chromeのアドレスバーに chrome://extensions を打ち込む
  2. 右上の デベロッパーモード をONにする
  3. 左上の パッケージ化されていない拡張機能を読み込む をクリック
  4. /path/to/chrome-extension-webpack-boilerplate/build を開く
  5. インストール完了🙌

これで、（雛形の状態とは言え）自作のChrome拡張が実際に動作しました。めっちゃ簡単ですね！

開発の仕方

作りたい機能に応じて、 src 配下のhtml/js/cssを作り込んでいけばOKです。

$ yarn run start

を実行しておくと変更内容を自動でビルドしてくれます。

変更を適用する際は、下図の赤枠の部分のリロードボタンをクリックして再読み込みしましょう。

Content Scriptsの作り方

なお、Content Scripts を実装したい場合は少しだけ追加の対応が必要です。

(1) Content Scriptsを実装

例えば、以下のような内容で src/js/content_scripts.js を実装してみるとします。

document.querySelector('body').style.backgroundColor = '#f00';

(2) webpack.config.js にエントリーポイントを追加

このソースをwebpackのビルド対象にします。

// webpack.config.js

entry: {
  popup: path.join(__dirname, "src", "js", "popup.js"),
  options: path.join(__dirname, "src", "js", "options.js"),
- background: path.join(__dirname, "src", "js", "background.js")
+ background: path.join(__dirname, "src", "js", "background.js"),
+ content_scripts: path.join(__dirname, "src", "js", "content_scripts.js")
},

(3) manifest.json に content_scripts の設定を追加

manifest.json に、Content Scriptsに関する設定を追加します。

ここでは、 content_scripts.js （がビルドされて作られる content_scripts.bundle.js を、 https://www.google.com/* にマッチするページで有効にするようにしてみます。

// src/manifest.json

- "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
+ "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
+ "content_scripts": [
+   {
+     "matches": ["https://www.google.com/*"],
+     "js": ["content_scripts.bundle.js"]
+   }
+ ]
}

(4) 動作結果

ギャー！バッチリ動作していますね。

作ったChrome拡張の配布の仕方

さて、ここまではChromeのデベロッパーモードを使ってあくまで開発環境として自作の拡張機能を動かしていましたが、完成したものを一般向けに配布したい場合はどうすればいいのでしょうか？

READMEに記載があるとおり、

  1. NODE_ENV=production yarn run build する
  2. /path/to/chrome-extension-webpack-boilerplate/build ディレクトリがChromeウェブストアにサブミットできる内容になっているので、公式の手順 に従って提出する

でOKです。

.crx ファイルでの配布はもう無理なの？

以前は、拡張機能画面の 拡張機能をパッケージ化 という機能から、自作の拡張機能を .crx というファイルにパッケージングして、そのファイルを拡張機能画面にドラッグ＆ドロップすることでインストールできたのですが、現在はセキュリティ強化のためにこの方法によるインストールはできなくなっているようです。

試しに .crx ファイルを作ってインストールしてみましたが、以下のように強制的にオフになってしまいました。

もし「社内向けに展開したいだけだから、Chromeウェブストアに提出するほどではないんだよな〜」というような場合は、ソースコードのディレクトリをzipで配布して、デベロッパーモードで パッケージ化されていない拡張機能を読み込む でインストールしてもらう、といった運用が必要になります。

まとめ

  • samuelsimoes/chrome-extension-webpack-boilerplate を使うとChrome拡張を簡単に自作できて便利！
  • Content Scriptsを作るときはちょっとだけ追加作業が必要
  • .crx ファイルで気軽に配布というのは現在ではできなくなっている模様
GitHubで編集を提案

Discussion