添加弹出式窗口

弹出式窗口是一种操作，可显示一个窗口，让用户调用多个扩展功能。它可以通过键盘快捷键、点击扩展程序的 action 图标或调用 browser.action.openPopup() 来触发。当用户将浏览器焦点移到弹出式窗口之外的某个部分时，弹出式窗口会自动关闭。用户点击其他位置后，无法保持弹出式窗口处于打开状态。

下图摘自喝水事件示例，显示了一个显示可用定时器选项的弹出式窗口。用户点击其中一个按钮即可设置闹钟。

弹出式窗口示例。
一个弹出式窗口示例。

在清单中注册 "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'});
  }
});