Javascript chrome扩展-将数据从后台传递到自定义html页面

正在创建浏览器扩展，我必须在其中从background.js打开新选项卡，并将JSON数据传递到此新选项卡。在新选项卡中，我使用传递的JSON数据操作/呈现DOM

下面是my background.js的一部分，我在其中创建了带有自定义URL的新选项卡，并发送JSON数据对象

.... 
var analyticsUrl = chrome.extension.getURL("analytics.html");
chrome.tabs.create({ url: analyticsUrl, selected: true }, sendDataToAnalytics);

function sendDataToAnalytics(tab)
{
    console.log(JSON.stringify(txnDataJSON));
    chrome.tabs.sendMessage(tab.id, {"action" : "renderChartsTxns", "txns" : JSON.stringify(txnDataJSON)});
}
....

我的custom analytics.html页面已关闭

<script src="analytics.js" type="text/javascript"></script>  

问题是，我的analytics.js侦听器从未收到任何消息。我已经确认background.js正在按预期发送JSON消息（使用后台页面调试）

顺便说一句，analytics.js/html未注册为manifest.json文件的一部分，但这些文件是扩展包的一部分

---

我今天早上做了这个设置，所有东西都正常工作了几个小时（能够在analytics.js中接收JSON数据），不知道后来发生了什么变化，我在analytics.js中丢失了消息接收功能（为了调试，我尝试清除浏览器缓存，卸载并重新安装chrome等等，但还没有成功！）

chrome.tabs.create的回调将在创建选项卡时返回，而不是在完全加载之后返回

因此，您有一个竞争条件：您的消息可能在侦听器初始化之前发送。由于这是一个比赛条件，它有时可以工作

正确的逻辑是从新打开的选项卡发送请求数据的消息，并使用

sendResponse

从后台传递数据

// analytics.js

chrome.runtime.sendMessage({"action" : "getTxns"}, function(txns) {
  // Process the data
});

// background.js

// Register this before opening the tab
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if(request.action == "getTxns") {
    sendResponse(txnDataJSON); // No need to serialize yourself!
  }
});

---

谢谢Xan，你能提供一些例子吗？@Rushik提供（不得不修复我使用的

sendMessage

，对不起）

// analytics.js

chrome.runtime.sendMessage({"action" : "getTxns"}, function(txns) {
  // Process the data
});

// background.js

// Register this before opening the tab
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if(request.action == "getTxns") {
    sendResponse(txnDataJSON); // No need to serialize yourself!
  }
});