菜单
Chrome/ブラウザ拡張機能開発の包括的ガイド。WXTフレームワーク、Manifest V3、Chrome API、テスト手法をカバー。Use when: ブラウザ拡張機能を作成・修正する時。Triggers on 'ブラウザ拡張機能', 'Chrome拡張', 'browser extension', 'WXT', 'content script', 'service worker'.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
基于 SOC 职业分类
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/aktsmm/Agent-Skills --skill chrome-extension-dev命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
Set up and operate customer workspaces: route customer updates, record meetings, track questions and actions, manage workstreams, and prepare handoffs. Use when creating or maintaining a customer workspace, processing meeting notes or updates, reviewing next actions, or preparing a handoff. Triggers: customer workspace, 顧客ワークスペース, inbox 追加, 議事録管理, 案件更新, 宿題管理, 引き継ぎ.
Reflect reusable learnings into the current workspace / repository design and automation assets (.github/**, AGENTS.md, repo scripts/tasks). Use when running a workspace/repo retro from CLI or Scout. Detects whether a project folder exists and, if not, asks before creating one. Triggers on "retro workspace", "repo retro", "workspace cleanup", "ワークスペース知見反映".
Business operations workspace setup with workIQ integration. Creates report generation, task management, and customer management system. Use when: setting up new workspace, initializing biz-ops environment, creating business management system.
| name | chrome-extension-dev |
| description | Chrome/ブラウザ拡張機能開発の包括的ガイド。WXTフレームワーク、Manifest V3、Chrome API、テスト手法をカバー。Use when: ブラウザ拡張機能を作成・修正する時。Triggers on 'ブラウザ拡張機能', 'Chrome拡張', 'browser extension', 'WXT', 'content script', 'service worker'. |
| argument-hint | 作りたい拡張機能、困っている API、対象ファイル |
| user-invocable | true |
| license | CC BY-NC-SA 4.0 |
| metadata | {"author":"yamapan (https://github.com/aktsmm)"} |
ブラウザ拡張機能開発の包括的ガイド。
| カテゴリ | 推奨 |
|---|---|
| フレームワーク | 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 | 用途 | 権限 |
|---|---|---|
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 に設定されている