Transisi ke namespace browser

Mulai Chrome 148, semua Chrome Extension API tersedia di namespace browser selain namespace chrome yang ada. Misalnya, browser.tabs.create({}) dan chrome.tabs.create({}) setara.

Namespace tersedia di mana pun Anda dapat memanggil API ekstensi, termasuk skrip konten, pekerja layanan, dan dokumen di luar layar. Namespace ini mengarah ke objek API yang sama dengan chrome, sehingga chrome.tabs === browser.tabs.

Namespace browser berasal dari pekerjaan di WebExtensions Community Group (WECG), grup komunitas W3C tempat vendor browser berkolaborasi dalam standar ekstensi bersama. Namespace chrome tidak akan dihapus; kedua namespace akan terus berfungsi.

Menentukan apakah akan mengadopsi namespace browser

Jika Anda menggunakan webextension-polyfill, langsung baca Catatan untuk pengguna polyfill sebelum mengubah hal lainnya - jawabannya berbeda untuk Anda.

Jika Anda membuat ekstensi baru, tetapkan minimum_chrome_version ke "148" dan gunakan browser tanpa syarat; Anda dapat berhenti membaca di sini. Bagian lainnya dari bagian ini ditujukan untuk ekstensi yang ada yang memutuskan cara mengadopsi.

Memeriksa versi Chrome yang digunakan pengguna

Jika Anda memiliki ekstensi yang ada, periksa versi Chrome yang dijalankan pengguna sebelum beralih. Chrome otomatis diupdate, tetapi beberapa pengguna menonaktifkan update dan pengguna lainnya menggunakan perangkat lama yang tidak dapat menjalankan versi terbaru. Konfirmasi dengan data analisis Anda sendiri. Jika Anda belum menyiapkan analisis yet, lihat Memantau performa ekstensi dengan Google Analytics 4 untuk memulai.

Dari sana, pilih jalur:

Mengadopsi tanpa syarat

Tetapkan minimum_chrome_version dalam manifes Anda dan gunakan browser tanpa syarat - tidak diperlukan penjaga runtime:

{
  "minimum_chrome_version": "148"
}

Gunakan peluncuran bertahap saat menaikkan minimum_chrome_version. Jika terjadi masalah, Anda dapat melakukan rollback ekstensi di Chrome Web Store.

Menggunakan penjaga runtime

Tambahkan cuplikan berikut di awal kode startup ekstensi Anda sebelum mereferensikan browser di tempat lain:

if (!globalThis.browser) {
  globalThis.browser = chrome;
  // Consider firing an analytics event here to measure how often
  // your users hit this fallback path.
}

Hal ini menjadikan browser sebagai alias untuk chrome pada versi sebelumnya, sehingga kode lainnya dapat menggunakan browser tanpa syarat.

Catatan untuk pengguna polyfill

Jika ekstensi Anda menggunakan webextension-polyfill, ekstensi tersebut akan menjadi no-op di Chrome 148 dan yang lebih baru. Polyfill tidak melakukan wrapping saat browser sudah ditentukan, dengan asumsi browser host telah menyediakan API.

Upaya sebelumnya untuk mengirimkan namespace di Chrome 136 di-rollback karena alasan ini: dengan browser yang baru ditentukan, polyfill berhenti melakukan wrapping, tetapi browser.runtime.onMessage Chrome belum mendukung pemroses yang menampilkan promise, yang telah disediakan oleh polyfill. Ekstensi yang mengandalkan pola tersebut rusak. Chrome 148 mengirimkan namespace dan pemroses onMessage yang menampilkan promise native secara bersamaan untuk menghindari celah tersebut.

Anda dapat menghapus dependensi polyfill setelah basis pengguna Anda beralih ke Chrome 148.

Fitur lainnya

Respons asinkron di runtime.sendMessage

Di Chrome 148, pemroses runtime.onMessage dapat menampilkan Promise secara langsung untuk mengirim respons asinkron. Hal ini berfungsi baik jika Anda memanggilnya menggunakan chrome.* atau browser.*.

Sebelumnya, satu-satunya cara untuk merespons secara asinkron adalah dengan menampilkan true literal dari pemroses dan memanggil sendResponse nanti:

// Old pattern - requires returning true to keep the channel open
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  fetch('https://example.com')
    .then(response => sendResponse({ statusCode: response.status }));

  return true; // keeps the message channel open for the async response
});

Sekarang Anda dapat menampilkan Promise (atau menggunakan fungsi async) secara langsung:

// New pattern - return a promise or use async/await
browser.runtime.onMessage.addListener(async (message, sender) => {
  const response = await fetch('https://example.com');
  return { statusCode: response.status };
});

Pola return true terus berfungsi, sehingga kode yang ada tidak perlu diubah.