Chrome扩展 - 将数据从后台传递到自定义html页面 [英] chrome extension - passing data from background to custom html page

问题描述

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

下面是我的background.js的一部分，其中我使用自定义URL创建新标签并发送JSON数据对象

  .... 
 var analyticsUrl = chrome.extension.getURL（analytics.html）; 
 chrome.tabs.create（{url：analyticsUrl，selected：true}，sendDataToAnalytics）; 
 
函数sendDataToAnalytics（tab）
 {
 console.log（JSON.stringify（txnDataJSON））; 
 chrome.tabs.sendMessage（tab.id，{action：renderChartsTxns，txns：JSON.stringify（txnDataJSON）}）; 
} 
 .... 
  

我的自定义analytics.html网页有

 < script src =analytics.jstype =text / javascript>< / script> 
  

analytics.js如下所示

  chrome.runtime.onMessage.addListener（function（request，sender，sendResponse）{
 if（request.action ==renderChartsTxns）
 {
 // JSON解析和analytics.html DOM处理
}）; 
  

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

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

我今天早上做了这个安装程序，一切都正常工作了几个小时（能够接收分析中的JSON数据。 js），不知道以后发生了什么变化，并且我在analytics.js中丢失了消息接收（用于调试，我尝试清除浏览器缓存，卸载并重新安装了Chrome以及更多，但没有运气！）

解决方案

回到 chrome.tabs.create 会在创建标签后立即返回，而不是在完全加载后返回。

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

这里的正确逻辑是发送消息请求 >数据，然后使用 sendResponse 从后台传递数据。

  // analytics.js 
 
 chrome.runtime.sendMessage（{action：getTxns}，function（txns）{
 //处理数据
}）; 
 
 // background.js 
 
 //在打开标签之前注册这个
 chrome.runtime.onMessage.addListener（function（request，sender，sendResponse）{ 
 if（request.action ==getTxns）{
 sendResponse（txnDataJSON）; //不需要序列化自己！
} 
}）; 
  

Creating browser extension where I have to open new tab from background.js and pass JSON data to this new tab. In new tab I am manipulating/rendering DOM using passed JSON data.

Below is part of my background.js where I create new tab with custom URL and send JSON data object

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

My custom analytics.html page has

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

And analytics.js looks like below

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

Problem is, my analytics.js listener is never receiving any messages. I've confirmed that background.js is sending JSON message as expected (using background page debugging)

BTW, analytics.js/html are not registered as part of manifest.json file but these files are part of extension package.

I did this setup today morning and everything was working properly for few hours (was able to receive JSON data in analytics.js), not sure what changed later and I lost message receiving in analytics.js (for debugging I tried clearing browser cache, uninstall and reinstalled chrome and much more but no luck yet!)

解决方案

The callback of chrome.tabs.create returns as soon as the tab is created, not after it fully loads.

As such, you have a race condition: your message is potentially sent before the listener is initialized. Since it's a race condition, it can sometimes work.

The correct logic here would be to send a message requesting data from the newly opened tab, and use sendResponse to pass that data from the background.

// 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页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！