Extension Firefox/Chrome

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:

concevoir
développer
soumettre
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 scafolder 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

L’installation de web-ext qui est un module Nodejs s’effectue avec un simple npm i -g web-ext et comporte comme pré-requis (pour web-ext v6):

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 :