{"id":3790,"date":"2019-10-03T14:00:01","date_gmt":"2019-10-03T12:00:01","guid":{"rendered":"https:\/\/www.unicoda.com\/?p=3790"},"modified":"2020-04-28T22:49:46","modified_gmt":"2020-04-28T20:49:46","slug":"extension-firefox-yt-auto-dark","status":"publish","type":"post","link":"https:\/\/www.unicoda.com\/?p=3790","title":{"rendered":"[Extension Firefox] yt-auto-dark"},"content":{"rendered":"\n

Aujourd’hui, petit article d’auto-promotion, pour mettre en avant une extension pour Firefox \u00e0 la fonction extr\u00eamement limit\u00e9e, que j’ai d\u00e9velopp\u00e9e pour m’\u00e9pargner trois clics. J’ai nomm\u00e9 \u00ab\u00a0Th\u00e8me Sombre Automatique pour YouTube\u2122<\/a>\u00ab\u00a0, nom de code : yt-auto-dark.<\/p>\n\n\n\n

La fonction de l’extension est simple: activer le mode sombre propos\u00e9 par Youtube, sans que j’ai \u00e0 intervenir. L’option se situe dans le menu param\u00e8tre du site, juste \u00e0 c\u00f4t\u00e9 du bouton \u00ab\u00a0se connecter\u00a0\u00bb et n\u00e9cessite trois clics pour passer du th\u00e8me par d\u00e9faut, le th\u00e8me clair, au th\u00e8me sombre. N’utilisant pas de compte Youtube, qui aurait \u00e9ventuellement pu retenir mon choix de th\u00e8me comme param\u00e8tre de configuration du compte, et \u00e9tant habitu\u00e9 \u00e0 nettoyer syst\u00e9matiquement mon navigateur apr\u00e8s chaque session de navigation, je devais r\u00e9activer le th\u00e8me sombre \u00e0 chaque nouvelle session de navigation. Pire, utilisant depuis plus d’un an une extension charg\u00e9e de proc\u00e9der au nettoyage des cookies d’un onglet, quelques dizaines de secondes apr\u00e8s la fermeture de celui-ci, je pouvais \u00eatre amener \u00e0 r\u00e9p\u00e9ter l’op\u00e9ration plusieurs fois.<\/p>\n\n\n\n

L’id\u00e9e est donc venue assez rapidement de cr\u00e9er une extension Firefox pour cette t\u00e2che des plus simples. Il m’aura n\u00e9anmoins fallu quelques heures de recherches et programmation, r\u00e9parties sur plusieurs mois, avant de trouver une impl\u00e9mentation satisfaisante. Penchons-nous donc un peu sur la technique, sans toutefois rentrer trop dans les d\u00e9tails. Durant mes recherches, j’ai pass\u00e9 de long moment \u00e0 lire le code source de la page HTML de YouTube, \u00e0 parcourir les scripts utilis\u00e9s, \u00e0 tenter de comprendre la m\u00e9thode de changement de th\u00e8me et \u00e0 essayer de d\u00e9clencher le changement par appel direct de la bonne fonction, ou en copiant le fonctionnement de celle-ci. Pas d’avanc\u00e9es concr\u00e8tes de ce c\u00f4t\u00e9-l\u00e0, m\u00eame apr\u00e8s avoir identifi\u00e9 les parties de code mise en \u0153uvre. <\/p>\n\n\n\n

Lors de mes recherches, j’avais en autre d\u00e9couvert que l’activation du th\u00e8me sombre conduisait \u00e0 l’ajout d’un param\u00e8tre dark=\u00a0\u00bbtrue\u00a0\u00bb sur la balise <html> de la page. J’avais reproduit cet ajout dans mes premiers tests d’extension, sans arriver \u00e0 un r\u00e9sultat satisfaisant. De m\u00e9moire, je crois me souvenir que quelques \u00e9l\u00e9ments n’\u00e9taient pas colorer correctement (d’autres \u00e9l\u00e9ments m’ont \u00e9galement conduit \u00e0 rejeter cette solution incompl\u00e8te, mais ne les ayant pas not\u00e9s, je ne suis plus en mesure de les pr\u00e9ciser).<\/p>\n\n\n\n

Bref, la solution vers laquelle j’avais d\u00e9cid\u00e9 de m’orienter consister simplement \u00e0 \u00e9crire du code Javascript qui effectuerai les clics sur les diff\u00e9rents \u00e9l\u00e9ments de l’interface \u00e0 ma place. Pas de grande difficult\u00e9 de ce c\u00f4t\u00e9 l\u00e0 et j’avais r\u00e9ussi \u00e0 obtenir une premi\u00e8re version fonctionnelle. Celle-ci fonctionnait assez bien, mais un probl\u00e8me subsistait. En g\u00e9n\u00e9ral, lors du premier affichage de la page, l’activation du th\u00e8me sombre \u00e9chouait, mais r\u00e9ussissait d\u00e8s le rechargement de celle-ci, ou d\u00e8s l’affichage d’une autre page. L’impl\u00e9mentation \u00e9tait insuffisante. J’ai donc chercher un moyen pour m’assurer de l’existence des \u00e9l\u00e9ments html du menu dans la page avant de permettre \u00e0 mon extension d’essayer de cliquer dessus.<\/p>\n\n\n\n

Apr\u00e8s plusieurs tentatives infructueuses en utilisant de la r\u00e9cursivit\u00e9 et une v\u00e9rification de l’\u00e9tat de la page via la propri\u00e9t\u00e9 document.readyState, je suis tomb\u00e9 par hasard sur un article pr\u00e9sentant les avantages de la fonction requestAnimationFrame. C’est muni de ces nouvelles informations que je suis enfin arriv\u00e9 \u00e0 une premi\u00e8re version stable de l’extension. D\u00e9sormais, celle-ci attend donc l’apparition des \u00e9l\u00e9ments de menu avant de tenter de cliquer sur les \u00e9l\u00e9ments pour tenter de passer au th\u00e8me sombre. J’utilise l’attribut dark \u00e9voqu\u00e9 tout \u00e0 l’heure pour savoir s’il faut d\u00e9clencher le changement de th\u00e8me ou non. De plus, j’ai int\u00e9gr\u00e9 un m\u00e9canisme de s\u00e9curit\u00e9 afin de limiter la dur\u00e9e pendant laquelle l’extension tentera d’activer le th\u00e8me. La limite est donc actuellement configur\u00e9e \u00e0 10s, ce qui semble largement suffisant sur les quelques ordinateurs o\u00f9 j’ai test\u00e9 l’extension.<\/p>\n\n\n\n

C\u00f4t\u00e9 am\u00e9lioration, il pourrait \u00e9ventuellement \u00eatre int\u00e9ressant de pouvoir configurer le temps d’attente, pour pouvoir facilement l’augmenter au besoin. Je pense notamment \u00e0 une utilisation sur des machines un peu \u00ab\u00a0lentes\u00a0\u00bb dans le chargement des pages web modernes. L’extension n’ayant pas de logo, il pourrait \u00eatre utile d’en cr\u00e9er un un pour l’identifier plus facilement parmi les extensions install\u00e9es. Je ne me suis pas pencher sur la question de l’impl\u00e9mentation de logs de d\u00e9bugage, 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\u00e9rifi\u00e9e sur 3 instances diff\u00e9rentes), l’activation du th\u00e8me sombre \u00e9choue chez l’un de mes coll\u00e8gues de travail.<\/p>\n\n\n\n

Passons maintenant au(x) mots de la fin pour clore cette pr\u00e9sentation. Je suis tr\u00e8s satisfait du fonctionnement de cette petite application, qui me rend d\u00e9sormais service au quotidien. C’\u00e9tait un bon sujet pour d\u00e9couvrir comment r\u00e9aliser une extension pour Firefox, la tester, et demander son int\u00e9gration au catalogue d’extensions. Le code source est bien entendu disponible sur Github<\/a>, sous licence GPLv3. J’esp\u00e8re que cette extension pourra rendre service \u00e0 ceux qui y trouveront un int\u00e9r\u00eat, et surtout, qu’elle fonctionnera chez ceux qui tenteront l’installation; et permettront de v\u00e9rifier 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.<\/p>\n","protected":false},"excerpt":{"rendered":"

Aujourd’hui, petit article d’auto-promotion, pour mettre en avant une extension pour Firefox \u00e0 la fonction extr\u00eamement limit\u00e9e, que j’ai d\u00e9velopp\u00e9e pour m’\u00e9pargner trois clics. J’ai nomm\u00e9 \u00ab\u00a0Th\u00e8me Sombre Automatique pour YouTube\u2122\u00ab\u00a0, nom de code : yt-auto-dark. La fonction de l’extension est simple: activer le mode sombre propos\u00e9 par Youtube, sans que j’ai \u00e0 intervenir. L’option … Continuer la lecture de « [Extension Firefox] yt-auto-dark »<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[126,506,507],"tags":[454,116,455,210,452],"class_list":["post-3790","post","type-post","status-publish","format-standard","hentry","category-logiciellibre","category-projets-2","category-yt-auto-dark","tag-extension","tag-firefox","tag-theme-sombre","tag-youtube","tag-yt-auto-dark"],"_links":{"self":[{"href":"https:\/\/www.unicoda.com\/index.php?rest_route=\/wp\/v2\/posts\/3790","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.unicoda.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.unicoda.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.unicoda.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.unicoda.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3790"}],"version-history":[{"count":6,"href":"https:\/\/www.unicoda.com\/index.php?rest_route=\/wp\/v2\/posts\/3790\/revisions"}],"predecessor-version":[{"id":3872,"href":"https:\/\/www.unicoda.com\/index.php?rest_route=\/wp\/v2\/posts\/3790\/revisions\/3872"}],"wp:attachment":[{"href":"https:\/\/www.unicoda.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3790"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.unicoda.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3790"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.unicoda.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3790"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}