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?

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!');
});

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!

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