鉻擴展 - 將數據從背景傳遞到自定義html頁面

Question

創建瀏覽器擴展，我必須從background.js打開新選項卡並將JSON數據傳遞到此新選項卡。在新選項卡中，我使用傳遞的JSON數據操作/呈現DOM。

下面是我background.js，我創造新的選項卡自定義網址和發送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! 
    } 
});