J´ai codé ma première extension Firefox : un bloc-notes pour la page nouvel onglet. Ça m’a pris deux semaines, sans me presser, et je suis vraiment content du résultat :)

Description rapide : une fois l’extension installée, la page qui s’affiche quand vous cliquez sur “Nouvel onglet” change. Elle devient une grande zone de saisie, et tout ce que vous pourrez y écrire sera automatiquement enregistré dans la mémoire du navigateur. Vous pouvez aussi créer des brouillons qui seront également enregistrés automatiquement.

Je l’ai appelée Drafter, pour l’utiliser vous pouvez suivre ce lien, pour voir le code, celui là.

Quand j’utilisais Chrome, j’étais fan de Papier. Cette extension transforme la page nouvel onglet en feuille blanche auto-enregistrée. Simple et efficace, du très beau travail. Quand je suis passé à Firefox¹ j’ai cherché un équivalent, sans succès. J’ai décidé de coder cette extension que je ne trouvais pas.

Les fonctionnalités sont basiques. La zone de saisie principale reproduit le fonctionnement de Papier, et j’ai ajouté la possibilité de gérer des brouillons dans une colonne sur la droite. Concernant le style, j’ai voulu mettre le texte en valeur, j’ai choisi une typo qui rappelle celle utilisée pour imprimer des romans. Tous les textes saisis dans Drafter ressemblent à de la poésie, même une todo list ou une recette de cuisine copiée-collée.

Rien de compliqué donc, le but était surtout d’apprendre à coder une extension de navigateur.

(Ça va devenir un peu technique.)

Au final, ça n’a pas vraiment été un défi. Une extension ce n’est rien d’autre qu’une application web, de l’HTML, du CSS et du JS. Avec un luxe inhabituel : on sait par avance dans quel navigateur le code va être exécuté. Dans mon cas, Firefox à partir de la version 48. Toutes les dernières fonctions de JavaScript sont donc utilisables sans hésitation, tout est tellement plus simple. Ce qui est vraiment spécifique, ce sont les APIs mises à disposition par les navigateurs. C’est là que j’ai fait un mauvais choix, qui m’a fait perdre pas mal de temps.

Pour enregistrer les données, ma première version utilisait Window.localStorage, une vieille API qui permet de gérer les données locales du navigateur. Après une semaine, tout fonctionnait bien, j’étais ravi mais … j’ai dû réécrire la moitié du code. Quand j’ai voulu déployer mon travail sur le store d’extensions de Firefox, j’ai découvert que Mozilla recommandait d’utiliser une autre API, storage. Firefox peut parfois supprimer le contenu de localStorage par mesure de sécurité, utiliser storage assure une meilleure stabilité des données.

Seulement voilà, alors que localStorage a une utilisation synchrone, storage, plus moderne, est totalement asynchrone. C’est très désagréable de changer en profondeur un logiciel quasiment terminé, mais heureusement je pouvais utiliser async/await. Je suis passé de ce style

save() {
  window.localStorage.setItem(
    'drafter-' + this.uid, JSON.stringify(this)
  );
}

à celui là :

async save() {
  const data = { [`drafter-${this.uid}`]: this };
  await browser.storage.local.set(data);
}

Plus besoin de transformer mes données en JSON : l’API storage permet d’enregistrer des objets, contrairement à localStorage qui oblige à tout convertir en string.

La possibilité de coder directement avec du JS moderne m’a sauvé. J’ai pu garder les choses simples, travailler directement sur deux fichiers JS sans avoir besoin d’un outil de build ou d’un transpileur. Ce projet est resté raisonnablement rapide, et la page nouvel onglet de mon navigateur fait exactement ce que je veux.

Après une première semaine d’utilisation, je constate que j’y ai copié plusieurs textes qui me touchent, pour les relire régulièrement et m’en imprégner. Une première utilisation imprévue. Comme d’habitude, je me suis créé l’outil dont j’avais envie et j’espère que d’autres s’en serviront autrement. Si vous essayez mon extension, faites-moi signe, je serais ravi d’avoir des retours.

Drafter sur le store de Firefox

¹ Vous aussi, vous devriez changer de navigateur pour Firefox :)

Vous aussi, réduisez l’influence d’une multinationale sans rien perdre ! La maison mère de Firefox, Mozilla, est une fondation sans but lucratif, certainement le groupe de programmeurs le plus respecté au monde. Leur navigateur, Firefox, est libre, gratuit et performant. Vous pouvez facilement importer votre historique et vos favoris (par exemple en venant de Chrome).

Bref, venez, on est bien :)

retour