Chrome拡張機能の主要コンポーネント

Chrome拡張（Extension）は、特定の機能をブラウザに追加するための仕組みです。主に以下の4つの要素から構成されます。

1. manifest.json：拡張の設定情報を定義するファイル
2. Popupページ：ツールバーのアイコンクリックで表示されるUI
3. Content Script：ウェブページに挿入され、DOM操作を行うスクリプト
4. Service Worker（旧Background Script）：バックグラウンドで常駐して処理を実行

manifest.json の役割

ルートディレクトリに配置される必須ファイルであり、拡張の名前やバージョン、使用するファイルのパス、権限などを記述します。Chrome拡張ではマニフェストバージョン3（MV3）が現在の標準です。

Popup ページの開発

Popupは通常のHTML/CSS/JavaScriptプロジェクトと同様に構築できます。index.html をエントリーポイントとして、独立したユーザーインターフェースを提供します。ビルド後の出力ディレクトリに基づいてパスを指定する必要があります。

Content Script の特徴と制約

Content Scriptは、指定されたページに自動的に注入されるJavaScriptファイルです。DOMの読み取りや変更が可能ですが、以下の点に注意が必要です：

• 実行コンテキストがホストページとは分離されているため、グローバル変数や関数を直接共有できない
• ホストページのJavaScript環境に干渉しない一方で、逆にその環境を利用することもできない
• CSSについては、挿入したスタイルがホストページのセレクタと競合する可能性があるため、クラス名の重複には十分配慮が必要

Service Worker によるバックグラウンド処理

MV3では、従来のbackground scriptに代わり、Service Workerが採用されています。これは持続的なプロセスではなく、必要に応じて起動・終了を繰り返すイベント駆動型の仕組みです。主な特徴：

• 明示的なページを持たない
• chrome.storage や chrome.declarativeContent など、多くのChrome APIを呼び出せる
• 許可されたホストに対して跨域リクエストを送信可能

推奨ディレクトリ構成

├── assets/
│   ├── popup.css
│   └── popup.js
├── images/
│   └── icon.png
├── scripts/
│   ├── content.js
│   └── injected.js
├── styles/
│   └── content.css
├── popup.html
├── manifest.json
└── service-worker.js

manifest.json の例（MV3対応）

{
  "name": "サンプル拡張 MV3",
  "version": "1.0.0",
  "description": "Chrome拡張の基本テンプレート",
  "manifest_version": 3,
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon.png",
      "32": "images/icon.png",
      "48": "images/icon.png",
      "128": "images/icon.png"
    },
    "default_title": "サンプル拡張"
  },
  "icons": {
    "16": "images/icon.png",
    "32": "images/icon.png",
    "48": "images/icon.png",
    "128": "images/icon.png"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "css": ["styles/content.css"],
      "js": ["scripts/content.js"],
      "run_at": "document_end"
    }
  ],
  "service_worker": "service-worker.js",
  "permissions": [
    "storage",
    "declarativeContent"
  ],
  "host_permissions": [],
  "web_accessible_resources": [
    {
      "resources": ["scripts/injected.js", "images/icon.png"],
      "matches": ["<all_urls>"]
    }
  ]
}

この設定により、すべてのURLにアクセスした際にCSSとJSが末尾で注入され、Popupはpopup.htmlから読み込まれます。また、injected.jsのようにページコンテキスト内で実行したいスクリプトは web_accessible_resources に登録する必要があります。