Rendre permanentes les modifications d’Inspect Element avec Tampermonkey

Pourquoi utiliser Tampermonkey plutôt qu’Inspect Element seul

Inspect Element est idéal pour tester : modifier une règle CSS, éditer le DOM ou exécuter un petit JS dans la console. Mais ces changements sont éphémères : un simple rechargement les annule. Tampermonkey exécute du JavaScript à chaque chargement de pages ciblées, ce qui « fixe » vos modifications localement — pratique pour :

• ajouter un bouton manquant dans une interface ;
• corriger l’ergonomie (taille, couleur, lisibilité) ;
• injecter un style ou un script pour automatiser une tâche récurrente.

Important : les userscripts s’exécutent uniquement sur votre navigateur. Ils ne modifient pas le serveur ni la source publique d’un site.

Qu’est‑ce que Tampermonkey et comment l’installer

Tampermonkey est un gestionnaire de userscripts (scripts côté client) disponible pour les principaux navigateurs : Chrome, Microsoft Edge, Firefox, Safari et Opera. Il permet de créer, éditer, activer ou désactiver des scripts qui modifient les pages au chargement.

Étapes d’installation (générales) :

1. Ouvrez la page officielle de Tampermonkey (l’extension détecte la plupart des navigateurs).
2. Choisissez votre navigateur et cliquez sur le lien vers la boutique d’extensions.
3. Dans la page de la boutique, cliquez sur « Installer » ou « Ajouter ».
4. Suivez les instructions d’installation fournies par le navigateur.

Si votre navigateur n’apparaît pas, mais qu’il est basé sur Chromium, vous pouvez souvent installer l’extension depuis le Chrome Web Store.

À prendre en compte avant de modifier des éléments de site

• Lisez les conditions d’utilisation et la politique de scripts tiers du site. N’injectez pas de code sur des pages traitant des données sensibles (banque, santé) sans comprendre les risques.
• Ne transmettez pas de données personnelles à des services externes depuis un userscript.
• Évitez d’installer des userscripts non vérifiés provenant de sources inconnues — ils peuvent contenir du code malveillant.
• Les modifications restent locales : la fiabilité dépend de la stabilité du DOM et des éventuelles protections du site (CSP, scripts anti-injection).

Commencer avec Tampermonkey

Après l’installation, ouvrez l’icône Tampermonkey dans la barre d’extensions puis « Create a new script » ou « Créer un nouveau script ». La fenêtre d’édition affiche un en‑tête de métadonnées (metadata) qui ressemble à ceci :

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Exemple de userscript
// @author       Vous
// @match        http://example.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    // Votre code ici...
})();

Explications rapides :

• @name : nom humain du script.
• @namespace : identifiant du script (valeur arbitraire).
• @version : version du script.
• @match : définit les pages ciblées (voir plus bas les alternatives et les patterns).
• @grant : permissions spéciales (accès GM_*), ou none si aucun privilège n’est nécessaire.

Comprendre @match, @include et les patterns

• @match est recommandé pour cibler des URL précises (format strict). Exemple pour tous les sous-domaines : https://example.com/*
• @include est plus permissif et accepte des expressions régulières simplifiées.
• @exclude permet d’exclure des pages.

Conseil : commencez par des motifs larges pendant le développement, puis restreignez-les avant de partager le script.

Exemple complet : ajouter un bouton de partage WhatsApp

Objectif : insérer un bouton « Partager » dans le widget de partage en bas des articles, pour partager l’URL actuelle via WhatsApp.

1. Créez un nouveau script Tampermonkey et remplacez les métadonnées par celles adaptées au site cible (ex. @match https://votresite.example/*).

2. Code minimal pour créer et insérer un bouton :

// ==UserScript==
// @name         Bouton WhatsApp - partage
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Ajoute un bouton de partage WhatsApp au widget de partage
// @author       Vous
// @match        https://example.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Création du bouton
    const whatsappBtn = document.createElement('button');
    whatsappBtn.textContent = 'Partager';

    // Style de base (à adapter)
    whatsappBtn.style.backgroundColor = '#075E54';
    whatsappBtn.style.color = 'white';
    whatsappBtn.style.border = 'none';
    whatsappBtn.style.borderRadius = '5px';
    whatsappBtn.style.padding = '8px 12px';
    whatsappBtn.style.cursor = 'pointer';
    whatsappBtn.style.marginLeft = '8px';

    // Génère le lien WhatsApp
    function generateWALink() {
        const pageURL = encodeURIComponent(window.location.href);
        return `https://api.whatsapp.com/send?text=${pageURL}`;
    }

    // Ouverture du partage
    whatsappBtn.addEventListener('click', () => {
        const whatsappURL = generateWALink();
        window.open(whatsappURL, '_blank');
    });

    // Cherche le conteneur de partage
    function insertButton() {
        const sharingDiv = document.querySelector('div.sharing.bottom');
        if (sharingDiv && !sharingDiv.dataset.whatsappInjected) {
            sharingDiv.appendChild(whatsappBtn);
            sharingDiv.dataset.whatsappInjected = '1';
        }
    }

    // Essaie d'insérer immédiatement, et aussi si le DOM change (utile pour SPA)
    insertButton();

    // Support pour applications monopage (SPA) qui modifient le DOM dynamiquement
    const observer = new MutationObserver(() => insertButton());
    observer.observe(document.body, { childList: true, subtree: true });

})();

Remarques :

• Le code utilise MutationObserver pour gérer les sites qui chargent dynamiquement le contenu (Single Page Apps).
• Le dataset permet d’éviter d’insérer plusieurs fois le bouton.

Améliorations et variantes utiles

1. Ajouter l’icône WhatsApp (SVG inline ou ) :

const svg = `...svg content...`;
whatsappBtn.innerHTML = svg + 'Partager';

2. Utiliser l’API Web Share sur mobile (fallback vers api.whatsapp.com si indisponible) :

whatsappBtn.addEventListener('click', async () => {
    const url = window.location.href;
    if (navigator.share) {
        try {
            await navigator.share({ title: document.title, url });
        } catch (err) {
            // l'utilisateur a annulé ou erreur, fallback
            window.open(generateWALink(), '_blank');
        }
    } else {
        window.open(generateWALink(), '_blank');
    }
});

3. Placement précis : si le widget existant n’est pas directement sélectionnable, utilisez une fonction InsertAfter pour positionner le bouton après un élément connu :

function insertAfter(newNode, referenceNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

4. Style global via injection d’un CSS pour harmoniser l’apparence :

const style = document.createElement('style');
style.textContent = `.my-wa-btn{background:#075E54;color:#fff;padding:8px;border-radius:6px}`;
document.head.appendChild(style);
whatsappBtn.classList.add('my-wa-btn');

Cas où un userscript peut échouer (et solutions)

• Politique de sécurité de contenu (CSP) stricte : certains sites empêchent l’exécution d’injections inline ou l’accès à ressources externes. Solution : préférer l’injection DOM via createElement plutôt que l’évaluation de code inline, ou limiter le script aux pages où CSP le permet.
• Contenu chargé après coup (AJAX/SPA) : le script peut s’exécuter avant que le conteneur soit présent. Solution : utiliser MutationObserver ou temporiser avec setInterval (moins élégant).
• Pages dans des iframes ou content-security isolé : les scripts Tampermonkey peuvent ne pas s’exécuter dans des iframes cross-origin.
• Obfuscation et noms de classes instables : certains sites génèrent dynamiquement des classes. Solution : rechercher des éléments par structure (balises, attributs data-*, positions relatives) plutôt que par classes fragiles.

Sécurité, vie privée et bonnes pratiques

• Revue du code : lisez et comprenez tout userscript avant de l’installer.
• Permissions : limitez les @match à ce qui est nécessaire et n’utilisez pas de @grant inutile.
• Aucun envoi de données : évitez d’envoyer les URL ou données de page vers des services externes sans consentement.
• Versionning : incrémentez @version quand vous modifiez un script, pour garder une trace des changements.
• Sauvegarde : exportez vos scripts Tampermonkey régulièrement (option d’export/backup dans le tableau de bord).

Notes GDPR : si vous capturez ou transférez des données personnelles via un userscript, informez les personnes concernées et respectez les obligations locales en matière de traitement des données. En pratique, pour un usage personnel local, évitez toute collecte centralisée.

Mini‑méthodologie (SOP rapide)

1. Définir l’objectif (ex. ajouter un bouton, corriger un style).
2. Identifier le conteneur cible via Inspect Element.
3. Écrire un userscript minimal et l’installer localement.
4. Tester sur plusieurs pages et sur mobile si pertinent.
5. Gérer les cas dynamiques (MutationObserver).
6. Revoir la sécurité (pas d’envoi non désiré), documenter et sauvegarder.

Checklist rôle‑basée

Développeur :

• vérifier les sélecteurs robustes ;
• utiliser MutationObserver pour SPA ;
• éviter les variables globales ;
• documenter et versionner le script.

Power user :

• tester le script sur 5 pages différentes ;
• vérifier l’absence d’erreurs console ;
• exporter une sauvegarde du script.

Administrateur SI :

• évaluer les risques de sécurité avant déploiement sur postes gérés ;
• empêcher l’installation d’extensions non autorisées si la politique de l’entreprise l’exige.

Tests d’acceptation simples

• Le bouton apparaît dans le widget de partage sur la page article.
• Un second chargement ne crée pas de doublon.
• Le clic ouvre l’interface de partage WhatsApp (ou le Web Share sur mobile).
• Aucun message d’erreur dans la console après 30s d’utilisation (incluant navigation SPA).

Exemples alternatifs à Tampermonkey

• Bookmarklets : petits scripts stockés comme favoris, pratiques pour actions ponctuelles.
• Stylus / UserCSS : injection de styles uniquement (CSS), si votre besoin est purement visuel.
• Extensions dédiées : quand la fonctionnalité mérite un packaging complet (meilleure intégration, distribution contrôlée).
• Greasemonkey (pour Firefox) : alternative historique à Tampermonkey.

Glossaire (1‑ligne)

• Userscript : script JavaScript exécuté par un gestionnaire (Tampermonkey) côté client pour modifier une page.
• CSP (Content Security Policy) : règles côté serveur qui limitent les ressources qu’une page peut charger/exécuter.
• MutationObserver : API JS pour détecter les changements du DOM.
• @match : directive de métadonnées Tampermonkey définissant les pages ciblées.

Quand partager et quand s’abstenir

• Partagez un userscript public seulement si vous avez retiré les données sensibles et limité les @match.
• N’installez pas un script public si vous ne comprenez pas son code.

Résumé et prochaines étapes

Tampermonkey transforme des modifications temporaires d’Inspect Element en changements persistants sur votre poste. Pour un résultat robuste : ciblez précisément les pages, gérez les pages dynamiques, minimisez les permissions et testez. Si vous avez un cas d’usage précis (site, emplacement du bouton, comportement attendu), partagez-le et je peux fournir un userscript adapté, avec prise en charge SPA, mobile et internationalisation.

Important : n’installez que des scripts que vous comprenez ou issus de sources fiables. Tampermonkey est puissant, mais avec ce pouvoir vient la responsabilité de protéger vos données et votre sécurité.