คำอธิบาย
ใช้ chrome.action
API เพื่อควบคุมไอคอนของส่วนขยายในแถบเครื่องมือ Google Chrome
ความพร้อมใช้งาน
ไฟล์ Manifest
หากต้องการใช้ chrome.action
API ให้ระบุ "manifest_version"
เป็น 3
และรวม
คีย์ "action"
ในไฟล์ Manifest
{
"name": "Action Extension",
...
"action": {
"default_icon": { // optional
"16": "images/icon16.png", // optional
"24": "images/icon24.png", // optional
"32": "images/icon32.png" // optional
},
"default_title": "Click Me", // optional, shown in tooltip
"default_popup": "popup.html" // optional
},
...
}
คีย์ "action"
(พร้อมกับคีย์ย่อย) เป็นแบบไม่บังคับ เมื่อไม่ได้รวมไว้ ส่วนขยายของคุณจะยังคงแสดงในแถบเครื่องมือเพื่อให้สามารถเข้าถึงเมนูของส่วนขยาย ด้วยเหตุนี้ เราขอแนะนำให้คุณใส่คีย์ "action"
และ "default_icon"
เป็นอย่างน้อยเสมอ
แนวคิดและการใช้งาน
ส่วนต่างๆ ของ UI
Icon
ไอคอนนี้เป็นรูปภาพหลักบนแถบเครื่องมือสำหรับส่วนขยาย และตั้งค่าโดยแป้น "default_icon"
ใน
คีย์ "action"
ของไฟล์ Manifest ของคุณ ไอคอนต้องมีขนาดกว้างและสูง 16 พิกเซลที่ไม่ขึ้นอยู่กับอุปกรณ์ (DIP)
คีย์ "default_icon"
คือพจนานุกรมขนาดต่างๆ สำหรับเส้นทางรูปภาพ Chrome ใช้ไอคอนเหล่านี้
เพื่อเลือกว่าจะใช้ขนาดรูปภาพใด หากไม่พบรายการที่ตรงกันทั้งหมด Chrome จะเลือก
พร้อมใช้งานและปรับขนาดให้พอดีกับรูปภาพ ซึ่งอาจส่งผลต่อคุณภาพของรูป
เนื่องจากอุปกรณ์ที่มีตัวประกอบสเกลที่พบไม่บ่อย เช่น 1.5 เท่าหรือ 1.2 เท่าเริ่มมีมากขึ้น
ทั่วไป เราขอแนะนำให้คุณระบุขนาดสำหรับไอคอนหลายๆ ขนาด ยัง
รองรับส่วนขยายของคุณในอนาคตจากการเปลี่ยนแปลงขนาดการแสดงผลไอคอนที่อาจเกิดขึ้น อย่างไรก็ตาม
หากระบุเพียงขนาดเดียว ก็สามารถตั้งค่าคีย์ "default_icon"
เป็น
สตริงที่มีเส้นทางไปยังไอคอนเดียวแทนพจนานุกรม
คุณยังสามารถโทรหา action.setIcon()
เพื่อตั้งค่าไอคอนของส่วนขยายแบบเป็นโปรแกรมได้
โดยการระบุเส้นทางรูปภาพอื่นหรือระบุไอคอนที่สร้างแบบไดนามิกโดยใช้ Canvas ของ HTML
เอลิเมนต์ หรือหากตั้งค่าจาก Service Worker ของส่วนขยาย ฟังก์ชันนอกหน้าจอ
Canvas API
const canvas = new OffscreenCanvas(16, 16);
const context = canvas.getContext('2d');
context.clearRect(0, 0, 16, 16);
context.fillStyle = '#00FF00'; // Green
context.fillRect(0, 0, 16, 16);
const imageData = context.getImageData(0, 0, 16, 16);
chrome.action.setIcon({imageData: imageData}, () => { /* ... */ });
สำหรับส่วนขยายที่แพ็กไว้ (ติดตั้งจากไฟล์ .crx) รูปภาพอาจอยู่ในรูปแบบส่วนใหญ่ที่ Blink เครื่องมือแสดงภาพแสดงผลได้ ซึ่งรวมถึง PNG, JPEG, BMP, ICO และอื่นๆ SVG ไม่รองรับ ส่วนขยายที่คลายการแพคข้อมูลต้องใช้รูปภาพ PNG
เคล็ดลับเครื่องมือ (ชื่อ)
เคล็ดลับเครื่องมือหรือชื่อ จะปรากฏเมื่อผู้ใช้ชี้เมาส์ไว้เหนือไอคอนส่วนขยายใน แถบเครื่องมือ ฟีเจอร์ดังกล่าวยังรวมอยู่ในข้อความที่เข้าถึงได้โดยโปรแกรมอ่านหน้าจอเมื่อปุ่ม โฟกัส
เคล็ดลับเครื่องมือเริ่มต้นได้รับการตั้งค่าโดยใช้ช่อง "default_title"
ของคีย์ "action"
ใน manifest.json
คุณยังตั้งค่าแบบเป็นโปรแกรมได้โดยโทรหา action.setTitle()
ป้าย
การดำเนินการจะแสดง "ป้าย" หรือไม่ก็ได้ — ข้อความวางซ้อนบนไอคอน ซึ่งช่วยให้คุณ อัปเดตการดำเนินการเพื่อแสดงข้อมูลเล็กน้อยเกี่ยวกับสถานะของส่วนขยาย เช่น ตัวนับ ป้ายมีส่วนประกอบที่เป็นข้อความและสีพื้นหลัง เนื่องจากพื้นที่มีจำกัด เราขอแนะนำให้ข้อความป้ายใช้อักขระไม่เกิน 4 ตัว
หากต้องการสร้างป้าย ให้ตั้งค่าป้ายแบบเป็นโปรแกรมโดยโทรหา action.setBadgeBackgroundColor()
และ
action.setBadgeText()
ไม่มีการตั้งค่าป้ายเริ่มต้นในไฟล์ Manifest ค่าสีของป้าย
อาจเป็นอาร์เรย์ของจำนวนเต็ม 4 ค่าที่อยู่ระหว่าง 0 ถึง 255 ซึ่งรวมกันเป็นสี RGBA ของค่า
ป้ายหรือสตริงที่มีค่าสี CSS
chrome.action.setBadgeBackgroundColor(
{color: [0, 255, 0, 0]}, // Green
() => { /* ... */ },
);
chrome.action.setBadgeBackgroundColor(
{color: '#00FF00'}, // Also green
() => { /* ... */ },
);
chrome.action.setBadgeBackgroundColor(
{color: 'green'}, // Also, also green
() => { /* ... */ },
);
ป๊อปอัป
ป๊อปอัปของการทำงานจะแสดงขึ้นเมื่อผู้ใช้คลิกปุ่มการทำงานของส่วนขยายใน แถบเครื่องมือ ป๊อปอัปอาจประกอบด้วยเนื้อหา HTML ใดก็ได้ที่คุณต้องการและจะปรับขนาดให้พอดีโดยอัตโนมัติ เนื้อหาในนั้น ป๊อปอัปต้องมีขนาดระหว่าง 25x25 ถึง 800x600 พิกเซล
ในตอนแรก พร็อพเพอร์ตี้ "default_popup"
จะตั้งค่าป๊อปอัปไว้ในคีย์ "action"
ในส่วน
manifest.json
ไฟล์ หากมี พร็อพเพอร์ตี้นี้ควรชี้ไปยังเส้นทางที่เกี่ยวข้องภายในส่วนขยาย
ไดเรกทอรี นอกจากนี้ยังอัปเดตแบบไดนามิกให้ชี้ไปยังเส้นทางที่เกี่ยวข้องอื่นๆ ได้โดยใช้
action.setPopup()
วิธี
กรณีการใช้งาน
สถานะต่อแท็บ
การทำงานของส่วนขยายอาจมีสถานะแตกต่างกันในแต่ละแท็บ วิธีกำหนดค่าสำหรับผู้ใช้แต่ละราย
ให้ใช้พร็อพเพอร์ตี้ tabId
ในเมธอดการตั้งค่าของ API action
ตัวอย่างเช่น หากต้องการ
ตั้งค่าข้อความป้ายสำหรับแท็บที่เฉพาะเจาะจง ให้ทำดังต่อไปนี้
function getTabId() { /* ... */}
function getTabBadge() { /* ... */}
chrome.action.setBadgeText(
{
text: getTabBadge(tabId),
tabId: getTabId(),
},
() => { ... }
);
ถ้าไม่มีการตั้งค่าพร็อพเพอร์ตี้ tabId
การตั้งค่านี้จะถือว่าเป็นการตั้งค่าส่วนกลาง เฉพาะแท็บ
มีความสำคัญมากกว่าการตั้งค่าส่วนกลาง
สถานะเปิดใช้
โดยค่าเริ่มต้น การทำงานของแถบเครื่องมือจะเปิดใช้ (คลิกได้) ในทุกแท็บ คุณสามารถควบคุมตัวเลือกนี้ได้โดยใช้
action.enable()
และ action.disable()
เมธอด การตั้งค่านี้จะส่งผลต่อป๊อปอัป (หากมี) หรือ
ระบบได้ส่งเหตุการณ์ action.onClicked
รายการไปยังส่วนขยายแล้ว จะไม่ส่งผลต่อการแสดงข้อมูลของการดำเนินการดังกล่าว
ในแถบเครื่องมือ
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงวิธีทั่วไปที่เราใช้การดำเนินการในส่วนขยาย หากต้องการลองใช้ API นี้ ติดตั้งตัวอย่าง Action API จาก chrome-extension-samples ที่เก็บได้
แสดงป๊อปอัป
เป็นเรื่องปกติที่ส่วนขยายจะแสดงป๊อปอัปเมื่อผู้ใช้คลิกการทำงานของส่วนขยาย ถึง
ติดตั้งสิ่งนี้ในส่วนขยายของคุณเอง ประกาศป๊อปอัปใน manifest.json
และระบุ
เนื้อหาที่ Chrome ควรแสดงในป๊อปอัป
// manifest.json
{
"name": "Action popup demo",
"version": "1.0",
"manifest_version": 3,
"action": {
"default_title": "Click to view a popup",
"default_popup": "popup.html"
}
}
<!-- popup.html -->
<!DOCTYPE html>
<html>
<head>
<style>
html {
min-height: 5em;
min-width: 10em;
background: salmon;
}
</style>
</head>
<body>
<p>Hello, world!</p>
</body>
</html>
แทรกสคริปต์เนื้อหาเมื่อคลิก
รูปแบบที่พบบ่อยสำหรับส่วนขยายคือการเปิดเผยคุณลักษณะหลักโดยใช้ การดำเนินการ ตัวอย่างต่อไปนี้แสดงรูปแบบดังกล่าว เมื่อผู้ใช้คลิกการทำงาน ส่วนขยาย แทรกสคริปต์เนื้อหาลงในหน้าปัจจุบัน สคริปต์เนื้อหาจะแสดงการแจ้งเตือนให้ยืนยัน ว่าทุกอย่างทำงานได้ตามที่คาดไว้
// manifest.json
{
"name": "Action script injection demo",
"version": "1.0",
"manifest_version": 3,
"action": {
"default_title": "Click to show an alert"
},
"permissions": ["activeTab", "scripting"],
"background": {
"service_worker": "background.js"
}
}
// background.js
chrome.action.onClicked.addListener((tab) => {
chrome.scripting.executeScript({
target: {tabId: tab.id},
files: ['content.js']
});
});
// content.js
alert('Hello, world!');
จำลองการดำเนินการด้วย declarativeContent
ตัวอย่างนี้แสดงให้เห็นว่าตรรกะพื้นหลังของส่วนขยายสามารถ (ก) ปิดใช้การดำเนินการโดยค่าเริ่มต้น และ (ข) ได้อย่างไร ใช้ declarativeContent เพื่อเปิดใช้การดำเนินการกับเว็บไซต์ที่เฉพาะเจาะจง
// service-worker.js
// Wrap in an onInstalled callback to avoid unnecessary work
// every time the service worker is run
chrome.runtime.onInstalled.addListener(() => {
// Page actions are disabled by default and enabled on select tabs
chrome.action.disable();
// Clear all rules to ensure only our expected rules are set
chrome.declarativeContent.onPageChanged.removeRules(undefined, () => {
// Declare a rule to enable the action on example.com pages
let exampleRule = {
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: {hostSuffix: '.example.com'},
})
],
actions: [new chrome.declarativeContent.ShowAction()],
};
// Finally, apply our new array of rules
let rules = [exampleRule];
chrome.declarativeContent.onPageChanged.addRules(rules);
});
});
ประเภท
OpenPopupOptions
พร็อพเพอร์ตี้
-
windowId
หมายเลข ไม่บังคับ
รหัสของหน้าต่างที่เปิดป๊อปอัปการดำเนินการ ค่าเริ่มต้นจะเป็นหน้าต่างที่กำลังทำงานอยู่ในขณะนี้ หากไม่ได้ระบุ
TabDetails
พร็อพเพอร์ตี้
-
tabId
หมายเลข ไม่บังคับ
รหัสของแท็บที่ต้องการค้นหาสถานะ หากไม่ได้ระบุแท็บ ระบบจะแสดงผลสถานะไม่เจาะจงแท็บ
UserSettings
ชุดการตั้งค่าที่ผู้ใช้ระบุซึ่งเกี่ยวข้องกับการทำงานของส่วนขยาย
พร็อพเพอร์ตี้
-
isOnToolbar
boolean
ไอคอนการทำงานของส่วนขยายปรากฏบนหน้าต่างเบราว์เซอร์หรือไม่ แถบเครื่องมือระดับบนสุด (เช่น ผู้ใช้ 'ปักหมุด' ส่วนขยายไว้หรือไม่)
เมธอด
disable()
chrome.action.disable(
tabId?: number,
callback?: function,
)
ปิดใช้การดำเนินการของแท็บ
พารามิเตอร์
-
tabId
หมายเลข ไม่บังคับ
รหัสของแท็บที่คุณต้องการแก้ไขการดำเนินการ
-
Callback
ไม่บังคับ
พารามิเตอร์
callback
มีลักษณะดังนี้() => void
การคืนสินค้า
-
คำมั่นสัญญา<โมฆะ>
รองรับคำสัญญาในไฟล์ Manifest V3 ขึ้นไป แต่จะมี Callback สำหรับ ความเข้ากันได้แบบย้อนหลัง คุณไม่สามารถใช้ทั้ง 2 อย่างในการเรียกใช้ฟังก์ชันเดียวกันได้ จะมีการแก้ไขด้วยประเภทเดียวกันที่ส่งไปยัง Callback
enable()
chrome.action.enable(
tabId?: number,
callback?: function,
)
เปิดใช้การดำเนินการสำหรับแท็บ การดำเนินการจะเปิดไว้โดยค่าเริ่มต้น
พารามิเตอร์
-
tabId
หมายเลข ไม่บังคับ
รหัสของแท็บที่คุณต้องการแก้ไขการดำเนินการ
-
Callback
ไม่บังคับ
พารามิเตอร์
callback
มีลักษณะดังนี้() => void
การคืนสินค้า
-
คำมั่นสัญญา<โมฆะ>
รองรับคำสัญญาในไฟล์ Manifest V3 ขึ้นไป แต่จะมี Callback สำหรับ ความเข้ากันได้แบบย้อนหลัง คุณไม่สามารถใช้ทั้ง 2 อย่างในการเรียกใช้ฟังก์ชันเดียวกันได้ จะมีการแก้ไขด้วยประเภทเดียวกันที่ส่งไปยัง Callback
getBadgeBackgroundColor()
chrome.action.getBadgeBackgroundColor(
details: TabDetails,
callback?: function,
)
รับสีพื้นหลังของการดำเนินการ
พารามิเตอร์
-
รายละเอียด
-
Callback
ไม่บังคับ
พารามิเตอร์
callback
มีลักษณะดังนี้(result: ColorArray) => void
-
ผลลัพธ์
-
การคืนสินค้า
-
Promise<browserAction.ColorArray>
รองรับคำสัญญาในไฟล์ Manifest V3 ขึ้นไป แต่จะมี Callback สำหรับ ความเข้ากันได้แบบย้อนหลัง คุณไม่สามารถใช้ทั้ง 2 อย่างในการเรียกใช้ฟังก์ชันเดียวกันได้ จะมีการแก้ไขด้วยประเภทเดียวกันที่ส่งไปยัง Callback
getBadgeText()
chrome.action.getBadgeText(
details: TabDetails,
callback?: function,
)
รับข้อความป้ายของการดำเนินการ หากไม่ได้ระบุแท็บ ระบบจะแสดงข้อความป้ายแบบไม่เจาะจงแท็บ หากเปิดใช้ displayActionCountAsBadgeText ระบบจะแสดงผลข้อความตัวยึดตำแหน่งเว้นแต่จะมีสิทธิ์ declarativeNetRequestFeedback หรือมีข้อความป้ายเฉพาะแท็บ
พารามิเตอร์
-
รายละเอียด
-
Callback
ไม่บังคับ
พารามิเตอร์
callback
มีลักษณะดังนี้(result: string) => void
-
ผลลัพธ์
สตริง
-
การคืนสินค้า
-
คำมั่นสัญญา<สตริง>
รองรับคำสัญญาในไฟล์ Manifest V3 ขึ้นไป แต่จะมี Callback สำหรับ ความเข้ากันได้แบบย้อนหลัง คุณไม่สามารถใช้ทั้ง 2 อย่างในการเรียกใช้ฟังก์ชันเดียวกันได้ จะมีการแก้ไขด้วยประเภทเดียวกันที่ส่งไปยัง Callback
getBadgeTextColor()
chrome.action.getBadgeTextColor(
details: TabDetails,
callback?: function,
)
รับสีข้อความของการดำเนินการ
พารามิเตอร์
-
รายละเอียด
-
Callback
ไม่บังคับ
พารามิเตอร์
callback
มีลักษณะดังนี้(result: ColorArray) => void
-
ผลลัพธ์
-
การคืนสินค้า
-
Promise<browserAction.ColorArray>
รองรับคำสัญญาในไฟล์ Manifest V3 ขึ้นไป แต่จะมี Callback สำหรับ ความเข้ากันได้แบบย้อนหลัง คุณไม่สามารถใช้ทั้ง 2 อย่างในการเรียกใช้ฟังก์ชันเดียวกันได้ จะมีการแก้ไขด้วยประเภทเดียวกันที่ส่งไปยัง Callback
getPopup()
chrome.action.getPopup(
details: TabDetails,
callback?: function,
)
รับเอกสาร HTML ที่ตั้งค่าเป็นป๊อปอัปสำหรับการดำเนินการนี้
พารามิเตอร์
-
รายละเอียด
-
Callback
ไม่บังคับ
พารามิเตอร์
callback
มีลักษณะดังนี้(result: string) => void
-
ผลลัพธ์
สตริง
-
การคืนสินค้า
-
คำมั่นสัญญา<สตริง>
รองรับคำสัญญาในไฟล์ Manifest V3 ขึ้นไป แต่จะมี Callback สำหรับ ความเข้ากันได้แบบย้อนหลัง คุณไม่สามารถใช้ทั้ง 2 อย่างในการเรียกใช้ฟังก์ชันเดียวกันได้ จะมีการแก้ไขด้วยประเภทเดียวกันที่ส่งไปยัง Callback
getTitle()
chrome.action.getTitle(
details: TabDetails,
callback?: function,
)
รับชื่อการดำเนินการ
พารามิเตอร์
-
รายละเอียด
-
Callback
ไม่บังคับ
พารามิเตอร์
callback
มีลักษณะดังนี้(result: string) => void
-
ผลลัพธ์
สตริง
-
การคืนสินค้า
-
คำมั่นสัญญา<สตริง>
รองรับคำสัญญาในไฟล์ Manifest V3 ขึ้นไป แต่จะมี Callback สำหรับ ความเข้ากันได้แบบย้อนหลัง คุณไม่สามารถใช้ทั้ง 2 อย่างในการเรียกใช้ฟังก์ชันเดียวกันได้ จะมีการแก้ไขด้วยประเภทเดียวกันที่ส่งไปยัง Callback
getUserSettings()
chrome.action.getUserSettings(
callback?: function,
)
แสดงการตั้งค่าที่ผู้ใช้ระบุซึ่งเกี่ยวข้องกับการทำงานของส่วนขยาย
พารามิเตอร์
-
Callback
ไม่บังคับ
พารามิเตอร์
callback
มีลักษณะดังนี้(userSettings: UserSettings) => void
-
userSettings
-
การคืนสินค้า
-
Promise<UserSettings>
รองรับคำสัญญาในไฟล์ Manifest V3 ขึ้นไป แต่จะมี Callback สำหรับ ความเข้ากันได้แบบย้อนหลัง คุณไม่สามารถใช้ทั้ง 2 อย่างในการเรียกใช้ฟังก์ชันเดียวกันได้ จะมีการแก้ไขด้วยประเภทเดียวกันที่ส่งไปยัง Callback
isEnabled()
chrome.action.isEnabled(
tabId?: number,
callback?: function,
)
ระบุว่ามีการเปิดใช้การดำเนินการของส่วนขยายสำหรับแท็บ (หรือทั่วโลกหากไม่ได้ระบุ tabId
) การดำเนินการที่เปิดใช้โดยใช้เพียง declarativeContent
จะแสดงค่า "เท็จ" เสมอ
พารามิเตอร์
-
tabId
หมายเลข ไม่บังคับ
รหัสของแท็บที่คุณต้องการตรวจสอบสถานะที่เปิดใช้
-
Callback
ไม่บังคับ
พารามิเตอร์
callback
มีลักษณะดังนี้(isEnabled: boolean) => void
-
isEnabled
boolean
เป็นจริงหากเปิดใช้การดำเนินการของส่วนขยายอยู่
-
การคืนสินค้า
-
Promise<boolean>
รองรับคำสัญญาในไฟล์ Manifest V3 ขึ้นไป แต่จะมี Callback สำหรับ ความเข้ากันได้แบบย้อนหลัง คุณไม่สามารถใช้ทั้ง 2 อย่างในการเรียกใช้ฟังก์ชันเดียวกันได้ จะมีการแก้ไขด้วยประเภทเดียวกันที่ส่งไปยัง Callback
openPopup()
chrome.action.openPopup(
options?: OpenPopupOptions,
callback?: function,
)
เปิดป๊อปอัปของส่วนขยาย ระหว่าง Chrome 118 กับ Chrome 126 ตัวเลือกนี้ใช้ได้เฉพาะกับส่วนขยายที่ติดตั้งตามนโยบายเท่านั้น
พารามิเตอร์
-
ตัวเลือก
OpenPopupOptions ไม่บังคับ
ระบุตัวเลือกสำหรับเปิดป๊อปอัป
-
Callback
ไม่บังคับ
พารามิเตอร์
callback
มีลักษณะดังนี้() => void
การคืนสินค้า
-
คำมั่นสัญญา<โมฆะ>
รองรับคำสัญญาในไฟล์ Manifest V3 ขึ้นไป แต่จะมี Callback สำหรับ ความเข้ากันได้แบบย้อนหลัง คุณไม่สามารถใช้ทั้ง 2 อย่างในการเรียกใช้ฟังก์ชันเดียวกันได้ จะมีการแก้ไขด้วยประเภทเดียวกันที่ส่งไปยัง Callback
setBadgeBackgroundColor()
chrome.action.setBadgeBackgroundColor(
details: object,
callback?: function,
)
กำหนดสีพื้นหลังของป้าย
พารามิเตอร์
-
รายละเอียด
ออบเจ็กต์
-
สี
string | ColorArray
อาร์เรย์ของจำนวนเต็ม 4 ตัวในช่วง [0,255] ที่ประกอบกันเป็นสี RGBA ของป้าย เช่น สีแดงทึบแสงคือ
[255, 0, 0, 255]
และอาจเป็นสตริงที่มีค่า CSS ก็ได้ โดยสีแดงทึบแสงคือ#FF0000
หรือ#F00
-
tabId
หมายเลข ไม่บังคับ
จำกัดการเปลี่ยนแปลงเมื่อเลือกแท็บใดแท็บหนึ่ง รีเซ็ตโดยอัตโนมัติเมื่อปิดแท็บ
-
-
Callback
ไม่บังคับ
พารามิเตอร์
callback
มีลักษณะดังนี้() => void
การคืนสินค้า
-
คำมั่นสัญญา<โมฆะ>
รองรับคำสัญญาในไฟล์ Manifest V3 ขึ้นไป แต่จะมี Callback สำหรับ ความเข้ากันได้แบบย้อนหลัง คุณไม่สามารถใช้ทั้ง 2 อย่างในการเรียกใช้ฟังก์ชันเดียวกันได้ จะมีการแก้ไขด้วยประเภทเดียวกันที่ส่งไปยัง Callback
setBadgeText()
chrome.action.setBadgeText(
details: object,
callback?: function,
)
ตั้งค่าข้อความป้ายสำหรับการดำเนินการ ป้ายจะแสดงที่ด้านบนของไอคอน
พารามิเตอร์
-
รายละเอียด
ออบเจ็กต์
-
tabId
หมายเลข ไม่บังคับ
จำกัดการเปลี่ยนแปลงเมื่อเลือกแท็บใดแท็บหนึ่ง รีเซ็ตโดยอัตโนมัติเมื่อปิดแท็บ
-
ข้อความ
string ไม่บังคับ
โดยสามารถใส่อักขระกี่ตัวก็ได้ แต่เว้นวรรคได้ประมาณ 4 ตัว หากส่งสตริงว่าง (
''
) ไป ระบบจะล้างข้อความป้าย หากระบุtabId
และtext
เป็นค่าว่าง ระบบจะล้างข้อความของแท็บที่ระบุและตั้งค่าเริ่มต้นเป็นข้อความป้ายส่วนกลาง
-
-
Callback
ไม่บังคับ
พารามิเตอร์
callback
มีลักษณะดังนี้() => void
การคืนสินค้า
-
คำมั่นสัญญา<โมฆะ>
รองรับคำสัญญาในไฟล์ Manifest V3 ขึ้นไป แต่จะมี Callback สำหรับ ความเข้ากันได้แบบย้อนหลัง คุณไม่สามารถใช้ทั้ง 2 อย่างในการเรียกใช้ฟังก์ชันเดียวกันได้ จะมีการแก้ไขด้วยประเภทเดียวกันที่ส่งไปยัง Callback
setBadgeTextColor()
chrome.action.setBadgeTextColor(
details: object,
callback?: function,
)
กำหนดสีข้อความของป้าย
พารามิเตอร์
-
รายละเอียด
ออบเจ็กต์
-
สี
string | ColorArray
อาร์เรย์ของจำนวนเต็ม 4 ตัวในช่วง [0,255] ที่ประกอบกันเป็นสี RGBA ของป้าย เช่น สีแดงทึบแสงคือ
[255, 0, 0, 255]
และอาจเป็นสตริงที่มีค่า CSS ก็ได้ โดยสีแดงทึบแสงคือ#FF0000
หรือ#F00
หากไม่ตั้งค่านี้จะทำให้ระบบเลือกสีโดยอัตโนมัติ ซึ่งจะตัดกับสีพื้นหลังของป้ายเพื่อให้ข้อความมองเห็นได้ สีที่มีค่าอัลฟ่าเทียบเท่ากับ 0 จะไม่มีการตั้งค่าและจะแสดงข้อผิดพลาด -
tabId
หมายเลข ไม่บังคับ
จำกัดการเปลี่ยนแปลงเมื่อเลือกแท็บใดแท็บหนึ่ง รีเซ็ตโดยอัตโนมัติเมื่อปิดแท็บ
-
-
Callback
ไม่บังคับ
พารามิเตอร์
callback
มีลักษณะดังนี้() => void
การคืนสินค้า
-
คำมั่นสัญญา<โมฆะ>
รองรับคำสัญญาในไฟล์ Manifest V3 ขึ้นไป แต่จะมี Callback สำหรับ ความเข้ากันได้แบบย้อนหลัง คุณไม่สามารถใช้ทั้ง 2 อย่างในการเรียกใช้ฟังก์ชันเดียวกันได้ จะมีการแก้ไขด้วยประเภทเดียวกันที่ส่งไปยัง Callback
setIcon()
chrome.action.setIcon(
details: object,
callback?: function,
)
ตั้งค่าไอคอนสำหรับการดำเนินการ ไอคอนดังกล่าวอาจระบุเป็นเส้นทางไปยังไฟล์ภาพหรือเป็นข้อมูลพิกเซลจากองค์ประกอบ Canvas หรือเป็นพจนานุกรมของไอคอนอย่างใดอย่างหนึ่งก็ได้ ต้องระบุเส้นทางหรือพร็อพเพอร์ตี้ imageData
พารามิเตอร์
-
รายละเอียด
ออบเจ็กต์
-
ข้อมูลรูปภาพ
ImageData | ออบเจ็กต์ไม่บังคับ
ออบเจ็กต์ ImageData หรือพจนานุกรม {size -> ImageData} แสดงไอคอนที่จะตั้งค่า หากระบุไอคอนเป็นพจนานุกรม ระบบจะเลือกรูปภาพจริงที่จะใช้โดยขึ้นอยู่กับความหนาแน่นของพิกเซลของหน้าจอ หากจำนวนพิกเซลรูปภาพที่มีขนาดพอดีกับหนึ่งหน่วยพื้นที่หน้าจอเท่ากับ
scale
ระบบจะเลือกรูปภาพที่มีขนาดscale
* n โดย n คือขนาดของไอคอนใน UI ต้องระบุรูปภาพอย่างน้อยหนึ่งภาพ โปรดทราบว่า "details.imageData = foo" เทียบเท่ากับ 'details.imageData = {'16': foo}' -
เส้นทาง
string | ออบเจ็กต์ไม่บังคับ
เส้นทางรูปภาพแบบสัมพัทธ์หรือพจนานุกรม {size -> อย่างใดอย่างหนึ่ง Relative image path} [เส้นทางรูปภาพสัมพัทธ์] ที่ชี้ไปยังไอคอนที่จะตั้งค่า หากระบุไอคอนเป็นพจนานุกรม ระบบจะเลือกรูปภาพจริงที่จะใช้โดยขึ้นอยู่กับความหนาแน่นของพิกเซลของหน้าจอ หากจำนวนพิกเซลรูปภาพที่มีขนาดพอดีกับหนึ่งหน่วยพื้นที่หน้าจอเท่ากับ
scale
ระบบจะเลือกรูปภาพที่มีขนาดscale
* n โดย n คือขนาดของไอคอนใน UI ต้องระบุรูปภาพอย่างน้อยหนึ่งภาพ โปรดทราบว่า 'details.path = foo' เทียบเท่ากับ 'details.path = {'16': foo}' -
tabId
หมายเลข ไม่บังคับ
จำกัดการเปลี่ยนแปลงเมื่อเลือกแท็บใดแท็บหนึ่ง รีเซ็ตโดยอัตโนมัติเมื่อปิดแท็บ
-
-
Callback
ไม่บังคับ
พารามิเตอร์
callback
มีลักษณะดังนี้() => void
การคืนสินค้า
-
คำมั่นสัญญา<โมฆะ>
Chrome 96 ขึ้นไปรองรับคำสัญญาในไฟล์ Manifest V3 ขึ้นไป แต่จะมี Callback สำหรับ ความเข้ากันได้แบบย้อนหลัง คุณไม่สามารถใช้ทั้ง 2 อย่างในการเรียกใช้ฟังก์ชันเดียวกันได้ จะมีการแก้ไขด้วยประเภทเดียวกันที่ส่งไปยัง Callback
setPopup()
chrome.action.setPopup(
details: object,
callback?: function,
)
ตั้งค่าเอกสาร HTML ให้เปิดเป็นป๊อปอัปเมื่อผู้ใช้คลิกไอคอนการดำเนินการ
พารามิเตอร์
-
รายละเอียด
ออบเจ็กต์
-
ป๊อปอัป
สตริง
เส้นทางสัมพัทธ์ไปยังไฟล์ HTML ที่จะแสดงในป๊อปอัป หากตั้งค่าเป็นสตริงว่างเปล่า (
''
) ระบบจะไม่แสดงป๊อปอัป -
tabId
หมายเลข ไม่บังคับ
จำกัดการเปลี่ยนแปลงเมื่อเลือกแท็บใดแท็บหนึ่ง รีเซ็ตโดยอัตโนมัติเมื่อปิดแท็บ
-
-
Callback
ไม่บังคับ
พารามิเตอร์
callback
มีลักษณะดังนี้() => void
การคืนสินค้า
-
คำมั่นสัญญา<โมฆะ>
รองรับคำสัญญาในไฟล์ Manifest V3 ขึ้นไป แต่จะมี Callback สำหรับ ความเข้ากันได้แบบย้อนหลัง คุณไม่สามารถใช้ทั้ง 2 อย่างในการเรียกใช้ฟังก์ชันเดียวกันได้ จะมีการแก้ไขด้วยประเภทเดียวกันที่ส่งไปยัง Callback
setTitle()
chrome.action.setTitle(
details: object,
callback?: function,
)
ตั้งชื่อการดำเนินการ ซึ่งจะแสดงอยู่ในเคล็ดลับเครื่องมือ
พารามิเตอร์
-
รายละเอียด
ออบเจ็กต์
-
tabId
หมายเลข ไม่บังคับ
จำกัดการเปลี่ยนแปลงเมื่อเลือกแท็บใดแท็บหนึ่ง รีเซ็ตโดยอัตโนมัติเมื่อปิดแท็บ
-
title
สตริง
สตริงที่การดำเนินการควรแสดงเมื่อวางเมาส์เหนือ
-
-
Callback
ไม่บังคับ
พารามิเตอร์
callback
มีลักษณะดังนี้() => void
การคืนสินค้า
-
คำมั่นสัญญา<โมฆะ>
รองรับคำสัญญาในไฟล์ Manifest V3 ขึ้นไป แต่จะมี Callback สำหรับ ความเข้ากันได้แบบย้อนหลัง คุณไม่สามารถใช้ทั้ง 2 อย่างในการเรียกใช้ฟังก์ชันเดียวกันได้ จะมีการแก้ไขด้วยประเภทเดียวกันที่ส่งไปยัง Callback