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

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

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

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

การทำงาน

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

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

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

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

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

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

ป้าย

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

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

คำสั่ง

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

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

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

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

Omnibox

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

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

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

ส่วนขยายอาจลบล้างหน้าใดหน้าหนึ่งต่อไปนี้ใน Chrome ได้

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

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

ป๊อปอัป

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

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

แผงด้านข้าง

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

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

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

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

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

เครื่องมือสำหรับนักพัฒนาเว็บ

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

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

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

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

ธีม

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

ดูวิธีสร้างธีมได้ที่ธีมคืออะไร

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

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

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

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

การทำให้เป็นสากล

สื่อสารกับผู้ใช้ในภาษาของตนเอง เรียนรู้การทำให้อินเทอร์เฟซเป็นสากล