Can't load facebook js sdk from Chrome extension - facebook

Question

I'm trying to use facebook sj sdk in a Chrome extension.
Im doing this on my extension init:
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId: 'APP_ID', // App ID from the App Dashboard
//channelUrl : '//www.example.com/', // Channel File for x-domain communication
status: true, // check the login status upon init?
cookie: true, // set sessions cookies to allow your server to access the session?
xfbml: true // parse XFBML tags on this page?
});
// Additional initialization code such as adding Event Listeners goes here
console.log(FB);
};
// Load the SDK's source Asynchronously
(function(d, debug) {
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement('script');
js.id = id;
js.async = true;
js.src = "http://connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";
ref.parentNode.insertBefore(js, ref);
}(document, /*debug*/false));
I'm getting this error:
Refused to load the script 'http://connect.facebook.net/en_US/all.js' because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".
I have the permissiosn in manifest set to http://*/. How can I load the sdk from an extension?

Answer 1

This is because you are trying to load an external script from your Chrome extension. For security reasons to prevent cross-site-scripting you need a special permission in your manifest.json file.
"content_security_policy": "script-src 'self' https://connect.facebook.net; object-src 'self'"
Make sure you use https:// instead of http://.