คำอธิบาย
ใช้ 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 เท่า จะเป็นอุปกรณ์ที่พบมากกว่ากันมากขึ้น เราจึงขอแนะนำให้คุณมีหลายขนาดสำหรับไอคอน และยังทำให้ส่วนขยายไม่พอดีกับการเปลี่ยนแปลงขนาดการแสดงไอคอนที่อาจเกิดขึ้นในอนาคตอีกด้วย
คุณยังเรียกใช้ action.setIcon()
เพื่อตั้งค่าไอคอนของส่วนขยายแบบเป็นโปรแกรมได้ด้วยการระบุเส้นทางรูปภาพอื่นหรือระบุไอคอนที่สร้างแบบไดนามิกโดยใช้องค์ประกอบ Canvas HTML หรือหากตั้งค่าจากโปรแกรมทำงานของบริการส่วนขยาย ให้ใช้ API 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()
Use Case
สถานะต่อแท็บ
การทำงานของส่วนขยายอาจมีสถานะที่ต่างกันในแต่ละแท็บ หากต้องการตั้งค่าสำหรับแต่ละแท็บ ให้ใช้พร็อพเพอร์ตี้ tabId
ในเมธอดการตั้งค่าของ action
API ตัวอย่างเช่น หากต้องการตั้งค่าข้อความป้ายสำหรับแท็บใดแท็บหนึ่ง ให้ดำเนินการดังต่อไปนี้
function getTabId() { /* ... */}
function getTabBadge() { /* ... */}
chrome.action.setBadgeText(
{
text: getTabBadge(tabId),
tabId: getTabId(),
},
() => { ... }
);
หากไม่มีพร็อพเพอร์ตี้ tabId
อยู่ ระบบจะถือว่าการตั้งค่าดังกล่าวเป็นการตั้งค่าส่วนกลาง การตั้งค่าเฉพาะแท็บ
มีลำดับความสำคัญสูงกว่าการตั้งค่าส่วนกลาง
สถานะเปิดใช้
โดยค่าเริ่มต้น การทำงานของแถบเครื่องมือจะถูกเปิดใช้งาน (สามารถคลิกได้) ในทุกแท็บ คุณควบคุมการดำเนินการนี้ได้โดยใช้เมธอด action.enable()
และ action.disable()
การตั้งค่านี้จะส่งผลต่อการส่งเหตุการณ์ป๊อปอัป (หากมี) หรือ action.onClicked
ไปยังส่วนขยายเท่านั้น และจะไม่ส่งผลต่อการแสดงการดำเนินการในแถบเครื่องมือ
ตัวอย่าง
ตัวอย่างต่อไปนี้จะแสดงวิธีทั่วไปบางส่วนที่มีการใช้การดำเนินการในส่วนขยาย หากต้องการลองใช้ API นี้ ให้ติดตั้งตัวอย่าง Action API จากที่เก็บ chrome-extension-sample
แสดงป๊อปอัป
โดยปกติส่วนขยายจะแสดงป๊อปอัปเมื่อผู้ใช้คลิกการทำงานของส่วนขยาย หากต้องการใช้ตัวเลือกนี้ในส่วนขยายของคุณเอง ให้ประกาศป๊อปอัปใน 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
การคืนสินค้า
-
Promise<void>
Manifest V3 ขึ้นไปรองรับคำสัญญา แต่จะใช้โค้ดเรียกกลับเพื่อความเข้ากันได้แบบย้อนหลัง คุณไม่สามารถใช้ทั้ง 2 ฟีเจอร์ในการเรียกใช้ฟังก์ชันเดียวกันได้ คำสัญญาจะยุติด้วยประเภทเดียวกันกับที่ส่งไปยังโค้ดเรียกกลับ
enable()
chrome.action.enable(
tabId?: number,
callback?: function,
)
เปิดใช้การดำเนินการสำหรับแท็บ การทำงานจะเปิดอยู่โดยค่าเริ่มต้น
พารามิเตอร์
-
tabId
ตัวเลข ไม่บังคับ
รหัสของแท็บที่คุณต้องการแก้ไขการดำเนินการ
-
Callback
ฟังก์ชัน ไม่บังคับ
พารามิเตอร์
callback
มีลักษณะดังนี้()=>void
การคืนสินค้า
-
Promise<void>
Manifest V3 ขึ้นไปรองรับคำสัญญา แต่จะใช้โค้ดเรียกกลับเพื่อความเข้ากันได้แบบย้อนหลัง คุณไม่สามารถใช้ทั้ง 2 ฟีเจอร์ในการเรียกใช้ฟังก์ชันเดียวกันได้ คำสัญญาจะยุติด้วยประเภทเดียวกันกับที่ส่งไปยังโค้ดเรียกกลับ
getBadgeBackgroundColor()
chrome.action.getBadgeBackgroundColor(
details: TabDetails,
callback?: function,
)
เรียกดูสีพื้นหลังของการดำเนินการ
พารามิเตอร์
-
รายละเอียด
-
Callback
ฟังก์ชัน ไม่บังคับ
พารามิเตอร์
callback
มีลักษณะดังนี้(result: ColorArray)=>void
-
ผลลัพธ์
-
การคืนสินค้า
-
Promise<browserAction.ColorArray>
Manifest V3 ขึ้นไปรองรับคำสัญญา แต่จะใช้โค้ดเรียกกลับเพื่อความเข้ากันได้แบบย้อนหลัง คุณไม่สามารถใช้ทั้ง 2 ฟีเจอร์ในการเรียกใช้ฟังก์ชันเดียวกันได้ คำสัญญาจะยุติด้วยประเภทเดียวกันกับที่ส่งไปยังโค้ดเรียกกลับ
getBadgeText()
chrome.action.getBadgeText(
details: TabDetails,
callback?: function,
)
รับข้อความป้ายของการดำเนินการ หากไม่มีการระบุแท็บ ระบบจะแสดงข้อความป้ายที่ไม่ใช่แท็บเฉพาะ หากเปิดใช้ displayActionCountAsBadgeText ระบบจะแสดงผลข้อความตัวยึดตำแหน่ง เว้นแต่ว่ามีสิทธิ์ declarativeNetRequestFeedback ที่มีอยู่หรือมีการระบุข้อความป้ายสำหรับแต่ละแท็บไว้
พารามิเตอร์
-
รายละเอียด
-
Callback
ฟังก์ชัน ไม่บังคับ
พารามิเตอร์
callback
มีลักษณะดังนี้(result: string)=>void
-
ผลลัพธ์
string
-
การคืนสินค้า
-
คำสัญญา<string>
Manifest V3 ขึ้นไปรองรับคำสัญญา แต่จะใช้โค้ดเรียกกลับเพื่อความเข้ากันได้แบบย้อนหลัง คุณไม่สามารถใช้ทั้ง 2 ฟีเจอร์ในการเรียกใช้ฟังก์ชันเดียวกันได้ คำสัญญาจะยุติด้วยประเภทเดียวกันกับที่ส่งไปยังโค้ดเรียกกลับ
getBadgeTextColor()
chrome.action.getBadgeTextColor(
details: TabDetails,
callback?: function,
)
เรียกดูสีข้อความของการดำเนินการ
พารามิเตอร์
-
รายละเอียด
-
Callback
ฟังก์ชัน ไม่บังคับ
พารามิเตอร์
callback
มีลักษณะดังนี้(result: ColorArray)=>void
-
ผลลัพธ์
-
การคืนสินค้า
-
Promise<browserAction.ColorArray>
Manifest V3 ขึ้นไปรองรับคำสัญญา แต่จะใช้โค้ดเรียกกลับเพื่อความเข้ากันได้แบบย้อนหลัง คุณไม่สามารถใช้ทั้ง 2 ฟีเจอร์ในการเรียกใช้ฟังก์ชันเดียวกันได้ คำสัญญาจะยุติด้วยประเภทเดียวกันกับที่ส่งไปยังโค้ดเรียกกลับ
getPopup()
chrome.action.getPopup(
details: TabDetails,
callback?: function,
)
รับเอกสาร HTML ที่ตั้งค่าเป็นป๊อปอัปสำหรับการดำเนินการนี้
พารามิเตอร์
-
รายละเอียด
-
Callback
ฟังก์ชัน ไม่บังคับ
พารามิเตอร์
callback
มีลักษณะดังนี้(result: string)=>void
-
ผลลัพธ์
string
-
การคืนสินค้า
-
คำสัญญา<string>
Manifest V3 ขึ้นไปรองรับคำสัญญา แต่จะใช้โค้ดเรียกกลับเพื่อความเข้ากันได้แบบย้อนหลัง คุณไม่สามารถใช้ทั้ง 2 ฟีเจอร์ในการเรียกใช้ฟังก์ชันเดียวกันได้ คำสัญญาจะยุติด้วยประเภทเดียวกันกับที่ส่งไปยังโค้ดเรียกกลับ
getTitle()
chrome.action.getTitle(
details: TabDetails,
callback?: function,
)
รับชื่อของการดำเนินการ
พารามิเตอร์
-
รายละเอียด
-
Callback
ฟังก์ชัน ไม่บังคับ
พารามิเตอร์
callback
มีลักษณะดังนี้(result: string)=>void
-
ผลลัพธ์
string
-
การคืนสินค้า
-
คำสัญญา<string>
Manifest V3 ขึ้นไปรองรับคำสัญญา แต่จะใช้โค้ดเรียกกลับเพื่อความเข้ากันได้แบบย้อนหลัง คุณไม่สามารถใช้ทั้ง 2 ฟีเจอร์ในการเรียกใช้ฟังก์ชันเดียวกันได้ คำสัญญาจะยุติด้วยประเภทเดียวกันกับที่ส่งไปยังโค้ดเรียกกลับ
getUserSettings()
chrome.action.getUserSettings(
callback?: function,
)
แสดงผลการตั้งค่าที่ผู้ใช้ระบุที่เกี่ยวข้องกับการทำงานของส่วนขยาย
พารามิเตอร์
-
Callback
ฟังก์ชัน ไม่บังคับ
พารามิเตอร์
callback
มีลักษณะดังนี้(userSettings: UserSettings)=>void
-
userSettings
-
การคืนสินค้า
-
Promise<UserSettings>
Manifest V3 ขึ้นไปรองรับคำสัญญา แต่จะใช้โค้ดเรียกกลับเพื่อความเข้ากันได้แบบย้อนหลัง คุณไม่สามารถใช้ทั้ง 2 ฟีเจอร์ในการเรียกใช้ฟังก์ชันเดียวกันได้ คำสัญญาจะยุติด้วยประเภทเดียวกันกับที่ส่งไปยังโค้ดเรียกกลับ
isEnabled()
chrome.action.isEnabled(
tabId?: number,
callback?: function,
)
ระบุว่ามีการเปิดใช้การทำงานของส่วนขยายสำหรับแท็บหรือไม่ (หรือทั่วโลกหากไม่ได้ระบุ tabId
) การดำเนินการที่เปิดใช้โดยใช้เพียง declarativeContent
จะแสดงผลเป็นเท็จเสมอ
พารามิเตอร์
-
tabId
ตัวเลข ไม่บังคับ
รหัสของแท็บที่คุณต้องการตรวจสอบสถานะเปิดใช้
-
Callback
ฟังก์ชัน ไม่บังคับ
พารามิเตอร์
callback
มีลักษณะดังนี้(isEnabled: boolean)=>void
-
isEnabled
boolean
เป็นจริงหากเปิดใช้การทำงานของส่วนขยาย
-
การคืนสินค้า
-
Promise<boolean>
Manifest V3 ขึ้นไปรองรับคำสัญญา แต่จะใช้โค้ดเรียกกลับเพื่อความเข้ากันได้แบบย้อนหลัง คุณไม่สามารถใช้ทั้ง 2 ฟีเจอร์ในการเรียกใช้ฟังก์ชันเดียวกันได้ คำสัญญาจะยุติด้วยประเภทเดียวกันกับที่ส่งไปยังโค้ดเรียกกลับ
openPopup()
chrome.action.openPopup(
options?: OpenPopupOptions,
callback?: function,
)
เปิดป๊อปอัปของส่วนขยาย
พารามิเตอร์
-
ตัวเลือก
OpenPopupOptions ไม่บังคับ
ระบุตัวเลือกในการเปิดป๊อปอัป
-
Callback
ฟังก์ชัน ไม่บังคับ
พารามิเตอร์
callback
มีลักษณะดังนี้()=>void
การคืนสินค้า
-
Promise<void>
Manifest V3 ขึ้นไปรองรับคำสัญญา แต่จะใช้โค้ดเรียกกลับเพื่อความเข้ากันได้แบบย้อนหลัง คุณไม่สามารถใช้ทั้ง 2 ฟีเจอร์ในการเรียกใช้ฟังก์ชันเดียวกันได้ คำสัญญาจะยุติด้วยประเภทเดียวกันกับที่ส่งไปยังโค้ดเรียกกลับ
setBadgeBackgroundColor()
chrome.action.setBadgeBackgroundColor(
details: object,
callback?: function,
)
ตั้งค่าสีพื้นหลังของป้าย
พารามิเตอร์
-
รายละเอียด
ออบเจ็กต์
-
สี
สตริง|ColorArray
อาร์เรย์ของจำนวนเต็ม 4 ตัวในช่วง [0,255] ที่ประกอบเป็นสี RGBA ของป้าย เช่น สีแดงทึบคือ
[255, 0, 0, 255]
สามารถเป็นสตริงที่มีค่า CSS ได้โดยสีแดงทึบแสงคือ#FF0000
หรือ#F00
-
tabId
ตัวเลข ไม่บังคับ
จำกัดการเปลี่ยนแปลงไว้เฉพาะเมื่อมีการเลือกแท็บใดแท็บหนึ่ง รีเซ็ตโดยอัตโนมัติเมื่อแท็บปิดอยู่
-
-
Callback
ฟังก์ชัน ไม่บังคับ
พารามิเตอร์
callback
มีลักษณะดังนี้()=>void
การคืนสินค้า
-
Promise<void>
Manifest V3 ขึ้นไปรองรับคำสัญญา แต่จะใช้โค้ดเรียกกลับเพื่อความเข้ากันได้แบบย้อนหลัง คุณไม่สามารถใช้ทั้ง 2 ฟีเจอร์ในการเรียกใช้ฟังก์ชันเดียวกันได้ คำสัญญาจะยุติด้วยประเภทเดียวกันกับที่ส่งไปยังโค้ดเรียกกลับ
setBadgeText()
chrome.action.setBadgeText(
details: object,
callback?: function,
)
ตั้งค่าข้อความป้ายสำหรับการดำเนินการ โดยป้ายจะแสดงอยู่ที่ด้านบนของไอคอน
พารามิเตอร์
-
รายละเอียด
ออบเจ็กต์
-
tabId
ตัวเลข ไม่บังคับ
จำกัดการเปลี่ยนแปลงไว้เฉพาะเมื่อมีการเลือกแท็บใดแท็บหนึ่ง รีเซ็ตโดยอัตโนมัติเมื่อแท็บปิดอยู่
-
ข้อความ
string ไม่บังคับ
สามารถส่งผ่านอักขระกี่ตัวก็ได้ แต่จะใช้พื้นที่ได้ประมาณ 4 ตัวเท่านั้น หากส่งสตริงว่าง (
''
) ข้อความป้ายจะถูกล้างออก หากระบุtabId
และtext
เป็นค่าว่าง ระบบจะล้างข้อความของแท็บที่ระบุและใช้ข้อความป้ายส่วนกลางเป็นค่าเริ่มต้น
-
-
Callback
ฟังก์ชัน ไม่บังคับ
พารามิเตอร์
callback
มีลักษณะดังนี้()=>void
การคืนสินค้า
-
Promise<void>
Manifest V3 ขึ้นไปรองรับคำสัญญา แต่จะใช้โค้ดเรียกกลับเพื่อความเข้ากันได้แบบย้อนหลัง คุณไม่สามารถใช้ทั้ง 2 ฟีเจอร์ในการเรียกใช้ฟังก์ชันเดียวกันได้ คำสัญญาจะยุติด้วยประเภทเดียวกันกับที่ส่งไปยังโค้ดเรียกกลับ
setBadgeTextColor()
chrome.action.setBadgeTextColor(
details: object,
callback?: function,
)
ตั้งค่าสีข้อความสำหรับป้าย
พารามิเตอร์
-
รายละเอียด
ออบเจ็กต์
-
สี
สตริง|ColorArray
อาร์เรย์ของจำนวนเต็ม 4 ตัวในช่วง [0,255] ที่ประกอบเป็นสี RGBA ของป้าย เช่น สีแดงทึบคือ
[255, 0, 0, 255]
สามารถเป็นสตริงที่มีค่า CSS ได้โดยสีแดงทึบแสงคือ#FF0000
หรือ#F00
การไม่ตั้งค่านี้จะทำให้ระบบเลือกสีที่ตัดกับสีพื้นหลังของป้ายโดยอัตโนมัติเพื่อให้มองเห็นข้อความได้ ระบบจะไม่ตั้งค่าสีที่มีค่าอัลฟ่าเทียบเท่ากับ 0 และจะแสดงผลข้อผิดพลาด -
tabId
ตัวเลข ไม่บังคับ
จำกัดการเปลี่ยนแปลงไว้เฉพาะเมื่อมีการเลือกแท็บใดแท็บหนึ่ง รีเซ็ตโดยอัตโนมัติเมื่อแท็บปิดอยู่
-
-
Callback
ฟังก์ชัน ไม่บังคับ
พารามิเตอร์
callback
มีลักษณะดังนี้()=>void
การคืนสินค้า
-
Promise<void>
Manifest V3 ขึ้นไปรองรับคำสัญญา แต่จะใช้โค้ดเรียกกลับเพื่อความเข้ากันได้แบบย้อนหลัง คุณไม่สามารถใช้ทั้ง 2 ฟีเจอร์ในการเรียกใช้ฟังก์ชันเดียวกันได้ คำสัญญาจะยุติด้วยประเภทเดียวกันกับที่ส่งไปยังโค้ดเรียกกลับ
setIcon()
chrome.action.setIcon(
details: object,
callback?: function,
)
กำหนดไอคอนสำหรับการดำเนินการ คุณสามารถระบุไอคอนเป็นเส้นทางไปยังไฟล์ภาพหรือเป็นข้อมูลพิกเซลจากองค์ประกอบ Canvas หรือเป็นพจนานุกรมรายการใดรายการหนึ่งก็ได้ ต้องระบุพร็อพเพอร์ตี้ path หรือ imageData
พารามิเตอร์
-
รายละเอียด
ออบเจ็กต์
-
imageData
ImageData|object ไม่บังคับ
เป็นออบเจ็กต์ ImageData หรือพจนานุกรม {size -> ImageData} แสดงไอคอนที่จะตั้งค่า หากระบุไอคอนเป็นพจนานุกรม ระบบจะเลือกรูปภาพจริงที่จะใช้ตามความหนาแน่นพิกเซลของหน้าจอ หากจำนวนพิกเซลรูปภาพที่พอดีกับหน่วยพื้นที่หน้าจอ 1 หน่วยเท่ากับ
scale
ระบบจะเลือกรูปภาพที่มีขนาดscale
* n โดย n คือขนาดของไอคอนใน UI ต้องระบุรูปภาพอย่างน้อย 1 รูป โปรดทราบว่า 'details.imageData = foo' จะเหมือนกับ 'details.imageData = {'16': foo}' -
เส้นทาง
string|object ไม่บังคับ
เส้นทางอิมเมจแบบสัมพัทธ์หรือพจนานุกรม {size -> related image path} ที่ชี้ไปยังไอคอน เพื่อตั้งค่า หากระบุไอคอนเป็นพจนานุกรม ระบบจะเลือกรูปภาพจริงที่จะใช้ตามความหนาแน่นพิกเซลของหน้าจอ หากจำนวนพิกเซลรูปภาพที่พอดีกับหน่วยพื้นที่หน้าจอ 1 หน่วยเท่ากับ
scale
ระบบจะเลือกรูปภาพที่มีขนาดscale
* n โดย n คือขนาดของไอคอนใน UI ต้องระบุรูปภาพอย่างน้อย 1 รูป โปรดทราบว่า 'details.path = foo' จะเหมือนกับ 'details.path = {'16': foo}' -
tabId
ตัวเลข ไม่บังคับ
จำกัดการเปลี่ยนแปลงไว้เฉพาะเมื่อมีการเลือกแท็บใดแท็บหนึ่ง รีเซ็ตโดยอัตโนมัติเมื่อแท็บปิดอยู่
-
-
Callback
ฟังก์ชัน ไม่บังคับ
พารามิเตอร์
callback
มีลักษณะดังนี้()=>void
การคืนสินค้า
-
Promise<void>
Chrome 96 ขึ้นไปManifest V3 ขึ้นไปรองรับคำสัญญา แต่จะใช้โค้ดเรียกกลับเพื่อความเข้ากันได้แบบย้อนหลัง คุณไม่สามารถใช้ทั้ง 2 ฟีเจอร์ในการเรียกใช้ฟังก์ชันเดียวกันได้ คำสัญญาจะยุติด้วยประเภทเดียวกันกับที่ส่งไปยังโค้ดเรียกกลับ
setPopup()
chrome.action.setPopup(
details: object,
callback?: function,
)
กำหนดให้เปิดเอกสาร HTML เป็นป๊อปอัปเมื่อผู้ใช้คลิกไอคอนของการทำงาน
พารามิเตอร์
-
รายละเอียด
ออบเจ็กต์
-
ป๊อปอัป
string
เส้นทางที่เกี่ยวข้องไปยังไฟล์ HTML เพื่อแสดงในป๊อปอัป หากตั้งค่าเป็นสตริงว่างเปล่า (
''
) ระบบจะไม่แสดงป๊อปอัป -
tabId
ตัวเลข ไม่บังคับ
จำกัดการเปลี่ยนแปลงไว้เฉพาะเมื่อมีการเลือกแท็บใดแท็บหนึ่ง รีเซ็ตโดยอัตโนมัติเมื่อแท็บปิดอยู่
-
-
Callback
ฟังก์ชัน ไม่บังคับ
พารามิเตอร์
callback
มีลักษณะดังนี้()=>void
การคืนสินค้า
-
Promise<void>
Manifest V3 ขึ้นไปรองรับคำสัญญา แต่จะใช้โค้ดเรียกกลับเพื่อความเข้ากันได้แบบย้อนหลัง คุณไม่สามารถใช้ทั้ง 2 ฟีเจอร์ในการเรียกใช้ฟังก์ชันเดียวกันได้ คำสัญญาจะยุติด้วยประเภทเดียวกันกับที่ส่งไปยังโค้ดเรียกกลับ
setTitle()
chrome.action.setTitle(
details: object,
callback?: function,
)
ตั้งชื่อของการดำเนินการ ซึ่งจะแสดงในเคล็ดลับเครื่องมือ
พารามิเตอร์
-
รายละเอียด
ออบเจ็กต์
-
tabId
ตัวเลข ไม่บังคับ
จำกัดการเปลี่ยนแปลงไว้เฉพาะเมื่อมีการเลือกแท็บใดแท็บหนึ่ง รีเซ็ตโดยอัตโนมัติเมื่อแท็บปิดอยู่
-
title
string
สตริงที่การดำเนินการจะแสดงเมื่อวางเมาส์เหนือ
-
-
Callback
ฟังก์ชัน ไม่บังคับ
พารามิเตอร์
callback
มีลักษณะดังนี้()=>void
การคืนสินค้า
-
Promise<void>
Manifest V3 ขึ้นไปรองรับคำสัญญา แต่จะใช้โค้ดเรียกกลับเพื่อความเข้ากันได้แบบย้อนหลัง คุณไม่สามารถใช้ทั้ง 2 ฟีเจอร์ในการเรียกใช้ฟังก์ชันเดียวกันได้ คำสัญญาจะยุติด้วยประเภทเดียวกันกับที่ส่งไปยังโค้ดเรียกกลับ