เอกสารนอกหน้าจอในไฟล์ Manifest V3

Ian Stanion
Ian Stanion

หากต้องการแทนที่ฟังก์ชันการทำงานในการเปลี่ยนจากหน้าในเบื้องหลังเป็น Service Worker ของส่วนขยาย นักพัฒนาซอฟต์แวร์สามารถใช้ chrome.offscreen API และสิทธิ์ในไฟล์ Manifest ได้ตั้งแต่ Chrome 109 เป็นต้นไป การขอสิทธิ์นี้ช่วยให้สร้างเอกสารนอกหน้าจอเพื่อใช้ DOM API ได้โดยไม่ต้องเปิดหน้าต่างหรือแท็บใหม่ซึ่งรบกวนประสบการณ์ของผู้ใช้ chrome.offscreen API พร้อมใช้งานแล้วในส่วนขยาย Chrome

ใน Chromium ส่วนขยาย Manifest V3 จะอิงตาม Service Worker แต่ Service Worker ไม่ได้รองรับ API และกลไกเดียวกับหน้าที่อิงตามเอกสารแบบเต็ม (ซึ่งรวมถึงหน้าเบื้องหลังและหน้าเหตุการณ์) นอกจากนี้ การใช้สคริปต์เนื้อหาเพื่อเข้าถึง DOM API ในหน้าเว็บจะทำให้ส่วนขยายต้องขึ้นอยู่กับนโยบายความปลอดภัยของเนื้อหาที่แตกต่างกันในแต่ละหน้า เพื่อช่วยแก้ปัญหานี้ เราจึงขอแนะนำเอกสารที่อยู่นอกหน้าจอเพื่อรองรับฟีเจอร์และ API ที่เกี่ยวข้องกับ DOM โดยอนุญาตให้ส่วนขยาย Manifest V3 เปิดเอกสารที่อยู่นอกหน้าจอที่มีขอบเขตจำกัดและไม่มีสิทธิ์ค่อนข้างมากในรันไทม์ผ่าน API โดยเฉพาะ

ข้อมูลฟีเจอร์

เนื่องจากเอกสารนอกหน้าจอออกแบบมาเพื่อจัดการกรณีการใช้งานที่ Service Worker ไม่รองรับโดยเฉพาะ (เช่น การเล่นเสียง) อายุการใช้งานของหน้านี้และสิทธิ์ที่จะได้รับจึงแยกจาก Service Worker ของส่วนขยาย หน้าเว็บจะมีกลไกอายุการใช้งานคล้ายกับหน้าเหตุการณ์ใน Manifest V2 ซึ่งจะหยุดทำงานเมื่อหยุดดำเนินการ นอกจากนี้ User Agent อาจจํากัดอายุการใช้งานเพิ่มเติมเฉพาะสําหรับวัตถุประสงค์ที่ระบุ เอกสารที่อยู่นอกหน้าจอออกแบบมาเพื่อเติมเต็มช่องว่างจาก API ที่เข้าถึงได้เฉพาะ DOM API เท่านั้น ดังนั้นจึงไม่จำเป็นต้องแสดง API ของส่วนขยายในบริบทนี้โดยตรง เพื่อลดโอกาสที่ส่วนขยายจะใช้ API เหล่านี้เป็น "การแทนที่หน้าเว็บในเบื้องหลัง" ระบบจะแสดงเฉพาะ chrome.runtime messaging API กับเอกสารที่อยู่นอกหน้าจอ (นักพัฒนาแอปยังใช้การรับส่งข้อความบนเว็บโดยการอ้างสิทธิ์เอกสารที่อยู่นอกหน้าจอเป็นไคลเอ็นต์ผ่าน Service Worker ได้ด้วย) เนื่องจากบางกรณีการใช้งาน โดยเฉพาะการคัดลอกข้อมูลเว็บไซต์ จำเป็นต้องเข้าถึงเฟรมข้ามแหล่งที่มา เราจึงอนุญาตให้เอกสารเหล่านี้ฝังเฟรมข้ามแหล่งที่มาตามกฎเดียวกับที่หน้าส่วนขยายมีในปัจจุบัน ในเอกสารที่อยู่นอกหน้าจอ สคริปต์เนื้อหาที่ส่วนขยายระบุจะทํางานในเฟรมเหล่านี้เพื่อทำการคัดลอกข้อมูลเนื้อหาที่จําเป็นได้ เช่นเดียวกับที่ทํากับหน้าเว็บปกติ

เหตุผลและการกำหนดวัตถุประสงค์

การสร้างเอกสารนอกหน้าจอต้องมีเหตุผลที่ระบุไว้และเหตุผลเพิ่มเติม เหตุผลเหล่านี้แสดงอยู่ในเอกสารอ้างอิง API และจัดการอายุของเอกสารด้วยวิธีต่างๆ ตัวอย่างเช่น ปัจจุบันเอกสารที่เปิดสำหรับการเล่นเสียงมีกฎที่แตกต่างกันกับเอกสารที่เปิดเพื่อการจัดการคลิปบอร์ด นอกจากนี้ คุณยังเพิ่มรายละเอียดเพิ่มเติมเกี่ยวกับวัตถุประสงค์ของเอกสารที่อยู่นอกหน้าจอในเหตุผลได้ด้วย ซึ่งก็คือสตริงที่นักพัฒนาซอฟต์แวร์เขียนขึ้น และไม่ใช่พารามิเตอร์ที่มีผลต่อเอกสาร เราอาจเพิ่มเหตุผลอื่นๆ ลงใน API เมื่อเวลาผ่านไปเมื่อนักพัฒนาแอปแชร์ความคิดเห็นและ Use Case

มุ่งสู่อนาคต

API เวอร์ชันแรกรองรับเพียงหน้าเดียวต่อส่วนขยายต่อโปรไฟล์เท่านั้น เพื่อให้ติดตั้งใช้งานได้ง่าย ในเวอร์ชันในอนาคต เราอาจผ่อนปรนข้อจำกัดนี้เพื่อรองรับหลายหน้า ปัจจุบัน หากส่วนขยายทำงานในโหมดแยกที่มีโปรไฟล์ที่ไม่ระบุตัวตนที่ใช้งานอยู่ ทั้งโปรไฟล์ปกติและโปรไฟล์ที่ไม่ระบุตัวตนจะมีเอกสารที่แสดงอยู่นอกหน้าจอได้ 1 รายการ นอกจากนี้ เรายังมีแผนที่จะเพิ่มฟังก์ชัน DOM ให้กับ Extension Worker ในภายหลังด้วย คุณสามารถ "เตรียมพร้อมสําหรับอนาคต" ได้โดยจับคู่ฟังก์ชันที่ใช้ Offscreen API กับฟังก์ชันที่มีความคิดเห็นที่เทียบเท่าใน Service Worker เพื่อสลับกันในภายหลัง

// Solution 1 - Service workers cannot directly interact with
// the system clipboard. To work around this, we'll create an offscreen
// document and pass the data we want to write to the clipboard.
async function addToClipboard(value) {
    await chrome.offscreen.createDocument({
      url: 'offscreen.html',
      reasons: [chrome.offscreen.Reason.CLIPBOARD],
      justification: 'Write text to the clipboard.',
    });
  }


// Solution 2 – Once extension service workers can use the Clipboard API,
// replace the offscreen document based implementation with something like this
async function addToClipboardV2(value) {
  navigator.clipboard.writeText(value);
}

นอกจากนี้ เมื่อเพิ่มฟังก์ชันการทำงานและ API ของ DOM ลงใน Service Worker ระบบจะเพิ่มหรือลดรายการเหตุผลในการสร้างเอกสาร ทั้งนี้ขึ้นอยู่กับสถานะปัจจุบันของ Service Worker และเหตุผลในการใช้เอกสารนอกหน้าจอ

บทสรุป

เอกสารที่อยู่นอกหน้าจอช่วยให้ส่วนขยายที่ต้องใช้สิทธิ์เข้าถึง DOM หรือการโต้ตอบกับหน้าต่างซึ่งปัจจุบัน Service Worker ยังไม่สามารถทำได้ นอกจากนี้ ยังใช้แนวทางที่ยืดหยุ่น ซึ่งสามารถเพิ่ม Use Case ใหม่และนำ Use Case ที่แก้ไขแล้วในอนาคตออกได้ ส่วนขยายควรใช้ API เอกสารที่อยู่นอกหน้าจอที่เสนอสำหรับ Use Case บางรายการ และบริบทเบื้องหลังหลักของส่วนขยายควรยังคงเป็น Service Worker ที่ระบุไว้ในไฟล์ Manifest เอกสารนอกหน้าจอไม่ควรเป็นพื้นที่เก็บตรรกะส่วนขยายหลักเนื่องจากมีสิทธิ์เข้าถึง API แบบจํากัด อายุการใช้งานของเอกสารที่ไม่ได้แสดงบนหน้าจอจะไม่ขึ้นอยู่กับ Service Worker ที่สร้างเอกสารนั้น เราจะกล่าวถึงข้อควรพิจารณาเกี่ยวกับอายุการใช้งานของ Service Worker และกรณีการใช้งานที่เกี่ยวข้องกับอายุการใช้งานของ Service Worker ในส่วนขยายในบล็อกโพสต์แยกต่างหาก เหตุผลในการใช้เอกสารนอกหน้าจอจะเปลี่ยนแปลงไปเมื่อเวลาผ่านไป เนื่องจากมีการเพิ่มฟีเจอร์และ API ลงใน Service Worker เอง เรายินดีรับฟังความคิดเห็นจากนักพัฒนาแอปเกี่ยวกับเรื่องนี้

รูปภาพโดย Kari Shea จาก Unsplash