อัปเดตรหัส

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

นี่คือส่วนแรกจาก 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