Getting Facebook profile_id and putting it in a url, as a Chrome Extension

Question

For starters, I don't have much knowledge of JavaScript but I think I know enough to get the job done, I just need some pointers.

I'm trying to create an extension that will grab the profile_id from the current Facebook page that is open, and then put that in a URL and display the new page, e.g., https://www.facebook.com/search/profileid/photos-of

Unfortunately I can't seem to find any good documentation of how to do so. Displaying the new page shouldn't be an issue, but I don't know enough about JavaScript to pull the ID from a page. All the searching I've done tells me I should be using the Facebook Graph API, but I don't know where to get it or how to use it. Can anyone give me any tips or point me in the right direction, preferably to some tutorial that doesn't assume I've been using JavaScript and the Graph API for the past few years.

score 1 · Accepted Answer · edited May 23 '17 at 12:32

You don't have to use Graph API. Just open any page source in devtools (F12) and find (Ctrl-F) where profile ID is, then extract it from the most easy to process spot:

<meta property="al:android:url" content="fb://page/123456789012345">

Can be extracted in a content script with this code:

document.querySelector('meta[property="al:android:url"]').content

Your extension should have an event page that declares a listener for the browser toolbar button:

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.executeScript(
        tab.id,
        {code: "document.querySelector('meta[property=\"al:android:url\"]').content"},
        function(results) {
            var profileID = results[0].split('/')[3];
            chrome.tabs.create({
                url: 'https://www.facebook.com/search/' + profileID + '/photos-of',
                active: true
            });
        }
    );
});

Your manifest.json file should have at least "activeTab" permission.

There are lots of things to improve in the above code that's just a starting point.
Examine official sample extensions code to see various techniques in action.
Consult the documentation and API reference.
Always use the debugger before asking (tutorial, how to debug background/event pages)!

Getting Facebook profile_id and putting it in a url, as a Chrome Extension

1 Answers1