Javascript Question posted in
A very good W3school tutorial can be found here.

Chrome Extension on youtube.com – How can I use the Youtube Ajax navigation in Javascript?

I’m developping a Chrome Extension that adds new feeds content on Youtube.com

I would like to add new thumbnails links that will open new video but I can’t figure out how can I use their ajax navigation.

As everything is loaded in ajax its not easy to understand how it really works.

Here are the following tests I made

Test 1 : adding a simple a link with /watch?v=2SNThp1YiU4 as href attribute value will load the page without ajax …

Test 2 : in Devtools when I inspect a thumbnail link and change the href attribute, if I click the link the default page will be loaded, not the one I edited which means the video ID was certainly hardcoded in the event listener declaration ?!

So, how can I add custom link to Youtube.com DOM so it uses the proper Youtube ajax navigation ?

Thanks in advance

Tags:

2

Answers


  1. 0

    To add custom links to YouTube and use their AJAX navigation, you need to create links that fit their system. Here are some steps to do this:

    1. Use the YouTube API: Instead of just using regular links, try to use YouTube’s internal functions to create your links. This can help you trigger the same AJAX loading.

    2. Listen for Click Events: Instead of just setting the href attribute, you can add a click event listener to your custom thumbnails. Inside this listener, you can use the same methods YouTube uses to change the content without reloading the page.

    3. Use window.history.pushState: When a link is clicked, you might want to change the URL using window.history.pushState() for the new video link. This will help simulate the AJAX navigation.

    4. Trigger Navigation Functions: Look for existing YouTube functions in the DevTools (like the ones triggered when a thumbnail is clicked) and try to call those functions in your click event handler.

    By following these steps, you should be able to create links that utilize YouTube’s AJAX navigation effectively.

    Login or Signup to reply.
  2. 0

    I think YouTube uses a specific function to handle navigation generally called yt.navigate.
    Why not generate your custom thumbnail with the appropriate event listener to call the yt.navigate function and then trigger the navigation by using the yt.navigate function to navigate to the new video page.

    Make sure that your script runs after YouTube’s dynamic content is fully loaded by using appropriate events like yt-page-data-updated.

    window.addEventListener('yt-page-data-updated', function() {
// Create a custom thumbnail
    const customThumbnail = document.createElement('a');
    customThumbnail.href = '/watch?v=2SNThp1YiU4';
    customThumbnail.className = 'yt-simple-endpoint style-scope ytd-thumbnail';

    const thumbnailImage = document.createElement('img');
    thumbnailImage.src = 'https://img.youtube.com/vi/2SNThp1YiU4/0.jpg';
    thumbnailImage.className = 'style-scope yt-img-shadow';
    customThumbnail.appendChild(thumbnailImage);

    // Find a suitable location to insert the thumbnail
    const primaryContent = document.querySelector('ytd-two-column-browse- 
results-renderer #primary');
    if (primaryContent) {
        primaryContent.insertBefore(customThumbnail, 
primaryContent.firstChild);
    
        // Add event listener for AJAX navigation
        customThumbnail.addEventListener('click', function(event) {
            event.preventDefault();
            const url = event.currentTarget.href;
            window.history.pushState(null, '', url);
            yt.navigate(url);
        });
    }
 });

    To integrate custom links on YouTube that use the platform’s AJAX navigation:

    1. Create the Link:

       <a href="/watch?v=VIDEO_ID" class="yt-simple-endpoint style-scope ytd-thumbnail" data-ytid="VIDEO_ID">Custom Video</a>

    2. Add JavaScript to Handle the Click:

       document.querySelectorAll('a[data-ytid]').forEach(link => {
 link.addEventListener('click', function(event) {
     event.preventDefault();
     const videoId = this.getAttribute('data-ytid');
     const url = `/watch?v=${videoId}`;
     const eventData = {commandMetadata: {webCommandMetadata: {url, webPageType: 'WEB_PAGE_TYPE_WATCH', rootVe: 3832}}};

     window.history.pushState(null, '', url);
     window.dispatchEvent(new CustomEvent('yt-navigate-finish', { detail: eventData }));
 });
 });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search