Facebook login and share not working in Chrome extension because of app domain

Question

I'm new to creating extensions so please bear with me.I'm trying to create an extension that shares the current page URL via Facebook. I followed the instructions Facebook developers site and created a project but i don't know what to put up as the app domain because local host works but chrome-extension://"id" doesn't.

On clicking share button, Error appears"Can't Load URL: The domain of this URL isn't included in the app's domains. To be able to load this URL, add all domains and subdomains of your app to the App Domains field in your app settings." What do I put as the app domain and url?

Answer 1

I had the same problem. This is my solution:

1. Turn on Embedded Browser OAuth Login in facebook login settings (https://developers.facebook.com/apps/ -> choose your app -> Add product)
2. Implement manually login flow (https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow). Open oauth url in new tab, listen on changes and than when tab update to success page get from url access token, save token to storage and remove tab.
3. User facebook graph api (https://developers.facebook.com/docs/graph-api)

Answer 2

Use chrome.identity api to avoid protocol issue. It's looks like:

let options = {
    interactive: true,
    url: 'https://www.facebook.com/dialog/oauth?' +
      stringifyQuery(Object.assign({
        app_id: 'your app id here',
        redirect_uri: `https://${chrome.runtime.id}.chromiumapp.org/provider_cb`,
        response_type: 'token',
        access_type: 'online',
      }))
  };

  chrome.identity.launchWebAuthFlow(options, function (redirectUri) {
    if (chrome.runtime.lastError) {
      callback(new Error((chrome.runtime.lastError as string)));
      return;
    }
    const response = parseUrl(redirectUri);
    access_token = response[`#access_token`];
    callback(null, access_token);
  });