Take the 2-minute tour ×

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

share|improve this question

2 Answers 2

up vote 8 down vote accepted

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);


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

Hope I helped ;)

share|improve this answer
Marcin, thanks for responding. I was doing something similar, I've implemented with your suggestions, but for some reason the access token is always considered in active. I've cleared out the Facebook app from the user profile, and authorize the app, but the returned access token is invalid. Is this because of the process you suggested, or is there another step? –  Scott Roepnack Sep 24 '12 at 19:05
Marcin, after a bit more work I found the rest of the solution, I was not calling the proper url. The correct URL to call (for reference) is https://graph.facebook.com/me/?access_token=<ACCESS_TOKEN> –  Scott Roepnack Sep 24 '12 at 19:27
Great to hear, I am glad you were able to solve this issue ;) –  Marcin Wieprzkowicz Sep 24 '12 at 19:48

Just for future reference, posting here already implemented solution for idea proposed by Marcin on github by @zuzara


share|improve this answer

Your Answer


