New object with each NEW opened tab in chrome extension

Question

I'm trying to get a request from my database in my popup.js which responds with an array of objects. I created a for loop so that it iterates through it all, but on each iteration I would like to spawn a new tab. I have no problem spawning the tabs. My problem is that I can't seem to pass any data to them. I've been looking all over SO and cant find how to do this??

popup.js:

var button = document.getElementById("button");


button.addEventListener("click", function() {

chrome.runtime.sendMessage({opened: true}, function(response) {
console.log(response.example);
  });
});

background.js:

    // receives message from popup script
  chrome.runtime.onMessage.addListener( function(request, sender,     sendResponse) {
if (request) {
  // sends response back to popup script
  sendResponse({example: "sent from background.js"});

  // sends response to content script
  var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        var data = JSON.parse(xhr.responseText);

        for (i = 0; i < data.length; i++) {
            console.log(data)

            chrome.tabs.create({url: "https://www.google.com/", active: false}, function(tab) {
                var tab = tabs[0];
                setTimeout(function(){
                    chrome.tabs.sendMessage(tab.id, data[i], function(response) {
                        console.log(response);
                    });
                }, 6000);
            });

        }

    }
}
xhr.open('GET', 'https://www.somedata.com', true);
xhr.send(null);

    }
  });

contentscript.js:

chrome.runtime.onMessage.addListener(function(request,sender,response) {

console.log(request)
console.log(sender)
console.log(response)
});

manifest.json:

{
"manifest_version": 2,
"name": "demo",
"short_name": "tabs",
"description": "Multiple tabs",
"version": "0.0.1",
"browser_action": {
    "default_icon": "img/logo.png",
    "128": "128.png",
    "default_popup": "popup.html",
    "default_title": "Sample"
},
"content_scripts": [{
    "matches": ["https://www.google.com/*"],
    "js": ["js/contentscript.js"]

}],
"permissions": [
    "storage",
    "tabs",
    "http://*/*",
    "https://*/*"
]

}

Answer 1

The problem is that when the new tab is created, the popup dies before the callback can be executed. The popup closes automatically when another tab becomes active, and when it closes its execution stops. Simplest way to solve this is by not making the new tab active:

chrome.tabs.create({url: "http://www.google.com/", active: false}, function(tab){
    chrome.tabs.sendMessage(tab.id, message, function(response) {});
});

Although you could also move this functionality to the background page, if a non-active tab would be weird for the user. Instead of creating the tab in popup.js, message the background page with chrome.runtime.sendMessage (passing any relevant data) and put a listener in the background page that does the tab creation. (Mostly the same code you already have, just moved around.)

Edit: Okay, I figured out the other problem. The popup is sending the message before the message listener in the content script is attached, so it doesn't receive it. Simplest way to fix that is by adding a timer to the message-sending:

setTimeout(function(){
    chrome.tabs.sendMessage(tab.id, message, function(response) {});
} , 600);  //600 works on my computer

This isn't a good solution; just a demonstration that the issue is time. To fix this more reliably, I think you'd have to have a more complicated thing where contentscript.js messages popup.js when it's done loading, and popup.js uses tab.ids or something to associate loaded pages with elements in the data array, and sends the appropriate data as a response to contentscript.js

Second edit: The other other problem is with the for loop. Because it's asynchronous, by the time the callback for chrome.tabs.create is called, the loop ended a long time ago, and i=data.length (as it does when the loop ends). So you can't pass data[i] as a message because data[data.length] is undefined. You can replace it with a recursive call like this:

background.js:

var data = ["x", "y"]; //just test data. make sure "data" has global scope

chrome.runtime.onMessage.addListener( 
    function(message, sender, sendResponse) { //from popup.js
        createTab(0);
    }
);

function createTab(i){
    if (i == data.length){return;}  //this ends the loop
     chrome.tabs.create({url: "https://www.google.com/", 
                            active: false}, function(tab) {
        setTimeout(function(){
            chrome.tabs.sendMessage(tab.id,data[i], function(response) {}); //to script
            createTab(i+1); //this calls the next iteration of the loop
        }, 1000);
    });
}