Przejście na przestrzeń nazw przeglądarki

Od Chrome 148 wszystkie interfejsy API rozszerzeń Chrome są dostępne w przestrzeni nazw browser oprócz dotychczasowej przestrzeni nazw chrome. Na przykład browser.tabs.create({}) i chrome.tabs.create({}) są równoważne.

Przestrzeń nazw jest dostępna wszędzie tam, gdzie można wywoływać interfejsy API rozszerzeń, w tym w skryptach treści, service workerach i dokumentach poza ekranem. Wskazuje ona te same obiekty API co chrome, więc chrome.tabs === browser.tabs.

Przestrzeń nazw browser powstała w wyniku prac w grupie WebExtensions Community Group (WECG), grupie społeczności W3C, w której dostawcy przeglądarek współpracują nad wspólnymi standardami rozszerzeń. Przestrzeń nazw chrome nie zniknie – obie przestrzenie nazw będą nadal działać.

Decydowanie, czy chcesz używać przestrzeni nazw przeglądarki

Jeśli używasz webextension-polyfill, przed wprowadzeniem jakichkolwiek zmian przeczytaj sekcję Uwaga dla użytkowników polyfill – odpowiedź jest inna.

Jeśli tworzysz nowe rozszerzenie, ustaw minimum_chrome_version na "148" i używaj browser bezwarunkowo. Możesz przestać czytać. Pozostała część tej sekcji jest przeznaczona dla istniejących rozszerzeń, które decydują, jak je wdrożyć.

Sprawdzanie, z jakich wersji Chrome korzystają użytkownicy

Jeśli masz już rozszerzenie, przed przełączeniem sprawdź, z jakich wersji Chrome korzystają Twoi użytkownicy. Chrome aktualizuje się automatycznie, ale niektórzy użytkownicy wyłączają aktualizacje, a inni korzystają ze starszych urządzeń, które nie mogą uruchomić najnowszej wersji. Sprawdź to na podstawie własnych danych analitycznych. Jeśli nie masz jeszcze skonfigurowanej analityki, zacznij od artykułu Monitorowanie skuteczności rozszerzenia za pomocą Google Analytics 4.

Następnie wybierz ścieżkę:

Wdrażanie bezwarunkowe

Ustaw minimum_chrome_version w pliku manifestu i używaj browser bezwarunkowo – nie jest potrzebne żadne zabezpieczenie środowiska wykonawczego:

{
  "minimum_chrome_version": "148"
}

Podczas zwiększania minimum_chrome_version używaj wdrażania etapowego. Jeśli coś pójdzie nie tak, możesz wycofać zmiany w rozszerzeniu w Chrome Web Store.

Używanie zabezpieczenia środowiska wykonawczego

Dodaj ten fragment kodu na początku kodu uruchamiania rozszerzenia, zanim odwołasz się do browser w innym miejscu:

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

Dzięki temu browser będzie aliasem chrome w starszych wersjach, więc reszta kodu może używać browser bezwarunkowo.

Uwaga dla użytkowników polyfill

Jeśli rozszerzenie używa webextension-polyfill, w Chrome 148 i nowszych wersjach staje się ono operacją bez efektu. Polyfill pomijał opakowywanie, gdy browser był już zdefiniowany, zakładając, że przeglądarka hosta udostępniła już interfejs API.

Z tego powodu wycofano wcześniejszą próbę udostępnienia przestrzeni nazw w Chrome 136: gdy browser został nowo zdefiniowany, polyfill przestał opakowywać, ale browser.runtime.onMessage w Chrome nie obsługiwał jeszcze słuchaczy zwracających obietnice, które zapewniało polyfill. Rozszerzenia korzystające z tego wzorca przestały działać. Chrome 148 udostępnia przestrzeń nazw i natywne słuchacze onMessage zwracające obietnice, aby uniknąć tej luki.

Gdy baza użytkowników przejdzie na Chrome 148, możesz usunąć zależność od polyfill.

Inne funkcje

Odpowiedzi asynchroniczne w runtime.sendMessage

W Chrome 148 słuchacze runtime.onMessage mogą bezpośrednio zwracać Promise, aby wysłać odpowiedź asynchroniczną. Działa to niezależnie od tego, czy wywołujesz ją za pomocą chrome.* czy browser.*.

Wcześniej jedynym sposobem na asynchroniczną odpowiedź było zwrócenie literału true ze słuchacza i późniejsze wywołanie sendResponse:

// 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
});

Teraz możesz bezpośrednio zwrócić Promise (lub użyć funkcji async):

// 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 };
});

Wzorzec return true nadal działa, więc nie trzeba zmieniać istniejącego kodu.