Google Chrome Extension + Login with Facebook + Parse

Question

I'm trying to build a google chrome extension, a use case requires that users can login with Facebook and share via a post to their Facebook wall.

The correct application flow would be as such:

1. User click google chrome extension - summons extension page
2. User clicks "login with facebook" on the extension page (or in a new tab) the users then see the "approve app" from Facebook
3. The user approves the app
4. The user is directed to a new page that thanks them for installing and processes all the needed user information OR the user is sent back to the google chrome extension (better way)
5. If the user is not sent back to the google chrome extension, they should be told to do so, but at this point how to get the data to the google chrome extension?
6. The user opens to the Google chrome extension, they should now see "Hi John" or similar instead of "Login with Facebook"
7. The user can no post to Facebook

My major hick-ups are logging in with Facebook, and getting the data back to the extension.

I've created a Facebook app, done most of the coding specific to the app, I'm trying to keep the app just javascript (but I can add in php if there is no other way), tried using the standard Facebook javascript, and tried using the desktop client for Facebook.

Anyone else gone through this process of connecting Google Chrome Extensions and Facebook login before?

As a final note, I'm trying to with with Parse for this project, so if you have any extra insite on that it would be great too!

---

A good example of what I'm trying to accomplish is similar to what Any.do https://chrome.google.com/webstore/search/any.do?utm_source=chrome-ntp-icon

Answer 1

I had this kind of problem lately ;). It's a bit complicated, but I'll try to explain it in the simplest way.

Put somewhere in your extension (maybe options page) link "login with facebook" that redirects to: https://www.facebook.com/dialog/oauth?client_id=<APP_ID>&response_type=token&scope=<PERMISSIONS>&redirect_uri=http://www.facebook.com/connect/login_success.html

When someone clicks on this link, will be asked to give permissions, etc (facebook page). If someone would agree, the page will load: http://www.facebook.com/connect/login_success.html with parameters access_token and expires_in in address.

Now, background page should have script like this:

var successURL = 'www.facebook.com/connect/login_success.html';

function onFacebookLogin(){
  if (!localStorage.getItem('accessToken')) {
    chrome.tabs.query({}, function(tabs) { // get all tabs from every window
      for (var i = 0; i < tabs.length; i++) {
        if (tabs[i].url.indexOf(successURL) !== -1) {
          // below you get string like this: access_token=...&expires_in=...
          var params = tabs[i].url.split('#')[1];

          // in my extension I have used mootools method: parseQueryString. The following code is just an example ;)
          var accessToken = params.split('&')[0];
          accessToken = accessToken.split('=')[1];

          localStorage.setItem('accessToken', accessToken);
          chrome.tabs.remove(tabs[i].id);
        }
      }
    });
  }
}

chrome.tabs.onUpdated.addListener(onFacebookLogin);

And this is how you get access token from facebook. Now you can send requests to https://graph.facebook.com.

Hope I helped ;)