title: Chrome Extension: Adding event listener not working after site loads
body: <p>I'm building a Chrome Extension to add some shortcut functionality to a site I regularly work with. I've tried calling my <code>addTypingListeners()</code> 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 <code>document.eventListener</code> closure.</p>
  
  <p>My Chrome Extension is run at <code>document_idle</code> so the content should be loaded by the time my additional code runs. How can I get these listeners to embed on the page?</p>
  
  <p>Even when I don't call <code>addTypingListeners()</code>, I still see <code>a</code> and <code>b</code> log in the console</p>
  
  <pre><code>function addTypingListeners() {
      console.log('a')
      var meta = {}
  
      document.addEventListener("DOMContentLoaded",()=&gt;{
          console.log('listeners added pre')
          bind(meta, document.getElementsByTagName('title'), "title");
          bind(meta, document.getElementsByTagName('subtitle'), "subtitle");
  
          setInterval(()=&gt;{document.getElementsByTagName('h3')[0].innerText=meta.title});
          setInterval(()=&gt;{
              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 =&gt; res.text())
          .then(text =&gt; {
                  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( (_) =&gt; { 
          console.log('hi')
          addTypingListeners() 
          console.log("done")
      })
  </code></pre>