팝업 추가

팝업은 사용자가 여러 확장 프로그램 기능을 호출할 수 있는 창을 표시하는 작업입니다. 단축키를 사용하거나 확장 프로그램의 작업 아이콘을 클릭하면 실행됩니다. 사용자가 팝업 외부의 브라우저 일부에 포커스를 맞추면 팝업이 자동으로 닫힙니다. 사용자가 클릭하여 팝업을 닫은 후에는 팝업을 계속 열어 둘 수 없습니다.

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