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 pekerja layanan ekstensi. Bagian ini ditujukan untuk perubahan kode yang diperlukan yang tidak terkait dengan masalah lain. Dua bagian berikutnya membahas mengganti permintaan web yang memblokir dan meningkatkan keamanan.

Mengganti tab.ExecuteScript() dengan skriping.ExecuteScript()

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

Untuk metode executeScript(), Anda memerlukan:

  • Izin "scripting".
  • Baik berupa izin host maupun izin "activeTab".

Metode scripting.executeScript() mirip 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 banyak perbedaan di antara keduanya. Misalnya, tabId kini diteruskan sebagai anggota ScriptInjection.target, bukan sebagai argumen metode.

Contoh menunjukkan cara melakukannya.

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

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

Di file skrip latar belakang.

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

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

Di pekerja layanan ekstensi.

Mengganti tab.insertCSS() dan tab.removeCSS() dengan skriping.insertCSS() dan skriping.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".
  • Baik berupa izin host maupun izin "activeTab".

Fungsi pada scripting API mirip 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 menunjukkan cara melakukannya untuk insertCSS(). Prosedur untuk removeCSS() sama.

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

Di file skrip latar belakang.

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

Di pekerja layanan ekstensi.

Mengganti Tindakan Browser dan Tindakan Halaman dengan Tindakan

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

Tindakan dalam Manifes V3 paling mirip dengan tindakan browser; Namun, action API tidak menyediakan hide() dan show() seperti pageAction. Jika masih memerlukan tindakan halaman, Anda dapat mengemulasikan menggunakan konten deklaratif atau memanggil enable() atau disable() dengan ID tab.

Ganti "browser_action" dan "page_action" dengan "tindakan"

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

Manifes V2
{
  ...
  "page_action": { ... },
  "browser_action": {
    "default_popup": "popup.html"
   }
  ...
}
Manifes V3
{
  ...
  "action": {
    "default_popup": "popup.html"
  }

  ...
}

Mengganti browserAction dan pageAction API dengan action API

Jika Manifes V2 Anda menggunakan API browserAction dan pageAction, sekarang Anda harus menggunakan action API.

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

Mengganti callback dengan promise

Di Manifest V3, banyak metode API ekstensi yang 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 yang akan terus mendukung callback setelah dukungan promise ditambahkan. Perhatikan bahwa Anda tidak dapat menggunakan keduanya pada panggilan fungsi yang sama. Jika Anda meneruskan callback, fungsi tersebut 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 metode mendukung promise, cari "Promise" label 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, khususnya newtab.js. Versi callback menunjukkan seperti apa panggilan contoh ke request() dengan callback. Perhatikan bahwa versi promise dapat ditulis ulang dengan asinkron dan await.

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

Mengganti fungsi yang memerlukan konteks latar belakang Manifes V2

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

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

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

Mengganti API yang tidak didukung

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

Metode atau properti Manifes V2 Ganti dengan
chrome.extension.connect() chrome.runtime.connect()
chrome.extension.connectNative() chrome.runtime.connectNative()
chrome.extension.getExtensionTabs() chrome.extension.getViews()
chrome.extension.getURL() chrome.runtime.getURL()
chrome.extension.lastError Jika metode menampilkan promise, gunakan promise.catch()
chrome.extension.onConnect chrome.runtime.onConnect
chrome.extension.onConnectExternal chrome.runtime.onConnectExternal
chrome.extension.onMessage chrome.runtime.onMessage
chrome.extension.onRequest chrome.runtime.onMessage
chrome.extension.onRequestExternal chrome.runtime.onMessageExternal
chrome.extension.sendMessage() chrome.runtime.sendMessage()
chrome.extension.sendNativeMessage() chrome.runtime.sendNativeMessage()
chrome.extension.sendRequest() chrome.runtime.sendMessage()
chrome.runtime.onSuspend (skrip latar belakang) Tidak didukung di pekerja layanan ekstensi. Sebagai gantinya, gunakan peristiwa dokumen beforeunload.
chrome.tabs.getAllInWindow() chrome.tabs.query()
chrome.tabs.getSelected() chrome.tabs.query()
chrome.tabs.onActiveChanged chrome.tabs.onActivated
chrome.tabs.onHighlightChanged chrome.tabs.onHighlighted
chrome.tabs.onSelectionChanged chrome.tabs.onActivated
chrome.tabs.sendRequest() chrome.runtime.sendMessage()
chrome.tabs.Tab.selected chrome.tabs.Tab.highlighted