Why is the .getElementsByClassName returning undefined?

Question

I am trying to make a Chrome extension for chess.com. I am trying to access the chess move list using .getElementsByClassName. The issue is that the .getElementsByClassName is returning undefined and I'm not sure why.

Here is my code for my contentscript.js.

let moveList;
function getChessMove() {
    moveList = document.getElementsByClassName("white node")[0].textContent;
    console.log(moveList);
}
chrome.runtime.onMessage.addListener(getChessMove());

When I plug the .getElementsByClassName into the console on chess.com, it returns the correct text, which in this case is 'e4'.

I'm not entirely sure what the issue is. I've tried using a for loop, but then it doens't print anything into the console.

let moveList;
function getChessMove() {
    moveList = document.getElementsByClassName("white node");
    for (i = 0; i < moveList.length; i++) {
        console.log(moveList[i].textContent);
    } 
}
chrome.runtime.onMessage.addListener(getChessMove());

I'm not sure what to do with this, if it helps here is my background.js file as well, which send a message to my content script file when chess.com tab is present.

chrome.tabs.onUpdated.addListener((tabId, tab) => {
  if (tab.url && tab.url.includes("chess.com/game/")) {
    chrome.tabs.sendMessage(tabId, {
      message: "chess tab"
    })
  }
})

I've also tried using .querySelector but that just returns null.

let moveList;
function getChessMove() {
    moveList = document.querySelector('.white.node');
    console.log(moveList);
}
chrome.runtime.onMessage.addListener(getChessMove());

Please help! Thank you!