0

I've replaced my internal .JSON with an AJAX request and now my code stopped working properly. My goal is it to write a chrome extension that closes a tab if its link contains certain keywords saved in the .JSON file. This is what the code looked before:

chrome.webNavigation.onCompleted.addListener(closeTab, {
  url: [
    {urlPrefix: 'https://www.google.de/'},
    {urlPrefix: 'https://sghm.eu/iserv/login'},
  ]
});

function closeTab(e) {
  if (!e.frameId) {
    chrome.tabs.remove(e.tabId);
  }
}

This code worked for me.
Now the new one:

var obj = {};
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function(){
    if(xhttp.readyState == 4 && xhttp.status == 200){
        obj = JSON.parse(xhttp.response);
        console.log(obj);
    }};
    xhttp.open('GET', "banned.json", true);
    xhttp.send();


    chrome.webNavigation.onCompleted.addListener(closeTab, obj);

    function closeTab(e) {
      if (!e.frameId) {
        console.log("Hallo2");
        chrome.tabs.remove(e.tabId);
      }
    }

And the banned.json file:

[
    "www.google.de",
    "www.youtube.com/?gl=DE"
]

This code now closes every tab disreagarding the link or antything else. But I don't know why. The AJAX works as the console successfully displays the JSON array, which was previously loaded.

Mr.X
  • 97
  • 1
  • 12
  • 1
    `XMLHttpRequest` is asynchronous ... so `chrome.webNavigation.onCompleted.addListener(closeTab, obj);` is called with `obj` === `{}` - because the xmlhttprequest isn't yet even called, let alone responded – Jaromanda X Jan 11 '20 at 09:21
  • 1
    you may also notice that the code that works, the object is `{ url: [ {urlPrefix: 'https://www.google.de/'}, {urlPrefix: 'https://sghm.eu/iserv/login'}, ] }` .. but the object you get from your XHR is `[ "www.google.de", "www.youtube.com/?gl=DE" ]` - which is clearly not the same – Jaromanda X Jan 11 '20 at 09:23
  • 1
    See also [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) – wOxxOm Jan 11 '20 at 09:25
  • If that would be my mistake, in which I don't really believe in, because it doesn't work if I change it to synchronous as well, how would I solve this problem? – Mr.X Jan 11 '20 at 10:16
  • @Jaromanda: if I change the json to exactly what you've posted I will get an Error from chrome that states: ``Uncaught SyntaxError: Unexpected token u in JSON at position 4`` – Mr.X Jan 11 '20 at 10:19
  • because you're getting `undefined` somewhere – Jaromanda X Jan 11 '20 at 13:23
  • but why and were – Mr.X Jan 13 '20 at 15:32

1 Answers1

1

Are you sure that obj isn't still empty when you hit this line?:

chrome.webNavigation.onCompleted.addListener(closeTab, obj);

You may reach there before xhttp.readyState == 4 && xhttp.status == 200 evaluates to true (because the onreadystatechange callback function runs asynchronously).

Have you tried moving the above line just underneath console.log(obj); in your onreadystatechange callback function?

Moritz
  • 73
  • 6
  • Thanks for your suggestion, but I've also put a ``console.log`` in the ``closesTab`` function before and it printed the array into the console. Furthermore I changed AJAX to a synchronous request by by changing this line ``xhttp.open('GET', "banned.json", true);``to ``xhttp.open('GET', "banned.json", false);`` – Mr.X Jan 11 '20 at 09:55