ポップアップ画面（popup.html）の作成

Chrome拡張機能における「ポップアップ画面（popup.html）」は、拡張機能のツールバーアイコンをクリックしたときに表示される小さなUIウィンドウです。このポップアップ画面は通常、拡張機能の主要な操作UIや状態表示を行うために使われます。

以下に、popup.htmlの作成手順とポイントを詳しく説明します。

1. ポップアップ画面の基本構造

ファイル構成の例

pgsql
my-extension/
├── manifest.json
├── popup.html
├── popup.js
└── popup.css

popup.html の例

html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>拡張機能のポップアップ</title>
  <link rel="stylesheet" href="popup.css">
</head>
<body>
  <h1>設定</h1>
  <button id="myButton">実行</button>
  <script src="popup.js"></script>
</body>
</html>

2. manifest.jsonでの設定

manifest.jsonには、ポップアップファイルを指定する必要があります。

json
{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icon16.png",
      "48": "icon48.png",
      "128": "icon128.png"
    }
  },
  "permissions": []
}

  • action.default_popupで、表示されるHTMLファイルを指定します。

  • default_iconはツールバー上のアイコンです（任意）。

3. JavaScriptによる操作（popup.js）

ポップアップ内のボタンやフォームに対する操作は、popup.jsで記述します。

javascript
document.addEventListener('DOMContentLoaded', function () {
  document.getElementById('myButton').addEventListener('click', function () {
    alert('ボタンがクリックされました');
  });
});

このスクリプトはpopup.htmlに読み込まれることで、UIのイベントに反応します。

4. スタイルの適用（popup.css）

ポップアップは独立したHTMLドキュメントなので、通常のCSSが使えます。

css
body {
  width: 300px;
  padding: 10px;
  font-family: sans-serif;
}

button {
  padding: 5px 10px;
}

注意: ポップアップの最大サイズは通常 800x600px ですが、一般的には 300x400px以下 に収めるのが推奨されます。

5. 注意点と制限

  • ポップアップは一時的なウィンドウであり、ユーザーがクリック以外の場所を操作するとすぐに閉じます。

  • 背景での長期処理や永続的な状態管理は**background.jsやservice_worker.js**に委ね、ポップアップではUI操作とイベント送信にとどめるのが一般的です。

  • ポップアップ内でAPIやストレージにアクセスする場合、適切なパーミッション設定が必要です（例：storage）。

まとめ

要素 内容
popup.html ポップアップのUI画面本体
manifest.json default_popupにHTMLファイルを指定
popup.js ボタンクリックなどのUI操作を処理
popup.css ポップアップのスタイリング
注意点 自動的に閉じる／簡潔なUI設計が推奨される

必要であれば、BootstrapやTailwind CSSを使ったデザイン拡張も可能です。ただし、外部リソースを読み込む場合はCSP（Content Security Policy）に注意が必要です。

生成日：2025/05/18