Firefox extension DOM change weird behaviour

Question

It's my first time trying to learn Firefox extension development. To get started, I'm trying to make a simple extension that alters some parts of the youtube.com homepage.

This is the manifest.json:

{
   "manifest_version": 2,
   "name": "Better Youtube jk idk what I'm doing",
   "version": "1.0",

   "description": "Yep yep yippie",

   "content_scripts": [
       {
           "matches": ["*://*.youtube.com/*"],
           "js": ["better_youtube.js"]
       }
   ]
}

and this is the better_youtube.js file:

document.getElementsByClassName("title style-scope ytd-guide-entry-renderer")[0].textContent = "something";

So, the element that this gets is the "home" link on the left side menu of the page. The reason I'm writing this post is that I'm getting an unusual behaviour:

• If I load the youtube.com page with the extension already enabled, nothing happens and the link's text does not change
• If, with youtube.com already loaded, I reload the script from the about:debugging page, it works

I tried running the change after 10 seconds (by passing the code to a setTimeout(changeLabel, 10000) call), but it kept showing this weird behaviour.

If it's of any use, I'm running Firefox 99.0.1

Thanks for any help.

Edit: I changed the code to

setTimeout(delayedUpdate, 10000);

function delayedUpdate(event)
{
    document.getElementsByClassName("title style-scope ytd-guide-entry-renderer")[0].innerHTML = "something";
}

and it now works, but I have to wait 10 seconds every time for it to load and it feels slow. Through console logging I noticed that Firefox "thinks" the page is loaded when I still see parts of it missing, the issue might stem from that, but I don't know how to address it. Maybe my extension is conflicting with some script running on the youtube page?

Answer 1

Thanks to @wOxxOm, I found the solution: I can listen to some YouTube-specific events on document and I can use MutationObserver for when content on a page updates.

More info here.