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

Answer 1

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