スキル browser-extension-developer
🧩

browser-extension-developer

安全 ⚙️ 外部コマンド🌐 ネットワークアクセス📁 ファイルシステムへのアクセス

WXTでクロスブラウザ拡張機能を構築する

ブラウザ拡張機能プロジェクトは、しばしばクロスブラウザの互換性と適切な国際化設定に苦労しています。このスキルは、適切なi18n構造を持つChrome、Firefox、EdgeをサポートするWXTベースの拡張機能開発のための明確なガイダンスを提供します。

対応: Claude Codex Code(CC)
📊 69 十分
1

スキルZIPをダウンロード

2

Claudeでアップロード

設定 → 機能 → スキル → スキルをアップロードへ移動

3

オンにして利用開始

テストする

「browser-extension-developer」を使用しています。 How do I structure a WXT browser extension project?

期待される結果:

  • browser/entrypoints/にbackground.tsとcontent.tsファイルを作成します
  • i18nファイルをbrowser/public/_locales/[language]/messages.jsonに配置します
  • browser/wxt.config.tsでWXTを構成します
  • ビルドされた拡張機能はbrowser/.output/chrome-mv3とfirefox-mv2に出力されます

「browser-extension-developer」を使用しています。 Add Spanish locale to my extension

期待される結果:

  • browser/public/_locales/es/フォルダを作成します
  • appDescriptionとopenWithRepomixキーを含むmessages.jsonを追加します
  • npm run build-allを実行してロケールを再生成します
  • 互換性のためにChromeとFirefoxでテストします

「browser-extension-developer」を使用しています。 What commands do I use for Firefox development?

期待される結果:

  • ホットリロード付きのライブ開発にはnpm run dev:firefoxを使用します
  • FirefoxはChromeがMV3を使用する間、MV2マニフェストを使用します
  • Firefoxストア提出用にビルドするにはnpm run build:firefoxを実行します
  • Firefox固有のAPIにはポリフィルが必要になる場合があります

セキュリティ監査

安全
v4 • 1/17/2026

This skill contains only documentation files with no executable code, network calls, or filesystem access. The static analysis flagged markdown code fences and JSON content as security issues, but evaluation confirms these are false positives. SKILL.md provides guidance for WXT-based browser extension development.

2
スキャンされたファイル
212
解析された行数
3
検出結果
4
総監査数

リスク要因

⚙️ 外部コマンド (11)
skill-report.json:16 skill-report.json:17 SKILL.md:3 SKILL.md:12-18 SKILL.md:18-22 SKILL.md:22-23 SKILL.md:23-24 SKILL.md:24-25 SKILL.md:25 SKILL.md:25-31 SKILL.md:31-35
🌐 ネットワークアクセス (1)
skill-report.json:6
📁 ファイルシステムへのアクセス (2)
skill-report.json:6 skill-report.json:126
監査者: claude 監査履歴を表示 →

品質スコア

38
アーキテクチャ
100
保守性
85
コンテンツ
22
コミュニティ
100
セキュリティ
91
仕様準拠

作れるもの

クロスブラウザワークフローのセットアップ

Chrome、Firefox、Edgeの互換性のための適切なエントリポイントを持つWXTベースの拡張機能プロジェクトを構成します。

多言語サポートの管理

文書化されたi18n構造と必須のメッセージキーに従って、新しい言語ロケールを追加します。

ビルドプロセスの標準化

ブラウザ拡張機能プロジェクトのために、チーム全体で一貫した開発およびビルドコマンドを確立します。

これらのプロンプトを試す

プロジェクト構造の概要 
WXT拡張機能のbrowser/ディレクトリ構造について説明し、バックグラウンドスクリプト、コンテンツスクリプト、構成ファイルを配置する場所を教えてください。
新しい言語の追加 
拡張機能に新しい言語ロケールを追加する方法と、必要なフォルダ構造およびメッセージキーを教えてください。
複数のブラウザ向けにビルド 
Chrome、Firefox、Edge向けに拡張機能をビルドするコマンドは何ですか？また、知っておくべき主な違いは何ですか？
開発ワークフロー 
WXTベースのブラウザ拡張機能を開発、テスト、リンするための基本的なnpmコマンドをリストしてください。

ベストプラクティス

  • バックグラウンドとコンテンツスクリプトの責任を明確に分離します
  • 新しいメッセージキーを追加する際にはすべてのロケールファイルを更新します
  • 開発中にChromeとFirefoxの両方でテストします

回避

  • .outputディレクトリ内のファイルを直接変更します
  • 互換性チェックなしでブラウザ固有のAPIを使用します
  • 必須キーが不足している不完全なロケールファイルを追加します

よくある質問

このスキルはどのブラウザをサポートしていますか？
WXTフレームワークとManifest V3を使用したChrome、Firefox、Edgeの拡張機能開発をカバーします。
主な制限事項は何ですか？
WXTベースのプロジェクトのドキュメントガイダンスに焦点を当てており、コードを生成したりストアの送信を処理したりしません。
既存の拡張機能プロジェクトで使用できますか？
はい、browser/ディレクトリレイアウトを持つWXTフレームワーク構造に従っている場合。
このスキルは私のコードやデータにアクセスしますか？
いいえ、ドキュメントガイダンスのみを提供し、ファイル、ネットワークにアクセスしたり、コードを実行したりしません。
ビルドエラーをトラブルシューティングするにはどうすればよいですか？
npmスクリプト構成、WXT設定を確認し、すべての依存関係が適切にインストールされていることを確認してください。
これは一般的な拡張機能チュートリアルとどう異なりますか？
WXTフレームワークの規則と文書化されたプロジェクト構造に特に焦点を当てています。

開発者の詳細

作成者

yamadashy

ライセンス

MIT

リポジトリ

https://github.com/yamadashy/repomix/tree/main/.claude/skills/browser-extension-developer

参照

main

ファイル構成

📄 SKILL.md