0

I am new at using the Youtube API and Chrome extensions. In order to learn a bit more, I am trying to create a simple extension that simply plays a YouTube video/playlist in the extension. I've made two simple html and js files that just create the iframe and a button. The click event "sends" the URL of the video to the player and, that way, plays the video. This works very well if I open it in the browser but, when trying to open it in an extension, it doesn't work (the error is shown bellow).

My html file looks like this: (popup.html)

<html>
<head>
    <script type="text/javascript" src="buttons.js" charset="UTF-8"></script>
</head>

<body>
<div id="container">
    <iframe id="player" frameborder="0" allowfullscreen="1" title="YouTube video player" width="200"
            height="200"></iframe>
    <br>
    <button type="button" onclick="playVideo()">Play video</button>
</div>
</body>
</html>

My simple js file looks like this: (buttons.js)

function playVideo(){
    var player = document.getElementById("player");
    player.setAttribute("src", "https://www.youtube.com/embed/?listType=playlist&amp;list=XXXXXX&amp;enablejsapi=1&amp;widgetid=1");
}

I get this error, every time I try to open the video:

popup.html:11 Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.

Has anyone tried something similar? I am just trying to manipulate the player inside the extension in order learn more about both the API and the extensions' development.

Xavier Silva
  • 267
  • 1
  • 19
  • chrome extensions will not run inline javascript (it looks like the – Noam Hacker Nov 28 '16 at 14:23
  • "The actual logic of rendering the content of popup.html is implemented by popup.js" [source](https://developer.chrome.com/extensions/getstarted) – Noam Hacker Nov 28 '16 at 14:25
  • Thank you, @NoamHacker, but that did not solve the problem... I have updated the `html` file according to what you said but the problem remains... any other tip? – Xavier Silva Nov 28 '16 at 16:35
  • 1
    oh, you also cannot have onclick events in your html. hope that helps! – Noam Hacker Nov 28 '16 at 16:38
  • 1
    @NoamHacker, thank you so much. That was the main problem! After changing the way the click event was set, I've successfully put the iframe in the extension. Thank you, once again :) – Xavier Silva Nov 28 '16 at 20:32
  • welcome, glad it worked out! – Noam Hacker Nov 28 '16 at 20:33
  • @Makyen Thank you, that post has helped me a lot. Should I delete this post? The problem was really the one in the post you've specified. – Xavier Silva Nov 28 '16 at 20:33
  • @XavierSilva, Questions which can be closed as a duplicate of another question are relatively common. Once closed as a duplicate they allow other people to potentially find the duplicate target through finding the duplicate question using other search terms. Thus, questions which are closed as a duplicate do serve a purpose on Stack Exchange sites. There is nothing that requires you to delete this question. Deleting it, or not, is a question which you will need to answer for yourself. – Makyen Nov 29 '16 at 01:00
  • @XavierSilva, An additional thing (not a bad thing, just something to learn): it might be a good idea (faster) to search a bit more prior to posting. A search for portions of an error message often provides the information to solve the problem. Examples: ["popup Content Security Policy" on Stack Overflow in google-chrome-extension](http://stackoverflow.com/search?tab=votes&q=%5bgoogle-chrome-extension%5d%20popup%20Content%20Security%20Policy), or ["popup Refused to execute inline event handler" on Google](https://www.google.com/search?q=popup+Refused+to+execute+inline+event+handler) – Makyen Nov 29 '16 at 01:14
  • @XavierSilva, The above comment regarding searching is not intended to be negative. It is intended to provide suggestions as to possible ways to search in the future. For all of us, sometimes we put a great deal of effort into searching for information, but are unable to find what we need. It is often much easier for someone to come along and show a search which will find the information after the fact. This is particularly true when they already know the answer and what terms could be used to find possible answers. – Makyen Nov 29 '16 at 01:27
  • @Makyen, Thank you for your messages. I was thinking a different thing when I got the problem, that's why I was not finding the solution... Thank you for the feedback :) – Xavier Silva Nov 29 '16 at 17:22

0 Answers0