Detect youtube video events with Chrome extension content script

问题

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?

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

回答2:

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

来源：https://stackoverflow.com/questions/36536464/detect-youtube-video-events-with-chrome-extension-content-script

标签

javascript

google-chrome-extension

youtube-iframe-api