Chrome/ブラウザ拡張機能開発の包括的ガイド。WXTフレームワーク、Manifest V3、Chrome API、テスト手法をカバー。Use when: ブラウザ拡張機能を作成・修正する時。
Triggers on 'ブラウザ拡張機能', 'Chrome拡張', 'browser extension', 'WXT', 'content script', 'service worker'.
インストールする前に、エージェントに与えられる指示の中身を確認できます。
ブラウザ拡張機能開発の包括的ガイド。
| カテゴリ | 推奨 |
|---|---|
| フレームワーク | WXT (Vite ベース) |
| フロントエンド | React 18+ / Vue 3 / Svelte |
| 言語 | TypeScript |
| スタイリング | Tailwind CSS |
| UIコンポーネント | shadcn/ui / Mantine |
| 状態管理 | Zustand / Jotai |
| テスト | Vitest (ユニット) + Playwright (E2E) |
# 新規プロジェクト作成（対話式）
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
| 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
| 制限 | 対処法 |
|---|---|
| 30秒タイムアウト | chrome.alarms でウェイクアップ |
| DOMアクセス不可 | chrome.offscreen を使用 |
| 永続化なし | chrome.storage.session を使用 |
| eval()禁止 | 事前にバンドル |
| リモートコード禁止 | 全コードをバンドル |
→ 詳細: references/manifest-v3.md
⚠️ 重要:
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 に設定されているまだレビューはありません。使ってみた感想をお寄せください。
概要と使いどころ
Design, review, and debug agent workflows, and decide when a request should use a prompt, instruction, skill, agent, or hook before escalating to multi-agent design. Use for .agent.md / .instructions.md / .prompt.md / AGENTS.md work, workflow architecture, orchestration planning, scheduled automation model allocation, or when agent workflows may be overkill. Triggers on 'agent workflow', 'create agent', 'automation models', 'ワークフロー設計', 'orchestrator'.
Design, run, and review fair performance, token, and cost comparisons across GitHub Copilot CLI, Codex CLI, and direct model APIs. Use for AI CLI benchmark, Copilot vs Codex, prompt-cache diagnosis, cache read/write analysis, fresh-process latency measurement, token-cost comparison, or when a benchmark must separate provider caching from local CLI caches.
日本語の概要は準備中です。原文の説明を表示しています。
Analyze historical VS Code GitHub Copilot Chat sessions by model, reasoning effort, AIU, time, reliability, workflow behavior, and external quality evidence, or safely prune workspace-scoped local chat history by age. Use for session analysis, repeated-task retrospectives, model evaluation, cost/performance analysis, and old session cleanup.
日本語の概要は準備中です。原文の説明を表示しています。
Create reproducible animated infographic GIFs from structured data or measured results, with audience-language labels, explicit timing semantics, representative-frame QA, and a static fallback. Use when asked for GIF生成, animated infographic, 動的インフォグラフィック, 結果が流れる図, animated benchmark, or a blog/SNS animation whose displayed metrics must remain traceable to source data.
Create polished, validated architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as explorable standalone HTML with inline SVG, dark/light themes, optional trace motion, and PNG/JPEG/WebP/SVG/WebM export. Accept plain-language requirements or pasted Mermaid flowchart, sequenceDiagram, and stateDiagram input; inspect repository evidence when the diagram must reflect real code. Use when the user asks to visualize system architecture, infrastructure, cloud/security/network topology, technical workflows, API call sequences, request lifecycles, data pipelines, ETL/ELT, data lineage, state machines, or to convert/beautify Mermaid. Also use for Archify, interactive or animated HTML diagrams, インタラクティブ図, 動く構成図. When an editable .drawio file is required, use the draw.io workflow instead and treat Archify HTML only as a supplement.
Generate ASCII-art text banners for terminals, READMEs, and CLI startup messages. Use when a user asks for an ASCII banner, text art, バナー, アスキーアート, or a decorative header for a script/README.