Chrome extension Content Security Policy directive error
I'm trying to make radio stream chrome extension but there is a problem. When I run my script in browser like normal JS+HTML+CSS it works, but when I try runing it like Chrome extension I get this error:
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.
After that I added this to my manifest:
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
But after that I was getting error message(error in manifest line with code above)
This is my manifest:
{
"background": {
"scripts": [ "jquery.js", "jquery-ui.js", "plate.js" ]
},
"browser_action": {
"default_icon": "Images/action-normal.png",
"default_popup": "player.html",
"default_title": ""
},
"description": "Chrome Player",
"manifest_version": 2,
"name": "Radio Chrome Player",
"permissions": [ "http://www.radio-station.com/" ],
"version": "1.0"
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}
This is the main html file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
<script src="main.js"></script>
<script>$(function(){$("#radioplayere").plate({playlist: [{file:"http://RADIO_STATION_STREAM_URL/;"}], phpGetter: "http://hostingshoutcast.com/stream/plate/php/plate.php"});});</script>
</head>
<body>
<div id="radioplayer">If you are seeing this then an error has occurred!</div>
</body>
</html>
Answer
Your problems are as follows:
Chrome CSP forbids inline code, and this is not subject to override. Your
'unsafe-eval'does not address the issue, and'unsafe-inline'that would've helped will be ignored by Chrome.You need to get rid of inline code:
<script>$(function(){$("#radioplayere").plate({playlist: [{file:"http://RADIO_STATION_STREAM_URL/;"}], phpGetter: "http://hostingshoutcast.com/stream/plate/php/plate.php"});});</script>This needs to be moved in a js file.
There is a typo in your manifest.json, you forgot a comma:
"version": "1.0",In general, using a JSON validator can help you catch those errors.