Outils de développement d'extension de navigateur

Mozilla et la communauté des développeurs d'extensions du navigateur Firefox ont créé une gamme d'outils qui peuvent simplifier et accélérer le développement de vos extensions de navigateur. Cette page fournit un résumé de ces outils, y compris des détails sur les caractéristiques de chaque offre, la façon de commencer, où dans le cycle de développement il se situe, et des liens vers des ressources utiles.

Outils de chaudronnerie

Constructeur d'échafaudages d'extension

Créez un échafaudage pour vos extensions de navigateur. Fournissez à l'outil le nom, la description et la version de l'extension. Indiquez ensuite si vous voulez des scripts d'arrière-plan et de contenu, des actions de navigateur et de page, et des options d'extension. create-web-ext fournit ensuite un projet standard sous forme de téléchargement zip, contenant tous les dossiers et fichiers dont vous avez besoin pour démarrer le développement.

Screenshot of the extension scaffold builder's homepage

Pour commencer, visiter l'outil en ligne ou installez-le localement à partir du npm.

Utilisation pendant :

  • Développement

Ressources

Exemple de WebExtensions

Le référentiel GitHub de webextensions-exemples est un exemple d'extensions de navigateur de collection. Chaque exemple est une extension complète que vous pouvez installer et exécuter dans Firefox. Vous êtes libre d'utiliser ces exemples comme point de départ pour vos extensions de navigateur, car ils sont disponibles sous la Mozilla Public License 2.0.

Utilisation pendant :

  • Développement

Ressources

Outils de code

web-ext

Accélérez le développement des extensions de navigateur et facilitez les tâches de développement avec cet outil en ligne de commande. Cet outil est utile :

  • recharger et redémarrer automatiquement votre extension dans Firefox, au fur et à mesure que vous modifiez le code.

  • lancer votre extension vers n'importe quelle version installée de Firefox, y compris dans Firefox pour Android.

  • vérifiez le manifeste et le code de votre extension pour détecter les erreurs courantes.

  • emballez votre extension prête à être soumise à l'AMO.

  • signer votre extension pour une distribution en auto-hébergement.

Pour commencer avec web-ext, installez-le avec l'outil nodejs/npm.

Commencez à travailler

Utilisation pendant :

  • Développement

  • Tests

  • Publication

Ressources

web-ext-webpack-plugin

Utilisez ce plug-in pour simplifier le développement d'extensions construites avec webpack. Pour ce faire, le plug-in intègre les commandes web-ext run et lint dans le processus webpack, de sorte que l'extension soit linted et rechargée une fois la compilation webpack terminée.

Pour commencer, ajoutez le plug-in à votre webpack.config.js.

Commencez à travailler

Utilisation pendant :

  • Développement

Ressources

Lors de la création d'extensions que vous souhaitez utiliser dans Firefox et Chrome, cette bibliothèque vous permet d'utiliser les API basées sur Firefox Promise et de les faire tourner sur Google Chrome avec peu ou pas de modifications.

Pour commencer, installez en utilisant npm et chargez la bibliothèque dans les contextes où vous accédez aux API du navigateur.

Commencez à travailler

Utilisation pendant :

  • Développement

Ressources

Outils de test et de débogage

about:debugging

Cette page Firefox vous permet d'installer manuellement des add-ons dans Firefox pour tester et lancer le débogage, en utilisant la fenêtre Addon Debugging Window, pour toute extension de navigateur installée dans Firefox.

Screenshot of the about:debugging page

Pour commencer, tapez about:debugging dans la barre d'adresse de Firefox.

Utilisation penadant :

  • Testing and debugging

Ressources

Fenêtre de débogage de l'extension

Déboguez les extensions de votre navigateur avec cette version de la boîte à outils standard de développement Firefox. Avec la fenêtre de débogage de l'extension, vous avez accès à console, debugger, scratchpad, page inspector, style editor, network monitor, performance analyzer,  storage inspector, et accessibility inspector.

Screenshot of the addon debugging window

Pour commencer, activez la boite à outils du navigateur puis ouvrez about:debugging et cliquez sur debug à côté de l'extension que vous voulez déboguer.

Commencez à travailler

Utilisation pendant :

  • Débogage

Ressources

Outils de traduction

Web Extension Translator

Un outil pour créer et gérer les fichiers messages.json du dossier _locales. Importez des extensions de navigateur depuis GitHub ou un fichier zip d'extension de navigateur, comparez les traductions, ajoutez de nouvelles locales, exportez les traductions mises à jour, et plus encore.

Screenshot showing translation in progress in the Web Extension Translator

Pour commencer, visiter la version en ligne ou installer le paquet npm package localement.

Commencez à travailler

Utilisation pendant :

  • Développement

  • Localisation

Ressources

Traduire une Web-Ext

Un outil pour créer et gérer les fichiers messages.json dans le dossier  _locales. Importez les fichiers source précédents et actuels ainsi que le fichier de destination, avec des options d'importation à partir d'une URL ou d'un fichier local. Consultez les détails des modifications nécessitant une traduction, enregistrez les travaux en cours localement et exportez les fichiers messages.jsoncomplets.

Screenshot showing translation in progress in Translate Web-Ext

Pour commencer, visiter l'outil en ligne.

Commencez à travailler

Utilisation pendant :

  • Développement

  • Localisation

Ressources

Outils pour Firefox pour Android

Lorsque vous développez des extensions de navigateur pour Firefox pour Android, vous pouvez utiliser :

  • web-ext, pour charger automatiquement votre extension sur un appareil Android lorsque vous effectuez des changements de code.

  • Addon Debugging Window, pour déboguer votre extension.

Pour plus de détails, voir Développer des extensions pour Firefox pour Android.

Étiquettes et contributeurs liés au document

Contributeurs à cette page : hellosct1
Dernière mise à jour par : hellosct1,