การดำเนินการ ไอคอน และปุ่มแถบเครื่องมือ
กำหนดค่าการดำเนินการของส่วนขยาย ได้แก่ ไอคอนแถบเครื่องมือ ป้าย ตัวชื่อแบบไดนามิก และพฤติกรรมเมื่อคลิกใน Manifest V3
การดำเนินการ ไอคอน และปุ่มแถบเครื่องมือ เป็นบทเรียน Browser Extensions Development (Chrome & Edge) ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Browser Extensions Development (Chrome & Edge) และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Browser Extensions Development (Chrome & Edge) มีบทเรียนทั้งหมด 4 บทเรียน
บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ
The Action API
The action is your extension's toolbar button. In Manifest V3 it is configured under the action key and controlled at runtime with chrome.action.
It is the primary entry point users see and click.
{
"action": {
"default_title": "My Tool",
"default_icon": "icons/icon16.png"
}
}Default Icon Sizes
Provide multiple icon resolutions so the button looks sharp on standard and high-DPI displays.
{
"action": {
"default_icon": {
"16": "icons/icon16.png",
"32": "icons/icon32.png"
}
}
}Popup vs No Popup
If you set default_popup, clicking the button opens that page. If you omit it, the click fires an onClicked event instead.
You cannot use both: a popup intercepts the click.
chrome.action.onClicked.addListener((tab) => {
console.log('Button clicked on tab ' + tab.id)
})Setting a Badge
A badge is a small label drawn over the icon, perfect for counts or status. Set its text with setBadgeText.
chrome.action.setBadgeText({ text: '5' })Badge Colors
Customize the badge background to convey meaning, like red for errors or green for success.
chrome.action.setBadgeBackgroundColor({ color: '#d32f2f' })Updating the Title Dynamically
The title is the tooltip shown on hover. Update it at runtime to reflect current state.
chrome.action.setTitle({ title: 'Logged in as Alice' })Per-Tab Customization
Most action methods accept a tabId so each tab can show a different icon, badge, or title.
chrome.action.setBadgeText({ tabId: 42, text: 'ON' })Enabling and Disabling
Use enable and disable to gray out the button when your extension cannot act on the current page.
chrome.action.disable()
// later, when usable again:
chrome.action.enable()Changing the Icon at Runtime
Swap the icon to reflect state, such as active versus inactive, using setIcon.
chrome.action.setIcon({ path: 'icons/active32.png' })Reacting From the Service Worker
Action logic belongs in your background service worker so it works even when no popup is open. Combine onClicked with other events to drive behavior.
chrome.action.onClicked.addListener(async (tab) => {
await chrome.action.setBadgeText({ tabId: tab.id, text: 'OK' })
})Designing Good Action UX
Keep the button meaningful: show a badge only when there is something worth noticing, and update the title to communicate state. Avoid noisy, constantly changing badges.
Quick Check
Test your grasp of the action API.
Recap
You configured the toolbar action:
- Declared icons and an optional
default_popup - Handled clicks with
onClicked - Set badge text and color
- Updated titles and icons per tab
- Enabled or disabled the button
The action is your extension's front door, so make it clear and responsive.
เรียนรู้ JavaScript ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 12
- บทเรียน
- 48
คำถามที่พบบ่อย
บทเรียน “การดำเนินการ ไอคอน และปุ่มแถบเครื่องมือ” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การดำเนินการ ไอคอน และปุ่มแถบเครื่องมือ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Browser Extensions Development (Chrome & Edge) ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Browser Extensions Development (Chrome & Edge) มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การดำเนินการ ไอคอน และปุ่มแถบเครื่องมือ”
กำหนดค่าการดำเนินการของส่วนขยาย ได้แก่ ไอคอนแถบเครื่องมือ ป้าย ตัวชื่อแบบไดนามิก และพฤติกรรมเมื่อคลิกใน Manifest V3 คุณปฏิบัติ Browser Extensions Development (Chrome & Edge) ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Browser Extensions Development (Chrome & Edge) หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Browser Extensions Development (Chrome & Edge) บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “การดำเนินการ ไอคอน และปุ่มแถบเครื่องมือ” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Browser Extensions Development (Chrome & Edge) นี้ได้ไหม
ได้ บทเรียน Browser Extensions Development (Chrome & Edge) ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ทำความเข้าใจโครงสร้าง Manifest V3
- เว็บเวิร์กเกอร์บริการเบื้องหลัง
- สิทธิ์และการจับคู่โฮสต์
- การดำเนินการ ไอคอน และปุ่มแถบเครื่องมือ