Question

创建浏览器扩展，我必须从background.js打开新选项卡，并将JSON数据传递给这个新选项卡。在新标签中，我使用传递的JSON数据操作/渲染DOM。

以下是我的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)});
}
....

我的自定义analytics.html页面有

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

analytics.js如下所示

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if(request.action == "renderChartsTxns")
    {
        // JSON parsing and analytics.html DOM processing
     });

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

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

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

Answer 1

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

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

1 个答案: