authenticate a Chrome Extension with Facebook

authenticateChromeExtensionWithFacebook.md

// To download the Facebook SDK and access the Graph API, you should
// update the content security policy in your manifest.json with the below
"content_security_policy": "script-src 'self' https://connect.facebook.net https://graph.facebook.com; object-src 'self'"

// The rest of the code below can be added to the javascript file of
// one of your UI pages

// Download Facebook's Javascript SDK as shown in Facebook's docs.
// Note, you must call "https://connect.facebook.net/en_US/sdk.js"
// rather than letting it simply pre-pend the chrome extension protocol,
// which is chrome-extension://
window.fbAsyncInit = function() {
      FB.init({
        appId            : '<your-app-id>',
        autoLogAppEvents : true,
        xfbml            : true,
        version          : 'v2.10'
      });

      FB.AppEvents.logPageView();
    };

    (function(d, s, id){
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {return;}
      js = d.createElement(s); js.id = id;
      js.src = "https://connect.facebook.net/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

// Note, I am using ES2015 syntax and features below.
// First, use Chrome's API chrome.identity.launchWebAuthFlow() to retrieve
// a redirect URL from Facebook
authenticateWithFacebook = () => {
    return new Promise((resolve, reject) => {
      const TYPE = 'token';
      const RANDOM_STRING = uuid.v4();
      // provides you a redirect url of the form
      // https://<chrome-id>.chromiumapp.org/. This is helpful as auth
      // providers don't handle redirects to URLs using the chrome
      // extension protocol chrome-extension://
      const URI = chrome.identity.getRedirectURL();
      const AUTH_URL = `https://www.facebook.com/v2.10/dialog/oauth?
            client_id=${CLIENT_ID}
            &redirect_uri=${URI}
            &state=${RANDOM_STRING}
            &response_type=${TYPE}`;
  
      chrome.identity.launchWebAuthFlow({
        url: AUTH_URL,
        interactive: true,
      }, function(redirectURL) {
        const searchParams = new URLSearchParams(redirectURL)
        const accessToken = searchParams.get('access_token');
        const secondsToExpiration = searchParams.get('expires_in');
        const tokenExpiration = Date.now() + secondsToExpiration * 1000
        
        const error = searchParams.get(URI + '?error')
        
        if (redirectURL == null) {
          reject(chrome.runtime.lastError.message)
        } else if (error) {
          reject(error);
        } else {
          resolve(accessToken);
        }
      });
    });
  }
  
  // Pass the access token your received from Facebook into a new function 
  // which calls the Groups API
  loadGroupFeed = (accessToken) => {
    return new Promise((resolve, reject) => {
      FB.api(
        "/<Group-ID-here>/feed",
        { access_token: accessToken },
        function (response) {
          if (!response || response.error) {
            reject(response.error)
          } else {
            resolve(response)
          }
        }
      );
    });
  }

Oh, I see, I think. The *. is based on the chrome extension ID, is that right? So maybe it doesn't change?