Detect Youtube video change with injected javascript

Question

I am building an extension (some injected js) that adds some buttons to a youtube page, which works fine. My issue is that when a user clicks on another video (say in the right hand side list), the next video is loaded without an actual page reload. Is there any way to detect this change so that I can rerun my code?

I have already tried things like binding to the hashchange event, to no avail.

Answer 1

I know it's an old thread but I hope someone else will be able to use this information.

I had a similar issue building a chrome extension for youtube. To be more specific I needed to detect the navigation within youtube.

TL;DR;
After going over most of the StackOverflow, I've ended with the following in the context.js file.

function run(){
// your youtube extention logic 
console.log('change');
}

window.onload = run;
window.addEventListener('yt-navigate-start', run,   true);

Explanation In case you wish to see all of the window events you can run getEventListeners(window).

youtube has a costume event when changing pages, the event is yt-navigate-start.

For the first time youtube loads, I used the window.onload and after that, add the event listener window.addEventListener('yt-navigate-start', run, true);

Good luck, I hope this could help.