facebook authentication using javascript via Chrome extension

I am trying to display a simple alert window using my chrome extension when a user is logged on to facebook. I have the javascript sdk initializing code and also the code to get login status in my background.html page. My manifest.json file calls the background page correctly.

I am unable to place a breakpoint on the background.html page. I want to know if this is how i should go about declaring javascript facebook sdk and checking if a user is logged in.

<div id="fb-root"></div>

<script src="http://connect.facebook.net/en_US/all.js"></script>

<script>

window.fbAsyncInit = function() {
    FB.init({
      appId  : 'my App id (i have my app id)',
      status : true, // check login status
      cookie : true, // enable cookies to allow the server to access the session
      xfbml  : true  // parse XFBML
    });
  };

  (function() {
    var e = document.createElement('script');
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
  }());

 FB.getLoginStatus(function(response) {
    if (response.authResponse) {
          alert("logged in");} 
    else {
        // no user session available, someone you dont know                         开发者_如何学Go                                                                                   
    }
});

 </script>

You have a lot of issues in your code, lets fix it first and then explain:

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
        appId: 'your app id',
        status: true,
        cookie: true,
        xfbml: true,
        channelUrl : 'http://WWW.MYDOMAIN.COM/channel.html',
        oauth  : true
    });

    FB.getLoginStatus(function(response) {
        if (response.authResponse) {
              alert("logged in");} 
        else {
            // no user session available, someone you dont know                                                                                                            
        }
    });
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

Now the points to consider:

1. Read the Javascript SDK documentation
2. Use the oauth flag to enable OAuth 2.0
3. You need to either use asynchronous loading or the standard method but not both of them (I'm loading it asynchronously here)
4. Put all your Facebook calls in the fbAsyncInit
5. Add a channel file
6. Read these articles one, two

Since this is being done in a background page, you have to make sure the authentication is being done in another page because the background page is headless, there is no UI. So how would the user click on authorize?

I don't know the Facebook API, but since it is OAuth2, what I would do is create a separate html page called, "facebook_auth.html" and you place the authentication code there. After it has been authorized, follow what ifaour stated. HE seems he knows what he is doing. Your background page will just open that new tab (chrome.tabs.create) to the authentication.

Take a look at this tutorial, and apply it to Facebook: http://code.google.com/chrome/extensions/tut_oauth.html