Chrome Extension Error "Script -src" (Self Teach)
I am learning JavaScript after learning C ++ in school and I thought it would be good practice to try and build a Chrome extension. I am trying to access the OpenWeatherMap API to get the city id in order to search for the weather.
Here is the part of the code 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 got from Chrome:
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 looks like Chrome extensions are very strict about what you can and cannot do (ex: cannot inline javascript). Not very familiar with web development, I'm not really sure where to start looking for a solution to this problem.
The url returns (I believe) JSON but starts with an optional one ? ( and ends ) .
Thanks for the help!
Edit:
Here is a screenshot of the error I took. Looks like red highlighted text from jQuery. Perhaps the URL I am passing in is not being handled by $ .getJSON ()?
Edit 2:
I added the following suggestion as suggested by meda to my manifest, but the error still persists:
"permissions": [
"http://api.openweathermap.org/*"
]
source to share
The url includes callback=?
, this is a generic pattern for JSONP where the APIs that support it will wrap the JSON in a simple JavaScript function, The response data is passed to the JS function and escape the XHR browser restrictions. Just remove callback=?
from the API url and you should be fine.
source to share