Crossrider Browser Extension: Bidirectional communication between frontend and background

Question

I'm using crossrider.com to write a portable browser extension.

My extension consists of a frontend part (crossrider: extension page scope) and a backend part (crossrider: background scope). The background is run once per browser, the frontend on every site call.

My backend provides functions that are called by the frontend. Crossrider offers a messaging API for that.

The frontend now wants to request some data and the backend should return it. The way I was choosing was:

Backend:

appAPI.message.addListener({channel:"functionname"},function(returnval) {
    //Calculate some value v
    appAPI.message.toActiveTab(v, {channel:"functionname_returnval"});
});

Frontend:

appAPI.message.addListener({channel:"functionname_returnval"}, function(message) {
    //Do something with the return value
});
appAPI.message.toBackground(message,{channel:"functionname"});

This works, but only, if the user doesn't switch tabs in the meantime. appAPI.message.toActiveTab unfortunatelly doesn't send the answer to the tab that was calling the background function, but to the tab that is currently open - this may have changed in the meantime.

How can I send the response to the tab that called the background function?

Answer 1

You can workaround the issue as follows (it's a bit like Ethernet protocols):

1. Frontend: Include the tab's id to the message send to the Backend
2. Backend: Broadcast the response to all tabs and include the received tab id in the message
3. Frontend: Only tab with the matching tab id processes the response

Hence, using your code as a base, the solution would be as follows:

Backend:

appAPI.message.addListener({channel:"functionname"}, function(returnval) {
    //Calculate some value v
    appAPI.message.toAllTabs({tabId:returnval.tabId,rv:v}, {channel:"functionname_returnval"});
});

Frontend:

appAPI.message.addListener({channel:"functionname_returnval"}, function(message) {
    // Check if message is for this tab
    if (message.tabId === appAPI.getTabId()) {
        //Do something with the return value (message.rv)
    }
});
appAPI.message.toBackground({tabId:appAPI.getTabId(), ...},{channel:"functionname"});

Disclaimer: I am a Crossrider employee.