How to integrate GAPI in Chrome Extensions Manifest v3?

Question

I've got a Chrome Manifest v2 extension that interacts with Google Sheets via Google APIs. Relevant code:

manifest.json

"content_security_policy": "script-src 'self' https://apis.google.com/; object-src 'self'",

background.html

<script src="https://apis.google.com/js/client.js?onload=onGAPILoad"></script>

Manifest v3 prohibits remotely hosted scripts (see here and here), so how are you guys getting around this restriction?

UPDATE: I have submitted a ticket to at least make the Chromium team be aware of the implications stemming from this new security restriction in MV3:

https://bugs.chromium.org/p/chromium/issues/detail?id=1164452

Please go there and vote on this ticket if you face the same issue with your extensions. Let's hope a viable solution gets worked out before Manifest v2 is deprecated.

Maniemanifest

ManifestV3 in its current state is still just a toy to play with. There's a lot of problems like GAPI usage that will be hopefully solved later so meanwhile you can make sure it's being tracked on crbug.com or make a new report if it's not. – Sogdian

@wOxxOm thanks for the insight. At first ad blockers were throwing up their hands, but I'm starting to realize MV3 is going to bring headaches for many other types of extensions as well. – Maniemanifest

I voted, I started developing Chrome extension less than a month ago so I started with v3 as Google suggests. So far I like but I have to say the v3's CSP has been a nightmare, I probably spent more time on CSP related issues than anything else. Have anyone came across a solution ? Thanks – Homocyclic

Hoping for any workaround. If some one finds this please update. – Typist

@Typist The answer I gave worked for me, My extension (mv3) is working flawlessly.. – Binominal

2023 and it’s been confirmed by Goooogle that their own APIs due to MV3 rules made predominantly by the big G are not allowed in an extension. github.com/google/google-api-javascript-client/blob/master/docs/… Bizarre in the extreme – Lucindalucine

Answer 1

I faced a similar issue for interacting with google docs, using this I am successfully able to create and edit documents from my chrome extension (manifest v3). You can use chrome.identity API for sign-in. Then use fetch request to call the Sheets API / Docs API.

Follow minni minhaj's answer for getting oAuthToken using chrome.identity. Store the token in your background.js. Enable sheets API for your Google cloud project from the cloud console.

Add the required scopes in your manifest.json:

"oauth2": {
    "client_id": "{client_id}.apps.googleusercontent.com",
    "scopes": [
        ""
    ]
}

Refer to Sheets oAuth2 Scopes for selecting the appropriate scopes.

Now you can make fetch calls to the sheet API from background.js. This is an call to create a new spreadsheet in user's drive-

const data = {
    "title": `SheetsTitle`
}

fetch('https://sheets.googleapis.com/v4/spreadsheets', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${oAuthToken}`
    },
    body: JSON.stringify(data)
}).then((document) => {
    return document.json();
}).then((document) => {
    console.log("Document Created......", document);
    docId = document.documentId;
    console.log(docId);
}).catch((error) => {
    console.log("error");
})

Binominal

Does this still work? I can't get it to do anything using these directions. – Botfly