Menu
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>
445
Click the extension icon to disable Content-Security-Policy header for the tab. Click the extension icon again to re-enable Content-Security-Policy header. Use this only as a last resort. Disabling Content-Security-Policy means disabling features designed to protect you from cross-site scripting.
For example above, if we had the error message Refused to load the script 'https://cdn.mycompany.com/scripts.js' because it violates the following directive 'script-src' , we need to add "https://cdn.mycompany.com/script.js" to the "script-src" directive of the policy.
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.
180
I know I'm a bit late to this, but based on OP's comments to Xan's answer, another component of solving the issue would be to adjust the AJAX call that is implied.
I was getting the same error and adjusted my API call to be:
dataType: 'json'
instead of:
dataType: 'jsonp'
(Solved the issue, granted, one will still need to remove any inline scripting.)
36
For me, the reason is that I'm using an older version (such as v1.7) of jQuery that has CSP problems, choose a new version (v2.1.3).
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
