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

 herozhx 发布于 2023-02-08 15:10

我正在使用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"]);

在用户点击我要发送ContextDataextension.js.at 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);
        }
    });
});

我怎么能写一个函数来接受ContextDatabackground.js它在extension.js分配到dataToSend?

1 个回答
  • @Neel如果我理解你的要求,@ Rob基本上是正确的,虽然稍微澄清可能有所帮助

    根据设计/体系结构,extension.js代码在每个HTML页面上运行,即为每个加载的URL运行单独的extension.js实例.相反,上下文菜单在浏览器级别(不是HTML页面)运行,因此在background.js文件中正确编码.但是,background.js代码无法直接访问活动选项卡中HTML页面上运行的extension.js实例代码,因此必须通过消息传递来传递数据.(有关范围的更多信息,请参阅范围概述)

    显然,用户单击活动选项卡上的上下文菜单项(即显示正在查看的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员工]

    2023-02-08 15:13 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有