получить элемент по классу для Chrome

Question

Я пытаюсь добавить этот код в расширение Chrome, чтобы предупредить меня о доступности чата.Он в div с именем класса shoutbox на данный момент не работает.

function Detection(){
    if(document.getElementsByClassName("shoutbox")!=null){
      alert('Chat is available.')
    }
}

Detection();

Обновлен код: страница загружается и диалоговое окно с предупреждением никогда не появляется.

function Detection(){
    if(document.getElementsByClassName("shoutbox").length > 0){
        alert('Chat is available.')
    }
}

window.onload = Detection;

Answer 1

== null не обнаружит пустой массив (без результатов). Вы могли бы написать

if(document.getElementsByClassName("shoutbox").length > 0){
  alert('Chat is available.')
}

Answer 2

Если окно чата отсутствует на странице с самого начала и добавлено позже (это легко проверить - просто посмотрите исходный код страницы), вы можете отслеживать событие DOMSubtreeModified, которое будет происходить всякий раз, когда вносятся какие-либо изменения в DOM страницы. :

document.addEventListener('DOMSubtreeModified', function(e) {
    if(document.getElementsByClassName("shoutbox").length > 0){
        alert('Chat is available.')
    }
});

Answer 3

document.getElementsByClassName("shoutbox") возвращает массив элементов и возвращает пустой массив, если ничего не находит. Чтобы узнать, существуют ли элементы, проверьте длину массива.

if(document.getElementsByClassName("shoutbox").length > 0){