Chrome Extension "Script-src" error (self-learning)

Question

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()?

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

"permissions": [
    "http://api.openweathermap.org/*" 
 ]

Solution

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.