Question

I’ve already registered my app on Facebook developer and got an ID, but had hard time to characterize the my app(chrome extension), it’s website app, mobile app, facebook app? What I wanna do is a simple extension that allows users simply to click on it, and the background JavaScript calls the Facebook API to ask the users to log in like this.

window.fbAsyncInit = function() {
    FB.init({
        appId : '123456789',
        status : true,
        cookie : true,
        xfbml : true,
        oauth : true,
    });
};

chrome.browserAction.onClicked.addListener(function(tab) {
    FB.login(function(response) {
        if(response.authResponse) {
            alert('Welcome!  Fetching your information.... ');
            FB.api('/me', function(response) {
                console.log('Good to see you, ' + response.name + '.');
            });
        } else {
            alert('User cancelled login or did not fully authorize.');
        }
    });
});

However, it pops up a window that says an error occurred, it is another way of saying “I am not authorized”, how do I specify my app’s URL on the Facebook developer page, because the extension’s URL is a garbage like this chrome extension://asdjlajsldj/ or anyone knows any workaround? Thank you

Answer 1

I would assume that Facebook’s API uses OAuth 2 to let applications access users data. Google provides a way of doing this with an example in their API section. I have also have posted an alternative method on GitHub. Note that my method will require some alternations to fit Facebook’s interface but the idea is the same (I have a GitHub branch to do this with GitHub).

Essentially your extension must get an access token for the user from Facebook, then using this token as a parameter you can query private data from the API. What makes it seem difficult is the fact the the chrome extensions are sandboxed and have no return URL, but using one of the two methods above should do you just fine.

Good Luck!