title: Uncaught TypeError: Cannot set property 'value' of null - Adding value to fields with chrome extension
body: <p>I looked through a lot of other answers for this situation but none seemed to work correctly, or I need personalized help.</p>
  
  <p>I'm trying to create a chrome extension that inputs a variable into a field on the web page i'm on after pressing a button in the extension.</p>
  
  <p>To clarify: I want to push the "memory" button on the extension, and have the specific field populate with certain text/variable</p>
  
  <p>Here's my current code:</p>
  
  <p><strong>manifest.json</strong></p>
  
  <pre><code>{
      "manifest_version": 2,
  
      "name": "Jacob's extension",
  
      "description": "Autofill things",
  
      "version": "1.0",
  
      "content_scripts": [
          {
              "matches":["http://example.com/*"],
              "js":["popup.js"]
          }
      ],
      "web_accessible_resources": ["content.js"],
  
      "browser_action": {
          "default_icon": "icon.png",
          "default_popup":"popup.html"
      },
  
      "permissions": [
      "activeTab"
  
      ]
  
  }
  </code></pre>
  
  <p><strong>popup.js</strong></p>
  
  <pre><code>document.addEventListener('DOMContentLoaded', function() {
      var link = document.getElementById('fillMemory');
      // onClick's logic below:
      link.addEventListener('click', function() {
      (function (chrome) {
        var js = document.createElement('script');
          js.type = 'text/javascript';
           js.src = chrome.extension.getURL('content.js');
           document.getElementsByTagName('head')[0].appendChild(js);
          }(chrome));
      })
  })
  </code></pre>
  
  <p><strong>content.js</strong></p>
  
  <pre><code>document.getElementById('testfield').value="moo";
  </code></pre>
  
  <p><strong>popup.html</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;  
  &lt;script src="popup.js"&gt;&lt;/script&gt;
  &lt;style&gt;
  .btn-group button {
    background-color: #008CBA; /* Green background */
    border: 1px solid black; /* Green border */
    color: white; /* White text */
    padding: 10px 24px; /* Some padding */
    cursor: pointer; /* Pointer/hand icon */
    width: 100%; /* Set a width if needed */
    display: block; /* Make the buttons appear below each other */
  }
  
  .btn-group button:not(:last-child) {
    border-bottom: none; /* Prevent double borders */
  }
  
  /* Add a background color on hover */
  .btn-group button:hover {
    background-color: #3e8e41;
  }
  &lt;/style&gt;
  &lt;body&gt;
    &lt;head&gt;
      &lt;title&gt;Autofiller&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h1&gt;Autofiller&lt;/h1&gt;
      &lt;div class="btn-group"&gt;
          &lt;button id="fillProcessor"&gt;Processor&lt;/button&gt;
          &lt;button id="fillMemory"&gt;Memory&lt;/button&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I've been looking through similar issues for hours, but still come up with the same issue of the field being null (it does exist on the web page) I assume the extension is searching the popup window for the ID that is on the web page but I'm not sure.</p>
  
  <p>Any help would be appreciated.</p>