Can't do HTTP Request with my Chrome Extension

1
votes

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
            })
        );
    }   
});
1
javascriptjqueryjsongoogle-chromegoogle-chrome-extension

1 Answers

3
votes

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.