Développeur FullStack & Devops

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 :

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

rédigé par behrouze le 18/12/2020
Cheat SheetsOutilsVidéosA propos