title: DOM Event Listener won't work in Chrome Extension
body: <p>I've tried so many possible solutions and looked up documentation and so far nothing has worked. It's a very basic event listener that listens for a button click within the extension.</p>
  
  <p>script.js</p>
  
  <pre><code>document.addEventListener('DOMContentLoaded', init);
  
  function init() {
      var b = document.getElementById('calculate');
      b.addEventListener('click', displayDate(), false);
  }
  </code></pre>
  
  <p>manifest.json</p>
  
  <pre><code>    {  
    "name": "RE-Toolkit",
    "version": "0.1",
    "description": "Real Estate Toolkit",
    "manifest_version": 2,
  
    "permissions": [
      "&lt;all_urls&gt;"
    ],
      "background": {
      "scripts": ["/script.js"],
      "persistent": false
    },
  
    //ICON
    "browser_action": {
      "default_icon": {
          "512": "/home-icon.png"
      },
      "default_popup": "/popup.html"
    },
  
    "web_accessible_resources": ["script.js", "popup.html"]
  }
  </code></pre>
  
  <p>popup.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;style type="text/css" src="style.css"&gt;&lt;/style&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;div style="display: flex; align-items: center;"&gt;
              &lt;img style="vertical-align: middle;" src="/home-icon.png" &gt;
              &lt;span&gt;Date Calculator&lt;/span&gt;
          &lt;/div&gt;
          &lt;p style="padding-top: 5px; padding-bottom: 5px; color: grey;"&gt;Note: Rules are as follows: Up to (7) days, weekends and holidays are skipped in the count. After (7) days, weekends and holidays are included in the count. If the last day of any deadline falls on a weekend or holiday, the deadline is pushed to the next available day.&lt;/p&gt; 
          &lt;div class="inputContainer"&gt;
              &lt;label for="start"&gt;Start date:&lt;/label&gt;
              &lt;input class="input" type="date" id="start" name="trip-start" value="2020-01-01" min="2020-01-01" max="2020-12-31"&gt;
          &lt;/div&gt;
          &lt;div class="inputContainer"&gt;
              &lt;label for="days"&gt;Days to Deadline:&lt;/label&gt;
              &lt;input type="number" min="1" class="input" id="days"&gt;
          &lt;/div&gt;
          &lt;div class="inputContainer"&gt;
              &lt;button class="btn" id="calculate"&gt;Calculate&lt;/button&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;h2 class="result"&gt;&lt;/h2&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Am I just overlooking basic permissions or something? I don't even want it to interact with a webpage. Essentially I just want to use it as an app that's stored in my browser for quick use. </p>