Catégories
JavaScript

Extension Firefox/Chrome

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 :

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

Exemples de code

Vidéos