はじめに

ブラウザ拡張を作り始めると、最初に目にするのが manifest.json です。

しかし、manifest.json だけでは画面は表示されません。

実際にユーザーが操作する画面を作るために、

  • popup.html
  • popup.js

が利用できます。

ブラウザのツールバーに表示されている拡張機能のアイコンをクリックすると、小さな画面が表示されることがあります。

例えば、

  • パスワード管理ツール
  • 翻訳ツール
  • 広告ブロッカー
  • Webクリッパー

などです。

あの小さな画面が Popup（ポップアップ） です。

この記事では、

  • popupとは何か
  • popup.html の役割
  • popup.js の役割
  • 作り方
  • よくある勘違い

まで解説します。

Popupとは？

ブラウザ拡張の Popup とは、 拡張機能アイコンをクリックした時に表示される小さな画面 のことです。

イメージ：

┌─────────────┐
│ 🌐　ブラウザ            │
│                          │
│      [拡張]              │ ←クリック
└─────────────┘

      ↓

┌──────────┐
│ 設定               │
│ ボタン             │
│ 情報表示           │
└──────────┘

この画面を構成するのが、 popup.html です。

popup.html の役割

popup.html は、 Popup画面の見た目を定義するHTML です。

例えば、

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Sample Extension</title>
</head>
<body>

  <h2>Hello Extension</h2>

  <button id="btn">
    クリック
  </button>

</body>
</html>

これだけでも画面は表示できます。

このPopupを表示する為には、 manifest.json に以下を追加します。

{
  "manifest_version": 3,

  "name": "Sample Extension",

  "version": "1.0.0",

  "action": {
    "default_popup": "popup.html"
  }
}

ポイントは：

  "action": {
    "default_popup": "popup.html"
  }

の箇所です。

これによって、

拡張アイコンをクリック → popup.html を表示

となります。

popup.js の役割

popup.html は画面の構造を定義します。

しかし、ボタンを押した時の処理や、データ取得などの動きを実装するには JavaScript が必要です。

そのために使うのが、 popup.js です。

popup.html にて、popup.js を読み込むよう指定します。

popup.html

<!DOCTYPE html>
<html>
<body>

  <button id="btn">
    Click
  </button>

  <script src="popup.js"></script>

</body>
</html>

popup.js

document.getElementById("btn").addEventListener("click", () => {
    alert("クリックされました");
});

下記のように動作します。

Popup表示
↓
ボタン押下
↓
JavaScript実行
↓
アラート表示

👉 通常の HTML, Javascript の書き方と変わりありません。

popup 画面に関する注意点

popup 画面の HTML, Javascript の書き方に大きくかわりませんが、popup 画面そものについては、若干注意が必要です。

実は、ブラウザ拡張の Popup は、普通のWebページのように自由な位置・サイズで表示できるわけではありません。

理由は、ブラウザが管理している特殊なウィンドウだからです。

Popupの位置

位置は開発者が決められません。

例えば、

{
  "action": {
    "default_popup": "popup.html"
  }
}

と定義すると、

ブラウザは

拡張機能アイコン
↓
その直下（または近傍）
↓
Popup表示

を自動で行います。

イメージ：

┌───────────────────┐
│ Chrome                               │
│                                      │
│             [拡張]                   │ ←クリック
└───────────────────┘
              │
              ▼
      ┌───────────┐
      │ popup.html           │
      └───────────┘

つまり、

window.moveTo(...)

や

position: fixed;

などで、画面右上へ移動のようなことはできません。 位置はブラウザ任せです。

Popupのサイズ

こちらは少し状況が違います。

Popupのサイズは HTML と CSS のレイアウト結果で決まります。

例えば、

<body>
  <h1>Hello</h1>
</body>

だけなら、かなり小さい Popup になります。

CSSでサイズ指定する事も可能です。

例えば、

HTML

<body>
  <div class="container">
    ...
  </div>
</body>

CSS

.container {
  width: 400px;
  height: 300px;
}

とすると、おおよそ 400 × 300 の Popup になります。

👉 ただし上限があります。

というのも、ブラウザは巨大な Popup を許可しません。

例えば、

width: 5000px;
height: 5000px;

としても、

ブラウザが適当なサイズへ制限してしまいます。

Chrome系では概ね

  • 幅 800px 前後
  • 高さ 600px 前後

を超えると制限に当たりやすいです。

実務では、300～450px 程度の幅が多いです。

例えば、

body {
  width: 380px;
  min-height: 400px;
  margin: 0;
}

など。

高さはスクロール可能です。

例えば、

body {
  width: 400px;
  height: 600px;
  overflow: auto;
}

とすれば、内容が多い場合はスクロールできます。

Popup は自動で閉じる

Popupは通常のウィンドウではありません。

他の場所をクリックすると、自動的に閉じます。

そのため、

  • 長時間の作業
  • ファイル管理
  • 大量データ表示

などには向いていません。そのような用途では Side Panel の利用を検討します。

(つづく)