อัปเดตรหัส

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

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

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

ในไฟล์ 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 หน้านี้จะอธิบายข้อมูลที่จำเป็นในการใช้ WebAssembly ในส่วนขยาย Chrome

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

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

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