Chrome Extension: runtime.lastError while running tabs.get/tabs.remove: No tab with id:0

Question

I've tried to find a solution, but the only thing I found was if a random TabId doesn't exist. But this doesn't solve my problem:

I'm always getting these errors:

Unchecked runtime.lastError while running tabs.get: No tab with id:0
Unchecked runtime.lastError while running tabs.remove: No tab with id:0

My code:

var tabnumber = 0; //the number of tabs in the current window
var tabID = 0; //id of the active tab

function closeBundle(){
  getTabnumber();
  for(i=0;i<tabnumber;i++){
    getTabID();
    chrome.tabs.get(tabID , function(tab){ //here is the first problem
      insert[i] = tab; //for saving all Tabs in an array
    });
    chrome.tabs.remove(tabID); //here the second one
  }

  chache[active] = insert; //I save the insert array in another array
}

function getTabnumber(){
  chrome.tabs.query({'currentWindow': true}, function(tabarray){
    tabnumber = tabarray.length;
  });
}

function getTabID(){
  chrome.tabs.query({'currentWindow': true, 'active': true}, function(tabArray){
    tabID = tabArray[0].id;
  });
}

I don't get it why there is no Tab with this specific id because I used the TabId of the active Tab (with getTabId), doesn't I??

How can I get the right Id of the current Tab or is there another way to store all Tabs of the current window in an array and then close all tabs?

I hope somebody could help me ;)

Answer 1

Xan has given you an excellent clue as to what is going on, but let me try to answer your question, because it especially relates to chrome extensions. Your callback function in getTabID runs asynchronously, meaning it doesn't block whatever other code may run. So, in closeBundle, you call getTabID, which starts to run, but closeBundle continues to run even before getTabID is finished running its callback. Therefore, tabID is still 0 when you call chrome.tabs.get, and you get an error. In short, the entire architecture of your code won't work, because of the asynchronous nature of JavaScript.

One readily available solution is to wrap everything in callback functions (frequently known as callback hell). I've built chrome extensions with 5 or 6 nested callback functions. One really needs to understand this asynchronous behavior to program and debug chrome extensions, and JavaScript in general. A quick Google search will give you endless articles on the subject. Xan's comment is a good place to start.

But for example in your code, some pseudo code might look something like this:

function getTabnumber(){
  chrome.tabs.query({'currentWindow': true}, function(tabarray){
    tabnumber = tabarray.length;
    for(i=0;i<tabnumber;i++){
       chrome.tabs.query({'currentWindow': true, 'active': true}, function(tabArray){
           tabID = tabArray[0].id;
           chrome.tabs.get(tabID , function(tab){ //here is the first problem
              insert[i] = tab; //for saving all Tabs in an array
              });
           chrome.tabs.remove(tabID); //here the second one
        }
      });
  });
}

This code isn't tested or meant to run, just to give you an idea of what I mean by nested callbacks. Hope this helps, good luck.