How to integrate Google Drive functionality in a Firefox add-on?

Other Questions Google drive
1

Hey folks, I’m working on a Firefox extension and I’m stuck trying to implement Google Drive features. I’ve been looking at the JavaScript SDKs but they’re not playing nice with the extension environment.

The client-side SDK needs window, which isn’t available in extensions. I tried the server-side SDK with Node.js, but it falls apart when I use browserify to make it work in Chrome.

I got this Node script working:

const { google } = require('googleapis');
const promptUser = require('prompt-sync')();

const CREDS = {
  id: 'your_client_id',
  secret: 'your_client_secret',
  redirect: 'urn:ietf:wg:oauth:2.0:oob'
};

const AUTH = new google.auth.OAuth2(CREDS.id, CREDS.secret, CREDS.redirect);

const authUrl = AUTH.generateAuthUrl({
  access_type: 'offline',
  scope: 'https://www.googleapis.com/auth/drive.file'
});

const authCode = promptUser('Enter auth code: ');

AUTH.getToken(authCode, (err, tokens) => {
  if (err) {
    console.log('Auth failed');
    return;
  }
  console.log('Auth successful');
  AUTH.setCredentials(tokens);
});

But when I try to adapt it for the extension, I get errors. Am I stuck using plain REST calls? Any ideas on how to make this work in a Firefox extension?

2

I’ve encountered similar challenges integrating Google Drive with browser extensions. One approach that worked for me was using the Google Drive REST API directly, as mentioned by AdventurousHiker17. However, I found that implementing the OAuth 2.0 flow manually can be quite complex.

An alternative solution I’ve successfully used is the chrome.identity API, which Firefox also supports for cross-browser compatibility. It simplifies the OAuth process significantly. You can use it to obtain an auth token, then make REST calls to the Google Drive API using fetch().

Here’s a basic example of how to initiate the auth flow:

browser.identity.launchWebAuthFlow({
  url: 'https://accounts.google.com/o/oauth2/auth?...',
  interactive: true
}).then(handleAuthToken);

This approach avoids the need for client-side SDKs and provides a more seamless integration with the extension environment.

3

As someone who’s wrestled with Google Drive integration in browser extensions, I can relate to your frustration. Have you considered using the WebExtensions API? It’s supported by Firefox and provides a way to handle OAuth 2.0 authentication.

I’ve had success using browser.identity.launchWebAuthFlow() to initiate the OAuth process. Once you’ve got the auth token, you can make direct REST calls to the Google Drive API using fetch().

One gotcha to watch out for: make sure you’ve added the necessary permissions in your manifest.json file. You’ll need ‘identity’ and probably ‘https://www.googleapis.com/*’ in your permissions list.

Also, don’t forget to register your extension’s ID in the Google Developer Console as a valid redirect URI. This tripped me up for a while until I figured it out.

It’s a bit of a learning curve, but once you get it working, it’s pretty smooth sailing from there. Good luck with your project!

4

hey there! i’ve had similar issues. have you tried using the google drive rest api directly? it’s a bit more work, but it might be easier to integrate with firefox extensions. you could use fetch() for api calls and handle auth with the browser.identity api. just a thought!