Chrome Extension Manifest V3 not working with Google Picker API

Question

Google Chrome Extension Manifest v3 does not allow external scripts & inline scripts:

In Manifest V3, all of your extension's logic must be included in the extension. You can no longer load and execute a remotely hosted file.
― source

This is my content_security_policy in manifest.json:

"content_security_policy": {
        "extension_pages": "default-src 'self'; script-src 'self' 'wasm-unsafe-eval';  style-src 'self' 'unsafe-inline'; script-src-elem 'self' 'unsafe-inline';",
        "sandbox": "sandbox"
}

I've been trying to use the Google Drive Picker API inside of a Google Chrome extension, but somehow fail to do so.

The library requires these two scripts:

<script async defer src="https://apis.google.com/js/api.js" onload="onApiLoad()"></script>
<script async defer src="https://accounts.google.com/gsi/client" onload="gisLoaded()"></script>

Which I have downloaded locally inside the extension:

<script async defer src="./lib/apis.google.com/js/api.js"></script>
<script async defer src="./lib/accounts.google.com/gsi/client.js"></script>

window.addEventListener('load', () => gapiLoaded())

But then these two scripts at their turn install other external scripts which is not allowed in Manifest v3:

• Error 1
• Error 2

I tried both in a popup and in a tab created with:

chrome.tabs.create({url: chrome.runtime.getURL('setup.html')})

Both give the same error

How can I use the Google Drive Picker API inside of a Google Chrome extension?

Thank you

Answer 1

You need to declare https://apis.google.com/js/api.js and
https://accounts.google.com/ in content_security_policy

"content_security_policy": {
"extension_pages": "script-src 'self'; object-src 'self'",
"sandbox": "sandbox allow-scripts; script-src 'self' 'https://apis.google.com/' 'https://accounts.google.com/'  'https://www.googleapis.com' 'https://ajax.googleapis.com'; object-src 'self'"
},