Всплывающее окно — это действие, которое отображает окно, позволяющее пользователям вызывать различные функции расширения. Оно запускается сочетанием клавиш, щелчком по значку действия расширения или вызовом метода 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'});
}
});