นี่คือแคตตาล็อกขององค์ประกอบอินเทอร์เฟซผู้ใช้ที่มีให้ใช้งานในส่วนขยาย แต่ละรายการจะมีข้อมูลต่อไปนี้
- รูปภาพขององค์ประกอบ (หากมี)
- คำอธิบายว่ามีไว้เพื่ออะไร
- องค์ประกอบของอินเทอร์เฟซที่เกี่ยวข้อง (หากมี)
- ลิงก์ไปยังวิธีการติดตั้งใช้งานและตัวอย่างโค้ด
องค์ประกอบเหล่านี้เป็นวิธีต่างๆ ในการเรียกใช้ฟีเจอร์ของส่วนขยาย คุณไม่จำเป็นต้องใช้ทุกรายการ อันที่จริง Use Case บางรายการอาจไม่ได้ใช้เลย เช่น ลิงก์ที่สั้นกว่าอาจดำเนินการกับ URL ที่แสดงโดยใช้แป้นพิมพ์ลัดและนำลิงก์ที่ย่อลงในคลิปบอร์ดแบบเป็นโปรแกรมได้
การดำเนินการ
การดำเนินการคือสิ่งที่เกิดขึ้นเมื่อผู้ใช้คลิกไอคอนการทำงานของส่วนขยาย การดำเนินการอาจเรียกใช้ฟีเจอร์ของส่วนขยายโดยใช้ Action API หรือเปิดป๊อปอัปที่ให้ผู้ใช้เรียกใช้ฟีเจอร์ของส่วนขยายหลายรายการได้ แจ้งให้ผู้ใช้ทราบถึงการดำเนินการโดยใช้เคล็ดลับเครื่องมือ
![ทั้งส่วนขยายที่ปักหมุดไว้และส่วนขยายที่ไม่ได้ปักหมุด](https://developer.chrome.com/static/docs/extensions/develop/ui/image/pinned-unpinned.png?hl=th)
หากต้องการเรียนรู้การสร้างการดำเนินการ โปรดดูใช้การดำเนินการ หรือตรวจสอบตัวอย่างการดำเนินการ
ไอคอนการทำงาน
ส่วนขยายต้องมีไอคอนอย่างน้อย 1 ไอคอนที่จะแสดง ผู้ใช้คลิกไอคอนเพื่อเรียกใช้การดำเนินการ ไม่ว่าการดำเนินการนั้นจะเรียกใช้ฟีเจอร์ส่วนขยายโดยใช้ Action API หรือเปิดป๊อปอัปก็ตาม
![ไอคอนสำหรับส่วนขยายพจนานุกรม Google](https://developer.chrome.com/static/docs/extensions/develop/ui/image/icon.png?hl=th)
นอกจากนี้คุณยังสามารถเพิ่มป้ายกำกับซึ่งเรียกว่า "ป้าย" ลงในไอคอนเพื่อแจ้งข้อมูลต่างๆ เช่น สถานะของส่วนขยาย หรือสิ่งที่ผู้ใช้ต้องดำเนินการ
หากต้องการเรียนรู้การสร้างการดำเนินการ โปรดดูใช้การดำเนินการ หรือตรวจสอบตัวอย่างการดำเนินการ
ป้าย
ป้ายเป็นส่วนของข้อความที่จัดรูปแบบไว้ที่ด้านบนของไอคอนการทำงานเพื่อบ่งบอกสิ่งต่างๆ เช่น สถานะของส่วนขยาย หรือสิ่งที่ผู้ใช้ต้องดำเนินการ คุณกำหนดข้อความของป้ายได้โดยเรียก chrome.action.setBadgeText() และสีแบนเนอร์โดยเรียกใช้ chrome.action.setBadgeBackgroundColor()
![ไอคอนส่วนขยายที่ไม่มีป้ายและมีป้าย](https://developer.chrome.com/static/docs/extensions/develop/ui/image/badges.png?hl=th)
หากต้องการเรียนรู้การสร้างการดำเนินการ โปรดดูใช้การดำเนินการหรือตัวอย่างน้ำดื่ม
คำสั่ง
คำสั่งคือชุดคีย์ที่จะเรียกใช้ฟีเจอร์ของส่วนขยาย กำหนดชุดคีย์ในไฟล์ Manifest.json และตอบกลับโดยใช้ Command API
ดูวิธีการใช้คําสั่งได้ที่เอกสารอ้างอิง API หรือตัวอย่าง chrome.commands
เมนูตามบริบท
เมนูตามบริบทจะปรากฏขึ้นสำหรับการคลิกอื่น (มักเรียกว่าการคลิกขวา) ของเมาส์ กำหนดเมนูตามบริบทโดยใช้ Context Menus API
![เมนูตามบริบทที่ฝังไว้](https://developer.chrome.com/static/docs/extensions/develop/ui/image/context-menu-nested.png?hl=th)
หากต้องการเรียนรู้การใช้เมนูตามบริบท ให้ดูตัวอย่างเมนูตามบริบท
แถบอเนกประสงค์
คุณสามารถโต้ตอบกับผู้ใช้โดยใช้แถบอเนกประสงค์ของ Chrome ได้ เมื่อผู้ใช้ป้อนคีย์เวิร์ดที่ส่วนขยายกำหนดในแถบอเนกประสงค์ ส่วนขยายจะควบคุมสิ่งที่ผู้ใช้เห็นในแถบอเนกประสงค์ กำหนดคีย์เวิร์ดใน manifest.json และตอบกลับโดยใช้ Omnibox API
![แถบอเนกประสงค์ของเบราว์เซอร์](https://developer.chrome.com/static/docs/extensions/develop/ui/image/omnibox.png?hl=th)
หากต้องการดูวิธีลบล้างแถบอเนกประสงค์ โปรดดูการเรียกใช้การดำเนินการจากแถบอเนกประสงค์หรือตัวอย่างเอกสารอ้างอิง API ด่วน
ลบล้างหน้าเว็บ
ส่วนขยายสามารถลบล้างหน้า Chrome แบบบิวท์อินต่อไปนี้หน้าใดหน้าหนึ่ง
- ประวัติ
- แท็บใหม่
- บุ๊กมาร์ก
![ตัวอย่างหน้าประวัติที่กำหนดเอง](https://developer.chrome.com/static/docs/extensions/develop/ui/image/custom-history.png?hl=th)
หากต้องการดูวิธีลบล้างหน้า Chrome โปรดดูลบล้างหน้า Chrome หรือตัวอย่างการลบล้าง
ป๊อปอัป
ป๊อปอัปคือการดำเนินการที่แสดงหน้าต่างเพื่อให้ผู้ใช้เรียกใช้ฟีเจอร์ของส่วนขยายหลายรายการ ป๊อปอัปจะเปิดได้ก็ต่อเมื่อผู้ใช้คลิกไอคอนการทำงาน ส่วนขยายไม่สามารถเปิดป๊อปอัปโดยใช้โปรแกรม
![ตัวอย่างป๊อปอัป](https://developer.chrome.com/static/docs/extensions/develop/ui/image/popup.png?hl=th)
หากต้องการเรียนรู้วิธีสร้างป๊อปอัป โปรดดูหัวข้อเพิ่มป๊อปอัป นอกจากนี้ คุณยังดาวน์โหลดขั้นตอนผ่านตัวอย่างการดำเนินการแบบใดแบบหนึ่งได้ด้วย
แผงด้านข้าง
แผงด้านข้างช่วยให้ผู้ใช้เรียกใช้ฟีเจอร์ของส่วนขยายไปพร้อมกับหน้าเว็บ (ดูรูปภาพ) แผงด้านข้างจะแนบกับแท็บเดียวหรือทั้งหน้าต่างได้ แผงด้านข้างจะควบคุมโดยใช้ Side Panel API
![ส่วนขยายพจนานุกรมนิยามคำว่า](https://developer.chrome.com/static/docs/extensions/develop/ui/image/dictionary-side-panel.png?hl=th)
ดูวิธีการสร้างแผงด้านข้างได้ที่กรณีการใช้งานของแผงด้านข้างหรือดูตัวอย่างแผงด้านข้าง
เคล็ดลับเครื่องมือ
เคล็ดลับเครื่องมือเป็นวิธีหนึ่งที่จะแสดงให้เห็นเมื่อผู้ใช้วางเมาส์เหนือไอคอนการทำงานของคุณ การดำเนินการของส่วนขยายทำอะไรบ้าง โดยค่าเริ่มต้น เคล็ดลับเครื่องมือจะแสดงชื่อของส่วนขยาย
![ตัวอย่างเคล็ดลับเครื่องมือสำหรับไอคอนการทำงาน](https://developer.chrome.com/static/docs/extensions/develop/ui/image/tooltip.png?hl=th)
หากต้องการดูการเพิ่มเคล็ดลับเครื่องมือ ให้ใช้สมาชิก "default_title"
ของคีย์ "action"
ของไฟล์ Manifest
DevTools
คุณเพิ่มแผงที่กำหนดเอง (แท็บที่เรียกว่าแท็บในเครื่องมือสำหรับนักพัฒนาเว็บ) ลงในเครื่องมือสำหรับนักพัฒนาเว็บได้โดยใช้ DevTools Panels API DevTools API อื่นๆ จะช่วยให้คุณตรวจสอบหน้าต่างและการจราจรของข้อมูลในเครือข่ายได้ นอกจากนี้ คุณยังปรับแต่งแผงโปรแกรมบันทึกเครื่องมือสำหรับนักพัฒนาเว็บได้ แผง Lighthouse ของ Chrome DevTools เริ่มทำงานเป็นส่วนขยายเครื่องมือสำหรับนักพัฒนาเว็บแล้ว
การแจ้งเตือน
โพสต์ข้อความไปยังถาดระบบของผู้ใช้โดยใช้ส่วนขยาย Notifications API หรือ Notifications API ของแพลตฟอร์มเว็บ
![การแจ้งเตือนส่วนขยายใน Mac](https://developer.chrome.com/static/docs/extensions/develop/ui/image/mac-os-notification.png?hl=th)
หากต้องการดูวิธีใช้การแจ้งเตือน โปรดดูหัวข้อแจ้งเตือนผู้ใช้
ธีม
ธีมคือส่วนขยายชนิดพิเศษที่เปลี่ยนรูปลักษณ์ของเบราว์เซอร์ ธีมจะมีการจัดแพ็กเกจเหมือนส่วนขยายทั่วไป แต่ไม่มีโค้ด JavaScript หรือ HTML
![ธีมตัวอย่าง](https://developer.chrome.com/static/docs/extensions/develop/ui/image/themes.png?hl=th)
หากต้องการเรียนรู้วิธีสร้างธีม โปรดดูที่ธีมคืออะไร
วิธีอื่นๆ ในการโต้ตอบกับผู้ใช้
ส่วนนี้จะอธิบายวิธีอื่นๆ ที่ส่วนขยายสามารถโต้ตอบกับผู้ใช้ แม้ว่าส่วนขยายพื้นฐานจะไม่จำเป็นแต่อาจเป็นส่วนสำคัญของส่วนขยาย สำหรับผู้ใช้หลายคน ฟีเจอร์บางอย่างเหล่านี้จำเป็นอย่างยิ่งในการใช้ส่วนขยาย
การช่วยเหลือพิเศษ
สำหรับผู้ใช้หลายคนแล้ว การช่วยเหลือพิเศษคืออินเทอร์เฟซผู้ใช้ และฟีเจอร์ก็มักจะมีประโยชน์สำหรับผู้ที่ไม่ต้องการการช่วยเหลือพิเศษเป็นวิธีการหลักในการโต้ตอบกับส่วนขยายของคุณ เรียนรู้พื้นฐานเกี่ยวกับการทำให้ส่วนขยายเข้าถึงได้
การก้าวสู่ระดับสากล
พูดคุยกับผู้ใช้ในภาษาของพวกเขาเอง ดูวิธีทำให้อินเทอร์เฟซเป็นสากล