Les extensions sont un type d’add-ons (ou modules en 🇨🇵) pour les navigateurs (les 2 autres types d’add-ons sont : les user dictionaries et language packs).
Les extensions sont de véritables applications qui ajoutent des fonctionnalités au navigateur qui peuvent se matérialiser de nombreuses façons : ils permettent notamment de modifier des pages web (modification du DOM comme les ad-blockers), créer side-bars, pop-ins, des outils de développement (ex. 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 WebExtensions et un 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 Chromium comme Edge ou Brave) grâce à la prise en charge du namespace chrome par Firefox…
Voici le portail grand publique addons.mozilla.org alias AMO.
Point de départ documentaire
Mozilla nous fourni beaucoup de documents (de meilleurs qualité en anglais 🇬🇧) pour créer des extensions :
- point de départ pour creuser le sujet
- portail pour développeurs avec documentation, outillage et possibilité de soumettre nos extensions
- le 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 arborescence de fichiers incluant obligatoirement un fichier 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 interface utilisateur : popup, sidebar, menu contextuel, page d’option etc.
- scripts ou pages d’arrière-plan : présent indépendamment de l’ouverture/fermeture de pages
- page d’extension : popup ou onglet
- 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.
Liens
Docs
- Anatomie 🧠 d’une extension Firefox
- 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)