Can’t add new HTML elements on a website with a content script

So, I’ve been trying to make a web extension that would help integrate my app better with a website, but I’m stuck at the injecting a new a tag. The website I’m trying to integrate is https://modrinth.com/(mod or resourcepack or shader)/foo

src/onMod.js

const main = () => {
  let inputGroup = document.getElementsByClassName("input-group")[0];
  let mcmodpackmanagerbutton = document.createElement("a");

  let slug = "sodium"; // Place holder

  slug = window.location.href.split("/")[4]; // This thing doesn't change

  mcmodpackmanagerbutton.href = "mcmodpackmanager://modrinthopen?id=" + slug;
  mcmodpackmanagerbutton.className = "iconified-button";
  mcmodpackmanagerbutton.innerHTML = "Open with Minecraft Modpack Manager";
  mcmodpackmanagerbutton.setAttribute("rel", "noopener nofollow"); // Other links on modrinth.com use this

  console.log("SLUG: " + slug);

  inputGroup.appendChild(mcmodpackmanagerbutton);
};

main();

I’ve been expecting something like this: https://i.imgur.com/UdkQ5ZM.png,
but instead the button comes for a second and then disappears