How to integrate GAPI in Chrome Extensions Manifest v3? - google-chrome-extension

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.

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");
})