Chrome extension refusing to load Jquery script / make JSON call

Question

A bit of a novice attempting to create my first Chrome extension here. I've verified my JQuery and html code to be working by running it via opening it in a browser in a normal .html file that calls the .JS file.

However, the Chrome extension with the same code fails to run, seemingly due to CSP issues. (I am calling the ajax library in my html via https)

Refused to load the script
'http://www.reddit.com/r/abandonedporn/.json?jsonp=jQuery111307901595502626151_1438751974832&_=1438751974833'
because it violates the following Content Security Policy directive: 
"script-src'self' https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js". send @ library.js:5

I've modified my manifest.json file with every last thing that I thought necessary, including:

{"content_security_policy": "script-src 'self' https://ajax.googleapis.com/*; object-src 'self'"},

"permissions": [
"http://www.reddit.com/r/abandonedporn/.json?jsonp=?",
"http://www.reddit.com/*", "https://www.reddit.com/*",
"http://www.reddit.com/r/abandonedporn/",
"https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js/",
"http://www.reddit.com/r/abandonedporn/.json?jsonp=jQuery111309090442832093686_1438671168851&_=1438671168852",
"http://*/*", "https://*/*",
"http://reddit.com/json*",
"http://www.reddit.com/r/abandonedporn/*"],

and

"content_scripts": [
{
  "matches": [
    "https://www.google.com/*",
    "http://www.reddit.com/abandonedporn/*"
  ],
  "js": [
    "src/inject/inject.js",
    "src/content.js",
    "src/override/get_pics.js",
    "src/override/get_pics2.js",
    "src/override/library.js"

   ]
  }
 ]
}

Lastly, my actual Jquery script: (Note that changing ".getJSON" to ".getScript" did not help.)

document.addEventListener('DOMContentLoaded', function () {

  $.getJSON("http://www.reddit.com/r/abandonedporn/.json?jsonp=?",   function(data) { 

$.each(data.data.children, function(i,item){

      $("<img/>").attr("src", item.data.url).appendTo("#images");

      });

   });

});

possible duplicate of [How to use jQuery in chrome extension?](http://stackoverflow.com/questions/21317476/how-to-use-jquery-in-chrome-extension) — Zig Mandel, Aug 05 '15 at 13:08
Zig, I understand your concern but I've followed the comments there and there doesn't seem to be a clear cut answer of how to properly fix the issue. — colej4586, Aug 06 '15 at 04:53
but its explained there and the official guides. read about extension permissions. — Zig Mandel, Aug 06 '15 at 05:48

venkat7668 · Accepted Answer · 2015-08-05T06:21:17.173

0

You can't load external (CDN) script files in chrome extension as per new CSP from google. You need to package all your resources, download jquery and access from your package. "jquery.min.js" instead CDN-URL/jquery.min.js. Here is in detail

edited Aug 05 '15 at 06:21

answered Aug 05 '15 at 06:07

venkat7668

2,657
1
22
26

Thanks, so if I wanted to parse pictures from a website such as http://reddit.com/r/pics , is this still possible? – colej4586 Aug 05 '15 at 06:13
Will look into apps but will these be able to provide me with the same new-tab modifications that extensions are able to change? Started this to modify the default new-tab action in Chrome – colej4586 Aug 05 '15 at 06:36
why do you say extensions cant access web services? yes they can just configure the manifest – Zig Mandel Aug 05 '15 at 13:07
also note there are several duplicates to this answer. – Zig Mandel Aug 05 '15 at 13:09
Zig, could you be a bit more specific when you say "configure the manifest"? I've tried many times and that's why I've posted here. An example would be super helpful. – colej4586 Aug 06 '15 at 04:54

Chrome extension refusing to load Jquery script / make JSON call

1 Answers1