Les extensions sont un type d’add-ons (ou modules en ??) pour les navigateurs (les 2 autres types d’add-ons sont : les language packs).
Les extensions sont de véritables applications qui ajoutent des fonctionnalités au navigateur qui peuvent se React dev tools) ou encore d’ajouter des entrées dans le menu contextuel du navigateur.
Le développement d’une extension repose sur des technos web classique javascript/html/css, une API workflow déterminé (concevoir, développer soumettre et gérer la vie de l’extension).
Pour finir, il est possible d’écrire des extensions compatibles Firefox et Chrome (ou plus généralement les navigateurs basés sur Brave) grâce à la prise en charge du namespace chrome par Firefox…
Voici le portail grand publique AMO.
Point de départ documentaire
Mozilla nous fourni beaucoup de documents (de meilleurs qualité en anglais ??) pour créer des extensions :
- Photon Design System, portail Mozilla est dédié aux best practices et design UI des extension pour Firefox
La Big Picture
Le projet de développement d’une extension doit être composé d’une manifest.json qui va décrire l’extension, ses permissions ainsi que ses composants : icônes, nom et points d’entrées.
Une extension est composé d’une combinaison de ces composants :
- une scripts de contenu : modification du DOM d’une page
web-ext l’assistant
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).
Cette outil est requiert NodeJS.
Installation et Run
L’installation de web-ext s’effectue avec un simple npm i --global web-ext
Par exemple, sur mon poste il a été installé ici :/home/behrouze/.nvm/versions/node/v14.15.2/bin/web-ext
Il suffit ensuite de se déplacer dans le dossier de notre projet de dév d’extension et de lancer :
- en mode watcher par défaut :
web-ext run - avec ouverture auto de la console :
web-ext run --browser-console - avec utilisation du profile Firefox :
web-ext run --firefox-profile nom_profile_firefox
le nom du profile se récupère :about:profiles
web-ext run --browser-console --firefox-profile default-release
Usage
Une autre commande bien utile est le linter web-ext lint qui va vérifier le manifest, les permissions et des incohérences dans le projet (à lancer avant de packager le projet).
web-ext build et web-ext sign permettent finalement de builder (packager) et signer son extension (voir doc).
web-ext docs
Voir aussi web-ext --help ainsi que la liste toutes les commandes disponibles.