J’ai publié ma première extension Chrome. Elle contient une courte introduction avec quelques formulaires pour l’utilisateur. Puis elle remplace la page “Nouvel Onglet” avec un compteur en JavaScript et React.

Développer l’extension était plus simple que je ne l’avais imaginé, je vous recommande d’essayer. Cependant, la partie de préparation était plus compliquée que prévu. Dans la suite, je décris les premières étapes pour démarrer une Extension Chrome en utilisant JavaScript et React.

clepsydra demo video

Voilà comment j’ai modifié un projet create-react-app pour faire une Extension Chrome. L’extension va utiliser deux fonctionnalités pour le moment: une page popup pour la configuration et une page newtab.

Structure d’une Extension Chrome

Notre extension sera contenue dans un dossier avec:

  • un manifest.json, qui décrit l’extension et ses fonctionnalités
  • Au moins un fichier d’icône pour la barre de navigation
  • Les fichiers HTML et JavaScript pour chaque partie de l’application. Par exemple, chrome affiche le popup.html de notre projet lorsque l’utilisateur clique sur l’icône de l’extension.

the popup.html is rendered direclty in your browser UI
popup.html affiché dans l'interface Chrome

L’équipe de Google Chrome partage quelques templates dans leurs Documentation de dev.

On va utiliser create-react-app pour produire une extension Chrome basique. Ce démarrage rapide devrait vous permettre d’attaquer le développement de l’extension en une dizaine de minutes.

create-react-app

D’abord, on crée le projet qu’on va eject‘er pour avoir accès aux fichiers de configurations:

create-react-app my-extension
cd my-extension/
yarn run eject

yarn expose les fichiers de configuration utilisés lors du processus de build:

  • scripts/, les scripts de build,
  • config/, les configurations pour les plug-ins,

Préparation des ressources

On va préparer nos deux HTML principaux,

  • newtab.html qui remplacera la page “Nouvel Onglet”,
  • popup.html qui va apparaître quand l’utilisateur clique sur l’icône.

J’initialise les deux HTML depuis l’original public/index.html,

cp public/index.html public/newtab.html
cp public/index.html public/popup.html

On ne change pas le contenu du HTML: c’est le compilateur webpack qui va injecter les scripts dans chaque fichier HTML.

On crée les points d’entrées JavaScript. Ils contiennent le code React pour chaque page de l’extension.

cp src/index.js src/newtab.js
cp src/index.js src/popup.js

Modification de la phase de compilation

Nos fichiers sources sont prêts. On va maintenant modifier l’étape de build (production) pour les compilateurs:

D’abord, on référence les nouveaux chemins dans config/paths.js:

Puis dans config/webpack.config.prod.js, on ajoute le point d’entrée pour nos nouveaux scripts:

Finalement, on appelle le HtmlWebpackPlugin pour chaque point d’entrée. C’est lui qui fait l’injection du JavaScript dans chaque fichier HTML:

Vous pouvez consulter les Commits correspondants dans le projet Clepsydra.

Fichier Manifest

Chrome utilise un fichier Manifest pour comprendre les extensions. Ce manifeste décrit les fonctionnalités que l’extension fournit, les permissions dont elle a besoin, etc.

Noter que c’est une spécification différente du manifeste produit par create-react-app (qui s’occupe des PWA). On va le remplacer.

Voilà un exemple minimal pour public/manifest.json pour démarrer. Il décrit une extension avec un fichier popup et une page newtab.

L’équipe Chrome partage une icône par défaut à mettre dans le dossier public/ que l’on référence depuis le fichier manifeste.

Le manifeste de mon extension est disponible dans le Dépot Clepsydra. Il contient des exemples plus avancés d’utilisation de Custom Security Policies et de permissions.

Essayer l’extension

À ce point, la commande yarn build va produire un dossier build que Chrome peut charger:

Content of the chrome build folder
Notre extension

Pour charger votre nouvelle extension:

  • Visitez chrome://extensions/,
  • Cochez la checkbox [x] developer,
  • Puis cliquez sur le bouton [load unpacked extension],
  • Sélectionner le dossier build.

Boom, l’extension est chargée dans Chrome.

Finalement

Vous pouvez consulter l’ensemble des sources de Clepsydra sur github.com/lsenta/clepsydra. Forkez le si vous ne voulez pas repasser par la phase de setup!

Pour le moment on génère le projet uniquement en mode production. La prochaine fois je décrirai comment régler un environnement de dev qui se connecte aux outils de développement Redux et React. Envoyez-moi un message sur Twitter ou commentez en dessous si vous avez besoin d’un coup de main!