Débloquer la copie structurée pour la messagerie des extensions Chrome

Justin Lulejian
Justin Lulejian

Publié le 22 avril 2026

La communication entre les différents composants d'extension (scripts d'arrière-plan, scripts de contenu, pop-ups) s'appuie traditionnellement sur la sérialisation JSON. Bien que fiable, le format JSON présente des limites.

Nous sommes heureux d'annoncer qu'à partir de Chrome 148, les développeurs d'extensions peuvent choisir d'utiliser l'algorithme de clonage structuré pour la sérialisation des messages au lieu de JSON. Cette modernisation vous permet d'envoyer des types de données plus complexes entre les contextes d'extension sans avoir à recourir à des solutions de contournement pour la sérialisation manuelle.

Pourquoi cloner de manière structurée ?

La sérialisation JSON (via JSON.stringify en coulisses) est fonctionnelle, mais elle oblige parfois les développeurs à faire des acrobaties lorsqu'ils traitent des types JavaScript modernes.

Voici un exemple spécifique que vous avez peut-être rencontré lors du développement d'une extension :

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

Voici d'autres situations où JSON échoue et que vous avez peut-être dû contourner : objets Set, BigInt, NaN, Infinity, Date et Error.

L'utilisation de la sérialisation par clonage structuré signifie que vous pouvez désormais envoyer divers objets qui étaient auparavant difficiles ou impossibles à transmettre via la messagerie d'extension. Par exemple, l'envoi d'un objet Map est désormais direct :

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

Plus de types acceptés

Le clonage structuré est compatible avec un large éventail d'autres types tels que File et Blob.

S'inscrire au programme de test bêta

Pour assurer la rétrocompatibilité et éviter de casser les extensions existantes, cette fonctionnalité est activée par l'utilisateur. Vous pouvez l'activer globalement pour votre extension en ajoutant une seule clé à votre manifest.json :

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

Si elle est omise ou si la version de Chrome est antérieure à 148, le navigateur utilise par défaut son implémentation actuelle basée sur JSON pour l'extension.

En prenant en charge l'algorithme de clonage structuré, nous rapprochons l'API de messagerie d'extension des fonctionnalités standards de la plate-forme Web (semblables à postMessage utilisé dans les Web Workers et la communication iframe), ce qui vous offre plus de flexibilité et de puissance.

Interopérabilité et pièges

Bien que notre implémentation de la sérialisation de clone structuré soit compatible avec beaucoup plus de types que JSON, il existe quelques hypothèses architecturales et incompatibilités avec l'implémentation que vous devez garder à l'esprit.

Types non compatibles

Les objets partagés tels que SharedArrayBuffer et le transfert d'objets tels que ArrayBuffer ne sont pas compatibles avec notre implémentation. SharedArrayBuffer ne pourra pas être sérialisé ni désérialisé (selon la situation), et toute tentative d'envoi d'un objet transférable tel que Uint8Array entraînera l'envoi d'une copie.

Communication entre extensions

Nous appliquons des formats de sérialisation correspondants pour garantir l'intégrité des données. Les extensions dont les formats de sérialisation ne correspondent pas ne peuvent pas communiquer directement via runtime.sendMessage ou runtime.connect. Par exemple, si l'extension A utilise la sérialisation JSON et tente d'envoyer un message à l'extension B à l'aide du clonage structuré, le message ne sera pas envoyé et le port sera fermé (et inversement).

Communication avec les pages Web

Les pages Web utilisant externally_connectable s'adapteront automatiquement au format de sérialisation de l'extension cible. Si votre extension utilise le clonage structuré, les contextes Web qui envoient des messages à l'aide de l'API runtime utiliseront automatiquement le clonage structuré (et inversement). Cela signifie que le site Web et l'extension doivent être synchronisés sur leur format de sérialisation attendu pour éviter les erreurs de sérialisation.

Messagerie native

Les canaux de messagerie natifs continueront toujours de forcer la sérialisation JSON. Toute tentative d'envoi de types de données structurées clonées uniquement (comme un BigInt) à un hôte natif échouera avant qu'un message ne quitte le contexte de votre extension.

Méthodes toJSON()

Si vous utilisez des classes ou des objets avec des méthodes toJSON() personnalisées pour effectuer une sérialisation personnalisée (par exemple, pour assainir les données en supprimant les mots de passe avant d'envoyer un objet), sachez que le clonage structuré ignore toJSON(). Elle copie directement les valeurs des propriétés. Si vous vous appuyez sur toJSON() pour la sérialisation personnalisée, vous devrez peut-être effectuer quelques tâches manuelles avant l'envoi. Exemple :

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

La sérialisation JSON va-t-elle disparaître ?

Non ! Chrome s'engage à prendre en charge les deux formats de sérialisation pour l'avenir prévisible.

Envoyer des commentaires

Nous espérons que cette nouvelle fonctionnalité vous permettra de développer des extensions plus facilement et plus efficacement.

Bien que nous ayons créé une suite de tests pour valider la fonctionnalité de notre implémentation de clone structuré, la plate-forme Web comporte une grande variété d'objets. Essayez cette nouvelle fonctionnalité et signalez les bugs ou les cas extrêmes que vous rencontrez. Vos commentaires nous aideront à améliorer l'implémentation pour toute la communauté.