Odblokowywanie klonowania strukturalnego w przypadku przesyłania wiadomości w rozszerzeniu do Chrome

Justin Lulejian
Justin Lulejian

Opublikowano: 13 kwietnia 2026 r.

Komunikacja między różnymi komponentami rozszerzenia (skryptami działającymi w tle, skryptami dotyczącymi zawartości, wyskakującymi okienkami) tradycyjnie opiera się na serializacji JSON. JSON jest niezawodny, ale ma pewne ograniczenia.

Z przyjemnością informujemy, że od Chrome 148 deweloperzy rozszerzeń mogą włączyć algorytm klonowania strukturalnego do serializacji wiadomości zamiast JSON. Dzięki temu możesz przesyłać bardziej złożone typy danych między kontekstami rozszerzeń bez konieczności stosowania ręcznych obejść serializacji.

Dlaczego warto używać sklonowanej struktury?

Serializacja JSON (za pomocą funkcji JSON.stringify) działa, ale czasami wymaga od deweloperów pokonywania trudności podczas pracy z nowoczesnymi typami JavaScript.

Oto konkretny przykład, który mógł Ci się przytrafić podczas tworzenia rozszerzenia:

// Sending a Map with JSON serialization
const myMap = new Map([['id', 123]]);

// Arrives as {} on the other side!
chrome.runtime.sendMessage(myMap);

// Workaround: Convert Map to an Array of entries before sending
const message = Array.from(myMap.entries());
chrome.runtime.sendMessage(message);

// On the receiving side:
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  const receivedMap = new Map(message);
});

Inne sytuacje, w których JSON zawodzi i w których być może trzeba było zastosować obejście, to Set, BigInt, NaN oraz Infinity, DateError.

Korzystanie ze strukturalnej serializacji klonowania oznacza, że możesz teraz wysyłać różne obiekty, które wcześniej były trudne lub niemożliwe do przesłania za pomocą wiadomości rozszerzenia. Na przykład wysyłanie obiektu Map jest teraz bezpośrednie:

// Sending a Map with Structured Clone
const myMap = new Map([['id', 123]]);

// Arrives as a Map on the other side!
chrome.runtime.sendMessage(myMap);

// On the receiving side:
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  // message is already a Map instance!
  console.log(message.get('id')); // 123
});

Więcej obsługiwanych typów

Sklonowana reklama strukturalna obsługuje wiele innych typów, takich jak FileBlob.

Jak zgłosić chęć udziału

Aby zapewnić zgodność wsteczną i zapobiec uszkodzeniu istniejących rozszerzeń, ta funkcja jest opcjonalna. Możesz włączyć go globalnie w przypadku rozszerzenia, dodając pojedynczy klucz do pliku manifest.json:

{
  "name": "My Extension",
  "version": "1.0",
  "manifest_version": 3,
  "message_serialization": "structured_clone"
}

Jeśli ten klucz zostanie pominięty lub jeśli używana jest wersja Chrome starsza niż 148, przeglądarka domyślnie użyje bieżącej implementacji rozszerzenia opartej na formacie JSON.

Dzięki obsłudze algorytmu klonowania strukturalnego zbliżamy interfejs API do przesyłania wiadomości w rozszerzeniach do standardowych możliwości platformy internetowej (podobnie jak w przypadku postMessage używanego w usługach Web Worker i komunikacji z elementami iframe), co zapewnia większą elastyczność i możliwości.

Interoperacyjność i pułapki

Nasza implementacja serializacji sklonowanej struktury obsługuje znacznie więcej typów niż JSON, ale musisz pamiętać o kilku założeniach architektonicznych i niezgodnościach z implementacją.

Nieobsługiwane typy

Nasze wdrożenie nie obsługuje obiektów współdzielonych, takich jak SharedArrayBuffer, ani przenoszenia obiektów, takich jak ArrayBuffer. SharedArrayBuffer nie będzie można serializować ani deserializować (w zależności od sytuacji), a próba wysłania obiektu przenoszonego, takiego jak Uint8Array, spowoduje wysłanie kopii.

Komunikacja między rozszerzeniami

Wymagamy zgodności formatów serializacji, aby zapewnić integralność danych. Rozszerzenia z niepasującymi formatami serializacji nie mogą komunikować się bezpośrednio za pomocą runtime.sendMessage ani runtime.connect. Jeśli na przykład rozszerzenie A używa serializacji JSON i próbuje wysłać wiadomość do rozszerzenia B za pomocą klonowania strukturalnego, wiadomość nie zostanie wysłana, a port zostanie zamknięty (i na odwrót).

Komunikacja ze stroną internetową

Strony internetowe korzystające z externally_connectable będą automatycznie dostosowywać się do formatu serializacji rozszerzenia docelowego. Jeśli rozszerzenie korzysta ze sklonowanej struktury, konteksty internetowe wysyłające wiadomości za pomocą interfejsu runtime API będą automatycznie korzystać ze sklonowanej struktury (i odwrotnie). Oznacza to, że witryna i rozszerzenie muszą być zsynchronizowane pod względem oczekiwanego formatu serializacji, aby zapobiec błędom serializacji.

Natywne aplikacje do obsługi wiadomości

Natywne kanały przesyłania wiadomości zawsze wymuszają serializację JSON. Próba wysłania typów tylko ze sklonowaną strukturą (np. BigInt) do hosta natywnego zakończy się niepowodzeniem, zanim wiadomość opuści kontekst rozszerzenia.

Metody toJSON()

Jeśli używasz klas lub obiektów z niestandardowymi toJSON() metodami do przeprowadzania niestandardowej serializacji (np. oczyszczania danych przez usuwanie haseł przed wysłaniem obiektu), pamiętaj, że klonowanie strukturalne ignoruje toJSON(). Kopiuje on bezpośrednio wartości właściwości. Jeśli korzystasz z toJSON() do niestandardowej serializacji, przed wysłaniem może być konieczne wykonanie pewnych czynności ręcznych. Na przykład:

class User {
  constructor(name, password) {
    this.name = name;
    this.password = password;
  }

  // This will be ignored by structured clone!
  toJSON() {
    return { name: this.name };
  }
}

const user = new User("Alice", "secret123");

// JSON -> {"name":"Alice"}
// Structured Clone -> { name: "Alice", password: "secret123" }

Czy serializacja JSON zostanie wycofana?

Nie! Chrome będzie obsługiwać oba formaty serializacji w przewidywalnej przyszłości.

Podziel się opinią

Mamy nadzieję, że ta nowa funkcja umożliwi Ci płynniejsze i bardziej efektywne tworzenie rozszerzeń.

Stworzyliśmy zestaw testów, aby sprawdzić funkcjonalność naszej implementacji sklonowanej struktury, ale platforma internetowa zawiera ogromną różnorodność obiektów. Wypróbuj tę nową funkcję i zgłoś wszelkie napotkane błędy lub przypadki brzegowe. Twoja opinia pomoże nam ulepszyć tę funkcję dla całej społeczności.