วิธีการเปลี่ยนเป็น Manifest V3 สำหรับส่วนขยายของ Chrome

แม้ว่าฉันจะไม่ใช่โปรแกรมเมอร์ส่วนขยายของ Chrome ทั่วไป แต่ฉันก็เขียนโค้ดส่วนขยายได้เพียงพอและมีพอร์ตโฟลิโอการพัฒนาเว็บที่กว้างพอที่จะรู้แนวทางการทำงาน อย่างไรก็ตาม เมื่อเร็ว ๆ นี้ ฉันมีลูกค้าปฏิเสธส่วนขยายของฉัน เนื่องจากได้รับคำติชมว่าส่วนขยายของฉัน "ล้าสมัย"

ขณะที่ฉันกำลังตะเกียกตะกายเพื่อคิดว่ามีอะไรผิดปกติ ฉันเก็บความอายไว้ใต้พรมและเริ่มดำดิ่งสู่โลกของส่วนขยายของ Chrome ทันที ขออภัย ข้อมูลเกี่ยวกับ Manifest V3 นั้นหายาก และเป็นเรื่องยากสำหรับฉันที่จะเข้าใจได้อย่างรวดเร็วว่าการเปลี่ยนแปลงนี้เกี่ยวกับอะไร

ไม่ต้องบอกก็รู้ว่ามีงานค้างอยู่ ฉันต้องเพียรหาทางไปรอบๆ เอกสารสำหรับนักพัฒนา Chrome ของ Google และคิดออกเอง ในขณะที่ฉันทำงานให้เสร็จ ฉันไม่ต้องการให้ความรู้และการวิจัยของฉันในด้านนี้สูญเปล่าและตัดสินใจที่จะแบ่งปันสิ่งที่ฉันหวังว่าจะสามารถเข้าถึงได้ง่ายในเส้นทางการเรียนรู้ของฉัน

เหตุใดการเปลี่ยนไปใช้ Manifest 3 จึงมีความสำคัญ

Manifest V3 เป็น API ที่ Google จะใช้ในเบราว์เซอร์ Chrome ซึ่งเป็นตัวตายตัวแทนของ API ปัจจุบัน Manifest V2 และควบคุมวิธีที่ส่วนขยายของ Chrome โต้ตอบกับเบราว์เซอร์ Manifest V3 นำเสนอการเปลี่ยนแปลงที่สำคัญในกฎสำหรับส่วนขยาย ซึ่งบางส่วนจะเป็นแกนหลักใหม่จาก V2 ที่เราคุ้นเคย

การเปลี่ยนไปใช้ Manifest V3 สรุปได้ดังนี้

1. การเปลี่ยนแปลงดังกล่าวดำเนินมาตั้งแต่ปี 2018
2. Manifest V3 จะเริ่มเปิดตัวอย่างเป็นทางการในเดือนมกราคม 2023
3. ภายในเดือนมิถุนายน 2023 ส่วนขยายที่เรียกใช้ Manifest V2 จะไม่มีให้ใช้งานบน Chrome เว็บสโตร์อีกต่อไป
4. ส่วนขยายที่ไม่เป็นไปตามกฎใหม่ใน Manifest V3 จะถูกลบออกจาก Chrome Web Store ในที่สุด

หนึ่งในเป้าหมายหลักของ Manifest V3 คือการทำให้ผู้ใช้ปลอดภัยยิ่งขึ้นและปรับปรุงประสบการณ์เบราว์เซอร์โดยรวม ก่อนหน้านี้ ส่วนขยายของเบราว์เซอร์จำนวนมากใช้โค้ดในระบบคลาวด์ ซึ่งหมายความว่าอาจทำได้ยาก ประเมินว่าส่วนขยายมีความเสี่ยงหรือไม่. Manifest V3 มีจุดมุ่งหมายเพื่อแก้ไขปัญหานี้โดยกำหนดให้ส่วนขยายมีโค้ดทั้งหมดที่จะเรียกใช้ ทำให้ Google สามารถสแกนและตรวจจับความเสี่ยงที่อาจเกิดขึ้นได้ นอกจากนี้ยังบังคับให้ส่วนขยายต้องขออนุญาตจาก Google สำหรับการเปลี่ยนแปลงที่สามารถนำไปใช้ในเบราว์เซอร์

การติดตามข่าวสารล่าสุดเกี่ยวกับการเปลี่ยนไปใช้ Manifest V3 ของ Google เป็นสิ่งสำคัญ เนื่องจาก Google แนะนำกฎใหม่สำหรับส่วนขยายที่มุ่งปรับปรุงความปลอดภัยของผู้ใช้และประสบการณ์เบราว์เซอร์โดยรวม และส่วนขยายที่ไม่เป็นไปตามกฎเหล่านี้จะถูกลบออกจากเว็บ Chrome ในที่สุด เก็บ.

กล่าวโดยสรุปคือ ความทุ่มเททั้งหมดของคุณในการสร้างส่วนขยายที่ใช้ Manifest V2 อาจสูญเปล่าหากคุณไม่ทำการเปลี่ยนแปลงนี้ในอีกไม่กี่เดือนข้างหน้า

ข้อแตกต่างที่สำคัญระหว่าง Manifest V2 และ V3

มีความแตกต่างมากมายระหว่างสองสิ่งนี้ และในขณะที่ฉันขอแนะนำให้คุณอ่านเพิ่มเติม คู่มือ "การย้ายข้อมูลไปยัง Manifest V3" ของ Chromeนี่คือบทสรุปสั้น ๆ ที่น่าสนใจของประเด็นสำคัญ:

1. พนักงานบริการ แทนที่หน้าพื้นหลังใน Manifest V3
2. การปรับเปลี่ยนคำขอเครือข่ายได้รับการจัดการด้วยสิ่งใหม่ declarativeNetRequest API ใน Manifest V3
3. ใน Manifest V3 ส่วนขยายสามารถเรียกใช้ JavaScript ที่รวมอยู่ในแพ็คเกจเท่านั้น และไม่สามารถใช้โค้ดที่โฮสต์จากระยะไกลได้
4. ขอแนะนำรายการ Manifest V3 promise รองรับวิธีการมากมาย แม้ว่าการโทรกลับยังคงรองรับเป็นทางเลือก
5. สิทธิ์โฮสต์ใน Manifest V3 เป็นองค์ประกอบแยกต่างหากและต้องระบุใน "host_permissions" สนาม
6. นโยบายความปลอดภัยเนื้อหาใน Manifest V3 เป็นวัตถุที่มีสมาชิกแทนบริบทของนโยบายความปลอดภัยเนื้อหาทางเลือก (CSP) แทนที่จะเป็นสตริงเหมือนใน Manifest V2

ใน Manifest ของส่วนขยาย Chrome แบบธรรมดาที่เปลี่ยนพื้นหลังของหน้าเว็บ ซึ่งอาจมีลักษณะดังนี้:

// Manifest V2
{ "manifest_version": 2, "name": "Shane's Extension", "version": "1.0", "description": "A simple extension that changes the background of a webpage to Shane's face.", "background": { "scripts": ["background.js"], "persistent": true }, "browser_action": { "default_popup": "popup.html" }, "permissions": [ "activeTab", ], "optional_permissions": ["<all_urls>"]
}

// Manifest V3
{ "manifest_version": 3, "name": "Shane's Extension", "version": "1.0", "description": "A simple extension that changes the background of a webpage to Shane's face.", "background": { "service_worker": "background.js" }, "action": { "default_popup": "popup.html" }, "permissions": [ "activeTab", ], "host_permissions": [ "<all_urls>" ]
}

หากคุณพบว่าแท็กด้านบนบางรายการดูแปลกสำหรับคุณ โปรดอ่านต่อไปเพื่อค้นหาสิ่งที่คุณจำเป็นต้องรู้

วิธีเปลี่ยนเป็น Manifest V3 อย่างราบรื่น

ฉันได้สรุปการเปลี่ยนไปใช้ Manifest V3 ในสี่ประเด็นสำคัญ แน่นอนว่าในขณะที่ Manifest V3 ใหม่มีเสียงระฆังและเสียงหวีดร้องหลายอย่างที่ต้องดำเนินการจาก Manifest V2 ตัวเก่า การใช้การเปลี่ยนแปลงในสี่ด้านนี้จะทำให้ส่วนขยาย Chrome ของคุณอยู่ในแนวทางที่ถูกต้องสำหรับการเปลี่ยนแปลงในที่สุด

สี่ส่วนสำคัญคือ:

1. การอัปเดตโครงสร้างพื้นฐานของ Manifest ของคุณ
2. แก้ไขสิทธิ์โฮสต์ของคุณ
3. อัปเดตนโยบายความปลอดภัยของเนื้อหา
4. แก้ไขการจัดการคำขอเครือข่ายของคุณ

ด้วยปัจจัยทั้งสี่นี้ พื้นฐานของ Manifest ของคุณจะพร้อมสำหรับการเปลี่ยนไปใช้ Manifest V3 เรามาดูรายละเอียดประเด็นสำคัญแต่ละข้อเหล่านี้และดูว่าเราจะทำงานอย่างไรในการป้องกันส่วนขยาย Chrome ของคุณในอนาคตจากการเปลี่ยนแปลงนี้

การอัปเดตโครงสร้างพื้นฐานของ Manifest ของคุณ

การอัปเดตโครงสร้างพื้นฐานของรายการเป็นขั้นตอนแรกในการเปลี่ยนไปใช้รายการ Manifest V3 การเปลี่ยนแปลงที่สำคัญที่สุดที่คุณต้องทำคือการเปลี่ยนค่าของ "manifest_version" องค์ประกอบถึง 3ซึ่งกำหนดว่าคุณกำลังใช้ชุดคุณลักษณะ Manifest V3

ข้อแตกต่างที่สำคัญประการหนึ่งระหว่าง Manifest V2 และ V3 คือการแทนที่หน้าพื้นหลังด้วยเจ้าหน้าที่บริการส่วนขยายเดียวใน Manifest V3 คุณจะต้องลงทะเบียนพนักงานบริการภายใต้ "background" ฟิลด์โดยใช้ "service_worker" คีย์และระบุไฟล์ JavaScript ไฟล์เดียว แม้ว่า Manifest V3 จะไม่รองรับสคริปต์เบื้องหลังหลายตัว แต่คุณก็สามารถเลือกประกาศพนักงานบริการเป็นโมดูล ES ได้โดยการระบุ "type": "module"ซึ่งทำให้คุณสามารถนำเข้าโค้ดเพิ่มเติมได้

ใน Manifest V3, the "browser_action" และ "page_action" รวมคุณสมบัติเป็นหนึ่งเดียว "action" คุณสมบัติ. คุณจะต้องแทนที่คุณสมบัติเหล่านี้ด้วย "action" ในรายการของคุณ ในทำนองเดียวกัน "chrome.browserAction" และ "chrome.pageAction" API จะรวมกันเป็น API “Action” เดียวใน Manifest V3 และคุณจะต้องย้ายไปยัง API นี้

// Manifest V2 "background": { "scripts": ["background.js"], "persistent": false
}, "browser_action": { "default_popup": "popup.html"
},

// Manifest V3 "background": { "service_worker": "background.js"
}, "action": { "default_popup": "popup.html"
}

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

แก้ไขสิทธิ์โฮสต์ของคุณ

ขั้นตอนที่สองในการเปลี่ยนไปใช้ Manifest V3 คือการแก้ไขการอนุญาตโฮสต์ของคุณ ใน Manifest V2 คุณระบุสิทธิ์ของโฮสต์ใน "permissions" ฟิลด์ในไฟล์รายการ ใน Manifest V3 สิทธิ์ของโฮสต์เป็นองค์ประกอบแยกต่างหาก และคุณควรระบุใน "host_permissions" ฟิลด์ในไฟล์รายการ

ต่อไปนี้คือตัวอย่างวิธีแก้ไขสิทธิ์โฮสต์ของคุณ:

// Manifest V2 "permissions": [ "activeTab", "storage", "http://www.css-tricks.com/", ":///*" ]

// Manifest V3 "permissions": [ "activeTab", "scripting", "storage"
], "host_permissions": [ "http://www.css-tricks.com/" ], "optional_host_permissions": [ ":///*" ]

อัปเดตนโยบายความปลอดภัยของเนื้อหา

ในการอัปเดต CSP ของส่วนขยาย Manifest V2 ให้สอดคล้องกับ Manifest V3 คุณจะต้องทำการเปลี่ยนแปลงบางอย่างกับไฟล์ Manifest ของคุณ ใน Manifest V2 มีการระบุ CSP เป็นสตริงใน "content_security_policy" ฟิลด์รายการ

ใน Manifest V3 ตอนนี้ CSP เป็นอ็อบเจ็กต์ที่มีสมาชิกที่แตกต่างกันซึ่งเป็นตัวแทนของบริบท CSP ทางเลือก แทนที่จะเป็นหนึ่งเดียว "content_security_policy" ตอนนี้คุณจะต้องระบุฟิลด์แยกต่างหากสำหรับ "content_security_policy.extension_pages" และ "content_security_policy.sandbox"ขึ้นอยู่กับประเภทของหน้าส่วนขยายที่คุณใช้

คุณควรลบการอ้างอิงถึงโดเมนภายนอกใน "script-src", "worker-src", "object-src"และ "style-src" คำสั่งหากมีอยู่ สิ่งสำคัญคือต้องทำการอัปเดตเหล่านี้กับ CSP ของคุณ เพื่อให้มั่นใจถึงความปลอดภัยและความเสถียรของส่วนขยายของคุณใน Manifest V3

// Manifest V2 "content_security_policy": "script-src 'self' https://css-tricks.com; object-src 'self'"

// Manfiest V3 "content_security_policy.extension_pages": "script-src 'self' https://example.com; object-src 'self'", "content_security_policy.sandbox": "script-src 'self' https://css-tricks.com; object-src 'self'"

แก้ไขการจัดการคำขอเครือข่ายของคุณ

ขั้นตอนสุดท้ายในการเปลี่ยนไปใช้ Manifest V3 คือการแก้ไขการจัดการคำขอเครือข่ายของคุณ ใน Manifest V2 คุณจะเคยใช้ไฟล์ chrome.webRequest API เพื่อแก้ไขคำขอเครือข่าย อย่างไรก็ตาม API นี้ถูกแทนที่ใน Manifest V3 โดย declarativeNetRequest API

หากต้องการใช้ API ใหม่นี้ คุณจะต้องระบุ declarativeNetRequest อนุญาตในรายการของคุณและอัปเดตรหัสของคุณเพื่อใช้ API ใหม่ ข้อแตกต่างที่สำคัญประการหนึ่งระหว่าง API ทั้งสองคือ declarativeNetRequest API ต้องการให้คุณระบุรายการของที่อยู่ที่กำหนดไว้ล่วงหน้าเพื่อบล็อก แทนที่จะสามารถบล็อกคำขอ HTTP ทั้งหมวดหมู่อย่างที่คุณสามารถทำได้ด้วย chrome.webRequest API

สิ่งสำคัญคือต้องทำการเปลี่ยนแปลงเหล่านี้ในโค้ดของคุณเพื่อให้แน่ใจว่าส่วนขยายของคุณยังคงทำงานได้อย่างถูกต้องภายใต้ Manifest V3 นี่คือตัวอย่างวิธีที่คุณจะแก้ไขไฟล์ Manifest เพื่อใช้ declarativeNetRequest API ใน Manifest V3:

// Manifest V2 "permissions": [ "webRequest", "webRequestBlocking"
]

// Manifest V3 "permissions": [ "declarativeNetRequest"
]

คุณจะต้องอัปเดตรหัสส่วนขยายของคุณเพื่อใช้ declarativeNetRequest API แทน chrome.webRequest API

ด้านอื่น ๆ ที่คุณต้องตรวจสอบ

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

• การโอนย้ายสคริปต์พื้นหลังไปยังบริบทการดำเนินการของผู้ปฏิบัติงานบริการ: ตามที่กล่าวไว้ก่อนหน้านี้ Manifest V3 แทนที่หน้าพื้นหลังด้วยโปรแกรมทำงานบริการส่วนขยายเดียว ดังนั้นอาจจำเป็นต้องอัปเดตสคริปต์พื้นหลังเพื่อปรับให้เข้ากับบริบทการดำเนินการของพนักงานบริการ
• รวม **chrome.browserAction** และ **chrome.pageAction** APIs: API ที่เทียบเท่าทั้งสองนี้รวมกันเป็น API เดียวใน Manifest V3 ดังนั้นอาจจำเป็นต้องย้ายไปยัง Action API
• การโอนย้ายฟังก์ชันที่คาดว่าจะมีบริบทพื้นหลังของ Manifest V2: การนำพนักงานบริการมาใช้ใน Manifest V3 ไม่สามารถทำงานร่วมกับวิธีการต่างๆ เช่น chrome.runtime.getBackgroundPage(), chrome.extension.getBackgroundPage(), chrome.extension.getExtensionTabs()และ chrome.extension.getViews(). อาจจำเป็นต้องโยกย้ายไปยังการออกแบบที่ส่งข้อความระหว่างบริบทอื่นและผู้ปฏิบัติงานบริการเบื้องหลัง
• การย้ายคำขอ CORS ในสคริปต์เนื้อหาไปยังพนักงานบริการเบื้องหลัง: อาจจำเป็นต้องย้ายคำขอ CORS ในสคริปต์เนื้อหาไปยังพนักงานบริการเบื้องหลังเพื่อให้สอดคล้องกับ Manifest V3
• การย้ายออกจากการรันโค้ดภายนอกหรือสตริงโดยอำเภอใจ: Manifest V3 ไม่อนุญาตให้ใช้ตรรกะภายนอกอีกต่อไป chrome.scripting.executeScript({code: '...'}), eval()และ new Function(). อาจจำเป็นต้องย้ายโค้ดภายนอกทั้งหมด (JavaScript, WebAssembly, CSS) ไปยังบันเดิลส่วนขยาย อัปเดตสคริปต์และการอ้างอิงสไตล์เพื่อโหลดทรัพยากรจากบันเดิลส่วนขยาย และใช้ chrome.runtime.getURL() เพื่อสร้าง URL ของทรัพยากรในขณะรันไทม์
• การอัปเดตวิธีการเขียนสคริปต์และ CSS บางอย่างใน Tabs API: ตามที่กล่าวไว้ก่อนหน้านี้ มีหลายวิธีที่จะย้ายจาก Tabs API ไปยัง Scripting API ใน Manifest V3 อาจจำเป็นต้องอัปเดตการเรียกใช้เมธอดเหล่านี้เพื่อใช้ Manifest V3 API ที่ถูกต้อง

และอื่น ๆ อีกมากมาย!

อย่าลังเลที่จะใช้เวลาสักครู่เพื่อรับทราบข้อมูลล่าสุดเกี่ยวกับการเปลี่ยนแปลงทั้งหมด ท้ายที่สุดแล้ว การเปลี่ยนแปลงนี้เป็นสิ่งที่หลีกเลี่ยงไม่ได้ และหากคุณไม่ต้องการให้ส่วนขยาย Manifest V2 ของคุณสูญหายเนื่องจากการหลีกเลี่ยงการเปลี่ยนแปลงนี้ ให้ใช้เวลาเตรียมความรู้ที่จำเป็นให้พร้อม

ในทางกลับกัน หากคุณยังใหม่ต่อการเขียนโปรแกรมส่วนขยายของ Chrome และต้องการเริ่มต้น วิธีที่ดีในการดำเนินการคือดำดิ่งสู่โลกของเครื่องมือสำหรับนักพัฒนาเว็บของ Chrome ฉันทำได้ผ่านหลักสูตรเกี่ยวกับ เรียนรู้ Linkedinซึ่งทำให้ฉันเร่งความเร็วได้ค่อนข้างเร็ว เมื่อคุณมีความรู้พื้นฐานแล้ว ให้กลับมาที่บทความนี้และแปลสิ่งที่คุณรู้เป็น Manifest V3!

ดังนั้น ฉันจะใช้คุณลักษณะต่างๆ ใน ​​Manifest V3 ใหม่ได้อย่างไรในอนาคต

สำหรับฉันแล้ว การเปลี่ยนไปใช้ Manifest V3 และการลบไฟล์ chrome.webRequest API ดูเหมือนจะเปลี่ยนส่วนขยายจากกรณีการใช้งานที่เน้นข้อมูลเป็นหลัก (เช่น ตัวบล็อกโฆษณา) ไปสู่การใช้งานตามฟังก์ชันและแอปพลิเคชันมากขึ้น ฉันอยู่ห่างจากการพัฒนาแอปพลิเคชันเมื่อเร็ว ๆ นี้เนื่องจากสามารถทำได้ค่อนข้างมาก ใช้ทรัพยากรมาก ในช่วงเวลาที่. อย่างไรก็ตาม การเปลี่ยนแปลงนี้อาจเป็นสิ่งที่ทำให้ฉันกลับมา!

การเพิ่มขึ้นของเครื่องมือ AI ในช่วงที่ผ่านมา ซึ่งหลายเครื่องมือมี API ที่พร้อมใช้งาน ทำให้มีแอปพลิเคชัน SaaS ใหม่ๆ มากมาย โดยส่วนตัวแล้ว ฉันคิดว่ามันมาในเวลาที่เหมาะสมที่สุดกับการเปลี่ยนไปใช้ส่วนขยาย Chrome ที่ใช้แอปพลิเคชันมากขึ้น! แม้ว่าส่วนขยายที่เก่ากว่าจำนวนมากอาจถูกลบออกจากการเปลี่ยนแปลงนี้ แต่ส่วนขยายใหม่ๆ มากมายที่สร้างขึ้นจากแนวคิด SaaS ใหม่ๆ จะเข้ามาแทนที่

ดังนั้น นี่คือการอัปเดตที่น่าตื่นเต้นสำหรับการเข้าร่วมและปรับปรุงส่วนขยายเก่าหรือสร้างส่วนขยายใหม่! โดยส่วนตัวแล้ว ฉันเห็นความเป็นไปได้มากมายในการใช้ API ที่เกี่ยวข้องกับการใช้ AI ในส่วนขยายเพื่อปรับปรุงประสบการณ์การท่องเว็บของผู้ใช้ แต่นั่นเป็นเพียงส่วนเล็ก ๆ ของภูเขาน้ำแข็งเท่านั้น หากคุณต้องการทำสิ่งต่างๆ ด้วยส่วนขยายระดับมืออาชีพของคุณเอง หรือติดต่อกับบริษัทต่างๆ เพื่อสร้าง/อัปเดตส่วนขยายสำหรับพวกเขา ฉันขอแนะนำ อัปเกรดบัญชี Gmail ของคุณ เพื่อประโยชน์ในการทำงานร่วมกัน พัฒนา และเผยแพร่ส่วนขยายไปยัง Chrome เว็บสโตร์

อย่างไรก็ตาม โปรดจำไว้ว่าข้อกำหนดของนักพัฒนาทุกคนนั้นแตกต่างกัน ดังนั้นเรียนรู้สิ่งที่คุณต้องการเพื่อให้ส่วนขยายปัจจุบันของคุณใช้งานได้ต่อไป หรือส่วนขยายใหม่ของคุณต่อไป!

• เนื้อหาที่ขับเคลื่อนด้วย SEO และการเผยแพร่ประชาสัมพันธ์ รับการขยายวันนี้
• เพลโตบล็อคเชน Web3 Metaverse ข่าวกรอง ขยายความรู้. เข้าถึงได้ที่นี่.
• ที่มา: https://css-tricks.com/how-to-transition-to-manifest-v3-for-chrome-extensions/