Add getProfileUserInfo example to sample identity extension (#1454)

* Add getProfileUserInfo example to sample identity extension

* Clarify UI

* Run prettier

---------

Co-authored-by: Oliver Dunk <oliverdunk@google.com>

api-samples/identity/identity.js

@@ -7,6 +7,8 @@ function onLoad() {
 
   let state = STATE_START;
 
+  document.querySelector('#get-email').addEventListener('click', getEmail);
+
   const signin_button = document.querySelector('#signin');
   signin_button.addEventListener('click', interactiveSignIn);
 
@@ -33,6 +35,22 @@ function onLoad() {
     button.removeAttribute('disabled');
   }
 
+  // Gets the email address for the primary account.
+  // This uses the chrome.identity.getProfileUserInfo API, and does not require
+  // an auth token.
+  function getEmail() {
+    chrome.identity
+      .getProfileUserInfo({ accountStatus: chrome.identity.AccountStatus.ANY })
+      .then((profile_user_info) => {
+        displayOutput(
+          'chrome.identity.getProfileUserInfo() returned: ' +
+            JSON.stringify(profile_user_info)
+        );
+        document.getElementById('email-info').innerText =
+          profile_user_info.email;
+      });
+  }
+
   function changeState(newState) {
     state = newState;
     switch (state) {
@@ -101,6 +119,8 @@ function onLoad() {
     }
   }
 
+  // This fetches user information over the network, providing an access token
+  // scoped to this extension.
   function getUserInfo(interactive) {
     // See https://developers.google.com/identity/openid-connect/openid-connect#obtaininguserprofileinformation
     fetchWithAuth(

api-samples/identity/index.html

@@ -9,12 +9,17 @@
       <h1>Identity API</h1>
       <div class="links">
         Learn more:
-          <a target="_blank" href="https://developer.chrome.com/docs/extensions/reference/api/identity">API docs</a>
-          <a id="_open_snippets" href="https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/api-samples/identity">Source</a>
+        <a target="_blank" href="https://developer.chrome.com/docs/extensions/reference/api/identity">API docs</a>
+        <a id="_open_snippets" href="https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/api-samples/identity">Source</a>
       </div>
       <hr>
     </div>
     <div class="flows">
+      <h2>Query local Chrome account information</h2>
+      <div class="flow">
+        <button id="get-email">Get primary account email address</button>
+        <div id="email-info"></div>
+      </div>
       <h2>OAuth on Google properties</h2>
       <div class="flow">
         <button id="signin">Sign in</button>
@@ -23,8 +28,8 @@
         <div id="user_info"></div>
       </div>
     </div>
-   <div class="log">
+    <div class="log">
       <textarea id="__logarea" disabled></textarea>
-   </div>
+    </div>
   </body>
 </html>

api-samples/identity/manifest.json

@@ -7,7 +7,7 @@
   "background": {
     "service_worker": "main.js"
   },
-  "permissions": ["identity"],
+  "permissions": ["identity", "identity.email"],
   "oauth2": {
     // client_id below is specific to the application key. Follow the
     // documentation to obtain one for your app.