« Pour la semaine prochaine vous allez devoir trouver et étudier l’article sur le site du NCBI [insérer un nom bien compliqué ici] »
Passée la déception d’avoir à se plonger dans un article obscur en anglais, on ouvre l’article en question et là… on découvre un énorme pavé de texte ma foi fort intéressant mais assez pénible à lire.
Ça c’est le cas auquel j’ai été le plus confronté mais vous pouvez l’adapter à toutes situations où il faut aller sur le site du NCBI (que ce soit pour chercher une séquence FASTA ou compléter sa biblio).
La problématique ici ne concerne pas le contenu mais la mise en forme, ce qui peut sembler trivial. Mais dans les faits, plus l’interface est agréable et épurée, plus elle permet de chercher rapidement les différentes informations (et d’éviter de faire la grimace à chaque chargement de page).
Après un cours de bio-info où le prof nous présentait le système de recherche sur le site du NCBI : (Entrez), je me suis proposé de coder une petite extension qui changerait un peu l’interface du site, en attendant qu’aux US, ils mettent à jour leur site 😊.
L'extension : NCBI-RookieUI
(Rookie parce que je suis un noob débute).
RookieUI est disponible sur le Chrome Webstore et sur Firefox. Il s'agit essentiellement d'un bon paquet de fichiers CSS et de quelque lignes javascript qui sont injectés dans le navigateur.
Le fichier manifest, "coeur" de l'extension
Pour réaliser une extension très simple, permettant d'injecter du CSS et du JS, on crée un fichier "manifest.json":
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
{ "manifest_version": 2, "name": "Injection de CSS et JS dans le navigateur", "version": "0.1.0", "description": "Une extension pour Bioinfo-fr :)", "content_scripts": [{ "css": ["styles.css"], "js": ["content.js"], "matches": ["https://bioinfo-fr.net/*"] }] } |
Fichier CSS (ici c'est un exemple, RookieUI compte plus de vingt fichiers CSS, un pour chaque section du site):
1 2 3 |
body { background : url('https://media.giphy.com/media/ZqlvCTNHpqrio/giphy.gif') !important ; } |
Enfin, dans le dossier où se trouve le fichier manifest, on insère les fichiers CSS et le javascript et hop ! On obtient une extension de base (compatible pour les deux navigateurs).
Chrome et Firefox
La publication de l'extension m'a amené à considérer les différences de politiques de publication sur les stores respectifs des navigateurs Chrome et Firefox. Sur Chrome, on envoie un package .zip et on s'acquitte d'un paiement de 5$ pour bénéficier du droit de publier des articles (20 maximums). Cinq minutes plus tard, l'extension est disponible et référencée.
Contrairement à Chrome, pour Firefox la publication est gratuite. Le .zip est envoyé, scanné pour vérifier les erreurs puis soumis aux révisions de développeurs et bénévoles chez Mozilla… et là on attend. Cela peut durer quelques heures pour les plus chanceux, jusqu'à quelques mois. RookieUI a été approuvé au bout de deux semaines (après avoir directement contacté un des développeurs sur le forum) ce qui peut sembler long par rapport à Chrome mais assez court pour une soumission "ordinaire" à Mozilla.
On peut constater ici qu'il y a deux manières d'aborder la question des filtres qualitatifs : Google d'un côté qui "facilite" les publications et empêche de trop nombreux trolls en passant par la caisse ; et d'un autre Mozilla, fondation à but non lucratif, qui impose a priori un filtre plus resserré mais avec un délai très long (j'espère que ce sera pas aussi long à chaque mise à jour).
Captures d'écran (avant/après):
Si vous avez des remarques sur RookieUI, des idées d'éléments à modifier, à ajouter, des propositions de thèmes, n'hésitez surtout pas à le dire pour l'intégrer dans les prochaines versions. Les fichiers sources sont disponibles sur GitHub
Je voudrais vraiment remercier tous ceux qui m'ont conseillé sur l'IRC #bioinfo-fr, pour l'extension en elle-même et Max, Estel et Nisaea pour la relecture de ce premier article sur le site 🙂
Laisser un commentaire