Can I use Google drive for chrome extensions (not App)

Question

I have a chrome extension (not App),Its a mashup of data from free third parties. I don't maintain a server for my extension.

Can i use Google drive to save user's data using users account, so it can be shared by different computers?

Answer 1

Yes, you can! Check out this other StackOverflow answer that explains how to use the google-api-javascript-client library to send data to the Google Drive API.

You might also be interested in this blog post explaining how to mash up Web Intents and the Google Drive API.

Answer 2

Yes, here is a short guide :)

---

Setting up Your Project

First, you will need to:

1. Follow the steps outlined in the official Google Drive API docs to create a "Cloud Platform project" and enable the "Drive API".
2. Follow steps outlined in the official Chrome Extension developer docs to get an "OAuth2 Client ID" for your extension and setup your manifest.json.

Your manifest.json should now have some extra fields, something like this:

// manifest.json  "permissions": [     "identity",     "https://www.googleapis.com/*" ],  "oauth2": {     "client_id": "YOUR_CLIENT_ID",     "scopes": [         "https://www.googleapis.com/auth/drive.appdata",         "https://www.googleapis.com/auth/drive.file"     ] },  "key": "YOUR_APPLICATION_KEY", 

You are now ready to use the Google Drive API!

---

Documentation

The docs for using Google APIs can be found here (this is not specific to Google Drive):

1. How to make API requests using the JavaScript Client Library
2. How to use CORS to access Google APIs

The reference for the Google Drive API can be found here, with examples found here.

Note: User authentication can be handled somewhat differently in chrome extensions compared to the methods used in the above docs. Refer to the examples below to see how the Chrome Identity API can be used for authentication.

---

Examples

To create a file:

chrome.identity.getAuthToken({interactive: true}, token => {     var metadata = {         name: 'foo-bar.json',         mimeType: 'application/json',         parents: ['appDataFolder'],     };     var fileContent = {         foo: 'bar'     };     var file = new Blob([JSON.stringify(fileContent)], {type: 'application/json'});     var form = new FormData();     form.append('metadata', new Blob([JSON.stringify(metadata)], {type: 'application/json'}));     form.append('file', file);      var xhr = new XMLHttpRequest();     xhr.open('POST', 'https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart');     xhr.setRequestHeader('Authorization', 'Bearer ' + token);     xhr.responseType = 'json';     xhr.onload = () => {         var fileId = xhr.response.id;         /* Do something with xhr.response */     };     xhr.send(form); }); 

To fetch file content:

chrome.identity.getAuthToken({interactive: true}, token => {     var xhr = new XMLHttpRequest();     xhr.open('GET', 'https://www.googleapis.com/drive/v3/files/YOUR_FILE_ID?alt=media');     xhr.setRequestHeader('Authorization', 'Bearer ' + token);     xhr.responseType = 'json';     xhr.onload = () => {         /* Do something with xhr.response */     };     xhr.send(); }); 

To overwrite existing file content:

chrome.identity.getAuthToken({interactive: true}, token => {     var xhr = new XMLHttpRequest();     xhr.open('PATCH', 'https://www.googleapis.com/upload/drive/v3/files/YOUR_FILE_ID?uploadType=media&access_token=' + token);     xhr.responseType = 'json';     xhr.onload = () => {         /* Do something with xhr.response */     };     xhr.send(JSON.stringify({foo: 'bar'})); }); 

Note: the above examples all use CORS, but you can also use the javascript client library.

For example, to fetch file content with the library:

gapi.client.init({     apiKey: 'YOUR_API_KEY',     discoveryDocs: ['https://www.googleapis.com/discovery/v1/apis/drive/v3/rest'], }).then(() => {     chrome.identity.getAuthToken({interactive: true}, token => {         gapi.auth.setToken({             'access_token': token,         });          gapi.client.drive.files.get({             'fileId': 'YOUR_FILE_ID',             'alt': 'media'         }).then(res => console.log(res))     }); }); 

---

Further reading:

Cross-Origin XMLHttpRequest in Chrome Extensions

OAuth 2.0 for JavaScript Web Apps