Using Facebook sdk with Chrome Extensions

Question

Popup.js file:

window.fbAsyncInit = function() {
                // init the FB JS SDK
                FB.init({
                    appId : ******, // App ID from the app dashboard
                    status : true, // Check Facebook Login status
                    xfbml : false // Look for social plugins on the page
                });

            };

            // Load the SDK asynchronously
            (function(d, s, id) {
                    var js, fjs = d.getElementsByTagName(s)[0];
                    if (d.getElementById(id)) {
                        return;
                    }
                    js = d.createElement(s);
                    js.id = id;
                    js.src = "https://connect.facebook.net/en_US/all.js";
                    fjs.parentNode.insertBefore(js, fjs);
                }
                (document, 'script', 'facebook-jssdk'));

Manifest File:

{
  "manifest_version": 2,

  "name": "Charts",
  "description": "Demo",
  "version": "1.0",
  "content_security_policy": "script-src 'self' 'unsafe-eval' https://connect.facebook.net; object-src 'self'",     
  "permissions": [
    "https://connect.facebook.net/en_US/all.js"
  ],
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  }
}

When I upload the folder which contains the files from my desktop to chrome as an extension I get to errors. However when i open the extension and inspect it i get the following errors:

"Refused to execute JavaScript URL because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' https://connect.facebook.net"."

and

"Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains. about:blank:1"

Any help would be greatly appreciated.

Answer 1

The first error is from Chrome. You need to set content_security_policy but indeed you did. The strange is that your content_security_policy directive totally works for me:

"content_security_policy": "script-src 'self' https://connect.facebook.net; object-src 'self'",

The second error is from Facebook. Because you cant allow a "chrome-extension" pseudoprotocol in the Facebook app settings you should use a login method like this:

https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow/v2.0