オプション
家 Skill ブラウザの自動化 chrome-extensions

Manifest V3のベストプラクティスに従ってChrome拡張機能を作成し、公開します。ユーザーがChromeブラウザ拡張機能やアドオン、またはChrome拡張機能APIに関連するあらゆるものの作成、修正、デバッグ、理解を依頼した際には、このスキルを活用してください。以下のキーワードが含まれる場合に動作します:‘Chrome extension’、‘browser extension’、‘manifest.json’、‘content script’、(ブラウザの文脈における)‘service worker’、(Chrome拡張機能の文脈における)‘popup’、‘side panel’、‘chrome.* API’、‘declarativeNetRequest’、‘omnibox’、(拡張機能の文脈における)‘context menu’。

...すべて拡張します
10
更新された時間 2026年8月26日

Chrome拡張機能について

Manifest V3を使用して本番品質のChrome拡張機能を構築し、Chromeウェブストアに公開するためのガイドです。このガイドは、コンテンツスクリプト、サービスワーカー、ポップアップ、サイドパネル、declarativeNetRequest、オムニボックス、コンテキストメニュー、ユーザースクリプトといったChromeブラウザ拡張機能やchrome.* APIの作成、修正、デバッグ、理解に関わる作業や、権限の根拠説明やプライバシーポリシーといったウェブストアへの公開作業において常に参照されます。

構築部分では、拡張機能が正常に動作しない最も一般的な原因に対処するための必須ルールがまとめられています。例えば、実際に存在するアイコンファイルのみを参照すること(またはアイコンを全く指定しないこと)、サイドパネルを開くための明示的なトリガーを設定すること(default_pathだけでは開かない)、拡張機能のCSPによりevalやインラインスクリプトがブロックされているためサンドボックス化されたiframe内でのみコードを実行すること、tab.urlを読む前にtabs権限を宣言すること、.then()チェーンの代わりに常にasync/awaitを使用すること、メインスレッドのブロックを避けるためにコンテンツスクリプト内でのDOM操作をバッチ処理すること、サービスワーカーは一時的な存在であるため変数に状態を保存しないこと(setTimeoutの代わりにchrome.storageやchrome.alarmsを使用すること)などが挙げられます。さらに、manifestキーを用いてchrome.identity OAuthの拡張機能IDを安定させる方法、コンテキストメニュー操作後にユーザーにフィードバックを返す方法、サービスワーカー、ポップアップ、サイドパネルすべてでExtension-available LanguageModel(Prompt API)を利用する方法、chrome.actionを使用する前にmanifestにアクションキーを記載することなども規定されています。

微細なManifest V3の問題をデバッグするのではなく、初回実行時から正常に動作し審査を通過する拡張機能を作成したい場合にこのガイドを活用してください。各ルールでは、動作しないコードと正しいコードを対比させ、アイコン、サイドパネル、CSPサンドボックス、タブ管理、コンテンツスクリプト、サービスワーカー、認証/アイデンティティ、コンテキストメニュー、Prompt APIに関する詳細な参考資料へのリンクも示されています。また、拡張機能の準備、審査却下への対応、権限の根拠説明の作成、プライバシーポリシーの起草など、初回構築からウェブストアへの掲載までの全ライフサイクルにわたって役立つ内容も含まれています。

よくある質問

このスキルはいつ使うべきですか?

Chrome拡張機能やChrome Extensions APIの作成、修正、デバッグ、理解、または権限の根拠説明やプライバシーポリシーを含むChromeウェブストアへの公開時に使用します。

manifestで定義したにもかかわらずサイドパネルが開かないのはなぜですか?

side_panel.default_pathを指定しただけではサイドパネルは開きません。アクションのクリック時やポップアップのボタンでchrome.sidePanel.open()のようなトリガーを追加するか、openPanelOnActionClickを設定する必要があります。

拡張機能の状態が失われるのはなぜですか?

サービスワーカーは一時的な存在で、約30秒間操作がないと終了してしまうため、変数に保存された状態は失われます。そのため、chrome.storageに状態を保存し、各イベント時にchrome.alarmsを使用してsetTimeout/setIntervalの代わりにそれを読み込む必要があります。

拡張機能のCSPの制約の中で動的コードを実行するにはどうすればよいですか?

拡張機能のCSPではeval、new Function、インラインスクリプトがブロックされているため、manifestのサンドボックス機能とpostMessageを組み合わせてサンドボックス化されたiframe内でのみコードを実行するか、別のオリジンを持つBlob URLやsrcdocを使用してコードを実行します。

Prompt APIについても対応していますか?

はい。LanguageModel APIは追加の権限なしでサービスワーカー、ポップアップ、サイドパネルで動作し、ウェブ上では利用できないLanguageModel.params()も拡張機能では利用可能です。

全ファイル

23ファイルreferences/extensions/context-menus.md1.8 KB表示references/extensions/auth-identity.md3.9 KB表示references/extensions/declarative-net-request.md2.7 KB表示references/extensions/message-passing.md4.1 KB表示references/extensions/api-calling.md2.1 KB表示references/extensions/csp-sandbox.md4.7 KB表示references/extensions/media-capture.md4.7 KB表示references/extensions/prompt-api.md3.7 KB表示references/extensions/tab-management.md3.7 KB表示SKILL.md25.5 KB表示references/extensions/content-scripts.md3.4 KB表示references/extensions/devtools.md2.8 KB表示references/extensions/omnibox.md1.8 KB表示references/extensions/side-panel.md4.4 KB表示references/webstore/chromewebstore-template.md5.6 KB表示references/webstore/review-checklist.md6.8 KB表示references/extensions/icons.md2.7 KB表示references/extensions/popup-ui.md2.3 KB表示references/extensions/storage.md1.9 KB表示references/webstore/store-listing.md7.8 KB表示references/extensions/service-worker.md4.5 KB表示references/extensions/user-scripts.md9.1 KB表示references/webstore/privacy-policy.md4.1 KB表示

chrome-extensionsをインストール

該当するスキルファイルをダウンロードし、.claude/skills/ ディレクトリに展開してください。

ZIPをダウンロード

リポジトリをクローンし、スキルファイルをプロジェクトにコピーしてください。

git clone # Copy SKILL.md to your .claude/skills/ directory

コピー コピー
クイックセットアップ: スキルフォルダを .claude/skills/ にコピーしてください。Claudeは自動的にそのスキルを検出し、使用します。

関連スキル

playwright-cli
更新された時間 2026年6月29日
frontend-testing-best-practices
更新された時間 2026年7月7日
Playwright Browser Automation
更新された時間 2026年6月29日
playwright-generate-test
更新された時間 2026年6月29日
OR