Qu'est-ce qu'une WebExtension et en quoi est-elle différente d'une extension Chrome ?

Si vous souhaitez développer des extensions de navigateur pour Chrome, Safari, Firefox, Opera et d'autres navigateurs, vous avez probablement vu l'expression « WebExtension » dans les documents d'assistance. Même si les extensions WebExtensions et Chrome sont des termes (quelque peu) interchangeables pour la même technologie, vous devez être conscient des différences pour le développement d'extensions entre navigateurs.

Dans ce guide, nous passerons en revue la plate-forme API générale qui alimente les extensions Chrome et WebExtensions, ainsi que certains des pièges que vous pourriez rencontrer lors de la création d'extensions pour plusieurs navigateurs Web.

Qu'est-ce qu'une WebExtension ?

Google Chrome a ajouté pour la première fois la prise en charge des extensions de navigateur en 2009, et celles-ci sont rapidement devenues un élément essentiel du succès de Chrome. Les extensions étaient incroyablement simples à créer, en particulier pour toute personne déjà familiarisée avec JavaScript et le développement Web, et elles ne se sont (généralement) pas cassées lorsque Google a déployé de nouvelles mises à jour de Chrome. Manifest V2 a été le premier changement important dans l'API d'extension, que Google a commencé à appliquer en 2013.

Lorsque d’autres navigateurs Web ont commencé à utiliser Chrome comme base technique (ou plus précisément Chromium), ils ont conservé les mêmes API d’extension. C'est pourquoi les extensions conçues pour Chrome fonctionnent généralement sans modification sur Opera, Vivaldi, Brave, Microsoft Edge, ChatGPT Atlas et autres navigateurs basés sur Chromium. La plupart d'entre eux peuvent même installer des extensions à partir du Chrome Web Store de Google, bien que des navigateurs comme Opera et Edge disposent également de leurs propres référentiels d'extensions.

Mozilla a commencé à migrer Firefox vers l'API d'extension de Chrome en 2015, car les précédentes extensions XUL de Firefox étaient complexes et susceptibles d'être interrompues à chaque mise à jour du navigateur. Firefox n'est cependant pas basé sur Chromium, donc cette décision a obligé Mozilla à procéder à une ingénierie inverse de l'intégralité de l'API. Cette nouvelle implémentation a été surnommée « WebExtensions » et était destinée à être un standard multi-navigateurs.

Apple a également procédé à une ingénierie inverse de l'API d'extension de Chromium pour son navigateur Safari, en conservant la même marque « WebExtension » que Mozilla. Cependant, l'implémentation d'Apple n'est pas identique à celle de Mozilla ou aux API trouvées dans Chromium.

Les WebExtensions peuvent sembler être un standard universel, mais elles sont bien plus dispersées que le développement Web moderne. En fait, c'est beaucoup plus proche du développement Web des années 2000, où les API et les capacités de rendu variaient considérablement d'un navigateur à l'autre (bon débarras, feuilles de style IE uniquement). Pour citer le capitaine Barbosa, « le code est plus ce que l'on pourrait appeler des lignes directrices que de véritables règles ».

Extensions Web et extensions Chrome

La principale différence entre les WebExtensions et l'extension Chrome standard réside dans la prise en compte du comportement de chaque navigateur Web et dans la garantie que les API dont vous avez besoin sont prises en charge dans tous les navigateurs disponibles. MDN est la meilleure ressource pour ces informations, avec la page pour chaque API et fonctionnalité comprenant un tableau de compatibilité des navigateurs et des notes sur la prise en charge entre navigateurs.

Si vous créez un site Web moderne pour Chrome, il sera généralement fonctionnent sans modification sur Firefox et Safari, car les fournisseurs de navigateurs s'associent dans des efforts tels que les normes Web du W3C et Interop. Le même est pas vrai pour les extensions de navigateur. Google participe dans une certaine mesure à la communauté WebExtensions, mais les nouvelles API Chromium mettent généralement un certain temps à apparaître dans Firefox ou Safari (si elles le font), et chaque navigateur possède son propre sous-ensemble de fonctionnalités exclusives.

Un exemple est l'API sidebarAction, qui a été créée à l'origine par le navigateur Opera afin que les extensions puissent fournir des pages de barre latérale. Firefox a ensuite dupliqué cette fonctionnalité, ce qui a rendu les fonctionnalités de la barre latérale disponibles dans les extensions Firefox et Opera, mais pas dans Chrome. Lorsque Google a finalement ajouté une barre latérale au navigateur Chrome, il a créé une toute nouvelle API sidePanel. Fin 2025, Firefox n’avait pas implémenté l’API sidePanel et Safari n’en avait ajouté aucune.

L'espace de noms est une autre différence importante entre les WebExtensions et les extensions Chrome classiques. Dans l'API d'extension de Chromium, la plupart des fonctions commencent par « chrome », comme chrome.storage ou chrome.windows. Dans la plupart des documentations sur les WebExtensions, vous verrez à la place l'espace de noms « navigateur », comme browser.storage.

// Showing a welcome page in Chrome’s default API namespace
chrome.tabs.create({ 'url': chrome.runtime.getURL('welcome.html') });
// Showing a welcome page in WebExtension ‘browser’ namespace
browswer.tabs.create({ 'url': chrome.runtime.getURL('welcome.html') });

Firefox et Safari prennent tous deux en charge « chrome » comme alias de « navigateur » pour toutes les API provenant de Chrome, mais Chrome ne reconnaît pas du tout l'espace de noms du navigateur.

Créer des extensions multi-navigateurs

Les meilleures pratiques en matière de développement Web multi-navigateurs s’appliquent également aux extensions. Vous devez tester votre extension sur chaque navigateur que vous souhaitez prendre en charge : vous découvrirez presque certainement que certaines fonctionnalités ne fonctionnent pas de la même manière dans chaque navigateur.

Vous pouvez créer une suite de tests à exécuter sur chaque navigateur et, idéalement, la vérifier plusieurs fois tout au long de votre processus de développement. Lorsque vous trouvez une incompatibilité, utilisez la détection des fonctionnalités pour modifier le comportement, et non la détection du navigateur.

// Example scenario: Chrome has a chrome.bubble extension API, but it’s not yet in Firefox, and we’re using the chrome namespace

// This could be checked with feature detection:
if ("bubble" in chrome) {
console.log("API is available!");
} else {
console.error("API is not available!");
}

// Do NOT do a browser check like this:
if (navigator.userAgent.includes("Firefox")) {
console.error("API is not available!");
} else {
console.log("API is available!");
}

La bonne nouvelle est que la plupart des navigateurs Web grand public sont tous disponibles sur les mêmes systèmes d'exploitation (Windows, macOS et Linux de bureau), donc l'installation de plusieurs navigateurs pour tester les extensions ne vous coûte rien, sauf de l'espace de stockage. La principale exception est Safari, qui nécessite un Mac avec Xcode pour le développement d'extensions.

Comme mentionné précédemment, vous devrez également choisir l'espace de noms que vous souhaitez utiliser dans votre code : chrome (par exemple chrome.storage) ou navigateur (par exemple navigateur.stockage). Personnellement, je m'en tiens simplement à l'espace de noms Chrome, mais vous pouvez également utiliser la bibliothèque polyfill de Mozilla pour ajouter la prise en charge de l'espace de noms du navigateur à Chrome. Certains projets comme uBlock Origin créent leur propre wrapper autour de l'espace de noms disponible.

Pour une ressource à jour sur les problèmes courants liés au développement d'extensions multi-navigateurs, consultez la page d'incompatibilités Chrome de MDN. Fin 2025, la plupart des problèmes concernent les API ou les valeurs de manifeste introduites dans Manifest V3.

Lorsque vous êtes prêt à publier votre extension, n'oubliez pas que vous ne le faites pas avoir pour utiliser le référentiel d'extensions individuel de chaque navigateur. Le Chrome Web Store n'est pas réservé uniquement à Chrome : les utilisateurs d'Opera, Vivaldi et Edge peuvent également installer et mettre à jour des extensions à partir de ce site Web. La publication sur la boutique de chaque navigateur donnera cependant plus de visibilité à votre extension. Par exemple, Microsoft Edge dirige ses utilisateurs vers le site Web Edge Add-ons s'ils souhaitent télécharger des extensions, et non vers le Chrome Web Store. Les utilisateurs de Firefox et Safari ne peuvent pas installer d'extensions directement depuis le Chrome Web Store.

Le développement d'extensions multi-navigateurs n'est pas aussi simple que cela pourrait paraître dans la documentation de WebExtensions, mais ce n'est pas difficile non plus. De nombreuses extensions de navigateur ne nécessiteront que de légères modifications du manifeste et de la base de code pour fonctionner dans plusieurs navigateurs, et la publication dans le référentiel d'extensions de chaque navigateur n'est pas strictement requise. Le principal inconvénient est simplement le temps supplémentaire consacré aux tests, car vous ne pouvez pas faire les mêmes hypothèses en matière de compatibilité entre navigateurs qu'avec les sites Web et (la plupart) des applications Web.