อัปเดตรหัส

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

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

แทนที่ Tab.exeuteScript() ด้วย Scripting.exeเสร็จสิ้นScript()

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

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

• สิทธิ์ "scripting"
• สิทธิ์ของโฮสต์หรือสิทธิ์ "activeTab"

เมธอด scripting.executeScript() จะคล้ายกับเมธอดใน tabs.executeScript() ซึ่งมีความแตกต่างอยู่เล็กน้อย

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

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

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']
});

แทนที่ Tab.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 แทนที่จะเป็นอาร์กิวเมนต์ Method

ตัวอย่างแสดงวิธีดำเนินการนี้สำหรับ 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 คล้ายกับการทำงานของเบราว์เซอร์มากที่สุด แต่ API ของ action ไม่มี 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 => { ... });

แทนที่ Callback ด้วยสัญญา

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

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

หากต้องการแปลงการเรียกกลับเป็นสัญญา ให้นำการเรียกกลับออกและจัดการสัญญาที่ส่งกลับมา ตัวอย่างด้านล่างมาจากตัวอย่างสิทธิ์ที่ไม่บังคับ โดยเฉพาะ newtab.js เวอร์ชัน Callback จะแสดงลักษณะของการเรียกไปยัง 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()

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

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

เมธอดและพร็อพเพอร์ตี้ที่ระบุไว้ด้านล่างจะต้องเปลี่ยนแปลงในไฟล์ Manifest V3