Extension Web – comment développer un add-on pour votre navigateur favori ?

Développez des outils / extensions accessibles directement depuis Chrome / Brave / Firefox.

Une extension/plugin pour navigateur contient du HTML, CSS, Javascript et un fichier manifest.json. Avec quelques bases en développement web, créer votre propre extension est très accessible. La seule difficulté ? Trouver la bonne permission et utiliser les fonctions adéquates de l’API de votre navigateur. Bonne nouvelle : les développeurs de navigateur se sont mis d’accord pour mettre en place des fonctions quasi-communes.

Initialiser une extension

1. Téléchargez les fichiers (de code) du projet Hello-World.

⚠️ Pour que les extensions soient compatibles au maximum avec d’autres navigateurs, les grands acteurs ont créé des normes. Celles-ci sont regroupées sous la forme d’un Manifeste. Aujourd’hui, Google implémente la version 3. Mais de son côté, Firefox ne gère pas encore cette nouvelle version. Alors pour éviter de vous proposer deux tutoriels sensiblement similaires, j’ai choisi d’utiliser la V2 de cette norme.

Le projet Hello-World ci-dessus est donc compatible avec Firefox, Chrome & Brave.

L’installer dans le navigateur

Pour Chrome / Brave

  1. Rendez-vous dans la section Extensions de votre navigateur.
  2. Activez le mode Développeur (accessible en haut à droite).
  3. Drag & drop du répertoire Hello-world.

Chrome / Brave vérifie votre extension, et l’installe s’il n’y a pas de problème.

  1. L’extension installée est mise à jour automatiquement lorsque vous modifiez le code source.
  2. Brave affiche les informations provenant du fichier manifest.json.
  3. Il est possible de consulter le détail, supprimer, rafraichir ou activer / désactiver l’extension.
  4. Cliquez sur le puzzle en haut à droite pour pouvoir l’afficher à tout moment.
  5. Trouvez votre extension et cliquez sur la punaise.
  6. Son bouton Hi s’affiche.
  7. Cliquez sur l’extension pour voir le contenu HTML s’afficher.

Pour Firefox

  1. Tapez l’URL about:debugging#/runtime/this-firefox
  2. Cliquez sur Load Temporary Add-on.
  3. Sélectionnez le fichier manifest.json de votre extension.
  1. Firefox analyse l’extension et affiche le détail, s’il n’y a pas de problème de conception grave.
  2. Cliquez sur la petite icône Hi en haut à droite du navigateur pour en afficher le contenu.

Développer le contenu de l’extension

Pour modifier le contenu de la popup, il suffit d’éditer le fichier hello.html. A l’intérieur, vous pouvez écrire du code HTML, importer des fichiers Javascript, CSS… avec ces premières bases, vous pouvez créer sans problème une petite extension. Par exemple, une calculatrice. Vous pouvez aussi télécharger des exemples d’extensions et analyser leur code.

Il est aussi possible de développer des extensions pour mobile : voici comment cela fonctionne.

👉 Quels sont vos projets d’extensions, et pour quel(s) navigateur(s) ?

Dans le prochain article, je vous expliquerai en détail comment fonctionne le fichier manifeste.json. Il s’agit du chef d’orchestre en matière d’autorisation utilisateur. Ces permissions permettent d’accéder à l’API puissante des navigateurs. Alors pour ne pas rater ce nouveau tutoriel, inscrivez-vous à la newsletter :

Articles Similaires

Comment sauvegarder vos sites, serveurs… sans exploser la facture énergétique

OhMyForm – Vos sondages sans GAFAM, écoconçus et installables localement

Scrcpy – Sauvez les données d’un smartphone à l’écran brisé… et recyclez-le