Tampermonkey скрипт запускается до загрузки страницы

Question

мне нужно, чтобы скрыть раздел из 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> 

Следующий код прекрасно работает в Chrome Dev. инструменты

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

Но когда я загружаю страницу с активным скриптом, раздел (h1) не исчезнет. Я считаю, что это происходит потому, что, когда сценарий запускается, DOM еще не завершен, поэтому скрипт не находит селектор.

Я пробовал много разных вещей (например, window.onLoad), но мой сценарий не эффективен. Последняя попытка (неудача) заключается в следующем:

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

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

Любой совет? Спасибо, Джованни

Answer 1

Обязательно:

• @run-at: document-start в userscript metablock.

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

Теперь с выше варианты:

1. Просто впрыснуть стиль, который скрывает логотип:

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

2. Использование MutationObserver для обнаружения и удаления элемента сразу после его добавления в DOM.

   • Modify elements immediately (not after page completely loads)?
   • How to change the HTML content as it's loading on the page ("редкие элементы" код)
   • Performance of MutationObserver to detect nodes in entire 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