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

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

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

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

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

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

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

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

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

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

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

ป้าย

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

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

คำสั่ง

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

เมนูตามบริบท

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

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

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

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

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

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

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

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

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

ป๊อปอัป

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

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

แผงด้านข้าง

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

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

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

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

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

DevTools

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

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

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

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

ธีม

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

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

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

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

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

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

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

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