Javascript 将数据从弹出窗口发送到extension.js不起作用_Javascript_Browser Extension_Crossrider

Javascript 将数据从弹出窗口发送到extension.js不起作用

javascript

Javascript 将数据从弹出窗口发送到extension.js不起作用,javascript,browser-extension,crossrider,Javascript,Browser Extension,Crossrider,我正在使用crossrider开发浏览器扩展。我需要将一些数据从弹出窗口发送到extension.js appAPI.ready(function($) { // Message listener appAPI.message.addListener(function(msg) { if (msg.type === 'active-tab-url') // Send active tab's URL to popup appAPI.message.toPo

我正在使用crossrider开发浏览器扩展。我需要将一些数据从弹出窗口发送到extension.js

appAPI.ready(function($) {
  // Message listener
  appAPI.message.addListener(function(msg) {
    if (msg.type === 'active-tab-url')
      // Send active tab's URL to popup
      appAPI.message.toPopup({
        type: 'active-tab-url',
        url:encodeURIComponent(location.href)
      });
  });

  // THE REST OF YOUR CODE
});

我的弹出代码

<!DOCTYPE html>
<html>
<head>
<!-- This meta tag is relevant only for IE -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<script type="text/javascript">
/************************************************************************************
  This is your Popup Code. The crossriderMain() code block will be run
  every time the popup is opened.

  For more information, see:
  http://docs.crossrider.com/#!/api/appAPI.browserAction-method-setPopup
*************************************************************************************/

function crossriderMain($) {
  // var to store active tab's URL
  var activeTabUrl = null;

  // Message listener for response from active tab
  appAPI.message.addListener(function(msg) {
    if (msg.type === 'active-tab-url') activeTabUrl = msg.url;
  });

  // Request URL from active tab
  appAPI.message.toActiveTab({type: 'active-tab-url'});

    alert(activeTabUrl);
  // THE REST OF YOUR CODE
}
</script>

</head>
<body>

Hello World

</body>
</html>

未更新activeTabUrl的值。它给出空值。附言：我能够在background.js和popup之间进行通信。但由于某些原因，appAPI.message.toActiveTab函数对我不起作用。我在哪里犯错

Background.js（编辑）

Background.js的工作代码

appAPI.message.addListener(function(msg) {
    appAPI.tabs.getActive(function(tabInfo) {     
       var dataString = '{"url":"'+tabInfo.tabUrl+'","access":"'+msg.access+'","toread":"'+msg.toread+'","comment":"'+msg.comment+'"}';
    // alert(dataString);
     appAPI.request.post({
        url: 'http://fostergem.com/api/bookmark',
        postData: dataString,
        onSuccess: function(response, additionalInfo) {
            var details = {};
            details.response = response;
            appAPI.message.toPopup({
            response:response
        });

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

在这个代码示例中，activeTabUrl变量仅在从extension.js文件接收到响应后设置，因为消息传递在设计上是异步的。因此，当调用

alert（activeTabUrl）时

在代码中，尚未从extension.js代码接收回消息，因此在初始化时该值仍然为null

要使用activeTabUrl变量，您必须等待extension.js文件中的mesage，因此您应该将使用该变量的代码放在消息侦听器的回调中，最好作为函数。还要注意，在弹出代码中使用警报会导致弹出关闭，因此不应在弹出范围中使用

我测试了以下弹出式代码，该代码删除了变量以避免混淆，并将活动选项卡URL作为参数传递给消息侦听器中调用的函数，它按预期工作：

function crossriderMain($) {
  // Message listener for response from active tab
  appAPI.message.addListener(function(msg) {
    if (msg.type === 'active-tab-url') ShowPageUrl(msg.url);
  });

  function ShowPageUrl(url) {
    $('#page-url').html('<b>Page URL</b>: ' + url);
  }

  // Request URL from active tab
  appAPI.message.toActiveTab({type: 'active-tab-url'});

    //alert(activeTabUrl);
  // THE REST OF YOUR CODE
}

函数crossriderMain（$）{
//来自活动选项卡的响应的消息侦听器
appAPI.message.addListener（函数（msg）{
如果（msg.type===“活动选项卡url”）显示页面url（msg.url）；
});
函数ShowPageUrl（url）{
$（'#页面url'）.html（'页面url:'+url'）；
}
//从活动选项卡请求URL
appAPI.message.toActiveTab（{type:'activetaburl'}）；
//警报（activeTabUrl）；
//代码的其余部分
}

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

它成功了。但我认为没有什么错误，因为从弹出窗口发送消息和接收回复要花很多时间。在某些选项卡上，即使等待超过2分钟，它也不起作用。所以它不能用于生产。但是，由于我需要将表单数据连同url一起发布到我的服务器，所以在提交表单时，我将表单数据发送到extension.js，并从那里将数据发布到我的服务器。但它同样只适用于少数选项卡。然后我尝试将表单数据发布到background.js，并从那里发布到我的服务器。但是由于background.js只加载一次，所以无法获取当前选项卡url。在我的测试中，响应时间非常快。。。对于通过消息传递的少量数据，不到一秒钟的时间是应该的。关于在后台作用域中可用的URL，您可以在支持该URL的浏览器上使用，或者使用与答案中提到的类似的消息传递技术，即页面在激活时始终使用当前URL向后台作用域发送消息。我使用了appAPI.tabs.getActive。但它没有给出活动选项卡的url。早些时候，我认为它给出了首先加载的选项卡的url。但在测试了几次之后，我发现它给出了以前加载的选项卡的url。我在问题中添加了代码。假设浏览器中有10个打开的选项卡。我安装了扩展，并在crossrider.com的扩展中提交了表单。然后我切换到stackoverflow并提交了表单。但它仍然给出了crossrider.com的url。然后让我们假设我移动到另一个选项卡（google.com）。现在它将给出堆栈溢出的url。通过这种模式，它实际上给出了前一个选项卡的url，而不是我在扩展中提交表单的活动选项卡：（现在我在我的代码中发现了问题。发布数据时，tabUrl仍然没有更新。但由于它是一个全局变量，所以它仍然保留以前的url。我在代码中做了一些修改，它工作得很好。：）

function crossriderMain($) {
  // Message listener for response from active tab
  appAPI.message.addListener(function(msg) {
    if (msg.type === 'active-tab-url') ShowPageUrl(msg.url);
  });

  function ShowPageUrl(url) {
    $('#page-url').html('<b>Page URL</b>: ' + url);
  }

  // Request URL from active tab
  appAPI.message.toActiveTab({type: 'active-tab-url'});

    //alert(activeTabUrl);
  // THE REST OF YOUR CODE
}