I am working on a chrome extension that takes a name and a second name from user, and replaces all instances of name with second name on the tab the user is on. The logic is really easy, however, getting the input from the user and using it on the page is extremely challenging.

This is what I have:

Manifest.json:

{
  "manifest_version": 3,
  "name": "Background Changer",
  "version": "1.0.0",
  "description": "Does stuff with the background.",
  "action": {
    "default_title": "lol",
    "default_popup": "index.html"
  },
  "permissions": ["scripting", "tabs", "activeTab"],
  "host_permissions": ["<all_urls>"]
}

index.html

 <h2>Dead Name</h2>
  <input type="text" id="deadName">

  <h2>Real name</h2>
  <input type="text" id="realName">

  <input type="submit" id="submitButton">
    <script src="popup.js"></script>

popup.js

let realName = document.getElementById("realName")
let deadName = document.getElementById("deadName")

document.getElementById("submitButton").addEventListener('submit', injectJS);

const tabId = getTabId();
function injectJS(){
    chrome.scripting.executeScript(
        {
          target: {tabId: tabId, allFrames: true},
          files: ['content.js'],
        },
        () => {});
}

content.js

alert("LOL")

Simply put, this code is meant to be a test of injecting Javascript from the extension pop-out to the tab the user is on. Despite me attaching the event listener, and clicking on it, the alert does not appear.