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

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

在用户单击时，我想将

ContextData

发送到

extension.js。

在extension.js，一些函数将接收数据并将其发送到我的服务器（一个接受数据的Rest API）

要将数据发送到服务器，我已经测试过了，它工作正常（extension.js中的代码示例）

---

我如何编写一个函数来从

background.js

中接受

ContextData

并将其分配给extension.js中的dataToSend？

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

根据设计/架构，extension.js代码在每个HTML页面上运行，即为每个加载的URL运行一个单独的extension.js实例。相反，上下文菜单在浏览器级别运行（不是HTML页面），因此在background.js文件中正确编码。但是，background.js代码不能直接访问活动选项卡中HTML页面上运行的extension.js实例代码，因此必须。（有关作用域的详细信息，请参阅）

显然，用户单击活动选项卡上的上下文菜单项（即显示正在查看的HTML页面的页面）；因此，一旦创建了ContextData字符串，就可以使用将该字符串发送到在单击上下文菜单项的页面/选项卡上运行的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"]);
});

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

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

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员工]

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

根据设计/架构，extension.js代码在每个HTML页面上运行，即为每个加载的URL运行一个单独的extension.js实例。相反，上下文菜单在浏览器级别运行（不是HTML页面），因此在background.js文件中正确编码。但是，background.js代码不能直接访问活动选项卡中HTML页面上运行的extension.js实例代码，因此必须。（有关作用域的详细信息，请参阅）

显然，用户单击活动选项卡上的上下文菜单项（即显示正在查看的HTML页面的页面）；因此，一旦创建了ContextData字符串，就可以使用将该字符串发送到在单击上下文菜单项的页面/选项卡上运行的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"]);
});

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

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

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员工]

请看是的，我已经阅读了此链接，但是backgrond.js和extension.js之间没有任何通信方法。通过多种方法，我们可以将消息发送到当前选项卡或所有选项卡等，但这不是我的要求。请看是的，我已经阅读了此链接，但backgrond.js和extension.js之间没有任何通信方法。通过mot的方法，我们可以发送消息到当前选项卡或所有选项卡等，但这不是我的要求。谢谢回答。我忽略了extension.js代码在每个HTML页面上运行的一点，即为每个加载的URL运行一个单独的extension.js实例。谢谢你的澄清：）很高兴。顺便说一句，除非您有特殊需要将数据发送到extension.js范围，否则实际上您可以直接从background.js范围发布数据；-）这太棒了！我认为它应该包含在从链接的演示中。谢谢你的回答。我忽略了extension.js代码在每个HTML页面上运行的一点，即为每个加载的URL运行一个单独的extension.js实例。谢谢你的澄清：）很高兴。顺便说一句，除非您有特殊需要将数据发送到extension.js范围，否则实际上您可以直接从background.js范围发布数据；-）这太棒了！我认为它应该包含在从链接的演示中。