Comment créer et exécuter des scripts utilisateur personnalisés dans votre navigateur

Les scripts utilisateur personnalisés et les extensions de navigateur ont révolutionné la façon dont les développeurs interagissent avec les sites web. Que vous automatisiez des tâches répétitives, supprimiez des éléments gênants ou ajoutiez des fonctionnalités manquantes, les userscripts offrent un moyen puissant de modifier le web sans attendre que les propriétaires de sites implémentent des changements.

Comprendre les userscripts de navigateur et leurs gestionnaires

Les userscripts sont des fichiers JavaScript qui s’exécutent sur des pages web spécifiques pour modifier leur comportement ou leur apparence. Considérez-les comme des extensions de navigateur légères qui fonctionnent à la volée. Pour exécuter ces scripts, vous aurez besoin d’un gestionnaire de userscripts — une extension de navigateur qui gère l’exécution, le stockage et les permissions des scripts.

Choisir votre gestionnaire de userscripts

Tampermonkey domine avec plus de 10 millions d’utilisateurs sur Chrome, Firefox, Edge et Safari. Pour les défenseurs de l’open source, Violentmonkey offre des fonctionnalités similaires avec une transparence totale. Greasemonkey, le gestionnaire original, a pris du retard en raison de changements d’API qui ont rompu la compatibilité avec la plupart des scripts existants.

Pour les navigateurs Chromium, Tampermonkey tend à fonctionner de manière plus fiable. Les utilisateurs de Firefox préfèrent souvent Violentmonkey pour son empreinte plus légère et son orientation vers la confidentialité.

Écrire votre premier script utilisateur personnalisé

Chaque userscript commence par un bloc de métadonnées qui indique au gestionnaire quand et comment exécuter votre code :

// ==UserScript==
// @name         My Custom Script
// @match        https://example.com/*
// @grant        none
// @version      1.0
// ==/UserScript==

(function() {
  'use strict';
  // Your code here
})();

La directive @match est cruciale — elle détermine quelles pages déclenchent votre script. Utilisez @include pour des motifs génériques simples si vous avez besoin d’une correspondance plus large. La directive @grant contrôle l’accès aux API. Commencez avec none et ajoutez des permissions comme GM_setValue ou GM_xmlhttpRequest selon les besoins.

Stratégies de manipulation du DOM

Évitez les frameworks — le JavaScript pur est plus fiable et plus rapide pour les userscripts. Le défi principal est le timing : votre script peut s’exécuter avant que les éléments que vous souhaitez modifier n’existent.

// Wait for specific element
const waitForElement = (selector) => {
  return new Promise(resolve => {
    if (document.querySelector(selector)) {
      return resolve(document.querySelector(selector));
    }
    
    const observer = new MutationObserver(() => {
      if (document.querySelector(selector)) {
        observer.disconnect();
        resolve(document.querySelector(selector));
      }
    });
    
    observer.observe(document.body, {
      childList: true,
      subtree: true
    });
  });
};

// Usage
waitForElement('.target-class').then(element => {
  element.style.display = 'none';
});

MutationObserver est votre meilleur allié pour les sites dynamiques. Il surveille les changements du DOM et réagit en conséquence, résolvant la plupart des problèmes de timing qui affectent les userscripts de navigateur.

Tester avant le déploiement

Prototypez toujours d’abord dans la console du navigateur. Ouvrez les DevTools (F12), naviguez vers votre site cible et testez vos sélecteurs et votre logique directement :

// Test your selector
document.querySelectorAll('.ad-banner').forEach(el => el.remove());

// Verify element properties
console.log(document.querySelector('#main-content').innerHTML);

Une fois que cela fonctionne, enveloppez votre code dans le modèle de userscript et testez avec un simple console.log() pour vérifier que le script se charge. Cette approche en deux étapes détecte la plupart des problèmes avant qu’ils ne deviennent des cauchemars de débogage.

Pièges courants et solutions

Les conditions de concurrence tourmentent les débutants. Les éléments se chargent de manière asynchrone, donc votre script peut s’exécuter trop tôt. Utilisez MutationObserver ou l’événement DOMContentLoaded plutôt que des délais arbitraires.

Les restrictions cross-origin limitent ce que les scripts utilisateur personnalisés peuvent accéder. La permission @grant GM_xmlhttpRequest contourne CORS pour les appels API, mais utilisez-la avec parcimonie.

Les performances comptent. Des sélecteurs inefficaces ou une manipulation excessive du DOM peuvent ralentir les pages considérablement. Regroupez les mises à jour du DOM, utilisez des sélecteurs spécifiques plutôt que généraux, et déconnectez les observateurs une fois terminés.

Contraintes des navigateurs modernes

Manifest V3 dans les navigateurs Chromium n’a pas tué les userscripts, mais il a changé le paysage. Les gestionnaires de userscripts se sont adaptés en utilisant différentes API, maintenant la compatibilité. Cependant, certaines fonctionnalités avancées comme les requêtes XHR synchrones ont disparu définitivement.

Les navigateurs mobiles limitent sévèrement le support des extensions. Seuls Firefox sur Android et Kiwi Browser supportent Tampermonkey correctement. iOS reste un jardin clos — le modèle d’extension limité de Safari ne supporte pas les gestionnaires de userscripts traditionnels.

Conclusion

Les userscripts de navigateur comblent le fossé entre ce que les sites web offrent et ce dont les utilisateurs ont besoin. Commencez simplement — masquez un élément gênant ou ajoutez un raccourci clavier. Au fur et à mesure que vous vous familiarisez avec le flux de travail, attaquez-vous à une automatisation plus complexe. Le web devient infiniment plus flexible lorsque vous pouvez le réécrire à la demande.

FAQ

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.