Расширение Chrome: ожидание загрузки элемента (async js)

Question

У меня есть расширение Chrome, и я хочу подождать, пока элемент будет загружен, прежде чем вводить содержимое на страницу.

Я пытаюсь придать кнопку:

myButton = document.createElement('button'); 
myButton.class = 'mybutton'; 
document.querySelector('.element_id').appendChild(myButton) 

У меня есть это в верхней части моего скрипта содержания. Он работал нормально, но потом он переставал работать. Ошибка, которая была показана была:

Uncaught TypeError: Cannot read property 'appendChild' of null

Для того, чтобы ждать, пока элемент с идентификатором класса .element_id для загрузки, я попытался использовать MutationObserver

var observer = new MutationObserver(function(mutations) { 
    mutations.forEach(function(mutation) { 
     if (!mutation.addedNodes) return 

     for (var i = 0; i < mutation.addedNodes.length; i++) { 
      if (mutation.addedNodes[i].parentNode == document.querySelector('#outer-container')) { 

       myButton = document.createElement('button'); 
       myButton.class = 'mybutton'; 
       document.querySelector('.element_id').appendChild(myButton) 
     } 
      var node = mutation.addedNodes[i] 
     } 
    }) 
}) 

observer.observe(document.body, { 
    childList: true 
    , subtree: true 
    , attributes: false 
    , characterData: false 
}) 

Когда я мутацию наблюдатель, на странице будет загружен внешний элемент div, называемый outer-container, и мне не удалось напрямую сравнить класс .element_id. Класс .element_id содержит множество слоев во внешнем div.

ОДНАКО, вышеуказанное не помогло, и я все еще получил ошибку свойства null.

Есть ли лучший способ подождать, когда какой-либо элемент будет загружен (который загружается async), перед инъекцией?

Answer 1

Не забывайте добавлять childList и subtree Недвижимость при наблюдении за изменениями.

var observer = new MutationObserver(function (mutations) { 
    mutations.forEach(function (mutation) { 
     if (!mutation.addedNodes) { 
      return; 
     } 
     for (var i = 0; i < mutation.addedNodes.length; i++) { 
      if (mutation.addedNodes[i].classList.contains("element_id")) { 
       // Your logic here 
      } 
     } 
    }); 
}); 

observer.observe(document.body, { 
    childList: true, 
    subtree: true 
}); 

Answer 2

Вставка в DOM может иметь элемент, заданный глубже в добавленном узле.

Например, это может быть вставлен в DOM:

<div class="container"> 
    <div class="element_id">...</div> 
    ... 
</div> 

В этом случае список добавлен узел будет содержать только .container узел.

Мутация не будет перечислять все, что было добавлено, это ваша ответственность за рекурсивные вычисления в добавленный фрагмент, просматривающий добавленные узлы.

Использование mutation-summary library может помочь вам избежать таких головных болей.

var observer = new MutationSummary({ 
    rootNode: document.body, 
    callback: function(summaries) { 
    summaries.forEach(function(summary) { 
     summary.added.forEach(function(idElement) { 
     /* ... */ 
     idElement.appendChild(myButton); 
     }); 
    }); 
    }, 
    queries: [{element: ".element_id"}] 
}); 

Если вы не хотите использовать библиотеку, вы можете попробовать позвонить querySelector или querySelectorAll на addedNodes[i].