Chrome拡張の開発環境の作り方（React×Webpack）

はじめに

個人的動機

• Chrome拡張を作りたい
• Reactを触りたい

ということで、簡単に環境を作るメモ。（自分向けなので細かいことはあんまり書かない）

前提

この記事の前提

• Reactは初心者（３年くらい前にチュートリアルだけしたレベルの人）
• なんならnode.jsも同じくらい初心者
• githubアカウントがある
• IDEはVSCode
• gitはSourceTreeで操作（CLI使えって声が聞こえる・・・

準備

ボイラープレートの比較

どうやらテンプレートではなくボイラープレートというもうこれで決まりみたいなのが流行ってるらしい。
いくつかあるので、軽く検索してヒットしたもので、スターの多いものを見てみる。

• star：2.1k
• 最終更新：2018/2/4（5年前）
• スター数は申し分ないが、ちょっと古すぎる。

• start:1.1k
• 最終更新：2022/2/9(10日前！)
• webpack:v5
• react:v17
• これがベストなのでは？

他の選択肢まで評価するほどじゃないので、この良さげなやつに飛びついてみる。（lxieyangさんの方）
Read meに記載された手順に従ってインストールしてみる。

1. Check if your Node.js version is >= 14.
2. Clone this repository.
3. Change the package's name, description, and repository fields in package.json.
4. Change the name of your extension on src/manifest.json.
5. Run npm install to install the dependencies.
6. Run npm start
7. Load your extension on Chrome following:
   1. Access chrome://extensions/
   2. Check Developer mode
   3. Click on Load unpacked extension
   4. Select the build folder.
8. Happy hacking.

インストール

1. Check if your Node.js version is >= 14.

Nodeのバージョン古すぎて死んでたので、最新版にあげる。（v11.3.0→v16.14.0）
以下を参考にした。

現時点だと16.14.0がLTS最新版。

2. Clone this repository.

コピーの手順（リモートリポジトリは先に空っぽで作っておく。）

3. Change the package's name, description, and repository fields in package.json.

修正する場所

package.json>name

  "name": "chrome-extension-boilerplate-react",

package.json>description

  "description": "A chrome extension boilerplate built with React 17, Webpack 5, and Webpack Dev Server 4",

package.json>repository

  "repository": {
    "type": "git",
    "url": "https://github.com/lxieyang/chrome-extension-boilerplate-react.git"
  },

何も決まってなくても、GitのURLだけは変えておいた方が良さそう。
あと、書かれてないけど、ライセンスも気にした方がいいはず。

4. Change the name of your extension on src/manifest.json.

src/manifest.json

  "name": "Chrome Extension with React & Webpack",
  "description": "A chrome extension boilerplate built with React 17, Webpack 5, and Webpack Dev Server 4",

決まってなければ後回しでもいいけど、忘れないように。

5. Run npm install to install the dependencies.

途中タイムアウトになったりしたけど、リトライで成功。

console

8 moderate severity vulnerabilities

ちょっと怒られてるけど、moderateなので一旦無視しちゃう。

6. Run npm start

cosole

webpack 5.68.0 compiled successfully in 7149 ms

8秒くらいで起動した。
・・・起動？

なんかが出力されるのかと思ったけど、そうじゃない感じ？
よくわかんないけど、ひとまずsuccessfullyなので次に進む。
（どうやら、修正した内容をその場で反映できるようにこういう仕組みにしている様子。賢い！）

7. Load your extension on Chrome following:

1. Access chrome://extensions/
2. Check Developer mode
3. Click on Load unpacked extension
4. Select the build folder.

3は日本語だと「パッケージ化されていない拡張機能を読み込む」。
4はbuildって名前のフォルダがあるので、それを選ぶ。

8. Happy hacking.

...
..
.

急に放り出されたゾ？
あとはガイド読んで頑張りなはれや、ってことかな。
頑張るぞー

番外編

Bump node-sass from 6.0.1 to 7.0.0

なんかBOTくんがライブラリのバージョンアップを推奨してるっぽい。
8日前らしく、元リポジトリでもまだ未対応っぽい。
ちょっと知識が足らなくて今はわからないので、放置。

何やら最新に上げるとエラーが出るらしいみたいな話もあるので、一旦放置。
（多分バージョン齟齬だと思うけど、基本的にバージョン落として対応してるっぽい）

終わり

たぶんこれでできたっぽい。
実際の開発は別記事するので、この記事ではここまで。

続き：公式のGetting Startedをやってみる。

以上。