extension-dev

拡張機能開発

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

技術スタックを検出し、ドキュメントを探し、機能を実装してデバッグします。説明するだけではなく、ワークフローを実行してください。

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

ステップ 1：フレームワークと UI スタックを検出する

検出を実行します（references/framework-detection.md を参照）：

ls wxt.config.ts crxjs.config.ts vite.config.ts manifest.json 2>/dev/null
cat package.json | grep -E '"wxt|crxjs|crxjs|react|vue|svelte"'

見つかったファイル	フレームワーク
wxt.config.ts	WXT
package.json に crxjs がある	CRXJS
vite.config に @crxjs がある	CRXJS
ルートに manifest.json があり、上記はいずれもない	Vanilla

ステップ 2：フレームワークのドキュメントとスタイルガイドを取得する

docs-seeker スキルまたはウェブ検索を使って、検出したスタックに適したドキュメントを探します。

拡張機能フレームワークのドキュメント：

• WXT: https://wxt.dev/ | CRXJS: https://docs.crxjs.com/ | CRXJS: Vite プラグインのドキュメント
• Chrome API: https://developer.chrome.com/docs/extensions/reference/api
• 権限: https://developer.chrome.com/docs/extensions/reference/permissions-list

UI フレームワークのドキュメント（検出したフレームワークに応じて取得します）：

フレームワーク	ドキュメント	スタイルガイド
React	https://react.dev	https://react.dev/learn
Next.js	https://nextjs.org/docs	https://nextjs.org/docs/app
Vue	https://vuejs.org/guide	https://vuejs.org/style-guide
Svelte	https://svelte.dev/docs	https://svelte.dev/docs
SolidJS	https://solidjs.com/docs	https://solidjs.com/guides
Angular	https://angular.dev/guide	https://angular.dev/style-guide

コードスタイルガイド（常に従ってください）：

• TypeScript: https://google.github.io/styleguide/tsguide.html
• JavaScript: https://google.github.io/styleguide/jsguide.html

ステップ 3：機能を実装する

フレームワークの規約に従います：

• WXT：entrypoints/ にエントリーポイントを追加し、wxt.config.ts を設定します
• CRXJS：ページ／タブ／コンテンツを追加し、コンテンツ UI には CSUI を使用します
• CRXJS：標準的な Vite ＋ manifest ベースのセットアップ
• Vanilla：manifest.json を編集し、JS ファイルを直接追加します

Chrome API の使用については、references/chrome-api-quick-reference.md を確認してください。 コンテキスト間のメッセージングについては、references/message-passing-patterns.md を確認してください。

ステップ 4：デバッグする

コンテキスト固有の DevTools へのアクセス方法については、references/debugging-guide.md を参照してください。

簡易ガイド：

コンテキスト	確認方法
Service Worker	chrome://extensions → 「inspect」リンク
Content Script	ページの DevTools → Console → 拡張機能のコンテキストを選択
Popup	ポップアップを右クリック → Inspect
Options / Side panel	ページを開く → F12

ステップ 5：ホットリロードを設定する

フレームワーク	コマンド	備考
WXT	pnpm dev	完全な HMR、拡張機能を自動再読み込み
CRXJS	pnpm dev	ポップアップ／コンテンツの HMR
CRXJS	vite dev	Vite HMR
Vanilla	手動	chrome://extensions で再読み込み

---

Chrome API クイックリファレンス（トップ20）

API	用途	権限
chrome.tabs	タブの検索、作成、更新	tabs
chrome.windows	ブラウザーウィンドウの管理	windows
chrome.storage.local	データをローカルに保存	storage
chrome.storage.sync	デバイス間でデータを同期	storage
chrome.storage.session	セッション限定のデータ	storage
chrome.action	ツールバーアイコン、ポップアップ、バッジ	—
chrome.contextMenus	右クリックメニュー項目	contextMenus
chrome.sidePanel	サイドパネルの UI	sidePanel
chrome.notifications	デスクトップ通知	notifications
chrome.scripting	ページにスクリプト／CSSを挿入	scripting
chrome.runtime	メッセージング、ライフサイクル、マニフェスト	—
chrome.webRequest	ネットワークリクエストの傍受／変更	webRequest
chrome.declarativeNetRequest	宣言的な方法でリクエストをブロック／リダイレクト	declarativeNetRequest
chrome.webNavigation	ページのナビゲーションイベントを追跡	webNavigation
chrome.identity	OAuth2、Google サインイン	identity
chrome.alarms	定期タスクのスケジュール設定	alarms
chrome.commands	キーボードショートカット	commands
chrome.cookies	Cookie の読み取り／書き込み	cookies
chrome.history	ブラウザー履歴へのアクセス	history
chrome.bookmarks	ブックマークの読み取り／書き込み	bookmarks

---

メッセージパッシング（クイックパターン）

単発（ポップアップ → サービスワーカー）：

// sender
const response = await chrome.runtime.sendMessage({ type: "GET_DATA" });

// receiver (background)
chrome.runtime.onMessage.addListener((msg, sender, reply) => {
  if (msg.type === "GET_DATA") {
    reply({ data: "..." });
    return true;
  }
});

コンテンツスクリプト → サービスワーカー： 同じパターンですが、非同期の場合は return true を指定します。 タブを対象とする場合（バックグラウンド → コンテンツ）：

chrome.tabs.sendMessage(tabId, { type: "ACTION" });

パターンの詳細は references/message-passing-patterns.md をご覧ください。

---

リファレンス

• references/framework-detection.md — WXT/CRXJS/CRXJS/vanilla の検出、開発コマンド
• references/framework-styleguides.md — UI フレームワークのドキュメント、スタイルガイド、拡張機能フレームワークのドキュメント
• references/chrome-api-quick-reference.md — 権限とドキュメントへのリンクを含む30以上の API
• references/message-passing-patterns.md — TypeScript の例を含むすべてのメッセージングパターン
• references/debugging-guide.md — コンテキストごとの DevTools、よくあるエラー、ヒント

関連スキル

• extension-create — WXT で新しい拡張機能のひな形を作成
• extension-manifest — manifest.json を生成／検証
• extension-test — 拡張機能のテストを作成して実行
• extension-analyze — 既存の拡張機能コードベースを分析