Estoy trabajando en un proyecto de Javascript mientras aprendo, y mi objetivo es recuperar los títulos de todos los videos en mi página de inicio de Youtube, junto con los títulos que se agregan dinámicamente mientras me desplazo.

Pude enumerar el texto interno de una etiqueta en particular que contenía títulos de todos los videos cargados inicialmente junto con algunos datos adicionales usando este código simple: (Estoy planeando extraer los títulos de la cadena obtenida)

 var videos = document.getElementsByTagName("ytd-rich-item-renderer"); // This is dynamic (n elements) for(i of videos){ console.log(i.innerText) }

Sin embargo, el resultado obtenido se limita a unos pocos videos y no se actualiza cuando se carga un nuevo conjunto de videos (mientras se desplaza). Creo que Youtube renderiza/carga videos a través de Grids . Entonces, cada vez que llego al final de un conjunto inicial de videos (que se carga en cada actualización), busca videos y se agregan dinámicamente nuevas cuadrículas.

El elemento de etiqueta <ytd-rich-item-renderer> se agrega dinámicamente para cada nuevo video cargado. El componente principal de cada elemento de etiqueta <ytd-rich-item-renderer> es <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;">

¿Cómo puedo modificar este código para obtener una lista de todos los <ytd-rich-item-renderer> que se agregaron dinámicamente en tiempo real mientras me desplazaba? (Mi objetivo final es crear una extensión)

¡Gracias de antemano!