Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

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

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

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

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

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

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

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

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

ไอคอนการดำเนินการ

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

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

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

ป้าย

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

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

คำสั่ง

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

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

เมนูตามบริบทที่ซ้อนกัน — **รูปที่ 4**: เมนูตามบริบทและเมนูย่อยแบบซ้อน

ดูวิธีติดตั้งเมนูตามบริบทได้ที่ตัวอย่างเมนูตามบริบท

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

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

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

หน้าลบล้าง

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

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

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

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

ป๊อปอัป

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

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

แผงด้านข้าง

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

ส่วนขยายพจนานุกรมที่กำหนดคำ — **รูปที่ 8**: ส่วนขยายพจนานุกรมที่ให้คำจำกัดความของคำว่า "ส่วนขยาย"

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

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

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

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

DevTools

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

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

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

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

ธีม

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

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

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

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

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

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

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

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