1. Mozilla
  2. アドオン
  3. ブラウザー拡張機能
  4. ユーザーインターフェイス
  5. ポップアップ

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

ポップアップ

ポップアップはツールバーボタンやアドレスバーボタンに関連したダイアログです。このページでは、ポップアップの一般的な説明、指定方法、デバッグ、サイズ変更、デザインについて、使用例も含めて解説しています。

ユーザーがボタンをクリックした時、ポップアップが表示されます。ポップアップの外をクリックすると、ポップアップは閉じます。ポップアップは、そこで実行しているスクリプトから window.close() を呼ぶとプログラム的に閉じられます。しかし、拡張機能の JavaScript からプログラム的に開くことはできません。つまりユーザー操作への反応としてだけ開きます。

"_execute_browser_action" と "_execute_page_action" のショートカットを使って、ポップアップを開くキーボードショートカットを定義できます。 manifest.json の commands キーの文書を見てください。

ポップアップの設定

通常のウェブページと同じく、ポップアップは HTML ファイルで定義され、 CSS や JavaScript も含めることが可能です。ただし、通常のページとは異なり、 JavaScript は WebExtension API のうち、この拡張機能が権限を持っているものすべてを使用することができます。

ポップアップの文書はポップアップが表示されるたびに読み込まれて、ポップアップが閉じるたびに解放されます。

HTML ファイルを拡張機能に入れるには、 browser_action または page_action キーを manifest.json 内の "default_popup" にて指定します。

json
  "browser_action": {
    "default_icon": "icons/beasts-32.png",
    "default_title": "Beastify",
    "default_popup": "popup/choose_beast.html"
  }

ブラウザーの UI と統一感を持たせるスタイルシートをポップアップに組み込めるようになりました。これを利用するためには、 "browser_style": true を browser_action または page_action キーで指定してください。

ポップアップにはコンテンツセキュリティポリシーがあり、リソースを読み込むことができるソースを制限したり、 eval() を使用するような安全でない行為を禁止したりすることができます。詳細はコンテンツセキュリティポリシーを参照してください。

ポップアップのデバッグ

ポップアップのマークアップと JavaScript は、アドオンデバッガーを使ってデバッグできます。しかしポップアップの自動非表示を不可として、ポップアップの外をクリックした時に隠れてしまうのを防ぐ必要があります。ポップアップのデバッグを読んでください。

ポップアップのリサイズ

ポップアップはその中身に合わせて自動的にリサイズされます。ブラウザーごとにこのアルゴリズムは違う場合があります。

Firefox では、サイズはポップアップが表示される直前に計算されて、最大で毎秒 10 回の DOM の変更があります。厳格モードの文書では、サイズは <body> 要素のレイアウトサイズに基いて計算されます。後方互換モードでは、これは <html> 要素です。 Firefox はその要素の好ましい幅を計算して、その幅にリフローして、縦のスクロールがないようにリサイズします。最大で 800x600 ピクセルの範囲でユーザーの画面に合わせられます。（Firefox 60 以前では 680px まででした。）ユーザーが拡張機能のボタンをメニューに動かしたり、ツールバーからオーバーフローした場合、ポップアップはメニューのパネル内に出てきて、固定の幅となります。

ポップアップの width を CSS で設定する際、 <body> に設定し :root には設定しないでください。

Firefox Android 57 では、ポップアップは新規タブの通常ページとして表示されます。

ポップアップのデザイン

Firefox のスタイルに適合するポップアップのウェブページをデザインする方法は、 Photon Design System のドキュメントを見てください。

例

GitHub の webextensions-examples リポジトリーには、ポップアップ付きブラウザーアクションを使う拡張機能の beastify の例があります。

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content