【crxjs/vite-plugin】chrome-extensionとReactの速攻開発設定

crxjs/vite-pluginを使うモチベーション

chrome-extensionを作成する際、HTML、CSS、JS等を配置すれば作成できるのですが、これをReactで開発できたら、アイテムの反復表示やインタラクティブな操作を素早く実装できそうです。
それを可能にしてくれるプラグインが、crxjs/vite-pluginになります。

今回のサンプル
https://github.com/tonakai-it/extension-with-vite-sample

インストールする

pnpm create vite extension-with-vite-sample --template react-ts
cd extension-with-vite-sample && pnpm i

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

設定例

vite.config.ts

...

+ import { crx, defineManifest } from "@crxjs/vite-plugin";
+ import { manifest } from './manifest'

export default defineConfig({
  plugins: [
    react(),
+   crx({ manifest: defineManifest(manifest) })
  ],
})

manifest.tsに切り出しています。型のサポートやコメント等付けられるので、jsonよりtsにしています。satisfiesなのは、一般的な型定義方法(変数名の後の:Type)だとcrxのdefineManifestと噛み合わせが悪かったからです。

manifest.ts

export const manifest = {
  manifest_version: 3,
  name: "extension-with-vite-sample",
  version: "0.0.1",
  action: {
    default_popup: "index.html",
  },
  options_page: "option.html",
} satisfies chrome.runtime.ManifestV3

develop or build

pnpm run dev
# OR
pnpm run build

• distディレクトリをブラウザ拡張機能として読み込み