Detect youtube video events with Chrome extension content script

Question

I'm writing a Chrome extension and I want to detect when a video starts/ends while a user is on youtube.com watching videos. The difference between my situation and other tutorials I've read is I'm not embedding my own youtube video on my own site, I just want to detect events off of the video the user is watching on youtube.

Right now my manifest.json file has the following lines for content scripts:

"content_scripts": [
    {
        "matches": ["http://*/*","https://*/*"],
        "js": ["js/jquery.js", "js/iframe_api.js", "js/contentScript.js"],
        "all_frames": true
    }
],

I have jquery downloaded and iframe_api.js is the contents of https://www.youtube.com/iframe_api. My contentScript.js file is very simple, I just want to print something to the console when the video is ready:

function onYouTubeIframeAPIReady() {
    var player;
    player = new YT.Player('ytplayer', {
        events: {
            'onReady': onPlayerReady,
        }
    });
}

function onPlayerReady(event) {
    console.log('It worked!');
}

Could someone help me out? Can a content script even do this, or can I not access a youtube video's iframe because it isn't in the "isolated environment" that content scripts live in?

Cannell

content scripts has access to DOM only. They cannot access javascript context, but can attach listeners to dom nodes. – Contribution

@Contribution That makes sense. I wasn't sure if the youtube iframe was considered part of the dom or not but upon further inspection it seems it is dynamically loaded via javascript, so it makes sense that the content script couldn't access it. I found out an alternative solution myself however, see my answer below. – Cannell

Answer 1

Shortly after I posted this question I found out an answer. Not using the youtube iframe api, but rather the html5 api. I modified the content script to the following to print a message when the video ends and it works fine.

var vid = $('video').get(0);

vid.addEventListener('ended', function(e) {
    console.log('The video ended!');
});

Cannell

Could you expand on "Not using the youtube iframe api, but rather the html5 api?" Where exactly do you get the latter from? Where is it placed? – Unsung

Also, where can you get a list of the events that you can listen for? – Cris

Answer 2

This is way late to the party, but I just recently encountered this issue myself and saw that there was never a follow up as to where to find the "HTML5 API" events.

GabeMeister's answer is the correct solution, but using getEventListeners(document.querySelector("video")) in the console on any given YouTube video page will show you a list of events you can listen for in your script.

As of the time of writing this, these are the events returned from the above line:

• playing
• pause
• enterpictureinpicture
• leavepictureinpicture
• loadeddata
• volumechange
• timeupdate
• play
• durationchange
• seeking
• seeked
• error
• loadedmetadata
• waiting
• progress
• focus
• loadstart
• ended
• suspend
• ratechange
• resize

These are separate from the iFrame API and can be listened for from a content script or through the console. Hope this helps!

Stolzer

Answer 3

I found a similar questions here, the answers are great (HTML5 is amazing!!) How to play and pause a Youtube video in the console?

for instance, you can use these to play/pause the video (on youtube.com, without youtube iframe on an external website)

document.getElementsByTagName('video')[0].play()
document.getElementsByTagName('video')[0].pause()

there are more functions allowing you to track video length, current play time and more.

P.S: I was having this same question for over a day and it's surprisingly to hard to find the right answer/guide to this! but hope this helps

Dichromaticism

I need to find out which caption locale is currently loaded but i can't find how – Donahoe