Question

In my chrome extension i was checking for a function which can stop my for loop from processing till it gets a response from content scripts. Sharing the sample code below

function abc() {
  chrome.tabs.query({'status': 'complete'}, function(tabArray) {
    for (var i = 0, tab; tab = tabArray[i]; i++) {
      var currentUrl = tab.url;
      var tabId = tab.id;
      if (currentUrl.match(otherthing)) {
        chrome.tabs.sendRequest(tabId, {'type': 'getrequiredthing'},
            function(response) {
              if (response.isrequiredthind) {
                callfunction(tabId);
              }
            }
        ); 
      }
    }
  });
}

Here when i get the matching url in else if i’m sending a request to the page for getting some info, if my info is positive i need to callfunction. But here in the for loop tabId is iterating very fastly and even if the response is positive it is calling the callfunction with next(or next) tabId.

Can you give your opinions on solving this keep waiting the for loop this response is received.

Thanks

Answer 1

The problem is that the third argument to sendRequest does not block on the request being ready. By design, JavaScript almost never blocks. This is a Good Thing. Instead, it uses an “event-driven” model.

Another problem is due to lexical scoping: When callfunction is called, tabId has the most recent value, not the value when sendRequest was called. To get around this, you need to create a separate scope for each loop iteration e.g.

for (...) {
  var tabId = ...;
  if (...) {
    (function (localTabId) {
      chrome.tabs.SendRequest(..., function (response) {
        if (response.isrequiredthind) {
          callfunction(localTabId);
        }
      }
    })(tabId);
  }
}