พัฒนา
หลังจากอ่านส่วนเริ่มต้นใช้งานแล้ว ให้ใช้คู่มือนี้เพื่อสรุปคอมโพเนนต์ของส่วนขยาย ความสามารถของคอมโพเนนต์ในไฟล์ Manifest V3 และวิธีรวมคอมโพเนนต์ต่างๆ ก่อนอื่น ให้ทำความคุ้นเคยกับส่วนขยายที่มีความสามารถดังต่อไปนี้ จากนั้นดูวิธีรวมฟีเจอร์เหล่านี้โดยใช้ ส่วนแนวคิดหลักของส่วนขยาย
ออกแบบอินเทอร์เฟซผู้ใช้
ส่วนขยายส่วนใหญ่ต้องมีการโต้ตอบของผู้ใช้บางอย่างจึงจะทำงานได้ แพลตฟอร์มส่วนขยายมีหลากหลายวิธีในการเพิ่มการโต้ตอบกับส่วนขยายของคุณ วิธีการเหล่านี้รวมถึงป๊อปอัปที่เรียกจากแถบเครื่องมือของ Chrome แผงด้านข้าง เมนูตามบริบท และอื่นๆ
แผงด้านข้าง
ใช้
chrome.sidePanel
API เพื่อโฮสต์เนื้อหาในแผงด้านข้างของเบราว์เซอร์ควบคู่ไปกับเนื้อหาหลักของหน้าเว็บ
แอ็กชัน
ควบคุมการแสดงไอคอนของส่วนขยายในแถบเครื่องมือ
เมนู
เพิ่มรายการลงในเมนูตามบริบทของ Google Chrome
ควบคุมเบราว์เซอร์
API ส่วนขยายของ Chrome ช่วยให้คุณเปลี่ยนวิธีการทำงานของเบราว์เซอร์ได้
ลบล้างหน้าและการตั้งค่า 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
ใช้
chrome.privacy
API เพื่อควบคุมการใช้งานฟีเจอร์ใน Chrome ที่อาจส่งผลต่อความเป็นส่วนตัวของผู้ใช้ โปรดดู API ของ chrome.proxy
เพื่อจัดการการตั้งค่าพร็อกซีของ Chrome ด้วย
จัดการรายการดาวน์โหลด
ใช้
chrome.downloads
API เพื่อเริ่มต้น ตรวจสอบ จัดการ และค้นหาการดาวน์โหลดแบบเป็นโปรแกรม
ใช้บุ๊กมาร์กและเรื่องรออ่าน
ใช้
chrome.bookmarks
API และ chrome.readingList
API เพื่อสร้าง จัดระเบียบ และจัดการรายการเหล่านี้
ควบคุมเว็บ
เปลี่ยนแปลงเนื้อหาและลักษณะการทำงานของหน้าเว็บแบบไดนามิก คุณสามารถควบคุมและแก้ไขเว็บโดยการแทรกสคริปต์ สกัดกั้นคำขอของเครือข่าย และใช้ API ของเว็บเพื่อโต้ตอบกับหน้าเว็บ
แทรก JavaScript และ CSS
สคริปต์เนื้อหาคือไฟล์ที่ทำงานในบริบทของหน้าเว็บ โดยใช้ 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) เป็นสคริปต์ตามเหตุการณ์ที่เบราว์เซอร์ทำงานในพื้นหลัง มักใช้ในการประมวลผลข้อมูล ประสานงานงานในส่วนต่างๆ ของส่วนขยาย และใช้เป็นผู้จัดการกิจกรรมของส่วนขยาย
สิทธิ์
ทำความเข้าใจสิทธิ์: วิธีการทำงานของสิทธิ์ต่างๆ และเมื่อใดที่ควรหลีกเลี่ยงการขอสิทธิ์เมื่อไม่จำเป็น
การกรองเนื้อหา
คุณสามารถใช้การกรองเนื้อหาและเครือข่ายในส่วนขยาย 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"