Добавить всплывающее окно

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

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