[Extension Firefox] yt-auto-dark

Aujourd’hui, petit article d’auto-promotion, pour mettre en avant une extension pour Firefox à la fonction extrêmement limitée, que j’ai développée pour m’épargner trois clics. J’ai nommé « Thème Sombre Automatique pour YouTube™« , nom de code : yt-auto-dark.

La fonction de l’extension est simple: activer le mode sombre proposé par Youtube, sans que j’ai à intervenir. L’option se situe dans le menu paramètre du site, juste à côté du bouton « se connecter » et nécessite trois clics pour passer du thème par défaut, le thème clair, au thème sombre. N’utilisant pas de compte Youtube, qui aurait éventuellement pu retenir mon choix de thème comme paramètre de configuration du compte, et étant habitué à nettoyer systématiquement mon navigateur après chaque session de navigation, je devais réactiver le thème sombre à chaque nouvelle session de navigation. Pire, utilisant depuis plus d’un an une extension chargée de procéder au nettoyage des cookies d’un onglet, quelques dizaines de secondes après la fermeture de celui-ci, je pouvais être amener à répéter l’opération plusieurs fois.

L’idée est donc venue assez rapidement de créer une extension Firefox pour cette tâche des plus simples. Il m’aura néanmoins fallu quelques heures de recherches et programmation, réparties sur plusieurs mois, avant de trouver une implémentation satisfaisante. Penchons-nous donc un peu sur la technique, sans toutefois rentrer trop dans les détails. Durant mes recherches, j’ai passé de long moment à lire le code source de la page HTML de YouTube, à parcourir les scripts utilisés, à tenter de comprendre la méthode de changement de thème et à essayer de déclencher le changement par appel direct de la bonne fonction, ou en copiant le fonctionnement de celle-ci. Pas d’avancées concrètes de ce côté-là, même après avoir identifié les parties de code mise en œuvre.

Lors de mes recherches, j’avais en autre découvert que l’activation du thème sombre conduisait à l’ajout d’un paramètre dark= »true » sur la balise <html> de la page. J’avais reproduit cet ajout dans mes premiers tests d’extension, sans arriver à un résultat satisfaisant. De mémoire, je crois me souvenir que quelques éléments n’étaient pas colorer correctement (d’autres éléments m’ont également conduit à rejeter cette solution incomplète, mais ne les ayant pas notés, je ne suis plus en mesure de les préciser).

Bref, la solution vers laquelle j’avais décidé de m’orienter consister simplement à écrire du code Javascript qui effectuerai les clics sur les différents éléments de l’interface à ma place. Pas de grande difficulté de ce côté là et j’avais réussi à obtenir une première version fonctionnelle. Celle-ci fonctionnait assez bien, mais un problème subsistait. En général, lors du premier affichage de la page, l’activation du thème sombre échouait, mais réussissait dès le rechargement de celle-ci, ou dès l’affichage d’une autre page. L’implémentation était insuffisante. J’ai donc chercher un moyen pour m’assurer de l’existence des éléments html du menu dans la page avant de permettre à mon extension d’essayer de cliquer dessus.

Après plusieurs tentatives infructueuses en utilisant de la récursivité et une vérification de l’état de la page via la propriété document.readyState, je suis tombé par hasard sur un article présentant les avantages de la fonction requestAnimationFrame. C’est muni de ces nouvelles informations que je suis enfin arrivé à une première version stable de l’extension. Désormais, celle-ci attend donc l’apparition des éléments de menu avant de tenter de cliquer sur les éléments pour tenter de passer au thème sombre. J’utilise l’attribut dark évoqué tout à l’heure pour savoir s’il faut déclencher le changement de thème ou non. De plus, j’ai intégré un mécanisme de sécurité afin de limiter la durée pendant laquelle l’extension tentera d’activer le thème. La limite est donc actuellement configurée à 10s, ce qui semble largement suffisant sur les quelques ordinateurs où j’ai testé l’extension.

Côté amélioration, il pourrait éventuellement être intéressant de pouvoir configurer le temps d’attente, pour pouvoir facilement l’augmenter au besoin. Je pense notamment à une utilisation sur des machines un peu « lentes » dans le chargement des pages web modernes. L’extension n’ayant pas de logo, il pourrait être utile d’en créer un un pour l’identifier plus facilement parmi les extensions installées. Je ne me suis pas pencher sur la question de l’implémentation de logs de débugage, qui permettraient de suivre le fonctionnement de l’extension en cas de dysfonctionnement. En effet, si l’extension fonctionne parfaitement sur tous mes navigateurs Firefox (vérifiée sur 3 instances différentes), l’activation du thème sombre échoue chez l’un de mes collègues de travail.

Passons maintenant au(x) mots de la fin pour clore cette présentation. Je suis très satisfait du fonctionnement de cette petite application, qui me rend désormais service au quotidien. C’était un bon sujet pour découvrir comment réaliser une extension pour Firefox, la tester, et demander son intégration au catalogue d’extensions. Le code source est bien entendu disponible sur Github, sous licence GPLv3. J’espère que cette extension pourra rendre service à ceux qui y trouveront un intérêt, et surtout, qu’elle fonctionnera chez ceux qui tenteront l’installation; et permettront de vérifier que mon extension ne fonctionne pas juste sur ma seule configuration de Firefox. Dans le cas contraire, nous pourront en discuter sur Github, ou dans les commentaires.

Modules Firefox pour 2016

J’ai effectué récemment un nettoyage de mon navigateur Firefox, vérifié les paramètres et surtout, revu les modules installés. Voici donc ma sélection en ce début d’année.

  • HTTPS-Everywhere : Redirige automatiquement les requêtes vers HTTPS pour de nombreux sites. Proposé par l’EFF.
  • uBlock Origin : Bloqueur de nuisance et de pisteurs. Son empreinte mémoire est plus légère que les autres modules du même type.
  • Ghostery : Blocage supplémentaire de script. GhostRank désactivé. Plutôt efficace et clair en ce qui concerne les éléments bloqués. Pas encore trouvé d’autres alternatives satisfaisantes.
  • KeeFox : Pour interfaçage avec Keepass. Facilite la gestion des mots de passe.
  • FlagFox : Indique la localisation du serveur au niveau de la barre d’adresse. Recherche par base de données interne d’IP avec mise à jour mensuelle de la base. Pas de requête externe à chaque site visité. Permet d’avoir une vague idée des lois qui concerne le serveur auquel on accède.
  • Dark Youtube Theme : Un thème noir pour Youtube c’est tellement plus agréable.
  • FT DeepDark : Un thème noir pour Firefox.

Firefox: Url du serveur de synchronisation

Pour utiliser son propre serveur de synchronisation dans Firefox, il est nécessaire d’effectuer une petite modification dans about:config. Chercher la propriété nommée services.sync.tokenServerURI et la remplacer par l’url du serveur en faisant attention à ajouter token/1.0/sync/1.5 comme chemin.

Ce qui nous donne par exemple:

services.sync.tokenServerURI: http://sync.exmpl.com/token/1.0/sync/1.5

Source: Documentation Sync-1.5 Server.

Multiplicité des préférences

S’il y a bien une chose commune aux différents systèmes d’exploitation que j’utilise, c’est entre autres mon navigateur: Firefox. Lorsque l’on passe d’un OS à un autre, d’un PC à autre, les marques pages, eux par contre changent. Pas énormément, chacune de mes instances de navigateur possèdant les sites incontournables que je consulte régulièrement. Seulement plus le temps passe, plus les différences apparaissent… Le site consulté la veille en plein déplacement, n’est pas présent dans les marque-pages du PC de bureau qui vous attends chez vous.

Il arrive donc un moment où le besoin de synchronisation se fait sentir. Firefox possède en outre un système pour retrouver ses marque-pages depuis n’importe quel navigateur Firefox, mais cela implique de stocker ses données dans le cloud, les nuages. Je fais évidemment davantage confiance à Mozilla qu’aux autres pour la gestion des données personnelles, mais tout de même… Une partie de moi reste réticente à cette idée. Dans ce cas, pourquoi ne pas gérer le système de synchronisation soi-même?

La solution est relativement simple, installer son propre serveur de synchronisation de marque-pages. Par chance, Mozilla met à disposition les sources de son serveur de synchronisation ainsi qu’une documentation relativement complète. Les prérequis sont clairement identifiés et l’installation s’effectue aisément. Reste ensuite à effectuer la configuration minimale nécessaire au bon fonctionnement du service.

Le point qui m’a posé le plus de problème fut le paramètre:

[nodes]
fallback_node = http://localhost:5000/

La mauvaise configuration de celui-ci empêchait le service de fonctionner correctement. Après quelques recherches et plusieurs semaines à m’occuper d’autres choses, j’ai fini par trouver le paramètre correct dans ma situation. Ainsi, pour fonctionner normalement, ce paramètre doit absolument correspondre à l’adresse publique de votre service. Adresse que vous allez utiliser dans la configuration du service au niveau de Firefox. Une valeur correcte peut donc être http://www.nomdedomaine.fr:5000 par exemple, ou dans notre cas: http://www.unicoda.com:5000. Ajouter à cela un petit script pour démarrer automatiquement le serveur Sync au démarrage et le tour est joué.

 

Voir aussi:

http://www.docgreen.fr/2011/12/06/installer-son-propre-serveur-mozilla-sync-pour-firefox-saison-03-episode-final/