Vite + JavaScript + CRXJS で拡張機能の開発テンプレート

まずはアイコンをクリックしたらポップアップが表示されるとこまで作成しましょう。

1. Viteで初期化

terminal

npm init vite@latest

このとき初期設定をするための質問をされますので次のようにしてください。

• Project Name: sample (これは任意)
• Select a framework: Vanilla
• Select a varieant: JavaScript

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

terminal

  cd sample
  npm install

2.5 エディターなどで開く

作成したディレクトリをIDEなどで開いてください

3. crxjs をインストール

terminal

npm i -D  @crxjs/vite-plugin@beta

@crxjs/vite-plugin@betaViteユーザーのChrome拡張用プラグイン。Vite3もVite4も対応がまだなので公式サイトでもベータを使うようにとのこと。

4. vite.config.jsファイルを作成

vite.config.js

import { defineConfig } from 'vite'
import { crx } from '@crxjs/vite-plugin'
import manifest from './manifest.json'

export default defineConfig({
  plugins: [crx({ manifest })],
  //  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.jsonviteの設定ファイルを作成します。

5. manifest.jsonファイルを作成

manifest.json

{
  "manifest_version": 3,
  "name": "CRXJS Vanilla JS Example",
  "version": "1.0.0",
  "action": { "default_popup": "index.html" }
}

6. 実行

terminal

npm run dev

このコマンドを実行すると distというフォルダが作成されている。

7. 拡張機能の読み込み

chrome://extensions/
に移動して、デベロッパーモードをONにし、「パッケージ化されていない拡張機能を読み込む」をクリックし、フォルダにできた distフォルダを選択する。

8. おまけ

terminal

npm i -D @types/chrome

VSCodeを使って拡張機能の補完をしてくれる便利な拡張機能。ほぼ必須なのでインストールしてください。