onYouTubePlayerAPIReady doesn't get called after inject iframe via a chrome extension
up vote
0
down vote
favorite
I was playing around with the Youtube API and wanted to create a chrome extension that injects an iframe into the current website.
At first I'd try it out plainly and it works as intended:
(function()
// https://developers.google.com/youtube/iframe_api_reference
console.log('loaded');
const anchorPlay = document.createElement('a');
anchorPlay.id = 'play-button';
anchorPlay.innerHTML = 'Play';
const anchorPause = document.createElement('a');
anchorPause.id = 'pause-button';
anchorPause.innerHTML = 'Pause';
const iFrameElement = document.createElement('iframe');
iFrameElement.setAttribute('id', 'video');
iFrameElement.setAttribute(
'src',
'https://www.youtube.com/embed/krVkvyQjyBQ?enablejsapi=1&html5=1'
);
iFrameElement.setAttribute('allowfullscreen', '');
iFrameElement.setAttribute('frameborder', '0');
iFrameElement.setAttribute('height', '315');
iFrameElement.setAttribute('width', '560');
document.body.appendChild(anchorPlay);
document.body.appendChild(anchorPause);
document.body.appendChild(iFrameElement);
// global variable for the player
var player;
// this function gets called when API is ready to use
window.onYouTubePlayerAPIReady = function()
alert('called onYouTubePlayerAPIReady');
// create the global player from the specific iframe (#video)
player = new YT.Player('video',
events:
// call this function when player is ready to use
onReady: onPlayerReady
);
;
function onPlayerReady(event)
// bind events
var playButton = document.getElementById('play-button');
playButton.addEventListener('click', function()
player.playVideo();
);
var pauseButton = document.getElementById('pause-button');
pauseButton.addEventListener('click', function()
// player.pauseVideo();
const currTime = player.getCurrentTime();
alert(currTime);
);
// Inject YouTube API script
var tag = document.createElement('script');
tag.src = 'https://www.youtube.com/player_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
)();
https://codepen.io/thadeuszlay/pen/gQwwoZ
But once I create it as a chrome extension, the function window.onYouTubePlayerAPIReady doesn't get called. While all the elements get loaded correctly (buttons and iFrame are there and I can see my console logs).
The console is clean from errors. I can also see that the YT-API script got inserted correctly in the <head>. I deactivated my ad blocker, too.
In my Chrome extension, the content script looks exactly as the codepen code above. My manifest.json looks like this:
"name": "test",
"version": "1.0.0",
"offline_enabled": true,
"description": "test.",
"permissions": ["activeTab", "tabs"],
"browser_action":
"default_popup": "popup.html",
"default_icon":
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
,
"icons":
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
,
"content_scripts": [
"css": ["styles.css"],
"js": ["content.js"],
"run_at": "document_idle",
"all_frames": true,
"matches": ["https://*/*", "http://*/*"]
],
"manifest_version": 2
javascript
google-chrome-extension 
youtube-api asked Nov 11 at 1:35
thadeuszlay
66611336
add a comment |
up vote
0
down vote
favorite
I was playing around with the Youtube API and wanted to create a chrome extension that injects an iframe into the current website.
At first I'd try it out plainly and it works as intended:
(function()
// https://developers.google.com/youtube/iframe_api_reference
console.log('loaded');
const anchorPlay = document.createElement('a');
anchorPlay.id = 'play-button';
anchorPlay.innerHTML = 'Play';
const anchorPause = document.createElement('a');
anchorPause.id = 'pause-button';
anchorPause.innerHTML = 'Pause';
const iFrameElement = document.createElement('iframe');
iFrameElement.setAttribute('id', 'video');
iFrameElement.setAttribute(
'src',
'https://www.youtube.com/embed/krVkvyQjyBQ?enablejsapi=1&html5=1'
);
iFrameElement.setAttribute('allowfullscreen', '');
iFrameElement.setAttribute('frameborder', '0');
iFrameElement.setAttribute('height', '315');
iFrameElement.setAttribute('width', '560');
document.body.appendChild(anchorPlay);
document.body.appendChild(anchorPause);
document.body.appendChild(iFrameElement);
// global variable for the player
var player;
// this function gets called when API is ready to use
window.onYouTubePlayerAPIReady = function()
alert('called onYouTubePlayerAPIReady');
// create the global player from the specific iframe (#video)
player = new YT.Player('video',
events:
// call this function when player is ready to use
onReady: onPlayerReady
);
;
function onPlayerReady(event)
// bind events
var playButton = document.getElementById('play-button');
playButton.addEventListener('click', function()
player.playVideo();
);
var pauseButton = document.getElementById('pause-button');
pauseButton.addEventListener('click', function()
// player.pauseVideo();
const currTime = player.getCurrentTime();
alert(currTime);
);
// Inject YouTube API script
var tag = document.createElement('script');
tag.src = 'https://www.youtube.com/player_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
)();
https://codepen.io/thadeuszlay/pen/gQwwoZ
But once I create it as a chrome extension, the function window.onYouTubePlayerAPIReady doesn't get called. While all the elements get loaded correctly (buttons and iFrame are there and I can see my console logs).
The console is clean from errors. I can also see that the YT-API script got inserted correctly in the <head>. I deactivated my ad blocker, too.
In my Chrome extension, the content script looks exactly as the codepen code above. My manifest.json looks like this:
"name": "test",
"version": "1.0.0",
"offline_enabled": true,
"description": "test.",
"permissions": ["activeTab", "tabs"],
"browser_action":
"default_popup": "popup.html",
"default_icon":
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
,
"icons":
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
,
"content_scripts": [
"css": ["styles.css"],
"js": ["content.js"],
"run_at": "document_idle",
"all_frames": true,
"matches": ["https://*/*", "http://*/*"]
],
"manifest_version": 2
javascript
google-chrome-extension youtube-api asked Nov 11 at 1:35
thadeuszlay
66611336
2
The API runs as a normal web page script, not in the isolated world of content scripts, so you need to put the code that accesses page variables such as window.onYouTubePlayerAPIReady into web page context, see Insert code into the page context using a content script
– wOxxOm
Nov 11 at 6:59
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I was playing around with the Youtube API and wanted to create a chrome extension that injects an iframe into the current website.
At first I'd try it out plainly and it works as intended:
(function()
// https://developers.google.com/youtube/iframe_api_reference
console.log('loaded');
const anchorPlay = document.createElement('a');
anchorPlay.id = 'play-button';
anchorPlay.innerHTML = 'Play';
const anchorPause = document.createElement('a');
anchorPause.id = 'pause-button';
anchorPause.innerHTML = 'Pause';
const iFrameElement = document.createElement('iframe');
iFrameElement.setAttribute('id', 'video');
iFrameElement.setAttribute(
'src',
'https://www.youtube.com/embed/krVkvyQjyBQ?enablejsapi=1&html5=1'
);
iFrameElement.setAttribute('allowfullscreen', '');
iFrameElement.setAttribute('frameborder', '0');
iFrameElement.setAttribute('height', '315');
iFrameElement.setAttribute('width', '560');
document.body.appendChild(anchorPlay);
document.body.appendChild(anchorPause);
document.body.appendChild(iFrameElement);
// global variable for the player
var player;
// this function gets called when API is ready to use
window.onYouTubePlayerAPIReady = function()
alert('called onYouTubePlayerAPIReady');
// create the global player from the specific iframe (#video)
player = new YT.Player('video',
events:
// call this function when player is ready to use
onReady: onPlayerReady
);
;
function onPlayerReady(event)
// bind events
var playButton = document.getElementById('play-button');
playButton.addEventListener('click', function()
player.playVideo();
);
var pauseButton = document.getElementById('pause-button');
pauseButton.addEventListener('click', function()
// player.pauseVideo();
const currTime = player.getCurrentTime();
alert(currTime);
);
// Inject YouTube API script
var tag = document.createElement('script');
tag.src = 'https://www.youtube.com/player_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
)();
https://codepen.io/thadeuszlay/pen/gQwwoZ
But once I create it as a chrome extension, the function window.onYouTubePlayerAPIReady doesn't get called. While all the elements get loaded correctly (buttons and iFrame are there and I can see my console logs).
The console is clean from errors. I can also see that the YT-API script got inserted correctly in the <head>. I deactivated my ad blocker, too.
In my Chrome extension, the content script looks exactly as the codepen code above. My manifest.json looks like this:
"name": "test",
"version": "1.0.0",
"offline_enabled": true,
"description": "test.",
"permissions": ["activeTab", "tabs"],
"browser_action":
"default_popup": "popup.html",
"default_icon":
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
,
"icons":
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
,
"content_scripts": [
"css": ["styles.css"],
"js": ["content.js"],
"run_at": "document_idle",
"all_frames": true,
"matches": ["https://*/*", "http://*/*"]
],
"manifest_version": 2
javascript
google-chrome-extension youtube-api asked Nov 11 at 1:35
thadeuszlay
66611336
I was playing around with the Youtube API and wanted to create a chrome extension that injects an iframe into the current website.
At first I'd try it out plainly and it works as intended:
(function()
// https://developers.google.com/youtube/iframe_api_reference
console.log('loaded');
const anchorPlay = document.createElement('a');
anchorPlay.id = 'play-button';
anchorPlay.innerHTML = 'Play';
const anchorPause = document.createElement('a');
anchorPause.id = 'pause-button';
anchorPause.innerHTML = 'Pause';
const iFrameElement = document.createElement('iframe');
iFrameElement.setAttribute('id', 'video');
iFrameElement.setAttribute(
'src',
'https://www.youtube.com/embed/krVkvyQjyBQ?enablejsapi=1&html5=1'
);
iFrameElement.setAttribute('allowfullscreen', '');
iFrameElement.setAttribute('frameborder', '0');
iFrameElement.setAttribute('height', '315');
iFrameElement.setAttribute('width', '560');
document.body.appendChild(anchorPlay);
document.body.appendChild(anchorPause);
document.body.appendChild(iFrameElement);
// global variable for the player
var player;
// this function gets called when API is ready to use
window.onYouTubePlayerAPIReady = function()
alert('called onYouTubePlayerAPIReady');
// create the global player from the specific iframe (#video)
player = new YT.Player('video',
events:
// call this function when player is ready to use
onReady: onPlayerReady
);
;
function onPlayerReady(event)
// bind events
var playButton = document.getElementById('play-button');
playButton.addEventListener('click', function()
player.playVideo();
);
var pauseButton = document.getElementById('pause-button');
pauseButton.addEventListener('click', function()
// player.pauseVideo();
const currTime = player.getCurrentTime();
alert(currTime);
);
// Inject YouTube API script
var tag = document.createElement('script');
tag.src = 'https://www.youtube.com/player_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
)();
https://codepen.io/thadeuszlay/pen/gQwwoZ
But once I create it as a chrome extension, the function window.onYouTubePlayerAPIReady doesn't get called. While all the elements get loaded correctly (buttons and iFrame are there and I can see my console logs).
The console is clean from errors. I can also see that the YT-API script got inserted correctly in the <head>. I deactivated my ad blocker, too.
In my Chrome extension, the content script looks exactly as the codepen code above. My manifest.json looks like this:
"name": "test",
"version": "1.0.0",
"offline_enabled": true,
"description": "test.",
"permissions": ["activeTab", "tabs"],
"browser_action":
"default_popup": "popup.html",
"default_icon":
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
,
"icons":
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
,
"content_scripts": [
"css": ["styles.css"],
"js": ["content.js"],
"run_at": "document_idle",
"all_frames": true,
"matches": ["https://*/*", "http://*/*"]
],
"manifest_version": 2
javascript
google-chrome-extension youtube-api javascript
google-chrome-extension youtube-api asked Nov 11 at 1:35
thadeuszlay
66611336
asked Nov 11 at 1:35
thadeuszlay
66611336
edited Nov 11 at 8:46
asked Nov 11 at 1:35
thadeuszlay
66611336
asked Nov 11 at 1:35
thadeuszlay
66611336
asked Nov 11 at 1:35
thadeuszlay
66611336
66611336
2
The API runs as a normal web page script, not in the isolated world of content scripts, so you need to put the code that accesses page variables such as window.onYouTubePlayerAPIReady into web page context, see Insert code into the page context using a content script
– wOxxOm
Nov 11 at 6:59
add a comment |
2
The API runs as a normal web page script, not in the isolated world of content scripts, so you need to put the code that accesses page variables such as window.onYouTubePlayerAPIReady into web page context, see Insert code into the page context using a content script
– wOxxOm
Nov 11 at 6:59
2
2
The API runs as a normal web page script, not in the isolated world of content scripts, so you need to put the code that accesses page variables such as window.onYouTubePlayerAPIReady into web page context, see Insert code into the page context using a content script
– wOxxOm
Nov 11 at 6:59
The API runs as a normal web page script, not in the isolated world of content scripts, so you need to put the code that accesses page variables such as window.onYouTubePlayerAPIReady into web page context, see Insert code into the page context using a content script
– wOxxOm
Nov 11 at 6:59
add a comment |
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53245100%2fonyoutubeplayerapiready-doesnt-get-called-after-inject-iframe-via-a-chrome-exte%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53245100%2fonyoutubeplayerapiready-doesnt-get-called-after-inject-iframe-via-a-chrome-exte%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
The API runs as a normal web page script, not in the isolated world of content scripts, so you need to put the code that accesses page variables such as window.onYouTubePlayerAPIReady into web page context, see Insert code into the page context using a content script
– wOxxOm
Nov 11 at 6:59