ポップアップを追加する

ポップアップとは、ユーザーが複数の拡張機能の機能を呼び出すことができるウィンドウを表示するアクションです。キーボード ショートカット、拡張機能のアクション アイコンのクリック、または browser.action.openPopup() の呼び出しによってトリガーされます。ユーザーがポップアップ以外のブラウザの一部にフォーカスすると、ポップアップは自動的に閉じます。ユーザーがクリックしてポップアップを閉じると、ポップアップを開いたままにすることはできません。

次の図は、Drink Water Event サンプルから取得したもので、利用可能なタイマー オプションを表示するポップアップを示しています。ユーザーはボタンのいずれかをクリックしてアラームを設定します。

ポップアップの例。
ポップアップの例。

マニフェストの "action" キーでポップアップを登録します。

{
 "name": "Drink Water Event",
 ...
 "action": {
   "default_popup": "popup.html"
 }
 ...
}

ポップアップは、他のほとんどのウェブページと同様に実装します。ポップアップで使用する JavaScript は別のファイルに記述する必要があります。

<html>
 <head>
   <title>Water Popup</title>
 </head>
 <body>
     <img src="./stay_hydrated.png" id="hydrateImage">
     <button id="sampleSecond" value="0.1">Sample Second</button>
     <button id="min15" value="15">15 Minutes</button>
     <button id="min30" value="30">30 Minutes</button>
     <button id="cancelAlarm">Cancel Alarm</button>
   <script src="popup.js"></script>
 </body>
</html>

action.setPopup() を呼び出して、ポップアップを動的に作成することもできます。

browser.storage.local.get('signed_in', (data) => {
  if (data.signed_in) {
    browser.action.setPopup({popup: 'popup.html'});
  } else {
    browser.action.setPopup({popup: 'popup_sign_in.html'});
  }
});