在 crossrider 中将数据从 background.js 发送到 extension.js

Question

我正在使用 crossrider 开发浏览器扩展。 我添加了一个上下文菜单（background.js）

   var ContextData;
    appAPI.contextMenu.add("key1", "Send Data To Server", function (data) {
        var ContextData = 'pageUrl: ' + data.pageUrl + '\r\n' +
                         'linkUrl: ' + data.linkUrl + '\r\n' +
                         'selectedText:' + data.selectedText + '\r\n' +
                         'srcUrl:' + data.srcUrl;

    }, ["all"]);

在用户单击时，我想将 ContextData 发送到 extension.js. 在 extension.js 中，某些函数将接收数据并将其发送到我的服务器（一个将接受数据的 Rest API）。

为了向服务器发送数据，我已经对此进行了测试，它工作正常（extension.js 中的代码示例）

appAPI.ready(function($) {

var dataToSend =="test data";

    appAPI.request.post({
        url: 'REST API URL',
        postData: dataToSend,
        onSuccess: function(response, additionalInfo) {
            var details = {};

            details.response = response;

        },
        onFailure: function(httpCode) {
        //  alert('POST:: Request failed. HTTP Code: ' + httpCode);
        }
    });
});

如何编写一个函数来接受来自background.js 的ContextData 并将其分配给extension.js 中的dataToSend？

Answer 1

@Neel 如果我正确理解您的要求，@Rob 基本上是正确的，尽管稍微澄清一下可能会有所帮助

根据设计/架构，extension.js 代码在每个 HTML 页面上运行，即为每个加载的 URL 运行一个单独的 extension.js 实例。相反，上下文菜单在浏览器级别（不是 HTML 页面）运行，因此在 background.js 文件中正确编码。但是，background.js 代码无法直接访问在活动选项卡中的 HTML 页面上运行的 extension.js 实例代码，因此必须communicate the data via messaging。 （有关范围的更多信息，请参阅Scopes Overview）

显然，用户单击活动选项卡上的上下文菜单项（即显示正在查看的 HTML 页面的页面）；因此，一旦创建 ContextData 字符串，您可以使用 appAPI.message.toActiveTab 将字符串发送到在上下文菜单所在的页面/选项卡上运行的 extension.js 实例项目被点击。

在这种情况下，使用您的代码示例可以实现此目标，如下所示：

background.js：

appAPI.ready(function($) {
  var ContextData;
  appAPI.contextMenu.add("key1", "Send Data To Server", function (data) {
    var ContextData = 'pageUrl: ' + data.pageUrl + '\r\n' +
      'linkUrl: ' + data.linkUrl + '\r\n' +
      'selectedText:' + data.selectedText + '\r\n' +
      'srcUrl:' + data.srcUrl;
    appAPI.message.toActiveTab({type:'dataToSend', data: ContextData});
  }, ["all"]);
});

extension.js：

appAPI.ready(function($) {
  var dataToSend =="test data";

  appAPI.message.addListener(function(msg) {
    if (msg.type === 'dataToSend') {
      appAPI.request.post({
        url: 'REST API URL',
        postData: dataToSend,
        onSuccess: function(response, additionalInfo) {
            var details = {};
            details.response = response;
        },
        onFailure: function(httpCode) {
          //  alert('POST:: Request failed. HTTP Code: ' + httpCode);
        }
      });   
    }
  });
});

[免责声明：我是 Crossrider 的员工]