I'm trying to find a way to send a lot of data from the background script to popup.js and display it in real time. so for example if i'm sending an element when the popup is open, it will display it there. If the popup is closed it should wait until the user will open it up. The problem I'm having is with finding a good way to do the real time messaging. This is my append to popup function, that being called with elements and the tabId:
function appendPopUp(element, tab) {
chrome.runtime.onConnect.addListener(function(port) {
console.assert(port.name == "knockknock");
port.onMessage.addListener(function(msg) {
if (msg.tab == tab) {
port.postMessage({element: element});
return true;
}
});
});
}
as you can see, I wait for the onConnect in order to start sending messages, and then wait for a message from pop.up with the tabId to check if it's matching. my popup.js:
var ourWindow = null;
chrome.tabs.getSelected(window.id,
function (response) {
ourWindow = response.id;
var port = chrome.runtime.connect({name: "knockknock"});
port.postMessage({tab: ourWindow});
port.onMessage.addListener(function(msg) {
console.log(msg.element);
document.getElementById('data').innerHTML += msg.element;
return true;
});
});
I send a message there only when i'm connecting. But, if i'm trying to send a message after every message that I receive from the background script, it goes into an infinite loop until the extension crashes. The data will go into the innerHTML only when I'm opening, but newer data that was processed after the opening of the popup will not show.
