title: Accessing specific DOM Element? (Chrome Ext) Detailed w/ code
body: <p>I'm trying to, after a name is entered, search the results and see if a professor matches up.  </p>
  
  <p>The website:  <a href="https://www.ratemyprofessors.com/campusRatings.jsp?sid=45" rel="nofollow noreferrer">https://www.ratemyprofessors.com/campusRatings.jsp?sid=45</a></p>
  
  <p>Click Profs and you can see how you can type something in and it will filter responses. For now, I'm just trying to fiddle with those default profs listed. </p>
  
  <p>My code in console to get back an array of those 20 profs is:  </p>
  
  <pre><code>document.querySelectorAll('.result-list:last-of-type &gt; ul &gt; li')  
  </code></pre>
  
  <p>Which works. It returns:  </p>
  
  <pre><code>(20) [li, li, li, li, li, li, li, li, li, li, li, li, li, li, li, li, li, li, li, li]  
  </code></pre>
  
  <p>Then 
  I can dive deeper to access the "name" and &lt;\a href .. tag with a link using it. </p>
  
  <p>However, when I go into my chrome extension it doesn't work. With a console.log I get back: </p>
  
  <pre><code>[]    
  </code></pre>
  
  <p>What's up? How can I access it? Previously had a similiar issue and it was because the content was running on a "frame" or something, and I had to add something like this to my code: (NOTE - From a different thing, despite similiar naming)  </p>
  
  <pre><code>var page = top.frames["TargetContent"].document;
  </code></pre>
  
  <p>Manifest:    </p>
  
  <pre><code>{
    "name": "RMP",
    "description": "Work in Progress",
    "manifest_version": 2,
    "version": "0.8",
    "icons": { 
      "16": "icon16.png",
      "48": "icon48.png",
      "128": "icon128.png" 
    },
    "permissions": [
      "activeTab",
      "http://*/",
      "https://*/"
    ],
    "background": {
      "scripts": ["background.js"],
      "persistent": false
    },
    "browser_action": {
      "default_title": "Click me!"
    }
  }
  </code></pre>
  
  <p>Background page  </p>
  
  <pre><code>chrome.browserAction.onClicked.addListener(function(tab) {
      chrome.tabs.executeScript(null, {file: "content_script.js"});
  });
  </code></pre>
  
  <p>Content Script  </p>
  
  <pre><code>var xhr = new XMLHttpRequest();
  
  xhr.onreadystatechange = function() {
      if (this.readyState == 4 &amp;&amp; this.status == 200) {
          pageLoaded(this);
      }
  }
  
  function pageLoaded(page){
  
      var listArray = page.response.querySelectorAll('.result-list:last-of-type &gt; ul &gt; li')
  
  
      console.log(listArray);
      //var xmldoc = page.responseXML;
      //var root = xmldoc.getElementsBuTagName()
  }
  
  xhr.open('GET', 'https://www.ratemyprofessors.com/campusRatings.jsp?sid=45');
  xhr.responseType = 'document';
  xhr.send();
  </code></pre>