title: How to get input field value from Chrome Extension
body: <p>I am working to learn how to build a Google Chrome Extension. I have a contact form on a webpage that I'm using for testing. I'm trying to create an extension that will read the input field values from that form. At this time, I have:</p>
  
  <p><strong>manifest.json</strong></p>
  
  <pre><code>{
      "manifest_version": 2,
  
      "name": "Contact Form Friend",
      "description": "This extension gets contact form info.",
      "version": "1.0",
  
      "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
      },
  
      "permissions": [
        "activeTab",
        "&lt;all_urls&gt;"
      ]
    }
  </code></pre>
  
  <p><strong>popup.html</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Getting Started Extension's Popup&lt;/title&gt;
      &lt;style type="text/css"&gt;
        body {
          margin: 10px;
          white-space: nowrap;
        }
  
        h1 {
          font-size: 15px;
        }
  
        #container {
          align-items: center;
          display: flex;
          justify-content: space-between;
        }
      &lt;/style&gt;
  
      &lt;script src="popup.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
      &lt;body&gt;
          &lt;h1&gt;Info&lt;/h1&gt;
          &lt;div id="info"&gt;
  
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>popup.js</strong></p>
  
  <pre><code>function getHost() {
      return document.documentElement;
  }
  
  document.addEventListener('DOMContentLoaded', () =&gt; {
      const infoDisplay = document.getElementById('info');    
      const scriptToRun = `(${getHost})()`;
  
      // Run the script in the context of the tab
      chrome.tabs.executeScript({
        code: scriptToRun 
      }, (result) =&gt; {            
        var values = [];
  
        var inputFields = result.getElementsByTagName('input');
        infoDisplay.innerHTML = 'inputs: ' + inputFields.length;
        for (var i = 0; i &lt; inputFields.length; i++) {
          values.push(inputFields[i].value);
        }
  
        infoDisplay.innerHTML += '&lt;br /&gt;fields: ' + values.length;
      });
  });
  </code></pre>
  
  <p>When I run this, it acts like it can't access the input fields from the web page the user is on (not the extension's web page). What am I doing wrong? Am I missing a permission? I don't believe so. However, it's not working and I'm not sure why.</p>
  
  <p>Thank you for your help.</p>