title: I can't use a Object, which was previously loaded via AJAX Request, in a function call
body: <p>I'm trying to write a chrome extension, that closes a tab when it's loaded and contains specific keywords, which I'm storing in <code>banned.json</code>. But following code gives me an error:<br></p>
  
  <pre><code>//background.js:
  var obj;
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function(){
      if(xhttp.readyState == 4 &amp;&amp; xhttp.status == 200){
          obj = JSON.parse(xhttp.response);
          console.log(obj.banned);
      }};
      xhttp.open('GET', "banned.json", true);
      xhttp.send();
  
  
      chrome.webNavigation.onCompleted.addListener(closeTab, obj.banned); // error is here
  
      function closeTab(e) {
        if (!e.frameId) {
          console.log("Hallo2");
          chrome.tabs.remove(e.tabId);
        }
      }
  </code></pre>
  
  <p>It says that it cannot read property banned of undefined. How can that be? <code>obj</code> is defined in the first line and I can reference it in the <code>if-block</code>. Can anyone help me?</p>
  
  <p><strong>EDIT:</strong><br>
  <code>banned.json</code>:</p>
  
  <pre><code>{
      "banned": [
          "https://www.google.de/",
          "youtube.com"
      ]
  }
  </code></pre>