title: Chrome Extension: Adding click event handler to button not working
body: <p>I have been trying to add a click event handler on to a button in my chrome extension. No matter what I try, the function &quot;save&quot; will not activate on button click. The <code>index.html</code> file looks like this:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
      &lt;head&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;textarea id=&quot;notes&quot; rows=&quot;4&quot; cols=&quot;50&quot;&gt;&lt;/textarea&gt;
          &lt;button id=&quot;save-button&quot;&gt;Save&lt;/button&gt;
          &lt;script src=&quot;popup.js&quot;&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>And the code to add the event handler on to the button looks like this:</p>
  <pre class="lang-js prettyprint-override"><code>function save() {
    console.log('SAVE TEST')
  }
  
  document.addEventListener('DOMContentLoaded', function () {
    const saveButton = document.getElementById('save-button')
    saveButton.addEventListener('click', save);
  });
  </code></pre>
  <p>I have confirmed that the <code>saveButton.addEventListener</code> is being called. I've looked everywhere online and it seems like I am doing things right, but I must be messing up somewhere that I just cannot figure out...</p>