Vite + React + CRXJS Vite Pluginを使ってChrome 拡張機能を作ってみる

2022年12月9日

記事内に広告を含みます

この記事には広告を含む場合があります。

記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。

こんにちは！たぬきうどんです！

私は2018年に非IT業界から未経験でエンジニアに転職し、現在までエンジニアとして働いています。

この記事ではVite + React + CRXJS Vite Pluginを使ったChrome拡張機能の開発環境構築方法についての説明をします。

Chrome拡張機能を作ってみたい！

という方はぜひ御覧ください！

CRXJS Vite Pluginとは？
開発環境構築
おわりに
参考記事

CRXJS Vite Pluginとは？

出典元: https://github.com/crxjs/chrome-extension-tools

CRXJS Vite PluginはViteでChrome 拡張機能開発する際に開発体験を向上させてくれるツールです。

HMRを使った開発体験やシンプルな構成であることが売りのようです。

開発環境構築

必要環境

Node.jsの14.18+、16+のバージョンが必要です。

基本的に本記事はVite のドキュメントとCRXJS Vite Pluginのドキュメントに従います。

１．プロジェクトの生成

今回はReact + TypeScriptで開発を進めていきます。

プロジェクト名はdev-chrome-extensionです。

それでは以下のコマンドを実行し、プロジェクトを生成していきましょう。

npm create vite dev-chrome-extension

Select a frameworkはreactを、Select a variantはreact-tsを選択します。

プロジェクトが作成できたら、プロジェクトに移動し、npm installでパッケージをインストールします。

２．CRXJS Vite Pluginのインストール

以下のコマンドでCRXJS Vite Pluginをインストールします。

npm i @crxjs/vite-plugin -D

３．`vite.config.js`へ設定追加

vite.config.jsを以下のように

vite.config.js

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
+ import { crx, defineManifest } from '@crxjs/vite-plugin'

+ const manifest = defineManifest({
+   manifest_version: 3,
+   name: 'Hello Extension',
+   version: '1.0.0',
+   action: {
+     default_popup: 'index.html',
+   },
+ })

  // https://vitejs.dev/config/
  export default defineConfig({
+   plugins: [react(), crx({ manifest })],
-   plugins: [react()],
  })

拡張機能名はHello Extensionにしておきます。