chrome-extension-dev · diff
git:20261004.e1c4ed1 to git:20261020.80a7336
10 added, 8 removed. Audit A to A.
---
name: chrome-extension-dev
- description: "Chrome/ブラウザ拡張機能開発の包括的ガイド。WXTフレームワーク、Manifest V3、Chrome API、テスト手法をカバー。Use when: ブラウザ拡張機能を作成・修正する時。Triggers on 'ブラウザ拡張機能', 'Chrome拡張', 'browser extension', 'WXT', 'content script', 'service worker'."
+ description: "Chrome/ブラウザ拡張機能開発の包括的ガイド。WXTフレームワーク、Manifest V3、Chrome API、テスト手法、ストア公開（CWS API v2 での提出自動化を含む）をカバー。Use when: ブラウザ拡張機能を作成・修正・公開する時。Triggers on 'ブラウザ拡張機能', 'Chrome拡張', 'browser extension', 'WXT', 'content script', 'service worker', 'side panel', 'Chrome Web Store 公開', 'CWS 提出'."
argument-hint: "作りたい拡張機能、困っている API、対象ファイル"
user-invocable: true
license: CC BY-NC-SA 4.0
metadata:
author: yamapan (https://github.com/aktsmm)
---
# Chrome Extension Dev
ブラウザ拡張機能開発の包括的ガイド。
## When to Use
- **ブラウザ拡張機能を作りたい**、**Chrome拡張**、**browser extension**
- WXT フレームワークでの開発
- Content Script / Service Worker の実装
- Chrome API（tabs, storage, cookies等）の使用
- Manifest V3 への対応・移行
+ - Chrome Web Store への公開・更新提出（API v2 でコマンド化する場合を含む）
## 推奨技術スタック（2025/2026）
| カテゴリ | 推奨 |
| ---------------- | ------------------------------------ |
| フレームワーク | **WXT** (Vite ベース) |
| フロントエンド | React 18+ / Vue 3 / Svelte |
| 言語 | TypeScript |
| スタイリング | Tailwind CSS |
| UIコンポーネント | shadcn/ui / Mantine |
| 状態管理 | Zustand / Jotai |
| テスト | Vitest (ユニット) + Playwright (E2E) |
## WXT クイックスタート
```bash
# 新規プロジェクト作成（対話式）
npx wxt@latest init
# テンプレート指定（vanilla / vue / react / svelte / solid、全て TypeScript）
npx wxt@latest init my-extension -t react
# 開発コマンド
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
```
## 主要 Chrome API
| API | 用途 | 権限 |
| ------------------ | ------------------ | ---------------------- |
| `chrome.tabs` | タブ操作 | `tabs` / `activeTab` |
| `chrome.storage` | データ永続化 | `storage` |
| `chrome.runtime` | メッセージング | なし |
| `chrome.scripting` | スクリプト/CSS注入 | `scripting` + host権限 |
| `chrome.cookies` | Cookie操作 | `cookies` + host権限 |
| `chrome.offscreen` | DOM操作（SW内） | `offscreen` |
→ 詳細: [references/chrome-api.md](references/chrome-api.md)
## Manifest V3 制限事項
| 制限 | 対処法 |
| ------------------ | -------------------------------- |
| 30秒タイムアウト | `chrome.alarms` でウェイクアップ |
| DOMアクセス不可 | `chrome.offscreen` を使用 |
| 永続化なし | `chrome.storage.session` を使用 |
| eval()禁止 | 事前にバンドル |
| リモートコード禁止 | 全コードをバンドル |
→ 詳細: [references/manifest-v3.md](references/manifest-v3.md)
## 権限変更時の注意
> **⚠️ 重要**: `permissions`/`host_permissions`変更後は**拡張機能の再読み込みでは不十分**。
> 削除→再インストールが必要。
## Key References
- | トピック | リファレンス |
- | ---------------- | ------------------------------------------------------ |
- | Chrome API 詳細 | [references/chrome-api.md](references/chrome-api.md) |
- | Manifest V3 | [references/manifest-v3.md](references/manifest-v3.md) |
- | テスト | [references/testing.md](references/testing.md) |
- | 公開 | [references/publishing.md](references/publishing.md) |
- | よくあるパターン | [references/patterns.md](references/patterns.md) |
+ | トピック | リファレンス |
+ | --------------------------- | ------------------------------------------------------ |
+ | Chrome API 詳細 | [references/chrome-api.md](references/chrome-api.md) |
+ | Manifest V3 | [references/manifest-v3.md](references/manifest-v3.md) |
+ | テスト | [references/testing.md](references/testing.md) |
+ | 公開 | [references/publishing.md](references/publishing.md) |
+ | 提出の自動化（CWS API v2） | [references/cws-api-v2.md](references/cws-api-v2.md) |
+ | よくあるパターン | [references/patterns.md](references/patterns.md) |
## Done Criteria
- [ ] WXT プロジェクト構成が正しい
- [ ] 必要な権限が `wxt.config.ts` に設定されている
- [ ] Manifest V3 制限を考慮した実装
- [ ] 開発モードで動作確認済み
- [ ] ビルドエラーがない
## External Resources
- [WXT 公式](https://wxt.dev)
- [Chrome Extension Docs](https://developer.chrome.com/docs/extensions)
- [Chrome API Reference](https://developer.chrome.com/docs/extensions/reference)