Les extensions Firefox ou Chrome sont de véritables applications qui augmentent les fonctionnalités de nos navigateurs (voir le portail grand publique AMO), sont un type d’add-ons (ou modules) qui peuvent :

• nous apporter de l'outillage (ex React dev tools ou ce ✨ Humble Bundle Downloader ✨)
• ajouter des entrées dans le menu contextuel du navigateur
• ou encore modifier complètement l'apparence visuel des sites visités (ex l'extension Dark Reader)

Le développement d’une extension repose sur des technos web classique javascript/html/css et une API WebExtensions cross-browser (voir les 2 docs MDN et Google).

Compatibilité Firefox et Chrome

Il est possible d’écrire des extensions cross-browser compatibles Firefox et Chrome. Cela se fait simplement par la prise en charge du namespace chrome par Firefox…

Il faut également noter que le W3C a déclaré en 2021 la création d'un groupe de travail WECG, la WebExtensions Community Group initiée par Mozilla, Google, Microsoft et Apple dans le but d'uniformiser les API et joindre les efforts :

This community group seeks to align on a common vision for browser extensions and to work towards future standardization.

Le Workflow de développement

Mozilla nous aide en documentant le workflow de développement d'une extension:

1. concevoir
2. développer
3. soumettre
4. gérer la vie de l’extension

Point de départ

Le process de création des extensions est plutot bien documenté, et Mozilla fourni différents guides connexes (par ex Photon Design System, portail Mozilla est dédié aux best practices et design UI des extension pour Firefox).

🚀 un conseil : démarrer avec cette page qui présente tous les outils dispo comme notamment le web-ext scaffolder qui va vous générer un zip contenant les fichiers essentiel à votre développement.

La Big Picture

Le projet de développement d’une extension doit être composé des éléments suivants

• manifest.json qui va décrire l’extension, ses permissions ainsi que ses resources : icônes, nom et points d’entrées etc
• page d'arrière-plan : qui va permettre de conserver un état (state) et gérer les données
• composants de l'UI de l'extension :
  • sidebars (barre latérale comme celle de l'historique de Firefox)
  • popups (choix entre toolbar ou address bar)
  • options pages (vidéo)
• extension page : page custom, non référencée dans le manifest et créer via windows.create() or tabs.create().
• content script : permet d'interagir avec le DOM d’une page
• resources : les images, html, js et css utilisés au sein de l'extension par les content scripts et page scripts

voir Anatomie d'une WebExtension

web-ext

Avec web-ext Mozilla nous fourni un outil qui améliore le confort de développement en nous évitant certaintes étapes manuelles comme le re/chargement d’extension… (le fameux about:debugging#/runtime/this-firefox).

Installation

• Node.js, 12.0.0 ou sup
• npm, 6.9.0 ou sup

Run et debug

Il suffit ensuite le lancer en sélectionnant parmi ses options :

watch

web-ext run : le mode watcher est le mode par défaut

console

web-ext run --browser-console : permet d'ouvrir automatiquement la console pour debugger plus rapidement

un profil Firefox dédié

web-ext run --firefox-profile nom_profile_firefox --keep-profile-changes

le développement d'extension plus que d'autres type de développements requiert l'utilisation d'un environement Navigateur :

• propre sans parasitage par d'autres extensions, d'où l'interet d'utiliser un profil Firefox dédié
• avec certains paramétrage (comme par ex etre automatiquement loggé)

Pour cela 2 options utiles :

• --firefox-profile xxx
• --keep-profile-changes

nom_profile_firefox le nom du profile courant se récupère dans Firefox avec about:profiles et requiert parfois le chemin absolu 😳

linting

web-ext lint : une autre option bien utile est le linter qui va vérifier le manifest, les permissions et des incohérences dans le projet (à lancer avant de packager le projet)

build & sign

En fin de process il faudra finalement builder (packager) et signer son extension (voir doc), ce qui va se faire avec les 2 options :

• web-ext build
• web-ext sign

combinaison

il est bien sur possible de combiner les options de lancement de web-ext : web-ext run --browser-console --firefox-profile default-release

web-ext docs

web-ext docs : pour ouvrir dans son navigateur par défaut la page de doc

web-ext --help :

npx web-ext --help
Usage: web-ext [options] command

Option values can also be set by declaring an environment variable prefixed
with $WEB_EXT_. For example: $WEB_EXT_SOURCE_DIR=/path is the same as
--source-dir=/path.

To view specific help for any given command, add the command name.
Example: web-ext --help run.


Commandes :
  web-ext build  Create an extension package from source
  web-ext sign   Sign the extension so it can be installed in Firefox
  web-ext run    Run the extension
  web-ext lint   Validate the extension source
  web-ext docs   Open the web-ext documentation in a browser

Options :

Liens

Docs

• Page d'intro MDN
• Anatomie 🧠 d’une extension Firefox
• L'outil de génération de projet webextensions.in
• liste des API WebExtensions et tableau de compatibilité entre navigateurs
• comment debugger 🐛 les différents types d’extensions
• comment faire signer une extension, 📄 validation par Mozilla
• polyfill pour utiliser les Promises sur Chromium
• Best Practices de sécurité
• Documentation Chrome Developers

Exemples de code

• Mozilla et leurs index (mapping entre exemples et API JavaScript utilisés)
• Google Chrome Extensions (ex: gmail, icône avec compteur)

Vidéos

• Browser Extensions par Matt Claypotch à la JSConf US 2018 (33 min)
• Tips for great content and design for your extension (3 min)
• How to build an extension for Firefox in less than 5 minutes (5 min)