Ontgrendel gestructureerde kloon voor Chrome-extensieberichten

Justin Lulejian
Justin Lulejian

Gepubliceerd: 13 april 2026

De communicatie tussen verschillende extensiecomponenten (achtergrondscripts, inhoudsscripts, pop-ups) is van oudsher gebaseerd op JSON-serialisatie. Hoewel betrouwbaar, heeft JSON beperkingen.

We zijn verheugd aan te kondigen dat ontwikkelaars van extensies vanaf Chrome 148 kunnen kiezen voor het gebruik van het gestructureerde kloonalgoritme voor berichtserialisatie in plaats van JSON! Deze modernisering stelt u in staat om complexere gegevenstypen tussen uw extensiecontexten te verzenden zonder handmatige serialisatie-omwegen.

Waarom een ​​gestructureerde kloon?

JSON-serialisatie (via JSON.stringify op de achtergrond) werkt, maar vereist soms extra inspanningen van ontwikkelaars bij het werken met moderne JavaScript-typen.

Hier is een specifiek voorbeeld dat je mogelijk bent tegengekomen tijdens het ontwikkelen van een extensie:

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

Enkele andere situaties waarin JSON niet werkt en waarvoor je mogelijk een workaround hebt moeten vinden, zijn Set , BigInt , NaN en Infinity , Date en Error objecten.

Dankzij gestructureerde kloonserialisatie kunt u nu diverse objecten verzenden die voorheen moeilijk of onmogelijk via extensieberichten te versturen waren. Het verzenden van een Map object is bijvoorbeeld nu direct mogelijk:

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

Meer ondersteunde typen

Structured clone ondersteunt een breed scala aan andere typen , zoals File en Blob .

Hoe kunt u zich aanmelden?

Om achterwaartse compatibiliteit te garanderen en te voorkomen dat bestaande extensies niet meer werken, is deze functie optioneel . U kunt deze functie globaal voor uw extensie inschakelen door één sleutel toe te voegen aan uw manifest.json :

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

Indien dit ontbreekt, of bij een Chrome-versie lager dan 148, gebruikt de browser standaard de huidige JSON-gebaseerde implementatie voor de extensie.

Door het gestructureerde kloonalgoritme te ondersteunen, brengen we de API voor extensieberichten dichter bij de mogelijkheden van standaard webplatformen (vergelijkbaar met postMessage dat wordt gebruikt in Web Workers en iframe-communicatie), waardoor u meer flexibiliteit en mogelijkheden krijgt.

Interoperabiliteit en valkuilen

Hoewel onze implementatie voor gestructureerde kloonserialisatie veel meer typen ondersteunt dan JSON, zijn er een paar architectuurveronderstellingen en incompatibiliteiten met de implementatie waarmee u rekening moet houden.

Niet-ondersteunde typen

Gedeelde objecten zoals SharedArrayBuffer en het overdragen van objecten zoals ArrayBuffer worden niet ondersteund door onze implementatie. SharedArrayBuffer zal niet correct geserialiseerd of gedeserialiseerd kunnen worden (afhankelijk van de situatie), en een poging om een ​​overdraagbaar object zoals Uint8Array te verzenden, resulteert in het verzenden van een kopie.

Communicatie tussen uitbreidingen

We vereisen overeenkomende serialisatieformaten om de gegevensintegriteit te waarborgen. Extensies met niet-overeenkomende serialisatieformaten kunnen niet rechtstreeks communiceren via runtime.sendMessage of runtime.connect . Als extensie A bijvoorbeeld JSON-serialisatie gebruikt en probeert een bericht naar extensie B te sturen met behulp van een gestructureerde kloon, zal het bericht niet verzonden kunnen worden en zal de poort gesloten worden (en vice versa).

Webpagina-communicatie

Webpagina's die gebruikmaken van externally_connectable passen zich automatisch aan het serialisatieformaat van de doel-extensie aan. Als uw extensie gebruikmaakt van structured clone, zullen webcontexten die berichten verzenden via de runtime API automatisch structured clone gebruiken (en vice versa). Dit betekent dat de website en de extensie synchroon moeten zijn wat betreft het verwachte serialisatieformaat om serialisatiefouten te voorkomen.

Native berichten

Native berichtenkanalen blijven altijd JSON-serialisatie afdwingen. Pogingen om alleen gestructureerde kloontypen (zoals een BigInt ) naar een native host te verzenden, zullen mislukken voordat een bericht de context van uw extensie verlaat.

toJSON()-methoden

Als u klassen of objecten met aangepaste toJSON() methoden gebruikt om aangepaste serialisatie uit te voeren (bijvoorbeeld om gegevens te saneren door wachtwoorden te verwijderen voordat een object wordt verzonden), houd er dan rekening mee dat structured clone toJSON() negeert . Het kopieert eigenschapswaarden direct. Als u voor aangepaste serialisatie afhankelijk bent van toJSON() , kan er handmatig werk nodig zijn voordat u het object verzendt. Bijvoorbeeld:

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" }

Verdient JSON-serialisatie aan populariteit?

Nee! Chrome blijft beide serialisatieformaten in de nabije toekomst ondersteunen.

Deel feedback

We hopen dat deze nieuwe functionaliteit zorgt voor soepelere en krachtigere workflows bij de ontwikkeling van uw extensies.

Hoewel we een testsuite hebben ontwikkeld om de functionaliteit van onze gestructureerde kloonimplementatie te valideren, bevat het webplatform een ​​enorme verscheidenheid aan objecten. Probeer deze nieuwe functie uit en meld eventuele bugs of uitzonderlijke gevallen die u tegenkomt! Uw feedback helpt ons de implementatie voor de hele community te verbeteren.