HTML Element on Extension Not Being Recognized by Console Immediately

Question

I am using https://github.com/IndieKKY/bilibili-subtitle on Bilibili and at first I can clearly see the content in the extension after it loads. However, when I use the javascript code to get the content, it says undefined until I explicitly inspect a text inside the extension and rerun the code. I am running on Brave Browser and Chrome.

The code is:

var spans = document.querySelectorAll('span[style="display: inline;"]');

var concatenatedText = Array.from(spans).map(function(span) {
    var textElement = span.querySelector('text.font-medium');
    return textElement ? textElement.textContent : null;
}).filter(Boolean).join(', ');

console.log(concatenatedText);

And the video is:

https://drive.google.com/file/d/1TT6IvVopNOyWGBibNGyGF-o0oEFbTl4l/view?usp=sharing

Any idea what is going on?

I am planning to visit consecutive urls in the playlist in a loop and run this code but since the extension code never gets recognized properly on the first try its not going to work out.

Any help would be appreciated! Perhaps it has to do with some dynamically added content? I've looked for similar topics as well like this: Dynamically added HTML not being recognized by jQuery

but my attempts to modify the code have not worked so far?

Answer 1

Your JavaScript may be running before the body actually loads. If it is in the tag, just move it to the bottom of the tag. Or, if it is linked in a separate file, add an attribute of "defer" to the script tag with no value.