การดำเนินการของส่วนขยายในไฟล์ Manifest V3

Simeon Vincent

นับตั้งแต่เปิดตัวส่วนขยาย 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's (setExtensionActionOptions) เพื่อแสดงจำนวนคำขอที่ส่วนขยายบล็อกสำหรับแท็บหนึ่งๆ ความสามารถนี้สำคัญเนื่องจากช่วยให้ตัวบล็อกเนื้อหาแจ้งให้ผู้ใช้ปลายทางทราบอยู่เสมอโดยไม่ต้องเปิดเผยข้อมูลเมตาการท่องเว็บที่อาจละเอียดอ่อนต่อส่วนขยาย

สรุป

การทำให้แพลตฟอร์มส่วนขยาย Chrome ทันสมัยขึ้นเป็นหนึ่งในแรงจูงใจหลักของเราในการพัฒนา Manifest V3 ในหลายกรณี การเปลี่ยนแปลงนี้หมายถึงการเปลี่ยนไปใช้เทคโนโลยีใหม่ แต่นั่นก็หมายถึงการลดความซับซ้อนของแพลตฟอร์ม API ด้วย ซึ่งก็คือเป้าหมายของเรา

เราหวังว่าโพสต์นี้จะอธิบายส่วนนี้ของแพลตฟอร์ม Manifest V3 ให้คุณเข้าใจมากขึ้น หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับแนวทางที่ทีม Chrome ใช้ในการพัฒนาส่วนขยายเบราว์เซอร์ในอนาคต โปรดดูหน้าวิสัยทัศน์ของแพลตฟอร์มและภาพรวมของ Manifest V3 ในเอกสารประกอบสำหรับนักพัฒนาซอฟต์แวร์ นอกจากนี้ คุณยังพูดคุยเกี่ยวกับส่วนขยาย Chrome กับนักพัฒนาแอปคนอื่นๆ ได้ใน Google Group ของ chromium-extensions