Crossrider 浏览器扩展：前端和后台之间的双向通信

Question

我正在使用 crossrider.com 编写便携式浏览器扩展。

我的扩展由前端部分（crossrider：扩展页面范围）和后端部分（crossrider：背景范围）组成。每个浏览器后台运行一次，每个站点调用的前端运行一次。

我的后端提供由前端调用的函数。 Crossrider 为此提供了一个消息传递 API。

前端现在想要请求一些数据，后端应该返回它。我选择的方式是：

后端：

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

前端：

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

这有效，但前提是用户同时不切换标签。不幸的是，appAPI.message.toActiveTab 没有将答案发送到调用后台函数的选项卡，而是发送到当前打开的选项卡 - 这可能在此期间发生了变化。

如何将响应发送到调用后台函数的选项卡？

Answer 1

您可以通过以下方式解决该问题（有点像以太网协议）：

1. 前端：将标签的 ID 添加到发送到后端的消息中
2. 后端：将响应广播到所有选项卡，并在消息中包含收到的选项卡 ID
3. 前端：只有具有匹配标签 ID 的标签才会处理响应

因此，以您的代码为基础，解决方案如下：

后端：

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

前端：

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"});

免责声明：我是 Crossrider 的员工。