Mengupdate kode

Pembaruan yang tidak terkait dengan masalah lain

Ini adalah bagian pertama dari tiga bagian yang menjelaskan perubahan yang diperlukan untuk kode yang bukan bagian dari service worker ekstensi. Bagian ini ditujukan untuk perubahan kode yang diperlukan dan tidak terkait dengan masalah lainnya. Dua bagian berikutnya membahas mengganti permintaan web yang memblokir dan meningkatkan keamanan.

Ganti tabs.executeScript() dengan scripting.executeScript()

Di Manifes V3, executeScript() berpindah dari tabs API ke scripting API. Hal ini memerlukan perubahan pada izin dalam file manifes selain perubahan kode sebenarnya.

Untuk metode executeScript(), Anda memerlukan:

• Izin "scripting".
• Izin host atau izin "activeTab".

Metode scripting.executeScript() serupa dengan cara kerjanya dengan tabs.executeScript(). Ada beberapa perbedaan.

• Meskipun metode lama hanya dapat mengambil satu file, metode baru dapat mengambil array file.
• Anda juga meneruskan objek ScriptInjection, bukan InjectDetails. Ada beberapa perbedaan di antara keduanya. Misalnya, tabId kini diteruskan sebagai anggota ScriptInjection.target, bukan sebagai argumen metode.

Contoh ini menunjukkan cara melakukannya.

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

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

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

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

Ganti tabs.insertCSS() dan tabs.removeCSS() dengan scripting.insertCSS() dan scripting.removeCSS()

Di Manifes V3, insertCSS() dan removeCSS() berpindah dari tabs API ke scripting API. Hal ini memerlukan perubahan pada izin dalam file manifes selain perubahan kode:

• Izin "scripting".
• Izin host atau izin "activeTab".

Fungsi di scripting API serupa dengan fungsi di tabs. Ada beberapa perbedaan.

• Saat memanggil metode ini, Anda meneruskan objek CSSInjection, bukan InjectDetails.
• tabId kini diteruskan sebagai anggota CSSInjection.target, bukan sebagai argumen metode.

Contoh ini menunjukkan cara melakukannya untuk insertCSS(). Prosedur untuk removeCSS() sama.

browser.tabs.insertCSS(tabId, injectDetails, () => {
  // callback code
});

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

Mengganti Tindakan Browser dan Tindakan Halaman dengan Tindakan

Tindakan browser dan tindakan halaman adalah konsep terpisah di Manifest V2. Meskipun dimulai dengan peran yang berbeda, perbedaan di antara keduanya berkurang seiring waktu. Di Manifest V3, konsep ini digabungkan ke dalam Action API. Hal ini memerlukan perubahan pada manifest.json dan kode ekstensi yang berbeda dari yang akan Anda masukkan dalam skrip latar belakang Manifest V2.

Tindakan di Manifest V3 paling mirip dengan tindakan browser; namun, API action tidak menyediakan hide() dan show() seperti yang dilakukan pageAction. Jika masih memerlukan tindakan halaman, Anda dapat mengemulasikannya menggunakan konten deklaratif atau memanggil enable() atau disable() dengan ID tab.

Ganti "browser_action" dan "page_action" dengan "action"

Di manifest.json, ganti kolom "browser_action" dan "page_action" dengan kolom "action". Lihat referensi untuk informasi tentang kolom "action".

{
  ...
  "page_action": { ... },
  "browser_action": {
    "default_popup": "popup.html"
   }
  ...
}

{
  ...
  "action": {
    "default_popup": "popup.html"
  }

  ...
}

Mengganti browserAction dan pageAction API dengan action API

Jika Manifest V2 Anda menggunakan API browserAction dan pageAction, Anda kini harus menggunakan API action.

browser.browserAction.onClicked.addListener(tab => { ... });
browser.pageAction.onClicked.addListener(tab => { ... });

browser.action.onClicked.addListener(tab => { ... });

Mengganti callback dengan promise

Di Manifest V3, banyak metode API ekstensi menampilkan promise. Promise adalah proxy atau placeholder untuk nilai yang ditampilkan oleh metode asinkron. Jika belum pernah menggunakan Promise, Anda dapat membacanya di MDN. Halaman ini menjelaskan hal-hal yang perlu Anda ketahui untuk menggunakannya di ekstensi Chrome.

Untuk kompatibilitas mundur, banyak metode terus mendukung callback setelah dukungan promise ditambahkan. Perlu diketahui bahwa Anda tidak dapat menggunakan keduanya pada panggilan fungsi yang sama. Jika Anda meneruskan callback, fungsi tidak akan menampilkan promise dan jika Anda ingin promise ditampilkan, jangan teruskan callback. Beberapa fitur API, seperti pemroses peristiwa, akan terus memerlukan callback. Untuk memeriksa apakah suatu metode mendukung promise, cari label "Promise" dalam referensi API-nya.

Untuk mengonversi dari callback ke promise, hapus callback dan tangani promise yang ditampilkan. Contoh di bawah diambil dari contoh izin opsional, newtab.js khususnya. Versi callback menunjukkan seperti apa panggilan sampel ke request() dengan callback. Perhatikan bahwa versi promise dapat ditulis ulang dengan async dan await.

browser.permissions.request(newPerms, (granted) => {
  if (granted) {
    console.log('granted');
  } else {
    console.log('not granted');
  }
});

const newPerms = { permissions: ['topSites'] };
browser.permissions.request(newPerms)
.then((granted) => {
  if (granted) {
    console.log('granted');
  } else {
    console.log('not granted');
  }
});

Mengganti fungsi yang mengharapkan konteks latar belakang Manifest V2

Konteks ekstensi lainnya hanya dapat berinteraksi dengan pekerja layanan ekstensi menggunakan transfer pesan. Oleh karena itu, Anda harus mengganti panggilan yang mengharapkan konteks latar belakang, khususnya:

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

Skrip ekstensi Anda harus menggunakan penerusan pesan untuk berkomunikasi antara service worker dan bagian lain dari ekstensi Anda. Saat ini, hal ini dapat dilakukan dengan menggunakan sendMessage() dan menerapkan browser.runtime.onMessage di service worker ekstensi Anda. Dalam jangka panjang, Anda harus berencana mengganti panggilan ini dengan postMessage() dan pemroses peristiwa pesan pekerja layanan.

Mengganti API yang tidak didukung

Metode dan properti yang tercantum di bawah perlu diubah di Manifes V3.