Open2

Chrome拡張機能のテンプレートを作る [TS + React + Vite]

ひげひげ

まずはアイコンをクリックしたら動くところまで作成する

1. viteで初期化

npm create vite@latest

いろいろ質問されるので次のように設定

  • プロジェクト名：sample（任意）
  • フレームワーク：React
  • プログラミング言語：TypeScript

crxjsを使うためにviteのバージョンをlatestではなく4.2を指定してインストールする。ソース。4.3だとエラーが出てしまうからだ。

2. パッケージをインストール

cd sample
npm i

3. 拡張機能開発に便利なパッケージを追加でインストール

npm i -D  @crxjs/vite-plugin@beta @types/chrome  @extend-chrome/storage

@crxjs/vite-plugin@betaViteユーザーのChrome拡張用プラグイン。Vite3もVite4も対応がまだなので公式サイトでもベータを使うようにとのこと。
@types/chrome：Chrome API で定義されてる関数やらをVSCodeで自動補完してくれる
@chrome/storage ：ストレージを扱うときに型付けをしたり、acync/await が使えるようになる。コールバック地獄から抜け出せる。
いずれも開発用でしか使わないから -D を指定する。

4. vite.config.tsを編集

import { crx, defineManifest } from "@crxjs/vite-plugin";
import { defineConfig } from "vite";

const manifest = defineManifest({
  manifest_version: 3,
  name: "CRX Example",
  version: "1.0.0",
  action: {
    default_popup: "index.html",
  },
});



// https://vitejs.dev/config/
export default defineConfig({
  plugins: [crx({ manifest })],
// serverの設定をしないと WebSocket connection to 'ws://localhost/' failed:  というエラーが出る
// https://github.com/crxjs/chrome-extension-tools/issues/746#issuecomment-1647484887
  server: {
    port: 5174,
    strictPort: true,
    hmr: {
      port: 5174,
    },
  }
});

manifest.jsonを定義してもいいかも。 JSON Schema Store というのを使えばJSONでもオートコンプリートが使えるらしい。VSCodeの拡張機能をインストールすればいいので試してみたい。やっぱ標準通り、manifest.json が定義されているのがいい。
VScodeのsetting.jsonに次のコードを書き加える。するとJSONでオートコンプリートが使えるようになる。

{
  "json.schemas": [
    {
      "fileMatch": ["manifest.json"],
      "url": "https://json.schemastore.org/chrome-manifest.json"
    }
  ]
}

https://crxjs.dev/vite-plugin/concepts/manifest#json-schema

5. ビルド

npm run dev

distフォルダが作成される。これが拡張機能のソースコード

6. 拡張機能を Chromeに追加する

  1. アドレスバーでchrome://extensions/と検索してChromeの拡張機能ページに移動
  2. 「デベロッパーモードをオン」
  3. パッケージ化されていない拡張機能を読み込む」を押下
  4. 選択ダイアログでdistフォルダを選択
ひげひげ

次に、srcディレクトリ直下に popupやoptionというディレクトリを作ってソースコードを整理していく。

下に書いているのは保留。
https://github.com/ElForastero/react-browser-extension-boilerplate/tree/master/src
このプロジェクトみたいにしたい
index.html ではなく、popup.htmlとoptions.htmlを作って管理したい。
あとコンポーネントは componentsで管理するのが筋だろう。わざわざ別フォルダとして popup と options を切り出す意味がわからない。

あとreactは1つのプロジェクトに１つのhtmlとかいうのを指定してるはずだからこういうときどうするのかわからん。一度reactの勉強をしてから再調査する。あと、githubのmanifestではoption.html、popup.htmlを指定してあるがそういうファイルはない。動的に作っているのか？だとしたらわかりにいから微妙。

いやでもこのプロジェクトのように切り出すのがいいかもな
https://github.com/fxnoob/browser-extension-boilerplate/tree/master/src

1. popup ディレクトリを作成

  1. srcディレクトリの下に popupディレクトリを作成する
  2. main.tsx、App.tsx、App.cssをpopup配下に移動

ルートディレクトリのindex.htmlはポップアップのhtmlとして使うので移動はしない。

2. ディレクトリ移動により変わってしまった読み込みパスを修正する

  1. index.htmlを書き換える
    ポップアップに関連するファイルはpopupディレクトリ配下に移動したので、index.htmlで読み込む ts ファイルもそれに合わせる
    <script type="module" src="/src/popup/main.tsx"></script>
  1. src/popup/main.tsxを書き換える
    同様に、main.tsxを移動したことによりこのファイルで読み込んでいるindex.cssのパスを書き換えます
import '../../index.css'
  1. src/popup/App.tsxを書き換える
    同様に、このファイルで読み込んでいる、react.svgのパスを書き換えます
import reactLogo from '../assets/react.svg'

3. popupディレクトリをコピーし、optionsと名前を変更する

オプションページもポップアップとほぼ同じ構造をしているので使い回します。

4. index.html と index.cssを popup配下に作成

ポップアップで使ったhtmlとcssファイルはオプションページ用に新たに作成します。