How does YouTube's dynamic loading on the homepage work?

184 Views Asked by Peter At 26 May 2022 at 22:42

I'm making an extension that will put a button under each video on the home page but I found out very quickly that this wouldn't be possible by just using a selectAll statement. The only thing that a selectAll statement does is it retrieves the first 3 rows of videos on the homepage. I think what's happening is there are videos being loaded after the page has loaded thus the elements don't exist at "document_end"(this being when my chrome extension is injecting the js/css onto the page). I would be looking for something like an event listener but an explanation as to why this is happening would be appreciated as well.

Original Q&A

There are 1 best solutions below

Nicholas Wong On 26 May 2022 at 22:54 BEST ANSWER

You could solve this by using MutationObservers in your content script.

Example from mdn web docs below, you should be able to call and find new elements by using document.querySelectorAll() inside the callback function.

// Keep track of DOM element changes under <html> and run callback with mutationsList and observer once DOM changes
// Select the node that will be observed for mutations
const targetNode = document.getElementById('some-id');

// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };

// Callback function to execute when mutations are observed
const callback = function(mutationList, observer) {
    // Use traditional 'for loops' for IE 11
    for(const mutation of mutationList) {
        if (mutation.type === 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type === 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

// Later, you can stop observing
observer.disconnect();

How does YouTube's dynamic loading on the homepage work?

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in GOOGLE-CHROME-EXTENSION

Related Questions in YOUTUBE

Related Questions in DOM-EVENTS

Related Questions in DOMCONTENTLOADED

Trending Questions

Popular # Hahtags

Popular Questions