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

นับตั้งแต่การเปิดตัวส่วนขยาย Chrome แพลตฟอร์มนี้ได้อนุญาตให้นักพัฒนาซอฟต์แวร์แสดงฟังก์ชันการทำงานของส่วนขยายโดยตรงใน UI ของ Chrome ระดับบนสุดโดยใช้การดำเนินการ การทำงานคือปุ่มไอคอน ที่สามารถเปิดป๊อปอัปหรือเรียกฟังก์ชันบางอย่างในส่วนขยาย ที่ผ่านมา Chrome รองรับการดำเนินการ 2 ประเภท ได้แก่ การดำเนินการในเบราว์เซอร์และการทำงานของหน้าเว็บ ไฟล์ Manifest V3 เปลี่ยนแปลงสิ่งนี้ด้วยการรวมฟังก์ชันการทำงานไว้ใน API chrome.action ใหม่

ประวัติสั้นๆ เกี่ยวกับการดำเนินการของส่วนขยาย

แม้ว่า chrome.action จะเป็นเวอร์ชันใหม่ในไฟล์ Manifest V3 แต่ฟังก์ชันพื้นฐานที่เครื่องมือนี้ให้มานั้นย้อนกลับไปถึงตอนที่ส่วนขยายหยุดให้บริการเป็นครั้งแรกในเดือนมกราคม 2010 แพลตฟอร์มส่วนขยายของ Chrome รุ่นแรกที่มีความเสถียรรองรับการดำเนินการ 2 ประเภท ได้แก่ การทำงานของเบราว์เซอร์และการดำเนินการของหน้าเว็บ

การดำเนินการในเบราว์เซอร์ช่วยให้นักพัฒนาส่วนขยายแสดงไอคอน "ในแถบเครื่องมือหลักของ Google Chrome ทางด้านขวาของแถบที่อยู่" (แหล่งที่มา) และช่วยให้ผู้ใช้เรียกใช้ฟังก์ชันการทำงานของส่วนขยายในหน้าใดก็ได้อย่างง่ายดาย ในทางตรงกันข้าม การกระทำของหน้าเว็บมีจุดประสงค์เพื่อ "แสดงถึงการกระทำที่สามารถทำได้ในหน้าปัจจุบัน แต่ใช้ไม่ได้กับทุกหน้า" (แหล่งที่มา)

กล่าวคือ การดำเนินการในเบราว์เซอร์ทำให้นักพัฒนาส่วนขยายแสดง UI ตลอดเวลาในเบราว์เซอร์ในขณะที่การดำเนินการของหน้าเว็บปรากฏเฉพาะเมื่อส่วนขยายอาจทำสิ่งที่เป็นประโยชน์ในหน้าปัจจุบันเท่านั้น

การทำงานทั้ง 2 ประเภทเป็นแบบไม่บังคับ ดังนั้นนักพัฒนาส่วนขยายสามารถเลือกที่จะไม่มีการกระทำ การทำงานของหน้าเว็บ หรือการทำงานของเบราว์เซอร์ (ไม่อนุญาตให้ระบุการทำงานหลายอย่าง)

ประมาณ 6 ปีต่อมา Chrome 49 ได้เปิดตัวรูปแบบ UI ใหม่สำหรับส่วนขยาย Chrome จะเริ่มแสดงส่วนขยายที่ใช้งานอยู่ทั้งหมดที่ด้านขวาของแถบอเนกประสงค์ เพื่อช่วยให้ผู้ใช้ทราบว่าตนเองมีส่วนขยายใด ผู้ใช้สามารถ "เพิ่ม" ส่วนขยายลงในเมนู Chrome ได้หากต้องการ

ในการแสดงไอคอนสำหรับส่วนขยายแต่ละรายการ การอัปเดตนี้ยังทำให้เกิดการเปลี่ยนแปลงที่สำคัญ 2 ประการเกี่ยวกับลักษณะการทำงานของส่วนขยายใน UI ของ Chrome อีกด้วย อันดับแรก ส่วนขยายทั้งหมดเริ่มแสดงไอคอนในแถบเครื่องมือ หากส่วนขยายไม่มีไอคอน Chrome จะสร้างไอคอนให้โดยอัตโนมัติ อย่างที่สอง การทำงานของหน้าเว็บจะย้ายไปอยู่ที่แถบเครื่องมือพร้อมกับการทำงานของเบราว์เซอร์ และให้ความสามารถในการแยกความแตกต่างระหว่างสถานะ "แสดง" และ "ซ่อน"

การเปลี่ยนแปลงนี้ทำให้ส่วนขยายการดำเนินการในหน้าเว็บทำงานต่อไปตามที่คาดไว้ แต่ก็ลดบทบาทของการดำเนินการในหน้าเว็บเมื่อเวลาผ่านไป ผลอย่างหนึ่งของการออกแบบ 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" อาจฟังดูแปลกๆ เล็กน้อยสำหรับฟังก์ชันนี้เมื่อเทียบกับคำว่า "islinked" แต่ประวัติการดำเนินการใน 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

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

สรุป

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

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