拡張機能のフォルダ構成例

Chrome拡張機能の開発では、拡張機能のファイルは特定の構成に従ってディレクトリ内に配置されます。以下に、**拡張機能のフォルダ構成の基本例（Manifest V3 対応）**を示し、それぞれの役割について詳しく説明します。

フォルダ構成の例

pgsql
my-extension/
├── manifest.json
├── background.js
├── content.js
├── popup.html
├── popup.js
├── options.html
├── options.js
├── icons/
│   ├── icon16.png
│   ├── icon48.png
│   └── icon128.png
└── styles/
    └── popup.css

各ファイルとフォルダの役割

manifest.json

  • 拡張機能の定義ファイルで、拡張機能の名前、バージョン、使用する権限、スクリプトのエントリポイントなどを記述します。

  • Manifest V3では "manifest_version": 3 を指定し、background は "service_worker" によって記述します。

background.js

  • 拡張機能のバックグラウンド処理を担当します。通知の処理やイベントリスナー、APIとの通信などが記述されます。

  • Manifest V3では service worker として非同期に動作します。

content.js

  • 対象のウェブページに挿入されるスクリプトで、DOMの操作や情報の抽出などを行います。

  • 実行タイミングや対象ページは manifest に content_scripts として指定します。

popup.html

  • 拡張機能アイコンをクリックしたときに表示されるポップアップ画面のHTMLです。

  • UIの定義とともに、必要に応じて popup.js を読み込みます。

popup.js

  • popup.html にバインドされるJavaScriptで、ポップアップ内のイベント処理やデータ取得を行います。

options.html

  • 拡張機能の**設定画面（オプションページ）**のHTMLです。manifest.jsonの options_page に設定します。

options.js

  • オプションページ内で設定を保存・読み込みするJavaScriptです。chrome.storage APIなどを使用します。

icons/

  • 拡張機能のアイコン画像を格納するフォルダです。

  • 通常、16px, 48px, 128px のPNG画像を用意し、それぞれ manifest.json に指定します。

styles/

  • CSSファイルなどのスタイルシートをまとめるフォルダです。ポップアップやオプションページの装飾に使用されます。

補足

  • 開発中は、Chromeの「拡張機能」ページ（chrome://extensions/）から「パッケージ化されていない拡張機能を読み込む」でフォルダ全体を読み込みます。

  • ディレクトリ内の構成はプロジェクトの規模に応じてカスタマイズできますが、manifest.json は必須です。

生成日：2025/05/18