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

การดำเนินการคือสิ่งที่เกิดขึ้นเมื่อผู้ใช้คลิกไอคอนแถบเครื่องมือ ซึ่งโดยปกติจะเรียกว่าไอคอนการทำงานของส่วนขยาย การดำเนินการเรียกใช้ฟีเจอร์ส่วนขยายโดยใช้ 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()` หากไม่ได้ตั้งค่าเคล็ดลับเครื่องมือไว้ ชื่อของส่วนขยายจะปรากฏขึ้น