เพิ่มป๊อปอัป

ป๊อปอัปคือการดำเนินการที่แสดงหน้าต่างเพื่อให้ผู้ใช้เรียกใช้ฟีเจอร์ส่วนขยายหลายรายการได้ โดยจะทริกเกอร์ด้วยแป้นพิมพ์ลัด การคลิกไอคอนการดำเนินการของส่วนขยาย หรือการเรียกใช้ browser.action.openPopup() ป๊อปอัปจะปิดโดยอัตโนมัติเมื่อผู้ใช้โฟกัสที่ส่วนใดส่วนหนึ่งของเบราว์เซอร์นอกป๊อปอัป ไม่มีวิธีเปิดป๊อปอัปไว้หลังจากที่ผู้ใช้คลิกออกไปแล้ว

รูปภาพต่อไปนี้ซึ่งถ่ายจากตัวอย่างกิจกรรมดื่มน้ำ แสดงป๊อปอัปที่แสดงตัวเลือกตัวจับเวลาที่มีให้ ผู้ใช้ตั้งปลุกได้โดยคลิกปุ่มใดปุ่มหนึ่ง

ตัวอย่างป๊อปอัป
ตัวอย่างป๊อปอัป

ลงทะเบียนป๊อปอัปในไฟล์ Manifest ภายใต้คีย์ "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'});
  }
});