Chrome extension violates the following Content Security Policy directive: "default-src 'self' blob: filesystem: chrome-extension-resource

Question

I'm doing currency converter chrome extension and so far I've done almost everything but the math. It ain't mathing. I have popup.js javascript file inside folder with popup.html in which I call popup.js for the math. When I try to use my program on chrome, it gives me error that sounds like this:

Refused to execute inline event handler because it violates the following Content Security Policy directive: "default-src 'self' blob: filesystem: chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

I would get this message when I click the button "Calculate". Even stranger now, I changed something and deleted changes afterwards and now I don't get that error message, but it still wouldn't display the converter value. Here's my code:

So this is the body part of popup.html

<div class="modal-content">
            <p>Pretvorite eure u kune i obrnuto bez problema!</p>
        </p>
        <form>
            <p>
                <label for="amount">Količina:</label>
                <input type="text" id="amount" value="">
                <select id="select">
                    <option value="HRK">HRK </option>
                    <option value="EUR">EUR </option>
                </select>
                <select id="select1">
                    <option value="HRK">HRK </option>
                    <option value="EUR">EUR </option>
                </select>
                <input type="text" id="result" value="">
            </p>
            <p>
                <input type="button" value="Calculate" onclick="calculate();">
                <input type="reset" value="Resetiraj">
            </p>
        </form>

This is whole popup.js

function calculate() {
    var amount = parseFloat(document.getElementById("amount").value);
    var select = document.getElementById("select");
    var select1 = document.getElementById("select1");
    var result = document.getElementById("result");
  
    if (select.value === "HRK" && select1.value === "HRK")  {
      result.value = (amount * 1);
    }
    if (select.value === "HRK" && select1.value === "EUR")  {
      result.value = (amount * 0.13272);
    }
    if (select.value === "EUR" && select1.value === "HRK")  {
      result.value = (amount * 7.53450);
    }
  }

I call .js in body of html with

<script type = "text/javascript" src = "popup. js"></script>

Also, this is not relevant to this problem, I'd like to display the tiktok icon at the very bottom of extension window. The font I'm using should support icons (fontawesome), but they don't display. It only shows rectangular window and that's all. Here's the code part in the body of html for that

<div class="modal-icons">
            <div class="flex-container">
                <div class="flex">
                    <a href="here's my TT link" target="_blank"> #This works
                        <i class="fab fa-tiktok"></i> #This for sure won't work
                    </a>
                </div>
            </div>
        </div>

I saw some article here on stackoverflow about the same issue I mentioned (that error message) and tried fixing it by following the resolution on that article, but it didn't help. The error message was gone when I removed that resolution from my original code, but the conversion still wouldn't work.