Can't load facebook js sdk from Chrome extension

Question

I am trying to use facebook sj sdk in a Chrome extension. I do this in my init extension:

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 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 get this error:

Refuse to download 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 permissiosn in the manifest set to http://*/ . How to download sdk from 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 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: //.