หน้านี้ได้รับการแปลโดย Cloud Translation API

องค์ประกอบของอินเทอร์เฟซผู้ใช้

นี่คือแคตตาล็อกขององค์ประกอบอินเทอร์เฟซผู้ใช้ที่มีให้ใช้งานในส่วนขยาย แต่ละรายการจะมีข้อมูลต่อไปนี้

รูปภาพขององค์ประกอบ (หากมี)
คำอธิบายว่ามีไว้เพื่ออะไร
องค์ประกอบของอินเทอร์เฟซที่เกี่ยวข้อง (หากมี)
ลิงก์ไปยังวิธีการติดตั้งใช้งานและตัวอย่างโค้ด

องค์ประกอบเหล่านี้เป็นวิธีต่างๆ ในการเรียกใช้ฟีเจอร์ของส่วนขยาย คุณไม่จำเป็นต้องใช้ทุกรายการ อันที่จริง Use Case บางรายการอาจไม่ได้ใช้เลย เช่น ลิงก์ที่สั้นกว่าอาจดำเนินการกับ URL ที่แสดงโดยใช้แป้นพิมพ์ลัดและนำลิงก์ที่ย่อลงในคลิปบอร์ดแบบเป็นโปรแกรมได้

การดำเนินการ

การดำเนินการคือสิ่งที่เกิดขึ้นเมื่อผู้ใช้คลิกไอคอนการทำงานของส่วนขยาย การดำเนินการอาจเรียกใช้ฟีเจอร์ของส่วนขยายโดยใช้ Action API หรือเปิดป๊อปอัปที่ให้ผู้ใช้เรียกใช้ฟีเจอร์ของส่วนขยายหลายรายการได้ แจ้งให้ผู้ใช้ทราบถึงการดำเนินการโดยใช้เคล็ดลับเครื่องมือ

ทั้งส่วนขยายที่ปักหมุดไว้และส่วนขยายที่ไม่ได้ปักหมุด — **ภาพที่ 1**: ส่วนขยายที่ปักหมุดไว้ (ซ้าย) และที่ไม่ได้ปักหมุด (ขวา)

หากต้องการเรียนรู้การสร้างการดำเนินการ โปรดดูใช้การดำเนินการ หรือตรวจสอบตัวอย่างการดำเนินการ

ไอคอนการทำงาน

ส่วนขยายต้องมีไอคอนอย่างน้อย 1 ไอคอนที่จะแสดง ผู้ใช้คลิกไอคอนเพื่อเรียกใช้การดำเนินการ ไม่ว่าการดำเนินการนั้นจะเรียกใช้ฟีเจอร์ส่วนขยายโดยใช้ Action API หรือเปิดป๊อปอัปก็ตาม

ภาพที่ 2: ไอคอนสำหรับส่วนขยายพจนานุกรมของ Google (สีแดง)

นอกจากนี้คุณยังสามารถเพิ่มป้ายกำกับซึ่งเรียกว่า "ป้าย" ลงในไอคอนเพื่อแจ้งข้อมูลต่างๆ เช่น สถานะของส่วนขยาย หรือสิ่งที่ผู้ใช้ต้องดำเนินการ

ป้าย

ป้ายเป็นส่วนของข้อความที่จัดรูปแบบไว้ที่ด้านบนของไอคอนการทำงานเพื่อบ่งบอกสิ่งต่างๆ เช่น สถานะของส่วนขยาย หรือสิ่งที่ผู้ใช้ต้องดำเนินการ คุณกำหนดข้อความของป้ายได้โดยเรียก chrome.action.setBadgeText() และสีแบนเนอร์โดยเรียกใช้ chrome.action.setBadgeBackgroundColor()

หากต้องการเรียนรู้การสร้างการดำเนินการ โปรดดูใช้การดำเนินการหรือตัวอย่างน้ำดื่ม

คำสั่ง

คำสั่งคือชุดคีย์ที่จะเรียกใช้ฟีเจอร์ของส่วนขยาย กำหนดชุดคีย์ในไฟล์ Manifest.json และตอบกลับโดยใช้ Command API ดูวิธีการใช้คําสั่งได้ที่เอกสารอ้างอิง API หรือตัวอย่าง chrome.commands

เมนูตามบริบทจะปรากฏขึ้นสำหรับการคลิกอื่น (มักเรียกว่าการคลิกขวา) ของเมาส์ กำหนดเมนูตามบริบทโดยใช้ Context Menus API

เมนูตามบริบทที่ฝังไว้ — **ภาพที่ 4**: เมนูตามบริบทและเมนูย่อยแบบซ้อน

หากต้องการเรียนรู้การใช้เมนูตามบริบท ให้ดูตัวอย่างเมนูตามบริบท

แถบอเนกประสงค์

คุณสามารถโต้ตอบกับผู้ใช้โดยใช้แถบอเนกประสงค์ของ Chrome ได้ เมื่อผู้ใช้ป้อนคีย์เวิร์ดที่ส่วนขยายกำหนดในแถบอเนกประสงค์ ส่วนขยายจะควบคุมสิ่งที่ผู้ใช้เห็นในแถบอเนกประสงค์ กำหนดคีย์เวิร์ดใน manifest.json และตอบกลับโดยใช้ Omnibox API

หากต้องการดูวิธีลบล้างแถบอเนกประสงค์ โปรดดูการเรียกใช้การดำเนินการจากแถบอเนกประสงค์หรือตัวอย่างเอกสารอ้างอิง API ด่วน

ลบล้างหน้าเว็บ

ส่วนขยายสามารถลบล้างหน้า Chrome แบบบิวท์อินต่อไปนี้หน้าใดหน้าหนึ่ง

ประวัติ
แท็บใหม่
บุ๊กมาร์ก

**ภาพที่ 6**: ตัวอย่างหน้าประวัติที่กำหนดเอง

หากต้องการดูวิธีลบล้างหน้า Chrome โปรดดูลบล้างหน้า Chrome หรือตัวอย่างการลบล้าง

ป๊อปอัป

ป๊อปอัปคือการดำเนินการที่แสดงหน้าต่างเพื่อให้ผู้ใช้เรียกใช้ฟีเจอร์ของส่วนขยายหลายรายการ ป๊อปอัปจะเปิดได้ก็ต่อเมื่อผู้ใช้คลิกไอคอนการทำงาน ส่วนขยายไม่สามารถเปิดป๊อปอัปโดยใช้โปรแกรม

หากต้องการเรียนรู้วิธีสร้างป๊อปอัป โปรดดูหัวข้อเพิ่มป๊อปอัป นอกจากนี้ คุณยังดาวน์โหลดขั้นตอนผ่านตัวอย่างการดำเนินการแบบใดแบบหนึ่งได้ด้วย

แผงด้านข้าง

แผงด้านข้างช่วยให้ผู้ใช้เรียกใช้ฟีเจอร์ของส่วนขยายไปพร้อมกับหน้าเว็บ (ดูรูปภาพ) แผงด้านข้างจะแนบกับแท็บเดียวหรือทั้งหน้าต่างได้ แผงด้านข้างจะควบคุมโดยใช้ Side Panel API

ส่วนขยายพจนานุกรมนิยามคำว่า — **ภาพที่ 8**: ส่วนขยายพจนานุกรมที่กำหนดคำว่า "ส่วนขยาย"

ดูวิธีการสร้างแผงด้านข้างได้ที่กรณีการใช้งานของแผงด้านข้างหรือดูตัวอย่างแผงด้านข้าง

เคล็ดลับเครื่องมือ

เคล็ดลับเครื่องมือเป็นวิธีหนึ่งที่จะแสดงให้เห็นเมื่อผู้ใช้วางเมาส์เหนือไอคอนการทำงานของคุณ การดำเนินการของส่วนขยายทำอะไรบ้าง โดยค่าเริ่มต้น เคล็ดลับเครื่องมือจะแสดงชื่อของส่วนขยาย

หากต้องการดูการเพิ่มเคล็ดลับเครื่องมือ ให้ใช้สมาชิก "default_title" ของคีย์ "action" ของไฟล์ Manifest

DevTools

คุณเพิ่มแผงที่กำหนดเอง (แท็บที่เรียกว่าแท็บในเครื่องมือสำหรับนักพัฒนาเว็บ) ลงในเครื่องมือสำหรับนักพัฒนาเว็บได้โดยใช้ DevTools Panels API DevTools API อื่นๆ จะช่วยให้คุณตรวจสอบหน้าต่างและการจราจรของข้อมูลในเครือข่ายได้ นอกจากนี้ คุณยังปรับแต่งแผงโปรแกรมบันทึกเครื่องมือสำหรับนักพัฒนาเว็บได้ แผง Lighthouse ของ Chrome DevTools เริ่มทำงานเป็นส่วนขยายเครื่องมือสำหรับนักพัฒนาเว็บแล้ว

การแจ้งเตือน

โพสต์ข้อความไปยังถาดระบบของผู้ใช้โดยใช้ส่วนขยาย Notifications API หรือ Notifications API ของแพลตฟอร์มเว็บ

หากต้องการดูวิธีใช้การแจ้งเตือน โปรดดูหัวข้อแจ้งเตือนผู้ใช้

ธีม

ธีมคือส่วนขยายชนิดพิเศษที่เปลี่ยนรูปลักษณ์ของเบราว์เซอร์ ธีมจะมีการจัดแพ็กเกจเหมือนส่วนขยายทั่วไป แต่ไม่มีโค้ด JavaScript หรือ HTML

หากต้องการเรียนรู้วิธีสร้างธีม โปรดดูที่ธีมคืออะไร

วิธีอื่นๆ ในการโต้ตอบกับผู้ใช้

ส่วนนี้จะอธิบายวิธีอื่นๆ ที่ส่วนขยายสามารถโต้ตอบกับผู้ใช้ แม้ว่าส่วนขยายพื้นฐานจะไม่จำเป็นแต่อาจเป็นส่วนสำคัญของส่วนขยาย สำหรับผู้ใช้หลายคน ฟีเจอร์บางอย่างเหล่านี้จำเป็นอย่างยิ่งในการใช้ส่วนขยาย

การช่วยเหลือพิเศษ

สำหรับผู้ใช้หลายคนแล้ว การช่วยเหลือพิเศษคืออินเทอร์เฟซผู้ใช้ และฟีเจอร์ก็มักจะมีประโยชน์สำหรับผู้ที่ไม่ต้องการการช่วยเหลือพิเศษเป็นวิธีการหลักในการโต้ตอบกับส่วนขยายของคุณ เรียนรู้พื้นฐานเกี่ยวกับการทำให้ส่วนขยายเข้าถึงได้

การก้าวสู่ระดับสากล

พูดคุยกับผู้ใช้ในภาษาของพวกเขาเอง ดูวิธีทำให้อินเทอร์เฟซเป็นสากล