Apprendre à coder: créer sa première extension Chrome/Firefox

J’ai toujours rêvé d’un cours de codage où on verrait immédiatement l’application du code. Avec les extensions pour Google Chrome ou Firefox, cela devient vraiment facile.

Objectif

Une personne qui doit passer des commandes au moyen d’une page web est lassée de devoir saisir à chaque fois la date du lendemain pour la livraison. Elle nous demande d’ajouter un petit bouton dans son navigateur qui fasse juste cela: écrire dans la case en cours la date du lendemain.

Avec un peu d’amélioration, si cela pouvait taper la date du lundi suivant quand on est vendredi ce serait idéal.

La matière première

Une extension pour Chrome ou Firefox est constituée à minima de trois éléments:

• un dossier avec les icônes du bouton
• un fichier “manifest” contenant les informations sur l’extension
• un fichier avec les actions que l’extension doit réaliser: le script

Un kit vide est disponible sur github: https://github.com/fxpar/EmptyExtensionTemplate/releases/download/1.0/ExtensionChromeVide.zip

La structure de base d’une extension Chrome ou Firefox

Icônes

N’étant vraiment pas un pro du graphisme, je crée mes icônes avec le logiciel gratuit Inkscape. Un rectangle, du texte au milieu, et j’exporte dans les quatre formats nécessaires:

• 16 px
• 32 px
• 48 px
• 128 px (optionnel, demandé uniquement pour la publication de l’extension sur le Chrome Web Store)

Icônes créées avec Inkscape

Si vous souhaitez en savoir plus sur la manière de créer ces boutons, j’ai fait un petit tuto très simple (à regarder plus tard)…

Le manifest

Dans ce fichier, il n’y a que 2 informations à modifier:

• La description de l’extension: écrivez entre guillemet ce que fait votre extension
• Le nom de votre extension entre les guillemets

Vous pourriez également rajouter l’adresse d’une page web pour votre extension si cela est utile pour vous, c’est la partie “ homepage_url”.

Le fichier manifest: ne modifier que la description et le nom de l’extension

Le code

Voici le fichier de départ:

Fichier de script, version initiale

Il y a trois actions à réaliser:

• créer une date
• calculer le lendemain de cette date
• écrire cette date dans l’élément actif de la page

La première instruction sera donc:

var d = new Date();

Qui créer une variable d qui sera une date. Par défaut, la formule “Date()” donne la date d’aujourd’hui. La moitié du travail est donc faite.

Ensuite, nous voulons avoir la date du lendemain. Il y a peut-être plus simple, mais au moins la méthode suivante vous permettra de comprendre le travail sur une date:

d.getDate() va prendre la date de d, c’est à dire le jour du mois

d.setDate() va attribuer une date à d

On attribue à d, la date de d+1 jour:

d.setDate(d.getDate()+1);

Maintenant, faisons en sorte que cette date soit écrite dans la case sélectionnée (l’élément actif):

Je veux que la valeur de l’élément actif de ma page soit d:

document.activeElement.value = d;

Cela fonctionne, mais le format qui est écrit est le format en anglais, et en toutes lettres:

Heureusement, il existe une méthode des objets Date qui transforme le format: toLocaleDateString(“fr”).

On modifie donc la dernière ligne pour avoir:

document.activeElement.value = d.toLocaleDateString(“fr”);

Comment auriez-vous pu trouver cela? En fait, c’est très simple. Il existe de nombreux site avec les références des différents objets. En tapant dans google “Javascript Date format” vous tomberiez rapidement sur le site w3schools qui donne la liste des toutes les options des dates… dont la fameuse “toLocaleDateString()”.

Voici le fichier background.js terminé:

background.js terminé

Installer l’extension

Dans Chrome, cliquez sur le falafel (les trois points verticaux) en haut à droite, puis sur “plus d’outils” et enfin sur “Extension”

Installer votre extension

Il vous faut activer le mode développeur avec le bouton poussoir, toujours en haut à droite:

Activer le mode développeur

Une nouvelle barre apparaît qui contient l’option permettant d’installer localement une extension qui n’a pas encore été publiée: “chargez l’extension non empaquetée”.

Trouvez l’endroit où vous avez mis le code et sélectionnez le dossier

S’il n’y a pas d’erreur dans votre code, un encadré apparaît avec le nom et la description de votre extension, ainsi qu’un identifiant créé par Chrome.

Extension chargée sans erreurs

Si des erreurs sont détectée (au chargement, ou plus tard à l’usage), vous verrez qu’un bouton erreur apparaîtra en dessous de votre extension.

En cliquant sur ce bouton vous obtiendrez des indications (plus ou moins claires) sur ce qui pose problème:

Extension chargée avec erreurs

Ici par exemple, j’ai essayé mon extension sur la page même des extensions… or cette page est protégée, comme la page d’accueil de google… mais l’indication de l’erreur de l’erreur est totalement cryptique:

Message d’erreur pour dire que l’on n’a pas le droit d’appliquer notre extension sur une page protégée… Très peu compréhensible!

Publication de l’extension

Pour chrome

Vous pourriez maintenant publier votre extension sur le Web Store. Attention, pour créer votre compte développeur, Google vous demande 5$. Une fois cette somme versée, vous pourrez créer jusqu’à 20 extensions.

Le processus de validation de votre extension prendra plusieurs jours.

Pour Firefox

Vous pourrez également publier votre extension sur le site des addons de mozilla. Le processus est gratuit. Vous pourrez suivre l’avancement de votre extension dans la queue des validations. Il n’est pas rare que votre extension soit retoquée la première fois: les personnes qui vérifie votre travail vous adresseront généralement un mail en vous demandant d’améliorer la description de votre extension.

Dans les deux cas

Vous devrez fournir des captures d’écran de votre extension…

Conclusion

J’espère que cela vous a permis de mieux comprendre le processus général de création d’une extension (qui est finalement relativement simple).

N’hésitez pas à applaudire et à partager cet article sur les réseaux sociaux… le nombre de visiteur est ma seule récompense.

En bonus, le code pour passer du vendredi au lundi et l’installation détaillée de l’extension pour Firefox.

Vous pouvez revoir toute la séquence en vidéo:

Bonus

Du vendredi au lundi

Nous rajoutons un SI (if en anglais), avec la méthode getDay() qui nous permet de savoir quel est le jour de la semaine d’une date. Cette fonction nous donne 0 pour dimanche, et va jusqu’à 6 pour samedi.

if (d.getDay()== 5 {
  d.setDate(d.getDate()+3);
}else{
  d.setDate(d.getDate()+1);
}

Installation provisoire dans Firefox

Cliquez sur le burger puis “modules complémentaires”

Cliquez sur la roue dentelée et choisissez “déboguer des modules”

Cliquez le bouton “charger un module complémetaire temporaire”

Choisissez le fichier manifest de votre extension

Pour aller plus loin, vous pourriez ajouter des options à votre extension: