CODEWITHSUNDEEP
javascriptjquerygoogle-chromegoogle-chrome-extensionsoundcloud
idude
idude

Reputation: 4922

Chrome won't load jquery or soundcloud api

I'm trying to build a chrome extension, but for some reason I can't seem to make API requests to SoundCloud or load Jquery.

I know it's because of this:

I will load jquery as such:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

And in my console, I will recieve 

Failed to load resource: net::ERR_FAILED 
chrome-extension://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js

The same thing happens for the soundcloud api:

chrome-extension://api.soundcloud.com/tracks?q=buskers&client_id=xxxxxxxxxx&format=json&_status_code_map[302]=2

Why does chrome-extension// keep coming in front of the urls and how do I stop it?

Upvotes: 1

Views: 959

Answers (2)

Chickenrice
Chickenrice

Reputation: 5727

According to Content Script Policy (CSP), script resource can only be loaded from the extension's package. This will make extensions more secure and ensure that extension will only execute the code you approved.

Solution 1: Download the specific version of jQuery file, include it to your package and then load it into document.

<script src="js/jquery.1.11.1.min.js"></script>

Solution 2: Actually you can relax the limitation by defining the whitelist of resource origins in manifest file. You could refer to this for more details if you have a need to load external js file for some reasons.

"content_security_policy": "script-src 'self' https://ajax.googleapis.com https://api.soundcloud.com/tracks?q=buskers&client_id=xxxxxxxxxx&format=json&_status_code_map[302]=2; object-src 'self'"

Note:

Whitelisting resource only allow to be loaded over the following protocol: HTTPS, chrome-extension, and chrome-extension-resource. Please use https to load the external library if you want to adopt whitelist solution.

Use whitespace to separate domains form each other if you want to define multiple domains in whitelist.

"content_security_policy": "script-src 'self' https://domain1.com https://domain2.com;"

Upvotes: 3

Alien
Alien

Reputation: 3678

try this 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Upvotes: 1

Related Questions