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

StackOverflow https://stackoverflow.com//questions/21043684

题

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

我的popup代码

<!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>
.

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

ActiveTaburl的值未更新。它提供空值。 P.S：我能够在Background.js和popup之间进行通信。但是对于某种原因，Appapi.Message.toActivetab函数不适用于我。我在哪里做错了？

background.js（编辑）

var tabUrl='';
 /* appAPI.tabs.getActive(function(tabInfo) {
        tabUrl = tabInfo.tabUrl;
        }); */
 appAPI.message.addListener(function(msg) {
        appAPI.tabs.getActive(function(tabInfo) {
        tabUrl = tabInfo.tabUrl;
        });
       var dataString = '{"url":"'+tabUrl+'","access":"'+msg.access+'","toread":"'+msg.toread+'","comment":"'+msg.comment+'"}';
     alert(dataString);
     appAPI.request.post({
        url: 'REST API URL',
        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);
        }
    });
  });
.

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

有帮助吗？

解决方案

在此代码示例中，只有在从 Extension.js 文件接收到响应时，才会设置变量，因为消息传递是由设计异步的。因此，当在代码中调用生成的alert(activeTabUrl);时，尚未收到消息的消息尚未收到 Extension.js 代码，因此该值仍然为空而初始化。

使用 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
}
.

[免责声明：我是一个跨越员工]

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top