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

【问题标题】：Sending data from popup to extension.js not working将数据从弹出窗口发送到 extension.js 不起作用
【发布时间】：2014-01-29 09:19:56
【问题描述】：

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

我的弹窗代码

<!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 的值未更新。它给出 NULL 值。 P.S：我能够在 background.js 和弹出窗口之间进行通信。但由于某种原因 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);
        }
    });
    });
  });

【问题讨论】：

标签： javascript browser-extension crossrider

【解决方案1】：

在此代码示例中，activeTabUrl 变量仅在收到来自 extension.js 文件的响应后才设置，因为消息传递设计为异步。因此，当在代码中调用alert(activeTabUrl); 时，还没有收到来自extension.js 代码的消息，因此在初始化时该值仍然为空。

要使用 activeTabUrl 变量，您必须等待来自 extension.js 文件的消息，因此您应该将使用该变量的代码放在消息监听器，最好作为一个函数。另请注意，在弹出窗口代码中使用警报会导致弹出窗口关闭，因此不应在弹出窗口范围内使用。

我测试了以下弹出代码，它去掉了变量以避免混淆，并将活动标签 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
}

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

【讨论】：

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