Can my extension get a user's e-mail address from Google Chrome?

Question

I\'ve got an extension for which some users contribute money or effort. I\'d like to be able to identify those users by their e-mail addresses, so I can display a \"Thank You!\"

Answer 1

I'm trying to do something similiar myself. I'm trying to get an ID that's based off their google account so that I can store some cloud data for the users. I believe you can get the email address through the same method, but they will have to approve permissions. If I have success, I'll post the code. Right now I'm trying to get: http://smus.com/oauth2-chrome-extensions/

Working with my own google api key and that.

Not having much success so far. Spent the last two hours implementing the only method that has decent documentation and it's telling me that the feature is depreciated. Might have to try and get this oauth2 crap working after all.

Answer 2

Allright, Got her solved. This website basically describes it:

http://smus.com/oauth2-chrome-extensions/

But not all of it is explained there. So:

First of all you need an API Client ID and Client Secret so that you can be authorized by the user to use their details. The following steps will set that up in a fashion that will work with a chrome extension:

1. Google API Console
2. Create an API
3. Go to API Access
4. Create A Client ID
5. Give it a name and a Logo, This name and logo will be displayed when the user is asked for permission for your application to retrieve their details. Next
6. Select Web Application
7. Click More to get URI and authorized javascript origins
8. Set the Redirect URI to http://www.google.com/robots.txt
9. Delete the javascript origins field so that there is none
10. Click OK or whatever it is, copy the client ID and client secret out for later.

Second you'll need the oauth2 javascript library, which is available here: https://github.com/borismus/oauth2-extensions/tree/master/lib

You'll need to put that in a folder called oauth2 in the same directory as your html file.

In you html file add the following stuff:

<script type="text/javascript" src="oauth2/oauth2.js"></script>
<script type="text/javascript">
var googleAuth = new OAuth2('google', {
  client_id: ' $(YOUR CLIENT ID HERE) ',
  client_secret: ' $(YOUR CLIENT SECRET HERE) ',
  api_scope: 'https://www.googleapis.com/auth/userinfo.email'
});

googleAuth.authorize(function() {
  // We should now have googleAuth.getAccessToken() returning a valid token value for us 
  // Create an XMLHttpRequest to get the email address 
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() { 
    if( xhr.readyState == 4 ) {
      if( xhr.status == 200 ) { 
        var parseResult = JSON.parse(xhr.responseText);
        // The email address is located naw: 
        var email = parseResult["email"];
      }
    }
  }
  // Open it up as GET, POST didn't work for me for the userinfo 
  xhr.open("GET","https://www.googleapis.com/oauth2/v1/userinfo",true);
  // Set the content & autherization 
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.setRequestHeader('Authorization', "OAuth " + googleAuth.getAccessToken() );
  xhr.send(null);
  // Debugging stuff so we can see everything in the xhr.  Do not leave this in production code 
  console.log(xhr);
});</script>

In your manifest.json you need:

"permissions": ["https://accounts.google.com/o/oauth2/token", "https://www.googleapis.com/oauth2/v1/userinfo"]

Also in the manifest file you will need:

"content_scripts": [   {
    "matches": ["http://www.google.com/robots.txt*"],
    "js": ["oauth2/oauth2_inject.js"],
    "run_at": "document_start"   }

That should pretty much take care of it.