How to Use Google Drive API in Javascript with Manifeft V3?

Question

It was long. Closed. Tried to explain. Had things I tried. I delete them all and only leave the original, core question.

I'm trying to make an extension with V3. I want to update a few files in my Drive with it. I got client ID, API key, client secret.

Thanks for your help.

Answer 1

It's actually pretty easy.

Setup a cloud console and get OAuth client ID for a Chome app (Google doesn't tell you this. So you go for web applicaton and stuck there). Add oauth2 key, add your client ID and your scope (which is https://www.googleapis.com/auth/drive.file in this case) as key, also add identity permission in your manifest.json file.

Then inside your service worker write this. It probably has some irrelevant/unnecessary code. I don't really know how it works.

This might have some deficiencies but it's the basic idea.

const fileUpdate = async () => {
    chrome.identity.getAuthToken({
        interactive: true,
    },
    async (token) => {
        await fetch(`https://www.googleapis.com/upload/drive/v3/files/${USER_FILE_ID}`, {
            method: 'PATCH',
            headers: {
                "Authorization": `Bearer ${token}`,
                "Accept": "application/json",
                "Content-Type": "application/json"
            },
            body: text
        })
        .then((response) => {
            return response.json();
        })
        .then((data) => {
            console.log(`fileUpdate result: ${data}`);
        })
        .then((error) => {
                console.log(`fileUpdate errors: ${error}`);
        });
    });
}

Google says it requires authorization and send you there. And that's it. Google leaves you there. I see nothing useful in there.

If you search for Google Drive API in JavaScript you can find this page. It wants and HTML file and use this forbidden line <script async defer src="https://apis.google.com/js/api.js" onload="gapiLoaded()"></script> You can't do that in an extension. It is not allowed. Alternatives like scripting.executeScript() also won't work. At least I couldn't make it work.

If you search more enough you could find this. When you look into the left menu it fees like you should use JavaScript Web Apps because it's JavaScript. But you can't because when you want a token it redirects you to a sign in page. And it's your service worker, it can't go there.

If you try server-side which makes more sense after sign in process but it's kinda same way. Node.js won't work either, it is not allowed in extensions. Looks like you can work around but there has to be an other way.

It's easy to mislead by other peoples' answers. Like the pages I mentioned and like the aswers here or like CORB/CORS errors mentioned by others.

Actually Google Apps Script is a clever way but it had to have a decent way.

Bythe way "host_permissions" doesn't work somehow. I have 2 fetch fetch(https://drive.google.com/uc?id=${FILE_ID}}) and fetch(https://www.googleapis.com/upload/drive/v3/files/${FILE_ID}) but adding https://drive.google.com/* and https://www.googleapis.com/* still makes me get CORS error. Even adding the scopes, the page I'm currently in doesn't make any change. ":///*" allows it.