Chrome拡張機能をCreate React Appを使って作る

Chrome拡張機能を作ってみようと思いました。
とりあえずTypeScriptの方がいいかと思ったり、Reactでも使ってみるかと思いました。
検索するとスケルトン的なのを公開してくれている方もいたのですが、若干バージョン古くなってしました。
少し考えた結果、Create React App使えば良くないと思ったのでメモを残します。

Node.jsのインストール

いろいろ参考になる記事あると思うので、参考にしてインストールします。

$ node -v
v16.15.1

Create React App

表題の通りcreate-react-app使います。

$ npx create-react-app my-app --template typescript

create-react-app.dev

manifest.jsonを修正

Chrome拡張用に修正というか置き換えます。

developer.chrome.com

$ cat > public/manifest.json <<EOF
{
  "name": "__MSG_ext_name__",
  "description": "__MSG_ext_desc__",
  "version": "1.0",
  "manifest_version": 3,
  "default_locale": "ja",
  "icons": {
    "16": "logo192.png",
    "48": "logo192.png",
    "128": "logo192.png"
  },
  "action": {
    "default_popup": "index.html"
  }
}
EOF

細かい説明はドキュメントに任せますが、とりあえずindex.htmlをpopupとして使用する形にしています。popup.htmlの方がいいかもしれません。
権限とかは作成する拡張によるので、実装時に調整します。

多言語化はしないと思いますが、たまたま目についてしまったので対応しときます。

developer.chrome.com

$ mkdir -p public/_locales/{en,ja}
$ cat > public/_locales/en/messages.json <<EOF
{
  "ext_name": {
    "message": "Extension Name"
  },
  "ext_desc": {
    "message": "Extension Name"
  }
}
EOF

$ cat > public/_locales/ja/messages.json <<EOF
{
  "ext_name": {
    "message": "拡張機能の名前"
  },
  "ext_desc": {
    "message": "拡張機能の名前"
  }
}
EOF

Chrome拡張向けに微調整

他にも微調整必要ではというツッコミはなしとして

Chrome拡張には不要なファイルを削除する

$ rm public/{favicon.ico,logo512.png,robots.txt}

@types/chromeをインストール

$ npm install @types/chrome --save-dev

ビルド

$ npm run build

Chrome拡張機能の「パッケージ化されていない拡張機能を読み込む」で、buildディレクトリを指定します。
これで動くっぽいことを確認できます。

https://developer.chrome.com/docs/extensions/mv3/getstarted/#unpacked

実装

ひとまずは、App.tsxを修正して拡張機能を作っていけば良いかなと思ったところで終わりました。