팝업 추가

팝업은 사용자가 여러 확장 프로그램 기능을 호출할 수 있는 창을 표시하는 작업입니다. 단축키를 누르거나 확장 프로그램의 작업 아이콘을 클릭하거나 chrome.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()를 호출하여 팝업을 동적으로 만들 수도 있습니다.

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'});
  }
});