I'm working on a Javascript project while learning, and my objective is to retrieve the titles of all the videos on my Youtube Homepage, along with the titles which get dynamically added while scrolling.

I was able to list the innerText of a particular tag which contained titles of all the initially loaded videos along with some additional data using this simple code : (I'm planning to extract the titles from the string obtained)

var videos = document.getElementsByTagName("ytd-rich-item-renderer"); // This is dynamic (n elements)

for(i of videos){
  console.log(i.innerText)
}

However, the result obtained is limited to a few videos and does not update when a new set of videos get loaded (while scrolling). I believe Youtube renders/loads videos through Grids. So every time I reach the end of an initial set of videos (that loads on every refresh), it fetches for videos, and new grids are dynamically added.

The <ytd-rich-item-renderer> tag element gets dynamically added for every new loaded video. The parent component of every <ytd-rich-item-renderer> tag element is <ytd-rich-grid-renderer> :

document.getElementsByTagName("ytd-rich-item-renderer")[0].parentComponent

Output : <ytd-rich-grid-renderer class="style-scope ytd-two-column-browse-results-renderer" full-bleed="" style="--ytd-rich-grid-items-pe…-slim-items-per-row: 9;">

How can I modify this code to get a list of all <ytd-rich-item-renderer> elements that were being added dynamically in real-time while scrolling? (My end-goal is to create an extension)

Thanks in Advance!