4

I'm using a react-chrome-redux stack for my chrome extension. I've tried the Javascript / Node.js quickstarts from the Calendar API but they don't work.

So now I'm trying to retrieve the oAuth2 token via Chrome Identity API, then making a HTTP request to get my data.

manifest.json

"oauth2": {
    "client_id": "CLIENT_ID.apps.googleusercontent.com",
    "scopes": [
      "https://www.googleapis.com/auth/calendar",
      "https://www.googleapis.com/auth/calendar.readonly"
    ]
  },
  "key": APP_KEY}

HTTP request

chrome.identity.getAuthToken({ 'interactive': false }, function(token) {
  var init = { 
    'method' : 'GET',
    'async'  : true,
    'headers': {
      'Authorization' : 'Bearer ' + token,
      'Content-Type': 'application/json'
    },
    'contentType': 'json'
  };

  fetch('https://www.googleapis.com/calendar/v3/calendars/public/events', init)
  .then((response) => response.json()) // Transform the data into json
  .then(function(data) {
      console.log(data);
    })
})

I manage to get a long string of characters from the oAuth2 token, but when I try to make the HTTP request, I get a 404 status error.

I've looked for a long time on Stack Overflow but most questions were not well answered, and there doesn't seem to be a simple way to use the API from a chrome extension.

I really hope someone can help me out here, thanks!

Yan Foto
  • 10,850
  • 6
  • 57
  • 88
user6679132
  • 91
  • 1
  • 4
  • What *exactly* is shown in the [various appropriate consoles for your extension](http://stackoverflow.com/a/38920982/3773011) when you load and execute your extension? – Makyen Jun 27 '17 at 03:00
  • **New tab page**: `Failed to load resource: the server responded with a status of 404 ()`, printing the data returned gives me an `error` object. **Background page**: No error logs. My extension overrides the new tab page, and I'm putting the code on the new tab page for now. – user6679132 Jun 27 '17 at 03:36

1 Answers1

5

@furydevoid figured it out,

Turns out the default calendar keyword is 'primary' and not 'public'

So now I'm doing this for the HTTP request:

  const headers = new Headers({
      'Authorization' : 'Bearer ' + token,
      'Content-Type': 'application/json'
  })

  const queryParams = { headers };

  fetch('https://www.googleapis.com/calendar/v3/calendars/primary/events', queryParams)
  .then((response) => response.json()) // Transform the data into json
  .then(function(data) {
      console.log(data);
    })
  })

For anyone trying to use the Google Calendar API from a chrome extensions,

  1. The Node.js quickstart doesn't really work because Chrome extensions don't really have a 'backend' to execute the scripts (at least for what I tried)
  2. The oAuth dance is a little wonky because you can't simply redirect the user to Chrome://newtab after they've given you permissions, because Chrome://newtab is not really recognised as a safe site to redirect to or something

Anyway here's the solution:

  1. Use Chrome's identity api to retrieve the oAuth2 token: https://developer.chrome.com/apps/app_identity
  2. Use make a direct HTTP request as demonstrated above.

All the best! And thanks to everyone who helped me!

user6679132
  • 91
  • 1
  • 4