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. Menunjuk ke objek API yang sama dengan chrome, jadi 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, baca bagian Catatan untuk pengguna polyfill sebelum mengubah apa pun yang lain - 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 dalam bagian ini ditujukan bagi ekstensi yang sudah ada yang memutuskan cara mengadopsi.

Memeriksa versi Chrome yang digunakan pengguna Anda

Jika Anda memiliki ekstensi yang sudah ada, periksa versi Chrome yang dijalankan pengguna Anda sebelum beralih. Chrome diupdate secara otomatis, 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, lihat Memantau performa ekstensi dengan Google Analytics 4 untuk memulai.

Dari sana, pilih jalur:

Mengadopsi tanpa syarat

Tetapkan minimum_chrome_version di manifes Anda dan gunakan browser tanpa syarat - tidak diperlukan perlindungan runtime:

{
  "minimum_chrome_version": "148"
}

Gunakan peluncuran bertahap saat meningkatkan minimum_chrome_version. Jika terjadi masalah, Anda dapat mengembalikan ekstensi Anda 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 Anda yang lain dapat menggunakan browser tanpa syarat.

Catatan untuk pengguna polyfill

Jika ekstensi Anda menggunakan webextension-polyfill, ekstensi tersebut menjadi tidak beroperasi di Chrome 148 dan yang lebih baru. Polyfill melewati pembungkusan saat browser sudah ditentukan, dengan asumsi browser host telah menyediakan API.

Upaya sebelumnya untuk mengirimkan namespace di Chrome 136 di-roll back karena alasan ini: dengan browser yang baru ditentukan, polyfill berhenti membungkus, tetapi browser.runtime.onMessage Chrome belum mendukung pemroses yang menampilkan promise, yang telah disediakan oleh polyfill. Ekstensi yang mengandalkan pola tersebut akan rusak. Chrome 148 mengirimkan namespace dan pemroses onMessage yang menampilkan promise native secara bersamaan untuk menghindari kesenjangan 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 saat Anda memanggilnya menggunakan chrome.* maupun 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.