CODEWITHSUNDEEP
javascriptjqueryjsongoogle-chromegoogle-chrome-extension
anuraagy
anuraagy

Reputation: 1479

Can't do HTTP Request with my Chrome Extension

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: 377

Answers (1)

rsanchez
rsanchez

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

Related Questions