title: Using chrome.tabs.executeScript to check a box, not working
body: <p>I am not able to get the checkbox in this page to be checked. </p>
  
  <pre><code>&lt;html&gt;
    &lt;body&gt;
      &lt;form name="f"&gt;
        &lt;input type="checkbox" name="vehicle" value="Bike" /&gt; 1&lt;br /&gt;&lt;/li&gt;
      &lt;/form&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My popup.js is below:</p>
  
  <pre><code>function click(e) {
    chrome.tabs.executeScript(null,
        {code:"document.body.f.vehicle.checked='true'"});
    window.close();
  }
  
  document.addEventListener('DOMContentLoaded', function () {
    var divs = document.querySelectorAll('div');
    for (var i = 0; i &lt; divs.length; i++) {
      divs[i].addEventListener('click', click);
    }
  });
  </code></pre>
  
  <p>In the console log I keep getting the error: <strong>Uncaught TypeError: Cannot read property 'vehicle' of undefined.</strong></p>
  
  <p>My popup.html is below:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Set Page Color Popup&lt;/title&gt;
      &lt;style&gt;
      body {
        overflow: hidden;
        margin: 0px;
        padding: 0px;
        background: white;
      }
  
      div:first-child {
        margin-top: 0px;
      }
  
      div {
        cursor: pointer;
        text-align: center;
        padding: 1px 3px;
        font-family: sans-serif;
        font-size: 0.8em;
        width: 100px;
        margin-top: 1px;
        background: #cccccc;
      }
      div:hover {
        background: #aaaaaa;
      }
      &lt;/style&gt;
      &lt;script src="popup.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="1"&gt;1&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any help would be appreciated.</p>