title: Chrome Extension: event listeners
body: <p>I am aware that because of Chrome's csp, I can't execute inline JavaScript. I have an html file called popup.html which contains this:</p>
  <pre><code>    &lt;body&gt;
          &lt;a href=&quot;#&quot; id=&quot;clickme&quot;&gt;Button&lt;/a&gt;
      &lt;/body&gt;
  </code></pre>
  <p>and an external JavaScript file called chrome.js which contains this code:</p>
  <pre><code>document.addEventListener('DOMContentLoaded', init());
  
  function init(){
      var elem = document.getElementById('clickme');
      elem.addEventListener('click',func());
  }
  function func(){
      alert('button clicked');
  }
  </code></pre>
  <p>Whenever I reload the Chrome extension, or click the extension Icon, <code>func()</code> gets fired, but when I click the actual button that the listener is subscribed to (Button), nothing happens. I have looked at the debugger using &quot;inspect popup&quot; and using <code>location.reload()</code> in the console, it seems as though elem is correctly set via <code>getElementById()</code>, but the event is immediately fired upon reloading the page, instead of when the link is clicked.</p>
  <p>How can I make the event fire on click instead of on pageload?</p>