web-dev-qa-db-fra.com

Script Tampermonkey exécuté avant le chargement de la page

J'ai besoin de cacher une section d'une page html:

<h1 data-ng-show="!menuPinned &amp;&amp; !isSaaS" class="logo floatLeft" aria-hidden="false"><span>XXX&nbsp;</span><span style="font-weight: bold;">XXX&nbsp;</span><span>XXXXX</span></h1>

Le code suivant fonctionne correctement dans Chrome dev. Tools

var ibmlogo = document.querySelectorAll('h1.logo.floatLeft');
ibmlogo[1].remove();

Mais lorsque je charge la page avec le script actif, la section (h1) ne disparaîtra pas. Je crois que c'est parce que lorsque le script s'exécute, le DOM n'est pas encore terminé chargé, donc le script ne trouve pas le sélecteur.

J'ai essayé beaucoup de choses différentes (par exemple window.onLoad) mais mon script n'est toujours pas efficace. La dernière tentative (échoué) est la suivante:

var logo = document.querySelectorAll('h1.logo.floatLeft');
logo.onload = function() {removeLogo()};

function removeLogo(){
    console.log("### logo array lenght: " + logo.length);
    logo[1].remove();
};
javascripthtmltampermonkey
12
Giovanni Vigorelli

Obligatoire:

  • @ run-at: document-start dans le metablock de script utilisateur.

    // ==UserScript==
..............
// @run-at        document-start
..............
// ==/UserScript==

Maintenant avec ce qui précède, vos options sont:

  1. Injectez simplement un style qui cache le logo:

    (document.head || document.documentElement).insertAdjacentHTML('beforeend',
    '<style>h1.logo.floatLeft { display: none!important; }</style>');

  2. Utilisez MutationObserver pour détecter et supprimer l'élément immédiatement après son ajout dans DOM.

    new MutationObserver(function(mutations) {
    // check at least two H1 exist using the extremely fast getElementsByTagName
    // which is faster than enumerating all the added nodes in mutations
    if (document.getElementsByTagName('h1')[1]) {
        var ibmlogo = document.querySelectorAll('h1.logo.floatLeft')[1];
        if (ibmlogo) {
            ibmlogo.remove();
            this.disconnect(); // disconnect the observer
        }
    }
}).observe(document, {childList: true, subtree: true});
// the above observes added/removed nodes on all descendants recursively
26
wOxxOm