unable to find YouTube class

Question

I'm trying to make an extension witch I am new to. I have got some of the basics going like the manifest file and the script to interact with YouTube. My problem is that I am unable to find the class yt-simple-endpoint style-scope ytd-mini-guide-entry-renderer

Here is the manifest

{
"content_scripts": 
[{
    "matches": ["https://www.youtube.com/*"],
    "all_frames" : true,
    "js": ["remove_html.js"],
    "run_at": "document_end"
}],

  "manifest_version": 3,
  "name": "rsy",
  "version": "2.2",
  "description": "Youtube",
  "icons": {"128": "img.png"} 
}

Here is my script

const content = document.querySelectorAll('yt-simple-endpoint style-scope ytd-mini-guide-entry-renderer')
console.log(content.length)

have also tried this

const content = document.getElementsByClassName('yt-simple-endpoint style-scope ytd-mini-guide-entry-renderer')
console.log(content.length)

The console is outputting 0 for both.

I have looked at some other posts and there are some mentions of drivers, how would that help?

Answer 1

Use MutationObserver as that element is generated dynamically.

manifest.json

{
  "name": "content_scripts",
  "version": "1.0",
  "manifest_version": 3,
  "content_scripts": [
    {
      "js": [
        "matches.js"
      ],
      "matches": [
        "<all_urls>"
      ],
      "run_at": "document_start"
    }
  ]
}

matches.js

console.log("MutationObserver:Start");

const onMutation = (mutations) => {
  mo.disconnect();

  for (const { addedNodes } of mutations) {
    for (const node of addedNodes) {
      if (node.id != null) {
        if (node.className == "yt-simple-endpoint style-scope ytd-mini-guide-entry-renderer") {
          console.dir(node.className)
        }
      }
    }
  }

  observe();
}

const observe = () => {
  mo.observe(document, {
    subtree: true,
    childList: true,
  });
}

const mo = new MutationObserver(onMutation);

observe();