Url Annotator does not add url to list

I am trying to create a simple chrome extension. If you visit an URL it is added to the list of URLs. You can give a simple number for this URL add a description or remove the URL from the list.

My manifest.json looks like the following:

{
    "manifest_version": 3,
    "name": "URL Annotator",
    "version": "1.0",
    "description": "Annotate URLs while browsing",
    "permissions": ["activeTab", "tabs", "storage"],
    "action": {
      "default_popup": "popup.html",
      "default_icon": {
        "16": "icon16.png",
        "48": "icon48.png",
        "128": "icon128.png"
      }
    },
    "icons": {
      "16": "icon16.png",
      "48": "icon48.png",
      "128": "icon128.png"
    }
  }

Here is my popup.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>URL Annotator</title>
    <style>
        body {
            width: 300px;
            font-family: Arial, sans-serif;
            padding: 8px;
        }

        #urlInput {
            width: 100%;
            margin-bottom: 8px;
        }

        #annotatedUrls {
            margin-top: 8px;
        }

        textarea {
            display: block;
            width: 100%;
            margin-top: 8px;
            resize: vertical;
        }

        input[type="number"] {
            display: block;
            width: 100%;
            margin-top: 8px;
        }

        button {
            margin-top: 8px;
        }
    </style>
</head>

<body>
    <h2>Annotated URLs:</h2>
    <div id="annotatedUrls"></div>
    <script src="popup.js"></script>
</body>

</html>

Finally, here is my popup.js:

async function getCurrentTab() {
  return new Promise((resolve) => {
    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
      resolve(tabs[0]);
    });
  });
}

document.addEventListener("DOMContentLoaded", async () => {
  const annotatedUrls = document.getElementById("annotatedUrls");

  chrome.storage.local.get("annotatedUrls", (data) => {
    if (data.annotatedUrls) {
      data.annotatedUrls.forEach((urlData) => {
        annotateUrl(urlData.url, urlData.description, urlData.number);
      });
    }
  });

  const currentTab = await getCurrentTab();
  const currentUrl = currentTab.url;
  chrome.storage.local.get("annotatedUrls", (data) => {
    let annotatedUrls = data.annotatedUrls || [];
    if (!annotatedUrls.some((urlData) => urlData.url === currentUrl)) {
      annotateUrl(currentUrl);
      saveAnnotatedUrl(currentUrl);
    }
  });

  function annotateUrl(url, description = "", number = "") {
    const urlItem = document.createElement("div");
    urlItem.className = "urlItem";

    const urlSpan = document.createElement("span");
    urlSpan.textContent = url;
    urlItem.appendChild(urlSpan);

    const annotationInput = document.createElement("textarea");
    annotationInput.value = description;
    annotationInput.placeholder = "Add a longer description";
    urlItem.appendChild(annotationInput);

    const numberInput = document.createElement("input");
    numberInput.type = "number";
    numberInput.value = number;
    numberInput.placeholder = "Add a positive or negative number";
    numberInput.addEventListener("input", () => {
      numberInput.style.color = numberInput.value >= 0 ? "green" : "red";
    });
    urlItem.appendChild(numberInput);

    const removeBtn = document.createElement("button");
    removeBtn.textContent = "Remove";
    removeBtn.addEventListener("click", () => {
      annotatedUrls.removeChild(urlItem);
      removeAnnotatedUrl(url);
    });
    urlItem.appendChild(removeBtn);

    annotatedUrls.appendChild(urlItem);
  }

  function saveAnnotatedUrl(url) {
    chrome.storage.local.get("annotatedUrls", (data) => {
      let annotatedUrls = data.annotatedUrls || [];
      annotatedUrls.push({ url: url, description: "", number: "" });
      chrome.storage.local.set({ annotatedUrls: annotatedUrls });
    });
  }

  function removeAnnotatedUrl(url) {
    chrome.storage.local.get("annotatedUrls", (data) => {
      let annotatedUrls = data.annotatedUrls || [];
      annotatedUrls = annotatedUrls.filter((urlData) => urlData.url !== url);
      chrome.storage.local.set({ annotatedUrls: annotatedUrls });
    });
  }
});

When loading an URL like stackoverflow.com my extension looks like the following:

enter image description here

Any suggestions what I am doing wrong?

I appreciate your reply!