นับตั้งแต่เปิดตัวส่วนขยาย Chrome แพลตฟอร์มนี้ได้ช่วยให้นักพัฒนาซอฟต์แวร์แสดงฟังก์ชันของส่วนขยายได้โดยตรงใน UI ของ Chrome ระดับบนสุดโดยใช้การดำเนินการ การดําเนินการคือปุ่มไอคอนที่เปิดป๊อปอัปหรือทริกเกอร์ฟังก์ชันบางอย่างในส่วนขยายได้ ที่ผ่านมา Chrome รองรับการดำเนินการ 2 ประเภท ได้แก่ การดำเนินการของเบราว์เซอร์และการดำเนินการของหน้าเว็บ แต่ Manifest V3 ได้เปลี่ยนแปลงสิ่งนี้ด้วยการรวมฟังก์ชันการทำงานไว้ใน chrome.action API ใหม่
ประวัติโดยย่อของการดำเนินการของส่วนขยาย
แม้ว่า chrome.action จะเป็นฟีเจอร์ใหม่ในไฟล์ Manifest V3 แต่ฟังก์ชันการทำงานพื้นฐานที่มีมาตั้งแต่ตอนที่ส่วนขยายมีความเสถียรเป็นครั้งแรกในเดือนมกราคม 2010 แพลตฟอร์มส่วนขยายของ Chrome เวอร์ชันเสถียรรุ่นแรกรองรับการดำเนินการ 2 ประเภท ได้แก่ การดำเนินการในเบราว์เซอร์และการดำเนินการในหน้าเว็บ
การดำเนินการของเบราว์เซอร์ช่วยให้นักพัฒนาส่วนขยายแสดงไอคอน "ในแถบเครื่องมือหลักของ Google Chrome ทางด้านขวาของแถบที่อยู่" (แหล่งที่มา) และมอบวิธีง่ายๆ ให้แก่ผู้ใช้ในการเรียกใช้ฟังก์ชันของเบราว์เซอร์ในหน้าเว็บใดก็ได้ ในทางกลับกัน การดำเนินการของหน้าเว็บมีไว้เพื่อ "แสดงการดำเนินการที่ทำได้บนหน้าปัจจุบัน แต่ใช้ไม่ได้กับทุกหน้า" (แหล่งที่มา)
กล่าวคือ การดำเนินการในเบราว์เซอร์ช่วยให้นักพัฒนาส่วนขยายมีแพลตฟอร์ม UI ถาวรในเบราว์เซอร์ ส่วนการดำเนินการในหน้าเว็บจะปรากฏขึ้นก็ต่อเมื่อส่วนขยายสามารถทําสิ่งที่มีประโยชน์ในหน้าปัจจุบันได้เท่านั้น
การดำเนินการทั้ง 2 ประเภทเป็นการดำเนินการที่ไม่บังคับ นักพัฒนาส่วนขยายจึงเลือกที่จะไม่ระบุการดำเนินการ การดำเนินการของหน้า หรือการดำเนินการของเบราว์เซอร์ก็ได้ (ไม่อนุญาตให้ระบุการดำเนินการหลายรายการ)
ประมาณ 6 ปีต่อมา Chrome 49 ได้เปิดตัวรูปแบบ UI ใหม่สำหรับส่วนขยาย เพื่อช่วยให้ผู้ใช้ทราบว่าตนเองมีส่วนขยายใด Chrome จะเริ่มแสดงส่วนขยายที่ใช้งานอยู่ทั้งหมดที่ด้านขวาของแถบอเนกประสงค์ ผู้ใช้สามารถ "แสดงส่วนขยายเกิน" ไปยังเมนู Chrome ได้หากต้องการ
การอัปเดตนี้ยังทำให้เกิดการเปลี่ยนแปลงที่สำคัญ 2 ประการเกี่ยวกับลักษณะการทำงานของส่วนขยายใน UI ของ Chrome เพื่อให้แสดงไอคอนสำหรับส่วนขยายแต่ละรายการได้ ขั้นแรก ส่วนขยายทั้งหมดเริ่มแสดงไอคอนในแถบเครื่องมือ หากส่วนขยายไม่มีไอคอน Chrome จะสร้างไอคอนให้โดยอัตโนมัติ ประการที่ 2 คือการย้ายการทํางานของหน้าเว็บไปยังแถบเครื่องมือควบคู่ไปกับการดำเนินการของเบราว์เซอร์ และมีการระบุลักษณะที่จะช่วยแยกความแตกต่างระหว่างสถานะ "แสดง" และ "ซ่อน"
การเปลี่ยนแปลงนี้ช่วยให้ชิ้นงานการกระทําบนหน้าเว็บทํางานต่อไปได้ตามที่คาดไว้ แต่บทบาทของการกระทําบนหน้าเว็บก็ลดลงด้วยเมื่อเวลาผ่านไป ผลอย่างหนึ่งของการออกแบบ UI ใหม่คือการทำงานของหน้าเว็บจะแยกย่อยตามการทำงานของเบราว์เซอร์ได้อย่างมีประสิทธิภาพ เนื่องจากส่วนขยายทั้งหมดปรากฏในแถบเครื่องมือ ผู้ใช้จึงคาดหวังว่าการคลิกไอคอนแถบเครื่องมือของส่วนขยายจะเรียกใช้ส่วนขยายนั้น และการดำเนินการของเบราว์เซอร์ก็กลายเป็นการโต้ตอบที่สำคัญมากขึ้นสำหรับส่วนขยาย Chrome
การเปลี่ยนแปลงของ Manifest V3
UI และส่วนขยายของ Chrome พัฒนาไปอย่างต่อเนื่องในช่วงหลายปีที่ผ่านมาหลังจากการออกแบบ UI ส่วนขยายปี 2016 ใหม่ แต่การทำงานของเบราว์เซอร์และการทำงานของหน้าเว็บก็ยังคงไม่เปลี่ยนแปลงเป็นส่วนใหญ่ กล่าวคือ จนกว่าเราจะเริ่มวางแผนปรับแพลตฟอร์มส่วนขยายให้ทันสมัยด้วย Manifest V3
ทีมส่วนขยายทราบดีว่าการกระทำของเบราว์เซอร์และการกระทําของหน้าเว็บมีความแตกต่างกันมากขึ้นเรื่อยๆ โดยไม่มีความหมาย ที่แย่กว่านั้นคือความแตกต่างของลักษณะการทำงานเล็กๆ น้อยๆ ทำให้นักพัฒนาแอปตัดสินใจได้ยากว่าจะเลือกใช้รูปแบบใด เราตระหนักดีว่าเราสามารถแก้ไขปัญหาเหล่านี้โดยการรวมการดำเนินการของเบราว์เซอร์ และการทำงานของหน้าเว็บไว้ใน "การทำงาน" ครั้งเดียว
ป้อน Action API โดย chrome.action คล้ายกับ chrome.browserAction โดยตรง แต่มีข้อแตกต่างสำคัญอยู่บ้าง
ขั้นแรก chrome.action จะแนะนำเมธอดใหม่ชื่อ getUserSettings() วิธีการนี้ช่วยให้นักพัฒนาส่วนขยายมีวิธีตรวจสอบว่าผู้ใช้ปักหมุดการดำเนินการของส่วนขยายไว้ที่แถบเครื่องมือหรือไม่
let userSettings = await chrome.action.getUserSettings();
console.log(`Is the action pinned? ${userSettings.isOnToolbar ? 'Yes' : 'No'}.`);
"getUserSettings" อาจดูเหมือนชื่อที่แปลกไปหน่อยสำหรับฟังก์ชันการทำงานนี้เมื่อเทียบกับ "isPinned" แต่ประวัติการดำเนินการใน Chrome แสดงให้เห็นว่า UI ของเบราว์เซอร์เปลี่ยนแปลงเร็วกว่า API ของส่วนขยาย ดังนั้นเป้าหมายของเราสำหรับ API นี้คือการแสดงค่ากําหนดของผู้ใช้ที่เกี่ยวข้องกับการดําเนินการในอินเทอร์เฟซทั่วไปเพื่อลดการเปลี่ยน API ในอนาคต นอกจากนี้ ยังช่วยให้ผู้ให้บริการเบราว์เซอร์รายอื่นๆ แสดงแนวคิด UI ที่เฉพาะเจาะจงของเบราว์เซอร์ในออบเจ็กต์ UserSettings ที่แสดงผลโดยเมธอดนี้
ประการที่ 2 คุณสามารถควบคุมไอคอนและสถานะเปิด/ปิดใช้ของการดําเนินการของส่วนขยายได้โดยใช้ Declarative Content API การดำเนินการนี้สำคัญเนื่องจากช่วยให้ส่วนขยายตอบสนองต่อพฤติกรรมการท่องเว็บของผู้ใช้ได้โดยไม่ต้องเข้าถึงเนื้อหาหรือแม้แต่ URL ของหน้าเว็บที่ผู้ใช้เข้าชม ตัวอย่างเช่น ลองมาดูวิธีที่ส่วนขยายเปิดใช้การดำเนินการเมื่อผู้ใช้เข้าชมหน้าใน example.com
// Manifest V3
chrome.runtime.onInstalled.addListener(() => {
chrome.declarativeContent.onPageChanged.removeRules(undefined, () => {
chrome.declarativeContent.onPageChanged.addRules([
{
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: {hostSuffix: '.example.com'},
})
],
actions: [new chrome.declarativeContent.ShowAction()]
}
]);
});
});
โค้ดข้างต้นเกือบจะเหมือนกับสิ่งที่ส่วนขยายจะทำกับการดำเนินการบนหน้าเว็บ ความแตกต่างเพียงอย่างเดียวคือใน Manifest V3 เราใช้ declarativeContent.ShowAction แทน declarativeContent.ShowPageAction ใน Manifest V2
สุดท้าย ตัวบล็อกเนื้อหาสามารถใช้เมธอด declarativeNetRequest API
setExtensionActionOptions) เพื่อแสดงจำนวน
คำขอที่ส่วนขยายบล็อกสำหรับแท็บที่กำหนด ความสามารถนี้มีความสำคัญเนื่องจากช่วยให้ตัวบล็อกเนื้อหาแจ้งข้อมูลแก่ผู้ใช้ปลายทางได้โดยไม่เปิดเผยข้อมูลเมตาการท่องเว็บที่อาจมีความละเอียดอ่อนแก่ส่วนขยาย
สรุป
การทำให้แพลตฟอร์มส่วนขยาย Chrome ทันสมัยขึ้นเป็นหนึ่งในแรงจูงใจหลักของเราในการพัฒนา Manifest V3 ในหลายกรณี การเปลี่ยนแปลงนี้หมายถึงการเปลี่ยนไปใช้เทคโนโลยีใหม่ แต่นั่นก็หมายถึงการลดความซับซ้อนของแพลตฟอร์ม API ด้วย ซึ่งก็คือเป้าหมายของเรา
เราหวังว่าโพสต์นี้จะอธิบายส่วนนี้ของแพลตฟอร์ม Manifest V3 ให้คุณเข้าใจมากขึ้น หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับแนวทางที่ทีม Chrome ใช้ในการพัฒนาส่วนขยายเบราว์เซอร์ในอนาคต โปรดดูหน้าวิสัยทัศน์ของแพลตฟอร์มและภาพรวมของ Manifest V3 ในเอกสารประกอบสำหรับนักพัฒนาซอฟต์แวร์ นอกจากนี้ คุณยังพูดคุยเกี่ยวกับส่วนขยาย Chrome กับนักพัฒนาแอปคนอื่นๆ ได้ใน Google Group ของ chromium-extensions