CODEWITHSUNDEEP
javascriptgoogle-chrome-extensiongoogle-sheetsgoogle-apigoogle-oauth
Peter
Peter

Reputation: 1128

Google Oauth2 in Chrome Extension in background.js

I am building a Chrome Extension for my personal use (i.e. it will not be packaged and distributed) to dump data from a website into Google Sheets. I'd like to click on the Extension and have it process the data to my sheet. I believe this means I need to do the Oauth flow in background.js.

I did the initial authorization flow by customizing this Google Sheets demo, can't figure out how to make it work in my Extension.

I've tried a number of approaches, including using the chrome.identity API, and gapi.client.init(), and following the Chrome App sample. No dice.

Some of my questions...thanks in advance:

Upvotes: 0

Views: 2044

Answers (1)

lemonshark12
lemonshark12

Reputation: 134

To what extent do Chrome Extensions mirror Chrome Apps? I understand that Chrome Apps are being deprecated, so wondering if the docs are inconsistent.

Extensions and Apps are similar in many ways, however for your situation the main hurdle to overcome is the two handle Google Authentication differently. Extensions have permission limitations, where javascript can't run in certain places. Therefore, Chrome Extensions use chrome.identity in background.js to establish a secure connection and token. The general process to implement it is as follows:

  1. Make a Chrome Extension, zip it, upload to your Google Dev account & get extensionID#
  2. In Google API Console, register an OAuth ClientID# using the extensionID#
  3. Update your Chrome Extension manifest to include an 'oauth2' section with the OAuth ClientID# as well as the scopes you allow, and include 'identity' under "permissions:"
  4. Enable the API of your choosing in the Google API Console and generate a key. Include this key in your background.js file so you can use the API.

Is it possible to do this without packaging and uploading my app? The Oauth credentials page in Console asks for a Web Store URL

No, mainly because you need both the chrome extension and the API to be aware of each other and be 'linked' in a sense so they can be secure and work properly. You can still have a private app however, as you only need to package (.zip it) and upload it into your Developer Dashboard, and you can leave it out of the public Chrome Store by simply not publishing. It can forever linger in 'Draft' stage for your personal use.

Is it acceptable to store a copy of Google's api.js in my extension, or must I load it from https://apis.google.com/js/client.js? If so, For the Chrome App Sample, Where do I get the key included in manifest.json? I've seen instructions like "Copy key in the installed manifest.json to your source manifest" but I don't understand.

You don't need to store a copy within your extension, you can add the following to your manifest.json:

"content_security_policy": "script-src 'self' https://apis.google.com/; object-src 'self'"

and then this at the bottom of your popup.html:

 <script src="https://apis.google.com/js/client.js?onload=onGAPILoad"></script>

It's a rather confusing process without a guide; here is the one that finally made sense of it all for me. This official example from Google is a good one as well.

Is anyone aware of a complete, self-contained Chrome Extension sample?

'self-contained' is a bit tricky here, as the manifest needs to reference keys specific to the OAuth ClientID and API that YOU are utilizing, however this (download link) along with the two links above should be enough to get you to a working extension.

Upvotes: 3

Related Questions