extension-create

Extension Create（WXT & CRXJS）

🚀 プレミアムにアップグレード https://app.extensionbooster.net/dashboard/services/extension-ai-kit からプレミアム版を入手してください。

Chrome 拡張機能プロジェクトを自動でスキャフォールドします。説明するだけでなく、ワークフローを実行してください。

ワークフロー（実行してください）

ステップ 1：ユーザーから要件を確認する

ユーザーに次の項目を確認してください。

1. 拡張機能の名前（ケバブケース、例：my-tab-manager）
2. 簡単な説明（1 文）
3. UI フレームワーク：React / Vue / Svelte / Vanilla（デフォルト：React）
4. 必要な機能（以下のリストから選択）：
   • ポップアップ UI
   • コンテンツスクリプト（ページを変更）
   • バックグラウンドサービスワーカー
   • サイドパネル
   • オプションページ
   • コンテキストメニュー
   • タブ管理 / ストレージ / アクティブなタブのみ

ステップ 2：フレームワークの選択に基づいてスキャフォルダーを選ぶ

フレームワーク	推奨スキャフォルダー	理由
React	CRXJS または WXT	CRXJS には CSUI とクイックスタートがあります
Vue	WXT	Vue を第一級でサポートしています
Svelte	WXT	Svelte を第一級でサポートしています
Vanilla TS	WXT	最も軽量なセットアップです

ステップ 3：スキャフォールドする

WXT — マルチフレームワーク対応、ファイルベースのエントリーポイント：

npx wxt@latest init <name> --template <react|vue|svelte|vanilla>
cd <name> && pnpm install

CRXJS — React を優先し、マニフェストを自動生成し、充実したクイックスタートを提供します：

# Basic React
npm create crxjs
# With Tailwind CSS
npm create crxjs
# With specific template (see https://crxjs.dev/)
npm create crxjs

クイックスタート：https://crxjs.dev/ ドキュメント全文：https://crxjs.dev/

ステップ 3：機能に応じて設定する

WXT：権限とマニフェストフィールドを wxt.config.ts で編集します。 CRXJS：vite.config.ts または manifest.json を編集します。CRXJS は Vite の設定を使ってマニフェストを処理します。

ステップ 4：エントリーポイントを作成する

選択した機能に応じて entrypoints/ にファイルを作成します（以下を参照）。

ステップ 5：セットアップを確認する

WXT：pnpm dev / pnpm build / pnpm zip CRXJS：pnpm dev / pnpm build / pnpm package（build/ に zip を作成します）

---

エントリーポイントのクイックリファレンス

機能	WXT	CRXJS
ポップアップ	entrypoints/popup/index.html + main.tsx	src/popup.html
バックグラウンド	entrypoints/background.ts	src/background.ts
コンテンツスクリプト	entrypoints/content.ts	src/content.ts
オプションページ	entrypoints/options/index.html	src/options.html
サイドパネル	entrypoints/sidepanel/index.html	src/sidepanel.html
タブページ	N/A	src/settings.html

---

wxt.config.ts テンプレート

import { defineConfig } from "wxt";

export default defineConfig({
  extensionApi: "chrome",
  modules: ["@wxt-dev/module-react"], // or vue/svelte
  manifest: {
    name: "My Extension",
    description: "What it does",
    permissions: ["storage", "activeTab"],
    host_permissions: ["<all_urls>"],
    action: { default_popup: "popup.html" },
  },
});

---

拡張機能の種類 → エントリーポイント対応表

種類	エントリーポイント	権限
ポップアップツール	popup	activeTab
ページ変更機能	content, background	activeTab または host_permissions
サイドパネルアシスタント	sidepanel, background	sidePanel, storage
タブマネージャー	popup, background	tabs, storage
コンテキストメニュー	background	contextMenus, activeTab

---

スキャフォールド後のチェックリスト

• pnpm install が完了している
• 設定に正しい権限が含まれている（WXT：wxt.config.ts / CRXJS：package.json）
• 選択した機能に必要なエントリーポイントが作成されている
• pnpm dev でエラーなく拡張機能が読み込まれる
• パッケージ化されていない拡張機能を読み込む：WXT → .output/chrome-mv3-dev / CRXJS → build/chrome-mv3-dev

---

参考資料

• references/wxt-scaffold-guide.md — CLI オプション、プロジェクト構成、設定
• references/wxt-entrypoints.md — すべてのエントリーポイントの種類、命名規則、マニフェスト生成
• references/extension-templates.md — 拡張機能の種類ごとにすぐ使えるパターン
• references/chrome-samples-reference.md — カテゴリ別の Google 公式サンプル

関連スキル

• extension-manifest — manifest.json の生成／検証
• extension-dev — 開発ワークフロー、ホットリロード、デバッグ
• extension-publish — ストアへの申請