Fetching and executing script from API in Chrome Extension

I am developing a chrome extension, with Manifest V3, and I would like to get Google Places Autocomplete API to run in the options.html page in an <input> tag.

Here are my files:

• manifest.json

    {
      ...
      "manifest_version": 3,
      "background": {
        "service_worker": "background.js"
      },
      "host_permissions": [
        "https://maps.googleapis.com/*"
      ],
      "permissions": [
        "storage",
        "activeTab",
        "scripting"
      ],
      "options_page": "options.html",
      ...
    }

• options.html

    <head>
        ...
        <link rel="stylesheet" href="options.css">
        ...
    </head>
    <body>
        ...
        <input id="autocomplete_input" type="text">
        ...
    <script src="autocomplete.js"></script>
    <script id="google_autocomplete" defer></script>
    </body>

• background.js

  

      chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
            if (request.name === "autocomplete") {
                const apiKey = "YOUR-API-KEY-HERE";
                const url = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`
        
                fetch(url).then(function (response) {
                    if (response.status !== 200) {
                        console.log(`Error: ${response.status}`);
                        return;
                    }
                    response.text().then(function (text) {
                        sendResponse(text);
                    });
                })
            }
            return true;
        });

• autocomplete.js

    chrome.runtime.sendMessage({name: "autocomplete"}, (response) => {
    
            const script = `${response}
                    const input = document.getElementById('autocomplete_input');
                    new google.maps.places.Autocomplete(input);
    `
            document.getElementById("google_autocomplete").innerHTML = script;
        }
    );

Right now, the code from the API is loaded inside the <script> tag in options.html, but it is not running. Instead, I'm getting the following error:

autocomplete.js:7 | Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval'". Either the 'unsafe-inline' keyword, a hash ('sha256-n6ZzjDYC/sCOAtyJo7K9Hw0FNlA5DPc377N56EXrM0c='), or a nonce ('nonce-...') is required to enable inline execution.

I also tried running directly the fetched code inside the browser console, but I'm getting this error:

Refused to load the script '' because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

VM378:85 Refused to load the script 'https://maps.googleapis.com/maps-api-v3/api/js/49/2/intl/fr_ALL/common.js' because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

But the URL it has some issues with is already in the manifest.json.

I'm really lost here. Thanks for your help!