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

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

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

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

manifest.json:

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

ตอบสนองต่อการดำเนินการ

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

service-worker.js

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

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

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

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

ป้ายการทำงาน

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

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

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

service-worker.js

chrome.action.setBadgeText({text: 'ON'});
chrome.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()` ได้ด้วย หากไม่ได้ตั้งค่าเคล็ดลับเครื่องมือไว้ ชื่อของส่วนขยายจะปรากฏขึ้น