1.2 アーキテクチャ

拡張機能の構成要素

Chrome拡張機能は、複数のコンポーネントが連携して動作する。各コンポーネントは異なる実行コンテキストを持ち、特定の役割を担う。

実行コンテキストの分離

拡張機能の各コンポーネントは、セキュリティのため異なる実行コンテキストで動作する。これにより、悪意あるWebページから拡張機能を保護している。

Service Worker（バックグラウンド）

• DOMにアクセスできない
• Chrome APIsに完全アクセス可能
• イベント駆動で動作（常駐しない）
• ネットワークリクエストの傍受が可能

Content Scripts

• WebページのDOMにアクセス可能
• Chrome APIsは一部のみ利用可能
• ページのJavaScriptとは分離された環境
• window.postMessage()でページと通信可能

Popup / Options / Side Panel

• 独自のHTMLページとして動作
• Chrome APIsに完全アクセス可能
• 他のWebページとは完全に分離

典型的なファイル構成

拡張機能プロジェクトの一般的なディレクトリ構造を以下に示す。

my-extension/
├── manifest.json          # 必須：設定ファイル
├── service-worker.js      # バックグラウンド処理
├── content.js             # Webページ注入スクリプト
├── content.css            # Webページ注入スタイル
├── popup/
│   ├── popup.html         # ポップアップUI
│   ├── popup.js           # ポップアップロジック
│   └── popup.css          # ポップアップスタイル
├── options/
│   ├── options.html       # 設定画面UI
│   ├── options.js         # 設定画面ロジック
│   └── options.css        # 設定画面スタイル
├── icons/
│   ├── icon16.png         # 16x16アイコン
│   ├── icon48.png         # 48x48アイコン
│   └── icon128.png        # 128x128アイコン
└── _locales/              # 国際化対応（オプション）
    └── ja/
        └── messages.json

コンポーネント間通信

拡張機能の各コンポーネント間でデータをやり取りする主な方法を示す。