Comment exécuter du JavaScript sur n'importe quelle page web — guide pour débutants
Parfois un site web est presque parfait — vous aimeriez juste qu'il fasse une chose de plus. La solution est souvent quelques lignes de JavaScript. Ce guide pour débutants vous montre comment exécuter du JavaScript sur n'importe quelle page web, d'un essai ponctuel rapide dans la console à une règle qui s'exécute automatiquement à chaque visite, avec des exemples réels en chemin.
Une rapide note de sécurité avant toute chose
Le JavaScript que vous exécutez sur une page a les mêmes pouvoirs que la page elle-même — il peut lire le contenu, cliquer sur des choses et envoyer des requêtes. La règle est donc simple et non négociable : n'exécutez que du code que vous comprenez. Ne collez jamais un script provenant d'un inconnu, d'un commentaire ou d'une vidéo « faites cette astuce » dans une console — c'est exactement ainsi que fonctionnent les arnaques de vol de compte. Chaque exemple ci-dessous est assez court pour être lu et compris entièrement.
Méthode 1 — la console des DevTools (ponctuel)
Chaque navigateur est livré avec une console JavaScript. Appuyez sur F12 et ouvrez l'onglet Console. Tapez une expression, appuyez sur Entrée, et elle s'exécute immédiatement sur la page actuelle :
// Count every link on the page
document.querySelectorAll('a').length
La console est parfaite pour les expérimentations et les vérifications rapides. Sa limite : rien ne persiste. Rechargez la page et votre code a disparu — vous devriez le recoller à chaque fois.
Méthode 2 — les bookmarklets (enregistrés, mais manuels)
Un bookmarklet est un favori de navigateur dont l'URL est du JavaScript au lieu d'une adresse. Cliquez sur le favori et le code s'exécute sur la page actuelle. Cela ressemble à ceci :
javascript:(function(){
document.body.style.fontFamily = 'Georgia, serif';
})();
Les bookmarklets sont réellement utiles et persistent entre les sessions. Mais ils ont de vraies limites :
- Ils ne s'exécutent que lorsque vous cliquez manuellement dessus — jamais automatiquement.
- Tout doit être entassé dans une seule URL, alors les scripts plus longs deviennent vite illisibles.
- Une Content Security Policy stricte sur certains sites peut les bloquer.
Méthode 3 — une règle persistante (automatique)
Pour que du JavaScript s'exécute automatiquement chaque fois que vous ouvrez une page correspondante, il vous faut une extension qui l'injecte pour vous. JustZix le fait avec des règles : un motif d'URL plus le code à exécuter. C'est gratuit, ça fonctionne sur Chrome (et Edge, Brave, Opera, Vivaldi), et ça ne nécessite aucun compte.
Pas à pas — une règle qui exécute votre JS
- Installez JustZix depuis la page de téléchargement.
- Ouvrez la page que vous voulez améliorer.
- Cliquez sur l'icône JustZix et choisissez Nouvelle règle.
- Définissez un motif d'URL, par ex.
https://example.com/*. - Ouvrez le panneau JS et collez votre script.
- Enregistrez. Le script s'exécute désormais à chaque chargement d'une page correspondante.
Pendant que vous construisez le script, le REPL JS Console dans l'onglet vous permet de tester des expressions sur la page en direct, et l'Output Console à six onglets affiche les logs, l'activité réseau et les événements DataLayer — vous n'avez donc pas besoin d'avoir les DevTools ouverts en même temps. Plus de détails sur la page des fonctionnalités.
Exemple 1 — nettoyer une page encombrée
Supprimer les éléments collants qui vous suivent en bas de la page :
// Remove sticky headers and floating widgets
document.querySelectorAll('*').forEach(el => {
const pos = getComputedStyle(el).position;
if (pos === 'fixed' || pos === 'sticky') {
el.style.position = 'static';
}
});
Exemple 2 — cliquer automatiquement sur un bouton
Certains sites cachent du contenu derrière un bouton « Afficher plus ». Cliquez dessus automatiquement pour vous :
// Click the first "Show more" button on load
const btn = [...document.querySelectorAll('button')]
.find(b => /show more|read more/i.test(b.textContent));
if (btn) btn.click();
Exemple 3 — attendre du contenu qui se charge tardivement
Les sites modernes ajoutent du contenu après le chargement initial. Un MutationObserver permet à votre code de réagir lorsque l'élément que vous voulez apparaît enfin :
// Run once the target element shows up
const observer = new MutationObserver(() => {
const target = document.querySelector('.comments-section');
if (target) {
target.scrollIntoView();
observer.disconnect();
}
});
observer.observe(document.body, { childList: true, subtree: true });
Ce motif fait la différence entre un script qui « fonctionne parfois » et un qui fonctionne de manière fiable — la plupart des bugs de timing dans les scripts de page viennent d'une exécution avant que l'élément n'existe.
Choisir la bonne méthode
| Méthode | Persiste ? | Automatique ? | Idéal pour |
|---|---|---|---|
| Console des DevTools | Non | Non | Expérimentations ponctuelles |
| Bookmarklet | Oui | Non (clic) | Actions manuelles occasionnelles |
| Règle JustZix | Oui | Oui | Changements voulus à chaque visite |
Déboguer quand quelque chose ne fonctionne pas
- Vérifiez le timing. Si l'élément n'est pas encore là, enveloppez votre code dans un
MutationObservercomme ci-dessus. - Lisez la console. Les erreurs pointent directement vers la ligne qui a échoué.
- Testez petit. Exécutez des morceaux dans le REPL avant d'enregistrer tout le script.
- Ciblez précisément. Un motif d'URL précis tient un script à l'écart des pages qu'il casserait.
À voir aussi
- Comment ajouter du CSS personnalisé à n'importe quel site web
- Les meilleures alternatives à Tampermonkey
Vous voulez que votre JavaScript s'exécute automatiquement, à chaque visite, sans le coller à chaque fois ? JustZix est gratuit — installez-le depuis la page de téléchargement et transformez votre extrait en règle.
Notez cet article
Aucune note — soyez le premier.