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

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

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

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

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

ควบคุมเว็บ

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

แนวคิดหลัก

การใช้แพลตฟอร์มเว็บและ API ส่วนขยายช่วยให้คุณสร้างฟีเจอร์ที่ซับซ้อนขึ้นได้ด้วยการรวมคอมโพเนนต์ UI และฟีเจอร์แพลตฟอร์มส่วนขยายต่างๆ เข้าด้วยกัน
โปรแกรมทำงานของบริการส่วนขยาย (service-worker.js) เป็นสคริปต์ตามเหตุการณ์ที่เบราว์เซอร์ทำงานในพื้นหลัง มักใช้ในการประมวลผลข้อมูล ประสานงานงานในส่วนต่างๆ ของส่วนขยาย และใช้เป็นผู้จัดการกิจกรรมของส่วนขยาย
ทำความเข้าใจสิทธิ์: วิธีการทำงานของสิทธิ์ต่างๆ และเมื่อใดที่ควรหลีกเลี่ยงการขอสิทธิ์เมื่อไม่จำเป็น
บ่อยครั้งที่สคริปต์เนื้อหาหรือหน้าส่วนขยายอื่นๆ จำเป็นต้องส่งหรือรับข้อมูลจากโปรแกรมทำงานของบริการส่วนขยาย ในกรณีเหล่านี้ ทั้ง 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"