4

I am self-learning JavaScript after learning C++ in school, and I thought it would be good practice to try to build a Chrome Extension. I am trying to access OpenWeatherMap's API to get the city ID to do a weather search.

Here is the part of the code that is causing the problem:

var cityParam = $('#cityInput').val(); //ex. of cityParam = "New York"
        var cityURL = "http://api.openweathermap.org/data/2.5/find?callback=?&q="+ cityParam + "&type=like&sort=population&cnt=30";

        var cityJSON;

        $.getJSON(cityURL, function(data) {
            cityJSON = data;
}

The error I received from Chrome was: 

Refused to load the script [url] ... because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:".

I did a Google search and it seems like Chrome Extensions are very strict in what you can and cannot do (ex: cannot inline javascript). Not being very familiar with web development, I'm not quite sure where to start looking on how to solve this problem.

The URL returns (I believe) a JSON, but it starts with an extra ?( and ends with a ).

Thanks for the help!

Edit:
Here is a screenshot of the error I took. It appears the red highlighted text is from jQuery. Perhaps the URL I am passing in cannot be processed by $.getJSON()? enter image description here

Edit 2:
I added the following to my manifest as suggested by meda, but the error still persists:

"permissions": [
    "http://api.openweathermap.org/*" 
 ]
Kevin
  • 753
  • 2
  • 8
  • 18
  • This might help also: http://stackoverflow.com/questions/25867584/extension-refuses-to-load-the-script-due-to-content-security-policy-directive – igauravsehrawat Mar 07 '16 at 18:19
  • 3
    if your target endpoint supports https, then simply add this line at `manifest.json`: `"content_security_policy":"script-src 'self' https://example.com; object-src 'self'"` – makerj May 04 '16 at 06:50

2 Answers2

2

The URL includes callback=? this is a common pattern for JSONP where APIs that support it will wrap JSON in a simple JavaScript function. The response data gets handed to the JS function and avoids browser XHR restrictions. Simply remove callback=? from the API URL and you should be fine.

abraham
  • 46,583
  • 10
  • 100
  • 152
  • thats unrelated to his issue and thus not a valid answer. – Zig Mandel Jul 21 '15 at 13:33
  • 1
    @ZigMandel nope. `Refused to load the script` is caused because `callback=?` tells the server to return JavaScript instead of JSON. – abraham Jul 21 '15 at 14:21
  • no. see the other answer and reason to close as dup thou yours seems like a 2nd error. hes asking why it refuses to load thou. – Zig Mandel Jul 21 '15 at 14:23
  • 1
    @ZigMandel if you look at the answer of the Q this was marked as dup for, it says the same thing my answer does. `$.getJSON('URL which does NOT contain callback=?', ...);` – abraham Jul 21 '15 at 14:26
  • grr can't upvote you unless you make an edit (says s.o.) add a space or something – Zig Mandel Jul 21 '15 at 16:55
-1

It's not the JSON that is invalid, it's a restriction of chrome apps for security purposes.

You will need to give your app permission to load an external url.

This is done in the manifest file

"permissions": [
    "http://api.openweathermap.org/*" 
]
meda
  • 45,103
  • 14
  • 92
  • 122
  • Thanks! I still seem to get the _Refused to load the script_ error after adding the URL in the manifest file. The red underlined text appears to be in jQuery. I have updated the first post to show the screenshot I took. – Kevin Jul 21 '15 at 00:23
  • Same for me. Adding this to `manifest.json` didn't help. – Sam Jan 07 '16 at 19:38
  • I can confirm, just adding this does not resolve loading js from a external url. – Abhishek Ranjan Jan 09 '20 at 14:31