ข้อมูลอัปเดตที่ไม่เกี่ยวข้องกับปัญหาอื่นๆ
นี่คือส่วนแรกจาก 3 ส่วนที่อธิบายการเปลี่ยนแปลงที่จำเป็นสำหรับโค้ดที่ไม่ได้เป็นส่วนหนึ่งของโปรแกรมทำงานของบริการส่วนขยาย ส่วนนี้มีไว้สำหรับการเปลี่ยนแปลงโค้ดที่จำเป็นที่ไม่เกี่ยวข้องกับปัญหาอื่นๆ สองส่วนถัดไปจะครอบคลุมถึงการแทนที่การบล็อกคำขอเว็บและการปรับปรุงความปลอดภัย
แทนที่ คลิกแท็บ.executeScript() ด้วย Scripting.exeชื่อScript()
ในไฟล์ Manifest V3 ทาง executeScript()
จะย้ายจาก tabs
API ไปยัง scripting
API การดำเนินการนี้จำเป็นต้องมีการเปลี่ยนแปลงสิทธิ์ในไฟล์ 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'] });
แทนที่ คลิกแท็บ.insertCSS() และของแท็บ.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 คือพร็อกซีหรือตัวยึดตำแหน่งสำหรับค่าที่แสดงผลในเมธอดไม่พร้อมกัน หากไม่เคยใช้ Promiss ให้อ่านเกี่ยวกับ MDN หน้านี้จะอธิบายถึงสิ่งที่คุณจำเป็นต้องทราบเมื่อใช้งานในส่วนขยาย Chrome
สำหรับความเข้ากันได้แบบย้อนหลัง หลายๆ เมธอดจะรองรับการติดต่อกลับหลังจากเพิ่มการรองรับคำสัญญาแล้ว โปรดทราบว่าคุณไม่สามารถใช้ทั้ง 2 อย่างในการเรียกใช้ฟังก์ชันเดียวกันได้ หากคุณส่งผ่านโค้ดเรียกกลับ ฟังก์ชันดังกล่าวจะไม่แสดงสัญญา และหากต้องการให้สัญญาส่งคืนก็จะไม่ส่งโค้ดเรียกกลับ ฟีเจอร์บางอย่างของ API เช่น Listener เหตุการณ์ จะยังคงต้องใช้โค้ดเรียกกลับอยู่ หากต้องการตรวจสอบว่าเมธอดรองรับ Promise หรือไม่ ให้มองหาป้ายกำกับ "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.onMessage |
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 |