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

Simeon Vincent

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

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

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

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

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

การกระทำทั้ง 2 ประเภทเป็นตัวเลือกที่ไม่บังคับ ดังนั้นนักพัฒนาส่วนขยายจึงเลือกให้ทั้ง 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" อาจดูฟังดูแปลกๆ ไม่เหมือนใครสำหรับฟังก์ชันการทำงานนี้ เมื่อเปรียบเทียบกับ "ispin" แต่ประวัติของการทำงานใน Chrome แสดงให้เห็นว่า UI ของเบราว์เซอร์มีการเปลี่ยนแปลงเร็วกว่า API ของส่วนขยายทำได้ ด้วยเหตุนี้ เป้าหมายของเราในการใช้ API นี้คือการแสดงค่ากำหนดของผู้ใช้ที่เกี่ยวข้องกับการดำเนินการใน อินเทอร์เฟซทั่วไปเพื่อลดการเลิกใช้งาน API ในอนาคต และยังทำให้ผู้ให้บริการเบราว์เซอร์อื่นๆ แนวคิด UI เฉพาะเบราว์เซอร์ในออบเจ็กต์ UserSettings ที่แสดงผลโดยค่านี้

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

สรุป

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

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