Reputation: 1479
For some reason, I keep getting the following error when I try to use my chrome extension; Refused to load the script 'http://dynamic.xkcd.com/api-0/jsonp/comic/1123?callback=random&_=1411616016083' because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".
Here is my code:
Manifest.json
{
"manifest_version": 2,
"name": "XKCD New Tab",
"description": "This extension demonstrates a browser action with kittens.",
"version": "1.0",
"permissions": [
"tabs",
"http://dynamic.xkcd.com/*"
],
"chrome_url_overrides": {
"newtab": "index.html"
}
}
index.html
<html>
<head>
<title>New Tab</title>
<script src="jquery-2.1.1.min.js"></script>
<script src="testcode.js"></script>
</head>
<style>
h1 {
font-family: Helvetica;
color:#3498db;
font-weight: 100;
}
.container {
text-align: center;
background-color: #ecf0f1;
}
}
</style>
<body bgcolor="#ecf0f1">
<div id="xkcdcontent" class="container"></div>
</body>
</html>
testcode.js
var x = Math.floor((Math.random() * 1420) + 1);
$.ajax({
url: "http://dynamic.xkcd.com/api-0/jsonp/comic/"+ x +"?callback=?",
dataType: "json",
jsonpCallback: "random",
success: function(data) {
$("#xkcdcontent").append(
$("<h1 style=text-align:center;/>").text(data.title),
$("<img align=middle/>").attr({
src: data.img,
title: data.alt,
alt: data.title
})
);
}
});
Upvotes: 1
Views: 376
Reputation: 14657
You shouldn't use jsonp from an extension, as it involves execution of code provided by the server, and that's what the error is about. You can access the json directly using:
url: "http://xkcd.com/"+ x +"/info.0.json",
Remember to update the permissions in your manifest to allow this host. And remove the jsonpCallback
field from your parameter.
Upvotes: 3