Logiciel Libre – Unicoda

YtAutoDark – Version 3.0

J’ai passé plusieurs soirées la semaine dernière à écrire du code pour mon extension YtAutoDark. C’est donc avec une certaine satisfaction que je vous annonce que la version 3.0 est disponible sous Firefox et Chrome depuis le 25 juillet !

Pour cette nouvelle version, je me suis concentré sur des fonctionnalités des extensions que j’avais toujours voulu explorer: la page d’installation/mise à jour et les paramètres. C’est désormais chose faite. L’événement qui a justifié une nouvelle version pour cet été 2020, c’est l’arrivée d’une pull request sur le dépôt Github de l’extension. Un utilisateur a apporté des modifications à l’extension de son côté pour répondre à des besoins qui lui sont propres et a ensuite proposé que les modifications soient intégrées dans le code parent.

Les modifications apportées concernent en particulier les conditions de déclenchement de l’extension, afin que celle-ci suive la sélection du thème sombre ou clair effectuée par l’utilisateur au niveau du système d’exploitation ou du navigateur, via la propriété prefers-color-scheme. Une deuxième condition définie des règles horaires, respectivement avant et après deux bornes horaires pour le choix du thème. Si l’heure actuelle est inférieure à la première borne ou supérieure à la deuxième, le thème sombre sera activé, sinon l’extension rétablira le thème clair.

Afin de faire profiter les utilisateurs de ces ajouts et sans forcer pour tous ce comportement, j’ai donc ajouté une page de gestion des paramètres de l’extension, permettant d’activer au cas par cas l’une ou l’autre des fonctionnalités et de configurer les bornes horaires. J’en ai profité pour utiliser l’api storage dans sa version synchronisée, afin que les paramètres choisis soient partagés entre les différentes instances de navigateur d’un utilisateur authentifié. On notera au passage que si la partie sync n’est pas disponible, la configuration sera enregistrée automatiquement dans la partie locale du storage.

Deuxième ajout, la création d’une page d’information affichée après l’installation de l’extension, ou après sa mise à jour en cas de version majeure. Cette page me permet de m’adresser aux utilisateurs de l’extension, pour les informer des changements effectués. C’est un bon moyen, je trouve, pour prévenir de modifications du code s’exécutant dans le navigateur et de leur impact. De ce côté là, j’ai appris, après une bonne heure de recherche, que l’initialisation du listener sur l’événement onInstalled doit absolument être effectué dans le background script et non dans le content script. Ce qui est plutôt logique une fois que l’on connaît la solution.

Derniers ajouts, invisible ou presque, c’est la traduction de toutes les chaînes de caractères en français, afin de fournir l’extension dans ma langue maternelle à mes compatriotes français et autres francophones du monde. Et enfin, utilisation de webextension polyfill, pour l’utilisation des fonctions de stockage sous Chrome via browser comme mentionné dans la spécification et non chrome.

Avant de se quitter, petit point statistique. YtAutoDark, c’est, en cette fin juillet 2020, 141 utilisateurs actifs sous Firefox et 23 sous Chrome. Chers utilisateurs, si vous me lisez ici et que vous veniez à constater un dysfonctionnement de l’extension, n’hésitez pas à me le signaler ici en commentaires, ou en ouvrant une issue sur Github. Moi-même utilisateur quotidien de mon extension, je suis bien évidemment à l’affut du moindre bogue. Si vous en dénichez un, vous savez donc quoi faire.

Inkscape 1.0 est arrivé ! Thème noir, lisibilité et plus !

Mise en article de ma vidéo sur le sujet

Une mise à jour majeure d’Inkscape est sortie le 1er Mai 2020, après 3 ans sans nouvelles versions. Cette nouvelle version vient nous rendre la vie plus simple, plus belle et avec un tas de nouvelles fonctionnalités. Dans cet article je ne présenterais pas toutes les nouveautés mais vous pourrez les retrouver en cliquant ici.

Nouvelles icônes et thème noir

La première nouveauté que l’on va découvrir dès le lancement de l’application ce sont les boutons et l’interface, qui sont bien plus visible qu’avant. Vous pouvez même changer le pack d’icônes pour un pack plus moderne mais aussi modifier les couleurs de ces icônes.

Toujours dans le même registre on peut maintenant changer le thème et passer d’un thème clair à un thème sombre. Idéal pour se reposer les yeux.

Outil de texte

L’amélioration des outils de texte est lui aussi de la partie, c’était un des points noirs d’Inkscape mais il semblerait que les choses évolues un des exemples notable est la largeur réglable d’un texte en continu (c’est à dire sans saut de ligne).

Vision rayon X

Ceux qui utilisent d’autres logiciels de dessin vectoriel comme « Illustrator » seront familier avec le concept de rayon X qui vous permettra notamment de sélectionner plus facilement un objet caché parmi l’ensemble des objets.

Pour activer le rayon X allez simplement dans “Affichage” -> “Mode rayons X” maintenant si vous cliquez sur un chemin bien précis vous sélectionnez l’objet auquel il appartient.

Une autre méthode est d’aller dans “Affichage” -> “Mode d’affichage scindé”, dans ce mode vous pouvez déplacer le curseur ou cliquer sur les flèches pour changer la partie que vous voulez voir apparaître en rayon X.

Alignement sur l’espace de travail

Si vous ouvrez votre fenêtre “aligner et distribuer” vous remarquez un nouveau bouton dans le coin gauche de la fenêtre. Il va vous permettre d’aligner des objets directement dans l’espace de travail.

Une fois activé, si vous sélectionnez plusieurs objets vous pourrez en cliquant trois fois dessus vous pourrez faire apparaître des poignets d’alignements.

Effets de chemin interactif

Dans la fenêtre “Effet de chemin” ajoutez un nouvel effet en cliquant sur “+” un onglet s’ouvre avec les effets à sélectionner. Vous pouvez maintenant rechercher vos effets avec la barre de recherche interactive.

Plusieurs nouveaux effets de chemin sont disponible comme :

Les contours en pointillés, mesure de segments et bien d’autres

Pour tous les effets vous pourrez définir les valeurs par défaut pour la prochaine utilisation que vous en ferez.

Mentions spéciales

Si vous utilisez un moniteur 4K vous pourrez maintenant distinguer les icônes ce qui n’était pas le cas avant.

Si vous dessinez avec une tablette graphique il y a eu beaucoup d’amélioration sur la prise en charge du stylet mais aussi la possibilité de tourner la zone de travail avec Ctrl+Maj+Molette.

Voilà ce sont les évolutions notables de cette version 1.0, pour plus de détails sur cette nouvelle version n’hésitez pas à aller sur le wiki et installer vous même Inkscape 1.0

YtAutoDark – Publication de la version 2

Youtube ayant mis à jour le code des menus de ses pages, j’ai constaté depuis quelques jours que lorsque mon extension avait terminé d’effectuer l’activation du thème sombre de Youtube, le menu n’était pas fermé automatiquement comme avant.

Après quelques heures à parcourir une nouvelle fois le code HTML du site, je suis parvenu à une nouvelle version qui me semble satisfaisante. Le processus est bien plus lent qu’avant car celui-ci doit attendre le chargement du contenu des menus, arrivé avec le nouveau code de Youtube, ce qui n’était pas totalement nécessaire. J’ai également ralenti un peu l’enchaînement des étapes du processus d’activation du thème sombre, il n’est pas impossible que je le diminue ou le supprime complètement dans les prochaines semaines, une fois que j’aurais l’assurance de la stabilité de cette version.

Côté modification, j’ai également allongé le temps pendant lequel l’extension tente de procéder au changement, celui-ci passe de 10 à 15 secondes, car j’ai constaté des temps de chargement du contenu des menus de plusieurs secondes au moment des tests. Une fois ces 15 secondes écoulées, si le thème sombre n’est pas activé, l’extension repasse sur l’ancienne manière de réaliser l’activation avec une fenêtre de 10 secondes (celle-ci étant toujours fonctionnelle, avec néanmoins le problème cosmétique du menu restant ouvert).

Enfin, dans les modifications non visibles pour l’utilisateur, j’ai ajouté un système de log me permettant de suivre les actions effectuées par l’extension et ainsi de faciliter le débogage en cas de problème. Afin de s’assurer de ne pas conserver les logs activés dans la version publiée de l’extension, j’ai écrit quelques lignes en NodeJs, pour vérifier l’état d’activation des logs et faire échouer l’étape de build si besoin.

La version Chrome a également été mise à jour. Par ailleurs, j’ai constaté par hasard que l’interface Youtube change lorsqu’on navigue en étant connecté avec un compte Google, ce qui n’est pas mon cas, sauf dans mon navigateur professionnel avec mon compte pro. Les menus utilisés par l’extension n’étant pas présent (en tout cas, pas totalement au même endroit), il n’est pas dit que l’extension fonctionne pour les personnes connectées à Youtube. De plus, je me demande si le paramètre du thème n’est pas retenu dans les paramètres liés au compte, dans le cas d’une navigation en mode connecté. Quoi qu’il en soit, ce point n’est pas une priorité pour le moment; j’y jetterais peut-être un œil par curiosité si je décide d’y accorder du temps.

Comme toujours, j’espère que l’extension pourra être utile à ceux qui l’auront installé et qu’elle continuera de fonctionner chez le plus grand nombre, aussi bien qu’elle fonctionne dans mon navigateur. Commentaires et remarques à la suite ou sur Github, et si l’extension vous plaît, 5 petites étoiles sur la page de l’extension font toujours plaisir.

YtAutoDark – Publication sur le Chrome Web Store

En ce début d’année, j’ai pris un peu de temps pour effectuer quelques modifications cosmétiques sur l’extension YtAutodark publiée en octobre sur Firefox et que j’avais présenté dans l’article [Extension Firefox] yt-auto-dark. Ajout d’une icône relativement simple, gestion des langues dans un dossier dédié et modification d’autres propriétés du manifest de l’extension pour pouvoir la publier également dans le Chrome Web Store.

L’extension est donc dès à présent disponible pour Chrome sous le nom Thème Sombre Automatique pour Youtube™.

[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.