Chrome Extension Content Script - захват заголовков видео на YouTube с использованием JavaScript

Question

У меня есть простой контент-скрипт для моего расширения Chrome, который должен захватывать заголовки видео YouTube. Моя проблема в том, что это сработало только один раз. Я попытался получить доступ к дочерним узлам HTMLCollection, который должен быть только один, но я получаю ноль неопределенных. Делать что-то вроде:

element[0].innerText;

не дает мне ничего полезного, но из моего понимания, если я использую getElementsByClassName и применяю innerText к первому элементу с [0], это будет работать. Это может быть связано с неполной загрузкой html, поскольку иногда я получаю значение NULL, но HTMLCollection всегда имеет свойство, к которому я хочу получить доступ, просто сидя там.

Также:

element.length 

возвращает 0.

Это то, что я обычно получаю со своим сценарием.

Внутри есть свойство "innerText", которое я хочу получить.

И это то, что я получил один раз, когда это сработало.

{
    "manifest_version": 2,
    "name": "test",
    "author": "Muhammad Amer",
    "description": "test",
    "version": "1.0",

    "content_scripts": [
    {
    "matches": [
      "https://www.youtube.com/*"
    ],

    "js": ["jquery-3.3.1.js", "content.js"]
    }
],

"permissions": [
    "https://www.youtube.com/*",
    "tabs",
    "activeTab", 
    "webNavigation"
    ]

}

    var element = document.getElementsByClassName("title style-scope ytd-video- 
    primary-info-renderer");
console.log(element);

    for (var i = 0; i < element.length; i++) {
    var songTitle = element[i].innerText;
    console.log(songTitle);
    }

Answer 1

С помощью следующего поста я нашел решение: 'наблюдаем' в 'MutationObserver': параметр 1 не относится к типу 'Узел'

Первая проблема заключалась в том, что мой код выполнялся слишком рано, поэтому функция setTimeout() решила это. Следующая проблема, о которой я не знал, пока не будет упомянута; YouTube загружает свои страницы динамически, поэтому скрипт контента запускается только в том случае, если страница обновляется, что может никогда не произойти. Так что mutationObserver() работал над решением этой проблемы, как предложено в комментариях. Одна особенность заключалась в том, что мне пришлось наблюдать за дочерним списком и поддеревом для мутаций, а не символьных данных, хотя именно эти данные изменились. Из того, что я прочитал, старый узел удаляется, а новый затем вставляется.

Вот код:

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
        if (mutation.addedNodes.length) {
            if (mutation.type == 'childList') {
                console.log(mutation.target.innerText);
            }
        }
        })
    })

function checkNode() {
        var targetNode = document.querySelector("h1.title.style-scope.ytd-video-primary-info-renderer");
        if (!targetNode) {
            window.setTimeout(checkNode, 500);
            return;
        }
        console.log(targetNode.innerText);
        var config = {
            childList: true,
            subtree:true
        }
        observer.observe(targetNode, config)
    }
checkNode();