1

I'm trying to trigger an event in an extension when a video ends on youtube.com.

I couldn't find any examples from other extensions.

What I tried so far:

EDIT: I injected the script just like here: https://stackoverflow.com/a/9310273/4279201

Now with the injection, the alert('test') does show up so the injection works up to that point. But then nothing happens, any ideas why?

//script.js file
        alert('test');
        function onPlayerStateChange(event) {        
            if(event.data === YT.PlayerState.ENDED) {          
                alert('done');
            }
        }

Or:

//script.js file
  alert('test');
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player( 'player', {
      events: { 'onStateChange': onPlayerStateChange }
    });
  }
  function onPlayerStateChange(event) {
     if(event.data === YT.PlayerState.ENDED) {          
         alert('done');
        }
  }

The event constant is from: https://developers.google.com/youtube/js_api_reference?csw=1#Events

My manifest file: http://chopapp.com/#j89brn5f, bk.js is empty, cnt.js is just like in the script injection link. script.js is above.

Community
  • 1
  • 1
shinzou
  • 5,850
  • 10
  • 60
  • 124
  • @xan so I need to inject that function to the page using one of the methods in that question? – shinzou Aug 26 '15 at 10:29
  • Probably. I can't tell if your code is correct, but if you want to interact with code running on the page - you need to breach the isolated world of the content script. – Xan Aug 26 '15 at 10:31
  • I've reopened the question. On topic, why would you assume that just naming a function `onPlayerStateChange` or `onYouTubeIframeAPIReady` will do anything? – Xan Aug 26 '15 at 14:06
  • @Xan to be honest, I copied those parts from other answers/examples, they weren't for extensions though. I don't know how to use the `onStateChange` event from youtube. – shinzou Aug 26 '15 at 14:27
  • So that should be the real question, then. – Xan Aug 26 '15 at 14:27
  • Yeah, I'll try again first. @Xan – shinzou Aug 26 '15 at 14:28
  • Please note, the API you're trying to use is deprecated. You should not rely on it, instead you should look into HTML5 video events, or the [IFrame API](https://developers.google.com/youtube/iframe_api_reference) if you're embedding YouTube. – Xan Aug 26 '15 at 14:31
  • I'm not embedding a video, I want to use it with youtube.com itself, I'm pretty sure I'm using the html5 player on youtube.com, those events don't work anymore? @Xan – shinzou Aug 26 '15 at 14:36

1 Answers1

1

Since you're not embedding and you are expecting the HTML5 player, you don't need any trickery at all, including injection into the page.

You have a DOM with a (single) <video> element in it. You can attach to its events as normal.

Example:

// Content script; assumes the page already created the <video> element
var video = document.getElementsByTagName("video")[0];
if(video) {
  video.addEventListener("ended", function() {
    console.log("Video ended");
  })
} else {
  console.error("Video element not found");
}

You can see other events at MDN Media Events reference.

Xan
  • 74,770
  • 16
  • 179
  • 206
  • Are you sure that should work without injection? I tried it now and there's nothing in the console, I also added an `alert` instead of the `console.log` but it doesn't show up. PS, I'm definitely using the html5 player. – shinzou Aug 26 '15 at 15:14
  • Well, you're running at `document_start` according to your manifest; of _course_ the video element does not exist yet, and this code would throw an exception that you should see. I made that pretty clear in the comment that the video element must exist. – Xan Aug 26 '15 at 15:48
  • BTW why we don't need injection with html5? Is injection always unnecessary with html5 apis? – shinzou Aug 26 '15 at 15:57
  • DOM events are propagated to all JS contexts - both the page and attached content scripts. – Xan Aug 26 '15 at 15:59