CODEWITHSUNDEEP
javascriptgoogle-chrome-extensiongoogle-api
MarksCode
MarksCode

Reputation: 8604

Chrome extension gmail API cookiePolicy?

I'm building a chrome extension that will read the user's emails and check them for typos. However, when trying to authenticate the user in my background.js I'm running into this error:

uO {message: "Invalid cookiePolicy", stack: "gapi.auth2.ExternallyVisibleError: Invalid cookieP… at handleResponse (extensions::sendRequest:67:7)"}

Here is how I'm trying to authenticate them:

background.js

var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "https://apis.google.com/js/client.js?onload=callbackFunction";
head.appendChild(script);

chrome.identity.getAuthToken({interactive: true}, authorize);

function authorize(token) {
    gapi.auth.authorize({
        client_id: '800382879116-k3luktdc1lmb1e1fml8i8u.apps.googleusercontent.com',
        immediate: true,
        scope: 'https://www.googleapis.com/auth/gmail.readonly'
    },
    function(result){
        console.log(result);
        gapi.client.load('gmail', 'v1', callback);
    });
}

background.html

<!DOCTYPE html>
<html>
    <body>
        <script src='scripts/background.js'></script>
    </body>
</html>

manifest.json

  {
    "name": "Gmail Typo Analyzer",
    "version": "0.1",
    "description": "Gmail Typo Analyzer",
    "permissions": [
      "identity",
      "storage"
    ],
    "content_security_policy": "script-src 'self' https://apis.google.com; object-src 'self'",
    "oauth2": {
      "client_id": "82879116-k3luktdc1li8u.apps.googleusercontent.com",
      "scopes": [
          "https://www.googleapis.com/auth/gmail.readonly",
          "https://www.googleapis.com/auth/userinfo.email"
      ]
    },
    "browser_action": {
      "default_popup": "popup.html",
      "default_icon": "images/Icon_16.png"
    },
    "background": {
      "page": "background.html",
      "persistent": false
    },
    "icons": {
      "16": "images/Icon_16.png",
      "32": "images/Icon_32.png",
      "48": "images/Icon_48.png",
      "128": "images/Icon_128.png"
    },
    "manifest_version": 2,
    "key": "c0Kn5f+t92r4P8lmmoDlKtQ6X9Q42UfFtkkiSRBAVMPHnIHqOQvYC67VczJefSNTGpUYa8+wQDFoFj/clH9SfR+BvOGgI6BUVKBNGGoFS"
  }

I'm super lost right now as their doesn't seem to be a definitive guide on achieving what I'm trying to do anywhere. Does anyone know what I might be doing wrong?

Upvotes: 9

Views: 1296

Answers (2)

Sam Robertson
Sam Robertson

Reputation: 9

I used to get that cookie error too, but for Chrome extensions I only know how to load them from unpacked in the Extensions tab. So using gapi directly never worked for me.

As Ivan mentioned, Chrome extensions have this support "built-in" by setting the "oauth2" section in the manifest. Then you can call the APIs directly with Ajax like Ivan's example.

To build on Ivan's example, this is my working code to get a list of contacts. I haven't read from the XHR object yet, but Fiddler confirms that the data is coming back fine without any cookie or CORS errors. Of course make sure you enable these APIs in console.developers.google.com.

chrome.identity.getAuthToken({ interactive: true }, authorize);

function authorize(token) {
    if (token) {
        console.log(token);
        var xhr = new XMLHttpRequest();
        xhr.open('GET',
            "https://people.googleapis.com/v1/people/me/connections?personFields=names");
        xhr.setRequestHeader('Authorization',
            'Bearer ' + token);
        xhr.send();

        //user has given authorization, use token for requests.
        //...
    } else {
        console.log('No authorization. Error: ' + chrome.runtime.lastError);
    }
};

Upvotes: 0

Iv&#225;n Nokonoko
Iv&#225;n Nokonoko

Reputation: 5118

You didn't post your manifest.json file, where you would set the oauth2 credentials, so I would try something like:

manifest.json

...
"oauth2" : "client_id": "800382879116-k3luktdc1lmb1e1fml8i8u.apps.googleusercontent.com",
           "scopes": [
               "https://www.googleapis.com/auth/gmail.readonly"
           ]
...

background.js

chrome.identity.getAuthToken({interactive: true}, authorize);

function authorize(token) {
    if (token) {
         //user has given authorization, use token for requests.
         //...
    } else {
         //no authorization received.
         console.log('No authorization. Error: ' + chrome.runtime.lastError);
    }
};

And you don't need to load Google API client, you can access Gmail's Restful API with XMLHttpRequests or Fetch API.

Upvotes: 4

Related Questions