Loading...
Loading...
Chrome/ブラウザ拡張機能開発の包括的ガイド。WXTフレームワーク、Manifest V3、Chrome API、テスト手法をカバー。Use when: ブラウザ拡張機能を作成・修正する時。Triggers on 'ブラウザ拡張機能', 'Chrome拡張', 'browser extension', 'WXT', 'content script', 'service worker'.
npx skill4agent add aktsmm/agent-skills chrome-extension-dev| カテゴリ | 推奨 |
|---|---|
| フレームワーク | WXT (Vite ベース) |
| フロントエンド | React 18+ / Vue 3 / Svelte |
| 言語 | TypeScript |
| スタイリング | Tailwind CSS |
| UIコンポーネント | shadcn/ui / Mantine |
| 状態管理 | Zustand / Jotai |
| テスト | Vitest (ユニット) + Playwright (E2E) |
# 新規プロジェクト作成
npm create wxt@latest
# テンプレート指定
npm create wxt@latest -- --template react-ts
npm create wxt@latest -- --template vue-ts
# 開発コマンド
npm run dev # HMR付き開発サーバー
npm run build # プロダクションビルド
npm run zip # ストア提出用パッケージproject/
├── entrypoints/ # 自動検出エントリポイント
│ ├── background.ts # Service Worker
│ ├── content.ts # Content Script
│ ├── popup/ # Popup UI
│ │ ├── index.html
│ │ └── main.tsx
│ └── options/ # Options Page
├── components/ # 自動インポートUIコンポーネント
├── utils/ # 自動インポートユーティリティ
├── public/ # 静的アセット（icon等）
├── wxt.config.ts # WXT設定
└── package.json| API | 用途 | 権限 |
|---|---|---|
| タブ操作 | |
| データ永続化 | |
| メッセージング | なし |
| スクリプト/CSS注入 | |
| Cookie操作 | |
| DOM操作（SW内） | |
| 制限 | 対処法 |
|---|---|
| 30秒タイムアウト | |
| DOMアクセス不可 | |
| 永続化なし | |
| eval()禁止 | 事前にバンドル |
| リモートコード禁止 | 全コードをバンドル |
⚠️ 重要:/permissions変更後は拡張機能の再読み込みでは不十分。 削除→再インストールが必要。host_permissions
| トピック | リファレンス |
|---|---|
| Chrome API 詳細 | references/chrome-api.md |
| Manifest V3 | references/manifest-v3.md |
| テスト | references/testing.md |
| 公開 | references/publishing.md |
| よくあるパターン | references/patterns.md |
wxt.config.ts