URL: https://linuxfr.org/users/bagage/journaux/adapter-les-sites-web-a-votre-guise-avec-violentmonkey Title: Adapter les sites web à votre guise avec ViolentMonkey Authors: bagage Date: 2021年02月05日T17:29:38+01:00 License: CC By-SA Tags: greasemonkey, violentmonkey, userscript et firefox Score: 33 Lorsqu’on navigue sur la toile, certains sites/applications ne fonctionnent pas toujours comme on le souhaiterait. Pour ma part, l’application en question est [Redmine](https://www.redmine.org). # Problématique Redmine est un gestionnaire de projet. En tant que développeur, j’ai l’occasion de l’utiliser pour le suivi des tickets de bogues / évolutions. Un ticket se compose d’un titre, une description. Des commentaires peuvent aussi être postés par divers utilisateurs. J’aime connaître l’état d’un ticket (ce qui a été fait, ce qu’il reste à faire), ce qui devient de plus en plus difficile au fil des commentaires : ![Exemple de ticket Redmine](https://i.ibb.co/smLt1C1/example.jpg) Certaines choses ne m’intéressent pas particulièrement : - Les *meta* commentaires «La priorité a été changé de Basse à Moyenne» ou «La description a été mise à jour» ; - Certains commentaires déjà traités («Voici la pièce jointe que j’ai oublié») ou inutiles («+1»). Redmine ne propose pas de masquer ces commentaires donc plusieurs solutions s’offrent à nous : - 1. c'est la vie, on peut s'en passer après tout ! - 2. faire évoluer Redmine en proposant une amélioration directement ; - 3. modifier le code de Redmine à la volée. J'écarte la 1re solution sinon il n'y aurait pas de journal ;-). La 2nde solution permettrait au plus grand nombre de bénéficier de l’amélioration, mais : - elle est plus complexe à mettre en œuvre (comprendre comment contribuer le projet, etc.) - il faut convaincre les auteurs de l’utilité du changement, ce qui n’est pas forcément évident voir tout bonnement impossible (par exemple pour un site grand public). Je présente donc ici la 3ème solution. # Une extension pour personnaliser le comportement des sites Vous connaissez peut-être le greffon [Stylus](https://add0n.com/stylus.html), qui permet de modifier l’affichage des sites web via l’injection de code CSS. Cette extension permet donc de simplifier (masquer des éléments) / comprimer (réduire les marges) un site web, ce qui est plutôt prometteur ! Pour le cas de Redmine, et pouvoir masquer *certains* commentaires, ce n’est pas possible via CSS uniquement : il faut aussi pouvoir injecter du JavaScript. # ViolentMonkey : maltraiter un site web pour votre bien Cette extension (disponible pour [Firefox](https://addons.mozilla.org/en-US/firefox/addon/violentmonkey/), [Chrome](https://chrome.google.com/webstore/detail/violentmonkey/jinjaccalgkegednnccohejagnlnfdag), etc.) permet donc d’exécuter un script JavaScript utilisateur au lancement/chargement/... d’une page web. Pour notre exemple, le script pourra donc : - 1. masquer tous les *meta* commentaires du type «La description a été mise à jour» automatiquement ; - 2. rajouter une case à cocher pour chaque autre commentaire : lorsque cochée, le commentaire associé disparaîtra ; - 3. rajouter aussi un bouton permettant de réafficher tous les commentaires, *au cas où* ; - 4. persister les actions de l’utilisateur, pour conserver l’état au rechargement de la page. # Élaboration du script ## 1. Masquer les *meta* commentaires Avec l’inspecteur Web d’un navigateur, il est facile d’analyser ces commentaires et de remarquer l’existence d’une classe CSS `has-details` et l’absence de `has-notes`. Pour les masquer, il suffit donc de leur appliquer la propriété `style.display=’none’` : ```js document.querySelectorAll('div.journal.has-details:not(.has-notes)') .forEach(comment => comment.style.display == 'none'); ``` ## 2. Rajouter une case à cocher pour les commentaires des utilisateurs Il est possible de créer une case à cocher facilement en JavaScript et l’injecter dans le DOM courant via l’API associée: ```js const checkbox = document.createElement('input'); checkbox.setAttribute('type', 'checkbox'); if (ischecked) checkbox.setAttribute('checked', 1); parent.appendChild(checkbox); ``` ## 3. Ajout de boutons globaux L’ajout d’un bouton est similaire à l’ajout d’une case à cocher. J’en ai aussi profité pour ajouter un autre bouton permettant de masquer la liste des «Révisions», pour gagner encore en lisibilité. ## 4. Persistance des données La persistance est accessible très facilement via l’API `localStorage`. On peut ainsi stocker, à chaque clic utilisateur, la liste des cases cochées. ## Résultat Le script complet est [disponible sur GitLab](https://gitlab.com/-/snippets/2071961) pour un peu moins de 100 lignes, et est très probablement perfectible – mais ça fonctionne et permet d’y voir plus clair ! ![Visualisation du résultat après exécution script ViolentMonkey](https://i.ibb.co/SwdR8LC/gif.gif) Il existe une [multitude de scripts](https://greasyfork.org/fr/scripts/421253-redmine-hide-comments-dynamically) écrit par d’autres utilisateurs pour toutes sortes de sites et besoins ! Il vaut mieux être néanmoins prudent avant d’en installer et s’assurer préalablement de leur inoffensivité ;). # Conclusion ViolentMonkey est donc un greffon très puissant permettant de «facilement» adapter les sites web à vos besoins. Plutôt que de se battre contre un site mal conçu, c’est bien plus agréable de le corriger via l’élaboration/utilisation d’un script ViolentMonkey !

AltStyle によって変換されたページ (->オリジナル) /