อัปเดตรหัส

การอัปเดตที่ไม่เกี่ยวข้องกับปัญหาอื่นๆ

นี่คือส่วนแรกจากสามส่วนที่อธิบายการเปลี่ยนแปลงที่จำเป็นสำหรับโค้ดที่ไม่ได้เป็นส่วนหนึ่งของโปรแกรมทำงานของบริการส่วนขยาย ส่วนนี้มีไว้สำหรับการเปลี่ยนแปลงโค้ดที่จำเป็นซึ่งไม่เกี่ยวข้องกับปัญหาอื่นๆ สองส่วนถัดไปจะกล่าวถึงการแทนที่คำขอเว็บที่บล็อกและการปรับปรุงความปลอดภัย

แทนที่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 แทนที่จะส่งเป็นอาร์กิวเมนต์เมธอด

ตัวอย่างแสดงวิธีดำเนินการ

ไฟล์ Manifest V2
async function getCurrentTab() {/* ... */}
let tab = await getCurrentTab();

chrome.tabs.executeScript(
  tab.id,
  {
    file: 'content-script.js'
  }
);

ในไฟล์สคริปต์เบื้องหลัง

ไฟล์ Manifest V3
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() จะเหมือนกัน

ไฟล์ Manifest V2
chrome.tabs.insertCSS(tabId, injectDetails, () => {
  // callback code
});

ในไฟล์สคริปต์เบื้องหลัง

ไฟล์ Manifest V3
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"

ไฟล์ Manifest V2
{
  ...
  "page_action": { ... },
  "browser_action": {
    "default_popup": "popup.html"
   }
  ...
}
ไฟล์ Manifest V3
{
  ...
  "action": {
    "default_popup": "popup.html"
  }

  ...
}

แทนที่ BrowserAction และ pageAction API ด้วย Action API

หากไฟล์ Manifest V2 ของคุณใช้ API ของ browserAction และ pageAction คุณควรใช้ API ของ action แทน

ไฟล์ Manifest V2
chrome.browserAction.onClicked.addListener(tab => { ... });
chrome.pageAction.onClicked.addListener(tab => { ... });
ไฟล์ Manifest V3
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