Youtube player API in Chrome extension

2
votes

I'm looking to use the Youtube player API in my Youtube Chrome extension.
My goal is to be able to control the player's controls on Youtube website from my content script using the pageAction's popup.

It goes like this -
Clicking on a "play" button in the popup sends a message to the content script, the content script receives the message and use the player API event "playVideo()" to play the video.

Because of the content script and the page itself are isolated from each other then I can't simply get the player's object from the page, and from what I understand I can't use messages to send an object over from the page to the content script.

Now I could bypass all this trouble by using the HTML5 video events, but unfortunately this won't work on live streams since flash is still in use there, so I kind of have no other choice but loading and using the player API, am I correct?
Is there a way to control the player using URL parameters on Youtube site itself?
(I really prefer everything than loading an additional script and external one)

Where it comes to code I would like to get help setting the permissions needed to be able to load the external script please.
I saw that there is a need to declare a content_security_policy in the manifest file, but I do not understand the syntax and how to write it down, so I would like to have an example and whatever else is needed for it please.

In my content script I'm using the next code taken from the YT player API documentation to inject the script:

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function onYouTubeIframeAPIReady() {
    console.log('--- The YT player API is ready from content script! ---');
}
2
google-chrome-extensionyoutube-api
The embeded iframe for the YouTube video needs to include enablejsapi=1 in the URL. YouTube isn't using the iframe API on their website so this will not work. – kel
@kel: you mean that controlling the player using URL parameters will not work right?, because when it comes to use the player API it does work, you can open the console and enter this for example: document.getElementById('movie_player').playVideo() and you will see that it works great :) now the question is how to load it to be in use in the content script please. – Gil Goldshlager
Google on how to inject js on an extension (not a content script). That gives you access to the player object. – Zig Mandel
@ZigMandel: Thanks I did that and it works good, I'm sending a message from the popup (extension script) to the content script using chrome.tabs.sendMessage, and then sending another message this time from the content script to the injected script using window.postMessage, all info can be found here: Communication with the embedding page – Gil Goldshlager
Glad it helped, i added it as an answer. – Zig Mandel

2 Answers

3
votes

Since the content script cant access the page javascript objects, inject a script in the page (the official docs explain how). That injected script has access to the objects and can then use messaging or writting on the dom to communicate with the content or popup.

-3
votes

This should be saved in the manifest.json 

 {
"manifest_version": 2,

"name": "example",
"description": "Lorem Ipsum dollar sit amet",
"version": "0.0",

"browser_action": {
  "default_icon": "icon.png",
  "default_popup": "popup.html"
},
"permissions": [
  "activeTab",
  "tabs",
  "content_security_policy"
]
}