Vous est-il déjà arrivé de visiter un site et de penser: «Pourquoi ce bouton n’est-il pas là où il devrait être?», «Qui a choisi ce fond vert toxique?», «Où est le thème sombre, les développeurs?!» Et puis vous avez ouvert les DevTools et commencé à modifier le CSS directement dans l’inspecteur, juste pour voir à quoi cela pourrait ressembler.

Je le fais constamment. Au fil des années passées à travailler avec des sites web, je me suis constitué un arsenal de cinq outils qui me permettent de remodeler presque n’importe quel site à ma guise. Il ne s’agit pas de piratage, les modifications ne sont visibles que par vous, sur votre machine. En substance, c’est du modding, comme dans les jeux vidéo: vous changez un modèle, repeignez l’interface, supprimez les éléments gênants. Le site reste le même pour tout le monde, mais pour vous, il devient exactement ce que vous voulez voir.

💡 Aperçu rapide:

• Installez Stylish et choisissez un thème prêt à l’emploi sur Userstyles.org, le site changera avant même son chargement
• Maîtrisez l’outil «Bloquer un élément» dans uBlock Origin, supprimez tout élément gênant d’un site en deux clics
• Ajoutez un script utilisateur via Tampermonkey, automatisez des actions sur vos plateformes préférées
• Ouvrez les DevTools (F12) et modifiez le site comme un texte, toutes les modifications disparaissent après rechargement
• Configurez Burp Suite comme proxy HTTP, interceptez et remplacez les données à la volée

1. Stylish, changement instantané de l’apparence d’un site

Stylish, mon extension de navigateur cosmétique préférée. Elle applique des styles personnalisés à une page avant son rendu. Pas de flash du design original comme cela arrive avec les scripts utilisateur: vous ouvrez YouTube et voyez immédiatement votre Hello Kitty rose, pas le thème blanc et rouge standard.

L’extension a plus de dix ans, elle appartient actuellement à Similarweb et compte 2 millions d’utilisateurs. La bibliothèque Userstyles.org contient plus d’un demi-million de thèmes prêts à l’emploi, des modes sombres pour Google Docs au rétro-wave pour YouTube.

Pourquoi Stylish est-il fondamentalement meilleur que les modifications manuelles dans les DevTools? Parce que les styles sont persistants: vous fermez le navigateur, vous l’ouvrez le lendemain, le thème est toujours là. De plus, il est pratique de basculer entre les thèmes en un clic si un site en propose plusieurs.

Ce que vous pouvez faire:

• Activer le thème sombre sur n’importe quel site qui n’en propose pas
• Restaurer l’ancien design d’un site après une refonte (oui, quelqu’un a probablement déjà écrit un tel style)
• Augmenter la taille de la police ou le contraste pour une meilleure lisibilité
• Masquer les éléments distrayants comme les en-têtes fixes ou les pop-ups d’abonnement

Créer votre propre style nécessite du CSS. La syntaxe de base est simple: sélecteur, propriété, valeur. Pour les styles complexes, je recommande une alternative, Stylus, un gestionnaire de styles open source sans télémétrie.

2. UBlock Origin, blocage chirurgical d’éléments

uBlock Origin, c’est avant tout un bloqueur de publicité, mais sa fonction «Bloquer un élément» mérite une place à part dans cette liste. Elle vous permet de supprimer n’importe quoi d’un site: une bannière gênante, un avatar d’utilisateur qui vous irrite, un compteur «plus que 3 places en vente», un widget météo qui prend la moitié de la page.

Chaque fois que je vois Internet sans bloqueur, par exemple sur l’ordinateur de quelqu’un d’autre, je n’arrive pas à croire à quel point il y a du bazar. Est-ce que les gens regardent vraiment YouTube avec cinq coupures publicitaires dans une vidéo de dix minutes?

Comment fonctionne «Bloquer un élément»: clic droit sur un élément → «Bloquer un élément» → uBlock met en surbrillance la cible et suggère un sélecteur CSS. Vous pouvez remonter dans l’arborescence DOM et élargir les critères, par exemple, bloquer non pas une bannière spécifique mais tout le conteneur avec l’iframe publicitaire. Le filtre est sauvegardé de manière permanente.

Technique avancée, l’onglet «Mes filtres» dans les paramètres. Vous pouvez y saisir des filtres d’URL avec des caractères génériques pour interdire le chargement de catégories entières de ressources. J’ai utilisé cela pour désactiver des fichiers JS problématiques provenant de plugins et de thèmes WordPress lors de la recherche de conflits de compatibilité sur des sites clients.

3. Tampermonkey, des scripts pour toutes les occasions

Tampermonkey, l’outil le plus puissant de cette liste. C’est un gestionnaire de scripts utilisateur avec 12 millions d’installations qui vous permet d’exécuter votre propre JavaScript sur n’importe quel site. Si Stylish modifie l’apparence et uBlock supprime le superflu, Tampermonkey, lui, ajoute de nouveaux comportements.

Mon scénario numéro un: la guerre contre les pop-ups anti-adblock. Vous connaissez le mécanisme: vous visitez un site, le bloqueur supprime les publicités, le site le détecte et affiche une bannière «Veuillez désactiver votre bloqueur». uBlock y parvient parfois, mais si le site utilise des classes et des identifiants aléatoires (pour passer au travers des filtres), Tampermonkey entre en jeu. J’écris un script qui cherche un élément contenant un texte ou une image spécifique et supprime tout le conteneur parent. C’est rustique, mais ça fonctionne.

Des scénarios plus pacifiques:

• Ajouter un bouton «Tout télécharger» sur une page de fichiers
• Remplir automatiquement des formulaires avec des données standard
• Activer la qualité HD sur YouTube par défaut (même s’il existe aujourd’hui des extensions dédiées pour cela)
• Étendre les fonctionnalités d’administration d’un site en ajoutant des raccourcis clavier ou un panneau d’actions rapides

Vous trouverez des scripts prêts à l’emploi sur Greasy Fork et OpenUserJS. Il y a des milliers de scripts pour toutes les occasions, du téléchargement de vidéos à l’amélioration de l’interface de GitHub. Pour les opérations sensibles (mots de passe, paiements), je recommande de désactiver Tampermonkey ou d’ajouter les sites concernés à la liste noire dans les paramètres de l’extension.

4. Outils de développement, un terrain de jeu pour expérimenter

Je passe plus de temps dans les Chrome DevTools que dans n’importe quel IDE. Quand je développe des plugins pour WordPress, c’est en grande partie par essais et erreurs: j’imagine → je corrige dans l’inspecteur → ça me plaît → je code. Sans les DevTools, je serais bien plus lent.

Pour les non-développeurs, les outils de développement sont un bac à sable où vous pouvez modifier temporairement un site et voir le résultat instantanément. Ouvrez les DevTools (F12), allez dans l’onglet Éléments, sélectionnez Inspecter (la flèche dans le coin du panneau) et cliquez sur n’importe quelle partie de la page. Modifiez le texte, changez les couleurs, déplacez des blocs, supprimez des éléments. Après un rechargement de la page, tout revient à la normale.

Le scénario non-programmeur le plus courant: préparer une capture d’écran ou une version imprimable. Avant de capturer, supprimez tout ce qui est superflu sur la page: blocs publicitaires, pop-ups, widgets de chat, colonnes supplémentaires. Exportez avec le bouton Imprimer l’écran, vous obtiendrez une image propre et concise, comme si le site avait été conçu ainsi dès le départ.

Dans l’onglet Réseau, il y a une autre fonctionnalité intéressante: faites un clic droit sur n’importe quelle requête → «Bloquer l’URL de la requête» ou «Bloquer le domaine de la requête». Je m’en sers quand j’ai besoin de vérifier comment un site fonctionne sans un script ou une police spécifique, par exemple pour localiser l’origine d’un conflit sur un projet client.

5. Burp Suite Community Edition, interception du trafic

La plus radicale des cinq méthodes. Burp Suite, c’est un proxy HTTP interactif: il se place entre votre navigateur et le serveur et peut intercepter, arrêter et modifier n’importe quelle requête ou réponse. La Community Edition, la version gratuite de PortSwigger, est largement suffisante pour «modder» un site.

Pourquoi est-ce utile? Il y a des situations où ni le CSS ni le JavaScript côté client ne peuvent donner le résultat souhaité parce que les données arrivent du serveur déjà dans la «mauvaise» forme. Burp intercepte la réponse du serveur avant que le navigateur ne la traite et vous permet de substituer du JSON, du HTML ou des en-têtes à la volée. Le site s’affiche comme si le serveur avait envoyé exactement ce que vous avez substitué.

Cas concret: sur un projet, l’API renvoyait une liste de produits avec le champ "available": false pour les références qui n’étaient pas en stock. J’avais besoin de vérifier la mise en page de la fiche produit pour différents états. Au lieu d’intervenir en base de données ou de demander au développeur backend de générer des données de test, j’ai intercepté la réponse dans Burp, changé quelques false en true, et j’ai vu en une seconde la mise en page du produit «disponible».

Le plus délicat dans Burp, c’est la configuration initiale. Vous devez renseigner l’adresse du proxy (localhost:8080) dans les paramètres du navigateur et installer le certificat SSL de Burp pour pouvoir travailler avec les sites en HTTPS. Sans le certificat, le navigateur vous avertira d’une «connexion non sécurisée». Dans la documentation officielle de PortSwigger, cette procédure est décrite étape par étape.

⁉️🤔 Foire aux questions

Est-ce légal de modifier des sites de cette manière?

Oui, car les modifications s’appliquent exclusivement sur votre appareil. Vous ne piratez pas le serveur, ne volez pas de données, ne contournez pas un paywall. C’est l’équivalent de changer le papier peint dans un appartement: les murs restent les mêmes, l’apparence change. Seule exception: les scripts automatisés qui génèrent une charge excessive sur le serveur (par exemple, du parsing en boucle sans délai). Restez raisonnable.

Quel outil choisir si je ne suis pas du tout développeur?

Commencez par Stylish: installez l’extension, allez sur Userstyles.org, choisissez un thème, et c’est fait. Pour bloquer les éléments gênants, uBlock Origin avec la fonction «Block Element» ne nécessite aucun code. Tampermonkey et Burp Suite s’adressent à ceux qui sont prêts à écrire ou au moins à lire du code.

Peut-on casser un site avec ce genre de modifications?

Pour vous-même, oui, c’est possible. Une partie de la page peut cesser de fonctionner si vous avez supprimé le mauvais élément ou masqué un bouton important avec votre style. Mais cela se corrige en désactivant l’extension ou en réinitialisant les filtres. Pour les autres utilisateurs, le site reste inchangé: vos modifications sont locales.

Que faire si un site détecte Tampermonkey et bloque le contenu?

Certains sites vérifient la présence d’extensions via JavaScript. Essayez un gestionnaire alternatif, Violentmonkey, qui est moins connu et moins souvent détecté. Vous pouvez aussi exécuter le script via un snippet dans les DevTools (onglet Sources → Snippets): c’est une fonction intégrée de Chrome que le site ne peut pas tracer.

Y a-t-il un risque que l’extension elle-même m’espionne?

La question est légitime. Stylish appartenait à un autre propriétaire jusqu’en 2017 et collectait effectivement des données. Aujourd’hui, l’extension est détenue par Similarweb, qui publie une politique de confidentialité: la collecte est anonymisée et peut être désactivée dans les paramètres. Si vous voulez un outil totalement ouvert sans télémétrie, installez Stylus (alternative open source). Même logique pour les scripts: Tampermonkey collecte des statistiques anonymes (version, langue, OS), désactivables dans les paramètres via la case «Statistiques anonymes».

Comment ces outils fonctionnent-ils sur mobile?

Sur Android, dans Firefox, vous pouvez installer uBlock Origin et Tampermonkey en tant que modules complémentaires: c’est une méthode légitime. Sur iOS, la situation est moins favorable: Apple limite les extensions. Une alternative partielle: le navigateur Orion, qui prend en charge les extensions Chrome et Firefox sur iOS. Stylish sur mobile fonctionne via une application dédiée.

Est-ce que cela vaut la peine d’adapter les sites à vos besoins?

Si vous avez lu jusqu’ici, la réponse est probablement «oui». Le web n’est pas un produit fini, c’est une matière première. Quelqu’un a conçu l’interface pour un utilisateur moyen, et vous n’êtes pas un utilisateur moyen. Vous avez vos propres habitudes, vos propres goûts, vos propres sources d’agacement.

Mon top personnel selon le rapport effort / résultat: commencez par uBlock Origin (5 minutes sur «Block Element», et le site est déjà propre), ajoutez Stylish pour vos plateformes préférées (10 minutes de plus, et vous obtenez un thème sombre là où il n’y en a jamais eu), et quand vous voudrez automatiser, ouvrez Greasy Fork et cherchez un script existant pour votre besoin. DevTools et Burp, c’est pour les cas où les trois premiers outils ne suffisent pas.

Vous pouvez commencer en cinq minutes avec une seule extension, et en un mois vous ne reconnaîtrez plus votre navigateur, après avoir constitué une collection de thèmes, de scripts et de filtres pour deux douzaines de sites. C’est un loisir avec un seuil d’entrée bas et un plafond infini. Un peu comme la personnalisation du bureau Windows dans les années 2000, mais à l’échelle de tout l’internet.