8

I know that the Google Drive API allows for drive integration with Chrome Apps, but what about extensions? Can/How do I use the Drive API in a chrome extension? For example I want an extension that will have a popup that list a user's docs, how do I get access to their drive box? I know it starts with authentication, but I'm not sure how to do that either.

Oskar Austegard
  • 4,599
  • 4
  • 36
  • 50
EasilyBaffled
  • 3,822
  • 10
  • 50
  • 87
  • I used chrome.identity to authorize the user and used the oAuthToken generated with fetch request to access/edit user's documents in manifest v3. Check if this helps - https://stackoverflow.com/a/74358255/10217754 – Parth Kapadia Nov 08 '22 at 09:35

4 Answers4

7

Regarding authentication, chrome.identity is the place to start.

Taking a (not so) quick look at the GDrive App I didn't really spot any app-specific stuff (i.e. something not available to extensions). So, I would certainly start by trying to "port" the GDrive App to an extension.

There is, also, this tutorial I totally recommend about Building Apps with AngularJS, which actually walks you through building the GDrive App. It is super cool, has a fairly detailed explanation regarding how to set up authentication related stuff (of course, you'll have to slightly adapt that to apply to an extension) and you can just ignore the AngularJS-related stuff (if you are not interested - although AngularJS is super cool too).

Recommended road-map:

  1. Read the docs about chrome.identity, to gain some understanding regarding the API(*).
  2. Study the tutorial, to understand the basic concepts of the GDrive App.
  3. Study the source code of the GDrive App, to get filled in on the implementation details not covered in the tutorial.
  4. Port the GDrive App to a Chrome Extension. (Feel free to come back here on SO if you stumble upon a specific problem during the process.)

[Check out Zig Mandel's answer below for an interesting alternative.]

sadie parker
  • 349
  • 5
  • 13
gkalpak
  • 47,844
  • 8
  • 105
  • 118
  • Any chance you know anything more about how to adapt it because at the moment that is the problem. Is there someway to fool an app into working as an extension? – EasilyBaffled Nov 08 '13 at 20:09
  • It really is a lot easier than you think. Without taking a deep look into it, you'll have to change `background.js` (probably get rid of it altogether), set `main.html` as your popup, get your own key for the oauth-related stuff and finally slightly change the manifest (remove `app` and add `browser_action` with popup and possibly a `background_page` although that might not be necessary if you can handle anything from within the popup). – gkalpak Nov 08 '13 at 20:17
4

It's incredibly easy.

chrome.identity.getAuthToken() will handle the authorisation and return an access token. You then use that access token to set an http header when calling the Drive API.

There is some sample code here Chrome Manifest with Google API

Community
  • 1
  • 1
pinoyyid
  • 21,499
  • 14
  • 64
  • 115
2

Some answers are using chrome identity or the drive api directly. You dont need to use the drive api directly just to get a file-id from a user's drive. If you use chrome identity you have to include the explicit user authorization when they install/upgrade the extension plus the user is giving permissions to the app when it might not be necessary / more risky to the user. Avoid getting/storing tokens when you dont need to. Google has a library called docpicker which does what you need and doesnt require you to deal with authorization nor does it ask authorization to the user. The catch is that you have to download it and possibly adapt it for use from an extension since files need to be all local in an extension. Ive done it but not for this particular library. Some libraries require that you fiddle with content_security_policy as in: "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",

See https://developers.google.com/picker/docs/index for an example.

Update 13/122013 - Google have said that the Picker will shortly be changed to require an oauth token

pinoyyid
  • 21,499
  • 14
  • 64
  • 115
Zig Mandel
  • 19,571
  • 5
  • 26
  • 36
  • "Identity is not yet available in public chrome" Where did you get that ? – gkalpak Nov 08 '13 at 21:08
  • Yes true its available since chrome29. But all he needs to do is show the filepicker and that doesnt need any oauth. It uses the one ghe browser already has for gdrive. – Zig Mandel Nov 08 '13 at 23:46
  • So, you can view one's files without being authenticated and authorized ? Think again and look deeper :) – gkalpak Nov 09 '13 at 05:51
  • @ExpertSystem first try it, then comment. Ive used the filePicker on several customer projects. Yes, exactly as I said, it does NOT require authentication as it simply loads a drive url on a window. Again, give it a try before you reply. The library does not give the caller accesss to anything besides the ID of the file picked (by the user with a browser action). Go to this Hello world and tell me exactly where does the code deal with or pass an oauth token to the library? https://developers.google.com/picker/docs/index (and then you can undo your -1 :) – Zig Mandel Nov 09 '13 at 18:50
  • I see what you mean. The Google Picker takes care of the required OAuth process. I misunderstood your original statement about _Google Picker's not requiring user authorization_. (It actualy does require authorization, but it is granted implicitely by the user's having logged into his/her Google Account. It is the exact same approach taken by the chrome.identity API, but it is already implemented for us.) – gkalpak Nov 09 '13 at 19:30
  • Regarding the dowvoting: I firmly believe that your answer should be downvoted. While it suggests a probably useful resource, it does not include even a simple link to it and contains at least a couple of pretty inaccurate and misleading claims. Even so, unfortunately, I am **not** the one who downvoted you, so there is nothing I can do ! – gkalpak Nov 09 '13 at 19:30
  • @expertsystem Ok I really dont mind the downvote as I hadnt realized that chrome identity was already out. Now I do think filepicker has auth advantages. If you use chrome identity you have to include the explicit user authorization when they install/upgrade the extension plus the user is giving permissions to the app when it might not be necessary / more risky to the user. – Zig Mandel Nov 10 '13 at 02:48
  • Agreed. Why don't you edit your answer to improve it ? It is for the benefit of the community (and you might also get some upvotes on the side). – gkalpak Nov 10 '13 at 05:39
  • That's better :) I upvoted this one as I find it interesting (plus added a reference in my answer) ! – gkalpak Nov 10 '13 at 15:08
0

https://stackoverflow.com/a/58380137/8627279

https://github.com/malik55khan/speardsheet-reader/

Demo: https://www.loom.com/share/d7d432c513a44b05a615fa0bd170fb23

Create a client-auth key in google console and select chrome extension. after that push the project id and save it. then you will get client_id. Next step create a api key.

add a new project. - select google cloud or Spreadsheet - Enable API.

Hope it will be more helpful.

MALIK KHAN
  • 41
  • 1