พัฒนา
หลังจากอ่านส่วนเริ่มต้นใช้งานแล้ว ให้ใช้คู่มือนี้เพื่อสรุปคอมโพเนนต์ของส่วนขยาย ��วามสามารถของคอมโพเนนต์ในไฟล์ 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"