chrome-extension-boilerplate-react-vite について
Chrome 拡張機能を開発するための React、Vite、TypeScript のボイラープレートです。開発・ビルド環境と、ビルドした拡張機能を Chrome に読み込む手順を用意しています。
主な機能
- 01React インターフェース
- 02Vite ビルド環境
- 03TypeScript 対応
- 04pnpm によるセットアップ
活用シーン
- 01Chrome 拡張機能プロジェクトの開始
- 02React と TypeScript による拡張機能の開発
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/chrome-extension-boilerplate-react-viteを入力して読み込まれたか確認します。
詳細
Chrome 拡張機能ボイラープレート
React + Vite + TypeScript を使用した Chrome 拡張機能のボイラープレートです。
技術スタック
- フレームワーク：React
- ビルドツール：Vite
- 言語：TypeScript
- パッケージマネージャー：pnpm
セットアップ
1. テンプレートをクローンする
git clone --depth 1 https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite.git .
ディレクトリが空でない場合：
git clone --depth 1 https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite.git _temp_template
mv _temp_template/* _temp_template/.* . 2>/dev/null || true
rm -rf _temp_template
2. Git の履歴を削除する（任意）
rm -rf .git
git init
3. 依存関係をインストールする
pnpm install
ビルド
pnpm build
開発
pnpm dev
拡張機能の読み込み
- 拡張機能をビルドします
- Chrome を開き、
chrome://extensions/に移動します - 「デベロッパーモード」を有効にします
- 「パッケージ化されていない拡張機能を読み込む」をクリックし、
distフォルダーを選択します
コメント
Markdown 対応