popup.html / options.html

Chrome拡張機能における「popup.html」および「options.html」は、ユーザーと拡張機能がやり取りするための重要なUI（ユーザーインターフェース）を提供するHTMLファイルです。それぞれの役割と特徴を以下に詳しく説明します。

---

1. popup.html：ポップアップUI

概要

• 拡張機能のツールバーボタン（拡張アイコン）をクリックしたときに表示される小さなウィンドウの内容を定義するHTMLファイル。

• ユーザーが拡張機能を素早く操作するための簡易なインターフェース。

特徴

• ファイルは manifest.json の "action" または "browser_action"（Manifest V2）内で指定される。

• 画面サイズに制限があり、一般的には 幅: 最大800px、高さ: 最大600px。

• JavaScriptやCSSを組み合わせて動的なUIを構築可能。

• 表示中は独自のJavaScriptスクリプト（例：popup.js）を実行可能だが、background.js や content_script.js とはスコープが異なる。

manifest.json 記述例（Manifest V3）

json
{
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  }
}

主な用途

• 現在のタブに対する操作（例：情報の抽出、設定の切り替え）

• 一時的なユーザー入力や状態表示（例：ON/OFFトグル）

---

2. options.html：オプション設定ページ

概要

• 拡張機能の詳細な設定項目を提供するためのHTMLページ。

• chrome://extensions の拡張機能管理画面に「拡張機能のオプション」リンクとして表示される。

特徴

• ファイルは manifest.json の "options_page" または "options_ui"（V3）内で指定される。

• 通常のWebページのように自由なレイアウトが可能で、設定内容を保存・読み込みするために chrome.storage API を使用するのが一般的。

• 表示サイズの制限はなく、CSSやJavaScriptを自由に使用できる。

manifest.json 記述例（Manifest V3）

json
{
  "options_ui": {
    "page": "options.html",
    "open_in_tab": true
  }
}

主な用途

• 永続的なユーザー設定（例：通知の有無、カスタムスタイル、データ保存）

• 多言語切り替え、ショートカットキーの設定

---

比較表

---

補足

• 両方のHTMLは、ユーザー体験を高めるためにCSS・JavaScriptと併用することが前提です。

• オプションページはchrome.storageと組み合わせて、状態を永続化させることが基本設計となっています。