проверить, существует ли элемент в dom при смене страницы

Question

Я создаю простое расширение Chrome. Я хочу применить некоторые правила стиля, когда определенный элемент присутствует в DOM. После проверки сайта, на котором я хочу применить эту модификацию, я обнаружил, что интересующий элемент создается только на определенных страницах и нигде не присутствует на сайте. Как я могу применить эти правила, используя jquery? Вот код, который я тестирую, но безуспешно:

(function($){

  $(document).ready(function(){
    var el = $('.e-overlay--adblock');
      if(el.length){
        el.css({'opacity':'0'});
        console.log('Extension Started!');
      }

  });

}(jQuery));

Я также пробовал использовать это решение, но безуспешно:

Я думаю, что проблема также в классе элемента, который .e-overlay .e-overlay__modal .e-overlay--full .e-overlay--adblock

  $(document).ready(function(){

    var el = $('.e-overlay')[0];

    // Create an observer instance linked to the callback function
    var observer = new MutationObserver(function(){
       el.css({'opacity':'0'});
       console.log('Extension Started!');
    });

    // Start observing the target node for configured mutations
    observer.observe(el, config);

    // Later, you can stop observing
    observer.disconnect();

  });

наблюдатель мутации выдаст мне эту ошибку:

Uncaught TypeError: Не удалось выполнить «наблюдение» над «MutationObserver»: параметр 1 не относится к типу «Узел».

Answer 1

(function(win) {
    'use strict';

    var listeners = [], 
    doc = win.document, 
    MutationObserver = win.MutationObserver || win.WebKitMutationObserver,
    observer;

    function ready(selector, fn) {
        // Store the selector and callback to be monitored
        listeners.push({
            selector: selector,
            fn: fn
        });
        if (!observer) {
            // Watch for changes in the document
            observer = new MutationObserver(check);
            observer.observe(doc.documentElement, {
                childList: true,
                subtree: true
            });
        }
        // Check if the element is currently in the DOM
        check();
    }

    function check() {
        // Check the DOM for elements matching a stored selector
        for (var i = 0, len = listeners.length, listener, elements; i < len; i++) {
            listener = listeners[i];
            // Query for elements matching the specified selector
            elements = doc.querySelectorAll(listener.selector);
            for (var j = 0, jLen = elements.length, element; j < jLen; j++) {
                element = elements[j];
                // Make sure the callback isn't invoked with the 
                // same element more than once
                if (!element.ready) {
                    element.ready = true;
                    // Invoke the callback with the element
                    listener.fn.call(element, element);
                }
            }
        }
    }

    // Expose `ready`
    win.ready = ready;

})(this);

И использование:

ready('.e-overlay--adblock', function(element) {
    // do something
});

Answer 2

Я нашел грязное решение проблемы. После некоторой отладки и различных тестов альтернатив кода я попытался просто установить свойство display на none. Это сработало, но мне не нравится это решение.

(function($){
  $(document).ready(function(){
    var el = $('.e-overlay--full');
      if(el.length){
        console.log('Extension Started!');
        setTimeout(function(){
          el.css({'display':'none'});
        }, 1000);
      }
  });
}(jQuery));

Чтобы быть уверенным, что модальное изображение не будет отображаться, я также ввел правило css для удаления непрозрачности:

.e-overlay--full{
  opacity: 0 !important;
}