javascript - Crossrider 浏览器扩展 : Bidirectional communication between frontend and background

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

您可以按如下方式解决该问题(有点像以太网协议(protocol)):

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 的员工。