Content.js not working in extension but working in chrome console

I am building an extension that gets the total time for a youtube playlist. It can get the video element of the playlist but cannot query each video element to get the time as it returns a null element but the same code works fine in chrome console.

The function in question is the getTime() and the line is timeStringElement = video.querySelector('span#text');

function getTime(){
    let videos = document.querySelectorAll('#playlist-items');
    videos[videos.length-1].scrollIntoView(true);
    let timeHours = 0;
    let timeStringElement;
    let containerElement;
    for (let video of videos){
        timeStringElement = video.querySelector('span#text');
        if (timeStringElement !== null){
            console.log(timeStringElement.innerText);
            timeHours += getHours(timeStringElement.innerText);
        }
    }
    return timeHours;
}
function getHours(time){
    let timeList = time.split(':').reverse();
    let timeHours = 0.0;
    let multiplier = 1/3600;
    for (let timeValue of timeList){
        timeHours += timeValue*multiplier;
        multiplier *= 60;
    }
    return timeHours;
}

window.onload = function(){
    let url = window.location.href;
    if (url.indexOf('list=') !== -1){
        let hours = getTime();
        console.log(hours);
    }
}