การอัปเดตที่ไม่เกี่ยวข้องกับปัญหาอื่นๆ
นี่คือส่วนแรกจากสามส่วนที่อธิบายการเปลี่ยนแปลงที่จำเป็นสำหรับโค้ดที่ไม่ได้เป็นส่วนหนึ่งของโปรแกรมทำงานของบริการส่วนขยาย ส่วนนี้มีไว้สำหรับการเปลี่ยนแปลงโค้ดที่จำเป็นซึ่งไม่เกี่ยวข้องกับปัญหาอื่นๆ สองส่วนถัดไปจะกล่าวถึงการแทนที่คำขอเว็บที่บล็อกและการปรับปรุงความปลอดภัย
แทนที่tab.executeScript() ด้วย Scripting.executeScript()
ในไฟล์ Manifest V3 นั้น executeScript()
จะย้ายจาก tabs
API ไปยัง API ของ scripting
การดำเนินการนี้จำเป็นต้องเปลี่ยนแปลงสิทธิ์ในไฟล์ Manifest นอกเหนือจากการเปลี่ยนแปลงโค้ดจริง
สำหรับเมธอด executeScript()
คุณต้องมีสิ่งต่อไปนี้
- สิทธิ์
"scripting"
- อาจเป็นสิทธิ์ของโฮสต์หรือสิทธิ์ของ
"activeTab"
เมธอด scripting.executeScript()
คล้ายกับวิธีทํางานร่วมกับ tabs.executeScript()
ข้อแตกต่างบางประการ
- แม้ว่าวิธีการเดิมจะใช้ได้เพียงไฟล์เดียวเท่านั้น แต่วิธีการใหม่อาจใช้ได้หลายไฟล์
- นอกจากนี้คุณยังส่งออบเจ็กต์
ScriptInjection
แทนInjectDetails
ได้ด้วย รูปแบบทั้ง 2 นี้แตกต่างกันหลายประการ ตัวอย่างเช่น ระบบจะส่งtabId
ในฐานะสมาชิกของScriptInjection.target
แทนที่จะส่งเป็นอาร์กิวเมนต์เมธอด
ตัวอย่างแสดงวิธีดำเนินการ
async function getCurrentTab() {/* ... */} let tab = await getCurrentTab(); chrome.tabs.executeScript( tab.id, { file: 'content-script.js' } );
async function getCurrentTab() let tab = await getCurrentTab(); chrome.scripting.executeScript({ target: {tabId: tab.id}, files: ['content-script.js'] });
แทนที่ pages.insertCSS() และtab.removeCSS() ด้วย Scripting.insertCSS() และ Scripting.removeCSS()
ในไฟล์ Manifest V3 นั้น insertCSS()
และ removeCSS()
จะย้ายจาก tabs
API ไปยัง scripting
API การดำเนินการนี้ต้องเปลี่ยนแปลงสิทธิ์ในไฟล์ Manifest เพิ่มเติมจากการเปลี่ยนแปลงโค้ด ดังนี้
- สิทธิ์
"scripting"
- อาจเป็นสิทธิ์ของโฮสต์หรือสิทธิ์ของ
"activeTab"
ฟังก์ชันใน scripting
API คล้ายกับฟังก์ชันใน tabs
ข้อแตกต่างบางประการ
- เมื่อเรียกใช้เมธอดเหล่านี้ คุณจะส่งออบเจ็กต์
CSSInjection
แทนInjectDetails
- ระบบจะส่ง
tabId
ในฐานะสมาชิกของCSSInjection.target
แทนที่จะเป็นอาร์กิวเมนต์เมธอด
ตัวอย่างนี้แสดงวิธีดําเนินการสําหรับ insertCSS()
ขั้นตอนสำหรับ removeCSS()
จะเหมือนกัน
chrome.tabs.insertCSS(tabId, injectDetails, () => { // callback code });
const insertPromise = await chrome.scripting.insertCSS({ files: ["style.css"], target: { tabId: tab.id } }); // Remaining code.
แทนที่การทำงานในเบราว์เซอร์และการทำงานของหน้าเว็บด้วยการทำงาน
การดำเนินการของเบราว์เซอร์และการทำงานของหน้าเว็บเป็นคนละแนวคิดในไฟล์ Manifest V2 แม้ว่าจะเริ่มต้นด้วยบทบาทที่แตกต่างกัน แต่ความแตกต่างระหว่างบทบาทเหล่านั้นก็ลดลงเมื่อเวลาผ่านไป ในไฟล์ Manifest V3 แนวคิดเหล่านี้จะรวมอยู่ใน Action API การดำเนินการนี้ต้องเปลี่ยนแปลง manifest.json
และโค้ดส่วนขยายให้แตกต่างจากที่คุณใส่ในสคริปต์พื้นหลังของไฟล์ Manifest V2
การดำเนินการในไฟล์ Manifest V3 คล้ายกับการดำเนินการของเบราว์เซอร์มากที่สุด แต่ action
API ไม่ได้ระบุ hide()
และ show()
เหมือนกับ pageAction
หากยังคงต้องการให้มีการดำเนินการกับหน้าเว็บ คุณสามารถจำลองการดำเนินการโดยใช้เนื้อหาประกาศ หรือเรียกใช้ enable()
หรือ disable()
ด้วยรหัสแท็บ
แทนที่ "browser_action" และ "page_action" ด้วย "action"
ใน manifest.json
ให้แทนที่ช่อง "browser_action"
และ "page_action"
ด้วยช่อง "action"
ดูข้อมูลอ้างอิงสำหรับข้อมูลในช่อง "action"
{ ... "page_action": { ... }, "browser_action": { "default_popup": "popup.html" } ... }
{ ... "action": { "default_popup": "popup.html" } ... }
แทนที่ BrowserAction และ pageAction API ด้วย Action API
หากไฟล์ Manifest V2 ของคุณใช้ API ของ browserAction
และ pageAction
คุณควรใช้ API ของ action
แทน
chrome.browserAction.onClicked.addListener(tab => { ... }); chrome.pageAction.onClicked.addListener(tab => { ... });
chrome.action.onClicked.addListener(tab => { ... });
แทนที่โค้ดเรียกกลับด้วยคำมั่นสัญญา
ในไฟล์ Manifest V3 เมธอดของ API ส่วนขยายหลายอย่างจะให้ผลลัพธ์ตามคำสัญญา Promise คือพร็อกซีหรือตัวยึดตำแหน่งสำหรับค่าที่แสดงผลโดยเมธอดแบบไม่พร้อมกัน หากไม่เคยใช้ Promises ให้อ่านข้อมูลเกี่ยวกับ MDN หน้านี้จะอธิบายถึงสิ่งที่คุณจำเป็นต้องทราบในการใช้ส่วนขยาย Chrome
สำหรับความเข้ากันได้แบบย้อนหลัง หลายวิธีจะยังคงรองรับโค้ดเรียกกลับหลังจากเพิ่มการรองรับคำสัญญาแล้ว โปรดทราบว่าคุณไม่สามารถใช้คำสั่งทั้งสองในการเรียกใช้ฟังก์ชันเดียวกันได้ หากคุณส่งผ่านฟังก์ชัน Callback ฟังก์ชันนี้จะไม่แสดงผลเป็นคำสัญญา และหากต้องการให้มีการส่งคืนคำสัญญาก็ไม่ต้องส่งผ่าน Callback ฟีเจอร์บางอย่างของ API เช่น Listener เหตุการณ์ จะยังคงต้องใช้โค้ดเรียกกลับอยู่ หากต้องการตรวจสอบว่าเมธอดรองรับคำสัญญาหรือไม่ ให้มองหาป้ายกำกับ "Promise" ในข้อมูลอ้างอิง API
หากต้องการแปลงจากโค้ดเรียกกลับเป็นคำมั่นสัญญา ให้นำโค้ดเรียกกลับออกและจัดการคำมั่นสัญญาที่ส่งกลับ ตัวอย่างด้านล่างมาจากตัวอย่างสิทธิ์ที่ไม่บังคับ โดยเฉพาะ newtab.js
เวอร์ชันโค้ดเรียกกลับจะแสดงให้เห็นว่าการเรียกตัวอย่างไปยัง request()
มีลักษณะอย่างไรเมื่อใช้โค้ดเรียกกลับ โปรดทราบว่าคุณสามารถเขียนเวอร์ชันที่สัญญาใหม่โดยไม่ซิงค์กัน แล้วรอ
chrome.permissions.request(newPerms, (granted) => { if (granted) { console.log('granted'); } else { console.log('not granted'); } });
const newPerms = { permissions: ['topSites'] }; chrome.permissions.request(newPerms) .then((granted) => { if (granted) { console.log('granted'); } else { console.log('not granted'); } });
แทนที่ฟังก์ชันที่คาดหวังบริบทพื้นหลังของไฟล์ Manifest V2
บริบทส่วนขยายอื่นๆ จะโต้ตอบกับโปรแกรมทำงานของบริการส่วนขยายได้โดยใช้การส่งข้อความเท่านั้น ดังนั้น คุณจะต้องแทนที่การโทรที่คาดหวังบริบทเบื้องหลัง โดยเฉพาะอย่างยิ่ง
chrome.runtime.getBackgroundPage()
chrome.extension.getBackgroundPage()
chrome.extension.getExtensionTabs()
สคริปต์ของส่วนขยายควรใช้การส่งข้อความเพื่อสื่อสารระหว่างโปรแกรมทำงานของบริการกับส่วนอื่นๆ ของส่วนขยาย ปัจจุบันต้องใช้ sendMessage()
และติดตั้งใช้งาน chrome.runtime.onMessage
ในโปรแกรมทำงานของบริการส่วนขยาย ในระยะยาว คุณควรวางแผนแทนที่การเรียกเหล่านี้ด้วย postMessage()
และเครื่องจัดการเหตุการณ์ข้อความของ Service Worker
แทนที่ API ที่ไม่รองรับ
เมธอดและพร็อพเพอร์ตี้ที่แสดงด้านล่างต้องเปลี่ยนแปลงในไฟล์ Manifest V3
เมธอดหรือพร็อพเพอร์ตี้ไฟล์ Manifest V2 | แทนที่ด้วย |
---|---|
chrome.extension.connect() |
chrome.runtime.connect() |
chrome.extension.connectNative() |
chrome.runtime.connectNative() |
chrome.extension.getExtensionTabs() |
chrome.extension.getViews() |
chrome.extension.getURL() |
chrome.runtime.getURL() |
chrome.extension.lastError |
ในกรณีที่เมธอดส่งคืนคำมั่นสัญญา ให้ใช้ promise.catch() |
chrome.extension.onConnect |
chrome.runtime.onConnect |
chrome.extension.onConnectExternal |
chrome.runtime.onConnectExternal |
chrome.extension.onMessage |
chrome.runtime.onMessage |
chrome.extension.onRequest |
chrome.runtime.onRequest |
chrome.extension.onRequestExternal |
chrome.runtime.onMessageExternal |
chrome.extension.sendMessage() |
chrome.runtime.sendMessage() |
chrome.extension.sendNativeMessage() |
chrome.runtime.sendNativeMessage() |
chrome.extension.sendRequest() |
chrome.runtime.sendMessage() |
chrome.runtime.onSuspend (สคริปต์พื้นหลัง) |
ไม่รองรับในโปรแกรมทำงานของบริการส่วนขยาย โปรดใช้เหตุการณ์ในเอกสาร beforeunload แทน |
chrome.tabs.getAllInWindow() |
chrome.tabs.query() |
chrome.tabs.getSelected() |
chrome.tabs.query() |
chrome.tabs.onActiveChanged |
chrome.tabs.onActivated |
chrome.tabs.onHighlightChanged |
chrome.tabs.onHighlighted |
chrome.tabs.onSelectionChanged |
chrome.tabs.onActivated |
chrome.tabs.sendRequest() |
chrome.runtime.sendMessage() |
chrome.tabs.Tab.selected |
chrome.tabs.Tab.highlighted |