title: document.querySelector always returns null
body: <p>I've looked at the other answers but still don't understand.</p>
  
  <p>For some reason this line of code always returns null.</p>
  
  <pre><code>var els = document.querySelector("[id='MTG_INSTR$2']");
  </code></pre>
  
  <p>I checked the value of document in the console so I'm pretty sure that's correct.</p>
  
  <p>The id is buried deep inside a table though, could that be an issue?</p>
  
  <p>EDIT 2: If it helps, here's the full code.</p>
  
  <p>content.js</p>
  
  <pre><code>chrome.runtime.onMessage.addListener(
        function(request, sender, sendResponse) {
          if( request.message === "start" ) {
           start();
               }
        }
      );
  
      function start(){
          var els = document.querySelector("[id='MTG_INSTR$2']");
          console.log(els);
          alert("started");
      }
  </code></pre>
  
  <p>popup.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;&lt;/head&gt;
  &lt;script src="popup.js"&gt;&lt;/script&gt;
  &lt;body&gt;
  &lt;input id="button1" type=button value=clickme&gt;
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>popup.js</p>
  
  <pre><code> function popup() {
      chrome.tabs.query({currentWindow: true, active: true}, function (tabs){
      var activeTab = tabs[0];
      chrome.tabs.sendMessage(activeTab.id, {"message": "start"});
     });
  }
  
  document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("button1").addEventListener("click", popup);
  });
  </code></pre>
  
  <p>manifest.json</p>
  
  <pre><code>{
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
    "manifest_version": 2,
    "name": "extensiontest",
    "version": "0.2",
    "content_scripts": [
    {
      "matches": [
        "&lt;all_urls&gt;"
      ],
      "js": ["content.js"]
    }
  ],
  "browser_action": {
    "default_icon": "icon.png",
      "default_popup":"popup.html"
  },
  //"background": {
  // "scripts": ["background.js"]
  //},
  "permissions": [
      "tabs"
    ]
  }
  </code></pre>
  
  <p>EDIT: I've included a screen shot of what the document structure looks like.</p>
  
  <p><a href="https://i.stack.imgur.com/O3z2o.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/O3z2o.png" alt="enter image description here"></a></p>