Question

I’ve got a chrome extension with a popup.html and an injected content script. With the injected content script I’m trying to access youtube’s javascript API functions and it all works fine except for one: addEventListener.

The event listener of Youtube’s javascript API listens for the state of the video to change. So if the end of the video is reached the state changes to 0.

var currentVideo = document.getElementById('movie_player');
currentVideo.addEventListener("onStateChange", "onytplayerStateChange");

function onytplayerStateChange() {
   console.log("The state of the player has changed");
}

This piece of code works just fine in a normal environment but it fails to work in content script. Why can’t I catch changing events in my content script? Any ideas?

Answer 1

Content scripts do not run in the scope of the current page. The event handler has to be injected via another <script> tag, as described in this answer: Building a Chrome Extension with Youtube Events:

var actualCode = 'function onytplayerStateChange() {'
               + '    console.log("The state of the player has changed");'
               + '}';

var script = document.createElement('script');
script.textContent = actualCode;
(document.head||document.documentElement).appendChild(script);
script.parentNode.removeChild(script);

PS. The DOM is available to the content script, so binding the event handler does work.