Chrome Extension: Adding event listener not working after site loads

I'm building a Chrome Extension to add some shortcut functionality to a site I regularly work with. I've tried calling my addTypingListeners() to bind the div with 2 inputs that I've added to the title and subtitle of the edit page I'm working on. However, I never seem to get into the document.eventListener closure.

My Chrome Extension is run at document_idle so the content should be loaded by the time my additional code runs. How can I get these listeners to embed on the page?

Even when I don't call addTypingListeners(), I still see a and b log in the console

function addTypingListeners() {
    console.log('a')
    var meta = {}

    document.addEventListener("DOMContentLoaded",()=>{
        console.log('listeners added pre')
        bind(meta, document.getElementsByTagName('title'), "title");
        bind(meta, document.getElementsByTagName('subtitle'), "subtitle");

        setInterval(()=>{document.getElementsByTagName('h3')[0].innerText=meta.title});
        setInterval(()=>{
            console.log(meta)
            document.getElementsByTagName('h4')[0].innerText = meta.subtitle
        });

        console.log('listeners added')
    })

    console.log('b')
}

const start = async function() {
    // var location = window.location.toString()
    let slug = window.location.toString().split("/")[4]
    let url = `https://example.org/${slug}?as=json`

    const _ = await fetch(url)
        .then(res => res.text())
        .then(text => {
                let obj = JSON.parse(text);
                const { payload } = obj;

                // Container
                const root = document.getElementById('container');
                var clippyContainer = document.createElement('div');
                createShell(clippyContainer, name);
                root.appendChild(clippyContainer);

                // Inputs
                const title = document.getElementsByTagName('h3')[0];
                const subtitle = document.getElementsByTagName('h4')[0];

                var inputDiv = document.createElement('div');
                inputDiv.id = "input-div";
                const titleInput = document.createElement('input');
                titleInput.id = "title"
                titleInput.value = title.innerText;
                inputDiv.appendChild(titleInput);

                const breaker = document.createElement("br")
                inputDiv.appendChild(breaker);

                const subtitleInput = document.createElement('input');
                subtitleInput.id = "subtitle"
                subtitleInput.value = subtitle.innerText;
                inputDiv.appendChild(subtitleInput);
                clippyContainer.appendChild(inputDiv);

                inputDiv.appendChild(breaker);

                // addTypingListeners() // tried here, also doesn't work
        });
}

start()
    .then( (_) => { 
        console.log('hi')
        addTypingListeners() 
        console.log("done")
    })

from Chrome Extension: Adding event listener not working after site loads