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

ออกแบบอินเทอร์เฟซผู้ใช้

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

ควบคุมเบราว์เซอร์

API ส่วนขยายของ Chrome ช่วยให้คุณเปลี่ยนวิธีการทำงานของเบราว์เซอร์ได้
การลบล้างการตั้งค่าเป็นวิธีที่ส่วนขยายจะลบล้างการตั้งค่า Chrome ที่เลือกไว้ นอกจากนี้ ส่วนขยายสามารถใช้หน้าลบล้าง HTML เพื่อแทนที่หน้าที่ Google Chrome มีให้ตามปกติ ส่วนขยายสามารถแทนที่การจัดการบุ๊กมาร์ก แท็บประวัติ หรือแท็บใหม่
ส่วนขยายของเครื่องมือสำหรับนักพัฒนาเว็บเพิ่มฟังก์ชันการทำงานให้กับเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome โดยการเข้าถึง API ของส่วนขยายที่เฉพาะเจาะจงสำหรับเครื่องมือสำหรับนักพัฒนาเว็บผ่านหน้าเครื่องมือสำหรับนักพัฒนาเว็บที่เพิ่มลงในส่วนขยาย นอกจากนี้ คุณยังใช้ browser.debugger API เพื่อเรียกใช้โปรโตคอลการแก้ไขข้อบกพร่องจากระยะไกลของ Chrome ได้ด้วย แนบกับแท็บอย่างน้อย 1 แท็บเพื่อวัดการโต้ตอบในเครือข่าย แก้ข้อบกพร่องของ JavaScript เปลี่ยนแปลง DOM และอื่นๆ
browser.notifications API ช่วยให้คุณสร้างการแจ้งเตือนโดยใช้เทมเพลตและแสดงการแจ้งเตือนเหล่านี้ต่อผู้ใช้ในถาดระบบของผู้ใช้
ใช้ browser.history API เพื่อโต้ตอบกับบันทึกหน้าเว็บที่เข้าชมของเบราว์เซอร์ และ browser.browsingData API เพื่อจัดการข้อมูลการท่องเว็บอื่นๆ ใช้ browser.topSites เพื่อเข้าถึงเว็บไซต์ที่เข้าชมบ่อยที่สุด
ใช้ API เช่น browser.tabs, browser.tabGroups และ browser.windows เพื่อสร้าง แก้ไข และจัดเรียงเบราว์เซอร์ของผู้ใช้
ใช้ API browser.commands เพื่อเพิ่มแป้นพิมพ์ลัดที่จะทริกเกอร์การดำเนินการในส่วนขยาย เช่น คุณสามารถเพิ่มแป้นพิมพ์ลัดเพื่อเปิดการดำเนินการของเบราว์เซอร์หรือส่งคำสั่งไปยังส่วนขยายได้
ใช้ browser.identity API เพื่อรับโทเค็นเพื่อการเข้าถึง OAuth 2.0
API ของ browser.management มีวิธีจัดการรายการส่วนขยายที่ติดตั้งและทำงานอยู่ โดยเฉพาะอย่างยิ่งมีประโยชน์สำหรับส่วนขยายที่ลบล้างหน้าแท็บใหม่ในตัว
browser.omnibox API ช่วยให้คุณลงทะเบียนคีย์เวิร์ดกับแถบอเนกประสงค์ (แถบที่อยู่) ของ Google Chrome ได้
ใช้ browser.privacy API เพื่อควบคุมการใช้ฟีเจอร์ใน Chrome ที่อาจส่งผลต่อความเป็นส่วนตัวของผู้ใช้ ดู browser.proxy API เพื่อจัดการการตั้งค่าพร็อกซีของ Chrome ด้วย
ใช้ browser.downloads API เพื่อเริ่มต้น ตรวจสอบ จัดการ และค้นหาการดาวน์โหลดแบบเป็นโปรแกรม
ใช้ browser.bookmarks API และ browser.readingList API เพื่อสร้าง จัดระเบียบ และจัดการรายการเหล่านี้

ควบคุมเว็บ

เปลี่ยนแปลงเนื้อหาและลักษณะการทำงานของหน้าเว็บแบบไดนามิก คุณสามารถควบคุมและแก้ไขเว็บโดยการแทรกสคริปต์ สกัดกั้นคำขอของเครือข่าย และใช้ API ของเว็บเพื่อโต้ตอบกับหน้าเว็บ
สคริปต์เนื้อหาคือไฟล์ที่ทำงานในบริบทของหน้าเว็บ โดยใช้ Document Object Model (DOM) มาตรฐาน เพื่ออ่านรายละเอียดของหน้าเว็บที่เบราว์เซอร์เข้าชม ทำการเปลี่ยนแปลง และส่งข้อมูลไปยังส่วนขยายระดับบนสุด
สิทธิ์ "activeTab" จะให้สิทธิ์ส่วนขยายเข้าถึงแท็บที่ใช้งานอยู่ในปัจจุบันได้ชั่วคราวเมื่อผู้ใช้เรียกใช้ส่วนขยาย เช่น ด้วยการคลิกที่การทำงานของส่วนขยาย การเข้าถึงแท็บจะมีผลขณะที่ผู้ใช้อยู่ในหน้านั้น และจะถูกเพิกถอนเมื่อผู้ใช้ออกหรือปิดแท็บ
ใช้ API browser.declarativeNetRequest, browser.webRequest และ browser.webNavigation เพื่อสังเกต บล็อก และแก้ไขคำขอเครือข่าย
ดูแนวทางต่างๆ ในการบันทึกเสียงและวิดีโอจากแท็บ หน้าต่าง หรือหน้าจอโดยใช้ Web Platform API เช่น browser.tabCapture หรือ getDisplayMedia()
ใช้ API ของ browser.contentSettings เพื่อควบคุมว่าเว็บไซต์จะสามารถใช้ฟีเจอร์อย่างคุกกี้, JavaScript และปลั๊กอินได้หรือไม่ โดยทั่วไปแล้ว การตั้งค่าเนื้อหาจะช่วยให้คุณปรับแต่งลักษณะการทำงานของ Chrome ในแต่ละเว็บไซต์แทนที่จะเป็นการตั้งค่าส่วนกลางได้

แนวคิดหลัก

การใช้แพลตฟอร์มเว็บและ API ส่วนขยายช่วยให้คุณสร้างฟีเจอร์ที่ซับซ้อนขึ้นได้ด้วยการรวมคอมโพเนนต์ UI และฟีเจอร์แพลตฟอร์มส่วนขยายต่างๆ เข้าด้วยกัน
โปรแกรมทำงานของบริการส่วนขยาย (service-worker.js) เป็นสคริปต์ตามเหตุการณ์ที่เบราว์เซอร์ทำงานในพื้นหลัง มักใช้ในการประมวลผลข้อมูล ประสานงานงานในส่วนต่างๆ ของส่วนขยาย และใช้เป็นผู้จัดการกิจกรรมของส่วนขยาย
ทำความเข้าใจสิทธิ์: วิธีการทำงานของสิทธิ์ต่างๆ และเมื่อใดที่ควรหลีกเลี่ยงการขอสิทธิ์เมื่อไม่จำเป็น
คุณสามารถใช้การกรองเนื้อหาและเครือข่ายในส่วนขยาย Chrome ได้หลายวิธี เรียนรู้เกี่ยวกับความสามารถในการกรองเนื้อหาที่ใช้ได้กับส่วนขยาย รวมถึงวิธีการกรอง เทคนิค และ API ต่างๆ ที่ส่วนขยาย Chrome สามารถใช้ได้
บ่อยครั้งที่สคริปต์เนื้อหาหรือหน้าส่วนขยายอื่นๆ จำเป็นต้องส่งหรือรับข้อมูลจากโปรแกรมทำงานของบริการส่วนขยาย ในกรณีเหล่านี้ ทั้ง 2 ฝ่ายจะฟังข้อความที่ส่งจากอีกฝั่งหนึ่งและตอบกลับในช่องเดียวกันได้
เปิดใช้ส่วนขยายเพื่อแลกเปลี่ยนข้อความกับแอปพลิเคชันที่มาพร้อมเครื่อง
ในส่วนขยายไฟล์ Manifest V3 ต้องรวมโค้ดทั้งหมดที่ส่วนขยายใช้อยู่ภายในส่วนขยายนั้นเอง มีกลยุทธ์ต่างๆ ในการดำเนินการนี้
ส่วนขยาย Chrome มี Storage API เฉพาะซึ่งพร้อมใช้งานกับคอมโพเนนต์ของส่วนขยายทั้งหมด โดยมีพื้นที่เก็บข้อมูล 4 ส่วนแยกกันสำหรับ Use Case เฉพาะ และ Listener เหตุการณ์ที่ติดตามเมื่อมีการอัปเดตข้อมูล
Service Worker ไม่มีสิทธิ์เข้าถึง DOM Offscreen API ช่วยให้ส่วนขยายใช้ DOM API ในเอกสารที่ซ่อนไว้ได้โดยไม่รบกวนประสบการณ์ของผู้ใช้ด้วยการเปิดหน้าต่างหรือแท็บใหม่
การแยกแบบข้ามต้นทางช่วยให้หน้าเว็บใช้ฟีเจอร์ที่มีประสิทธิภาพ เช่น SharedArrayBuffer ได้ ส่วนขยายเลือกใช้การแยกแบบข้ามต้นทางได้ด้วยการระบุค่าที่เหมาะสมสำหรับคีย์ไฟล์ Manifest "cross_origin_embedder_policy" และ "cross_origin_opener_policy"
ดูวิธีที่ Chrome อัปเดตโฟลว์การอัปเดตส่วนขยายและวิธีตรวจสอบการเผยแพร่การอัปเดตส่วนขยาย

หัวข้ออื่นๆ