อัปเดตรหัส

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

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

แทนที่ tabs.executeScript() ด้วย scripting.executeScript()

ใน Manifest V3 executeScript() จะย้ายจาก tabs API ไปยัง scripting API ซึ่งต้องมีการเปลี่ยนแปลงสิทธิ์ในไฟล์ Manifest นอกเหนือจากการเปลี่ยนแปลงโค้ดจริง

สำหรับexecuteScript() คุณต้องมีสิ่งต่อไปนี้

  • สิทธิ์เข้าถึง"scripting"
  • สิทธิ์ของโฮสต์หรือสิทธิ์ "activeTab"

scripting.executeScript() วิธีนี้คล้ายกับวิธีที่ใช้กับ tabs.executeScript() โดยมีความแตกต่างบางประการดังนี้

  • แม้ว่าวิธีเก่าจะรับได้เพียงไฟล์เดียว แต่วิธีใหม่จะรับไฟล์ได้หลายไฟล์
  • นอกจากนี้ คุณยังส่งออบเจ็กต์ ScriptInjection แทน InjectDetails ได้ด้วย ทั้ง 2 อย่างนี้มีความแตกต่างกันหลายประการ เช่น ตอนนี้ระบบจะส่ง tabId เป็นสมาชิกของ ScriptInjection.target แทนที่จะเป็นอาร์กิวเมนต์ของเมธอด

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

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

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

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

Manifest V3
async function getCurrentTab()
let tab = await getCurrentTab();

browser.scripting.executeScript({
  target: {tabId: tab.id},
  files: ['content-script.js']
});

ใน Service Worker ของส่วนขยาย

แทนที่ tabs.insertCSS() และ tabs.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
browser.tabs.insertCSS(tabId, injectDetails, () => {
  // callback code
});

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

Manifest V3
const insertPromise = await browser.scripting.insertCSS({
  files: ["style.css"],
  target: { tabId: tab.id }
});
// Remaining code.

ใน Service Worker ของส่วนขยาย

แทนที่การดำเนินการของเบราว์เซอร์และการดำเนินการของหน้าเว็บด้วยการดำเนินการ

การดำเนินการของเบราว์เซอร์และการดำเนินการของหน้าเว็บเป็นแนวคิดที่แยกกันใน Manifest V2 แม้ว่าในตอนแรกจะมีบทบาทที่แตกต่างกัน แต่ความแตกต่างระหว่างทั้ง 2 บทบาทก็ลดลงเมื่อเวลาผ่านไป ใน Manifest V3 แนวคิดเหล่านี้จะรวมกันเป็น API Action ซึ่งต้องมีการเปลี่ยนแปลงใน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"
  }

  ...
}

แทนที่ API ของ browserAction และ pageAction ด้วย API ของการดำเนินการ

ในกรณีที่ Manifest V2 ใช้ API browserAction และ pageAction คุณควรใช้ API action แทน

Manifest V2
browser.browserAction.onClicked.addListener(tab => { ... });
browser.pageAction.onClicked.addListener(tab => { ... });
Manifest V3
browser.action.onClicked.addListener(tab => { ... });

แทนที่การเรียกกลับด้วยสัญญา

ใน Manifest V3 เมธอด API ของส่วนขยายหลายรายการจะแสดงผล Promise Promise คือพร็อกซีหรือตัวยึดตำแหน่งสำหรับค่าที่เมธอดแบบอะซิงโครนัสแสดงผล หากไม่เคยใช้ Promise คุณสามารถอ่านเกี่ยวกับ Promise ใน MDN หน้านี้อธิบายสิ่งที่คุณต้องทราบเพื่อใช้ฟีเจอร์เหล่านี้ในส่วนขยาย Chrome

เพื่อความเข้ากันได้แบบย้อนหลัง หลายๆ เมธอดจะยังคงรองรับการเรียกกลับหลังจากเพิ่มการรองรับ Promise แล้ว โปรดทราบว่าคุณไม่สามารถใช้ทั้ง 2 อย่างในการเรียกใช้ฟังก์ชันเดียวกัน หากส่ง Callback ฟังก์ชันจะไม่แสดงผล Promise และหากต้องการให้แสดงผล Promise อย่าส่ง Callback ฟีเจอร์ API บางอย่าง เช่น ตัวตรวจหาเหตุการณ์ จะยังคงต้องใช้การเรียกกลับ หากต้องการตรวจสอบว่าเมธอดรองรับ Promise หรือไม่ ให้มองหาป้ายกำกับ "Promise" ในการอ้างอิง API ของเมธอดนั้น

หากต้องการแปลงจากการเรียกกลับเป็น Promise ให้นำการเรียกกลับออกและจัดการ Promise ที่แสดงผล ตัวอย่างด้านล่างมาจากตัวอย่างสิทธิ์ที่ไม่บังคับ newtab.js โดยเฉพาะ เวอร์ชัน Callback จะแสดงลักษณะการเรียกใช้ request() ของตัวอย่างเมื่อใช้ Callback โปรดทราบว่าคุณสามารถเขียนเวอร์ชัน Promise ใหม่ด้วย async และ await ได้

การติดต่อกลับ
browser.permissions.request(newPerms, (granted) => {
  if (granted) {
    console.log('granted');
  } else {
    console.log('not granted');
  }
});
Promise
const newPerms = { permissions: ['topSites'] };
browser.permissions.request(newPerms)
.then((granted) => {
  if (granted) {
    console.log('granted');
  } else {
    console.log('not granted');
  }
});

แทนที่ฟังก์ชันที่คาดหวังบริบทพื้นหลังของไฟล์ Manifest V2

บริบทส่วนขยายอื่นๆ จะโต้ตอบกับ Service Worker ของส่วนขยายได้โดยใช้การส่งข้อความเท่านั้น ดังนั้น คุณจะต้องแทนที่การเรียกที่คาดหวังบริบทเบื้องหลัง ซึ่งได้แก่

  • browser.runtime.getBackgroundPage()
  • browser.extension.getBackgroundPage()
  • browser.extension.getExtensionTabs()

สคริปต์ส่วนขยายควรใช้การส่งผ่านข้อความเพื่อสื่อสารระหว่าง Service Worker กับส่วนอื่นๆ ของส่วนขยาย ปัจจุบันคุณทำได้โดยใช้ sendMessage() และใช้ browser.runtime.onMessage ใน Service Worker ของส่วนขยาย ในระยะยาว คุณควรวางแผนที่จะแทนที่การเรียกเหล่านี้ด้วย postMessage() และตัวแฮนเดิลเหตุการณ์ข้อความของ Service Worker

แทนที่ API ที่ไม่รองรับ

คุณต้องเปลี่ยนเมธอดและพร็อพเพอร์ตี้ที่แสดงด้านล่างใน Manifest V3

เมธอดหรือพร็อพเพอร์ตี้ Manifest V2 แทนที่ด้วย
browser.extension.connect() browser.runtime.connect()
browser.extension.connectNative() browser.runtime.connectNative()
browser.extension.getExtensionTabs() browser.extension.getViews()
browser.extension.getURL() browser.runtime.getURL()
browser.extension.lastError ในกรณีที่เมธอดส่งคืน Promise ให้ใช้ promise.catch()
browser.extension.onConnect browser.runtime.onConnect
browser.extension.onConnectExternal browser.runtime.onConnectExternal
browser.extension.onMessage browser.runtime.onMessage
browser.extension.onRequest browser.runtime.onMessage
browser.extension.onRequestExternal browser.runtime.onMessageExternal
browser.extension.sendMessage() browser.runtime.sendMessage()
browser.extension.sendNativeMessage() browser.runtime.sendNativeMessage()
browser.extension.sendRequest() browser.runtime.sendMessage()
browser.runtime.onSuspend (สคริปต์เบื้องหลัง) ไม่รองรับใน Service Worker ของส่วนขยาย ให้ใช้เหตุการณ์ของเอกสาร beforeunload แทน
browser.tabs.getAllInWindow() browser.tabs.query()
browser.tabs.getSelected() browser.tabs.query()
browser.tabs.onActiveChanged browser.tabs.onActivated
browser.tabs.onHighlightChanged browser.tabs.onHighlighted
browser.tabs.onSelectionChanged browser.tabs.onActivated
browser.tabs.sendRequest() browser.runtime.sendMessage()
browser.tabs.Tab.selected browser.tabs.Tab.highlighted