ใช้การดำเนินการ

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

ลงทะเบียนการดำเนินการ

หากต้องการใช้ browser.action API ให้เพิ่มคีย์ "action" ลงในไฟล์ manifest ของส่วนขยาย ดูคำอธิบายแบบเต็มของพร็อพเพอร์ตี้ที่ไม่บังคับของฟิลด์นี้ได้ที่ส่วนไฟล์ Manifest ของเอกสารอ้างอิง browser.action API

manifest.json:

{
  "name": "My Awesome action Extension",
 ...
  "action": {
   ...
  }
 ...
}

ตอบกลับการดำเนินการ

ลงทะเบียนตัวแฮนเดิล onClicked เมื่อผู้ใช้คลิกไอคอนการดำเนินการ ระบบจะไม่ทริกเกอร์เหตุการณ์นี้หากมีการลงทะเบียนป๊อปอัปในไฟล์ manifest.json

service-worker.js:

browser.action.onClicked.addListener((tab) => {
  browser.action.setTitle({
    tabId: tab.id,
    title: `You are on tab: ${tab.id}`});
});

เปิดใช้งานการดำเนินการแบบมีเงื่อนไข

browser.declarativeContent API ช่วยให้คุณเปิดใช้ไอคอนการดำเนินการของส่วนขยายตาม URL ของหน้าเว็บหรือเมื่อตัวเลือก CSS ตรงกับองค์ประกอบในหน้าเว็บ เมื่อปิดใช้ไอคอนการทำงานของส่วนขยาย ไอคอนจะเปลี่ยนเป็นสีเทา หากผู้ใช้คลิกไอคอนที่ปิดใช้ เมนูตามบริบทของส่วนขยายจะปรากฏขึ้น

ไอคอนการดำเนินการที่ปิดใช้อยู่

ป้ายการดำเนินการ

ป้ายคือข้อความที่จัดรูปแบบแล้วซึ่งวางไว้เหนือไอคอนการดำเนินการเพื่อระบุสิ่งต่างๆ เช่น สถานะของส่วนขยาย หรือการดำเนินการที่ผู้ใช้ต้องทำ ตัวอย่าง Drink Water จะแสดงป้ายที่มีข้อความ "เปิด" เพื่อแสดงให้ผู้ใช้เห็นว่าตั้งสัญญาณปลุกสำเร็จแล้ว และจะไม่แสดงอะไรเลยเมื่อส่วนขยายไม่มีการใช้งาน ป้ายมีอักขระได้สูงสุด 4 ตัว

ไอคอนส่วนขยายที่มีป้าย (ซ้าย) และไม่มีป้าย (ขวา)

ตั้งค่าข้อความของป้ายโดยเรียกใช้ browser.action.setBadgeText() และตั้งค่าสีพื้นหลังโดยเรียกใช้ browser.action.setBadgeBackgroundColor()

service-worker.js:

browser.action.setBadgeText({text: 'ON'});
browser.action.setBadgeBackgroundColor({color: '#4688F1'});

เคล็ดลับเครื่องมือ

ลงทะเบียนเคล็ดลับเครื่องมือในช่อง "default_title" ภายใต้คีย์ "action" ในไฟล์ manifest.json

manifest.json:

{
  "name": "Tab Flipper",
 ...
  "action": {
    "default_title": "Press Ctrl(Win)/Command(Mac)+Shift+Right/Left to flip tabs"
  }
...
}

นอกจากนี้ คุณยังตั้งค่าหรืออัปเดตเคล็ดลับเครื่องมือได้โดยการเรียกใช้ action.setTitle() หากไม่ได้ตั้งค่าเคล็ดลับเครื่องมือไว้ ระบบจะแสดงชื่อของส่วนขยาย