如何獲得在Chrome擴展內容腳本D3節點的數據

Question

我們使用的是D3的例子是這樣的： https://bl.ocks.org/mbostock/raw/1341021/

如果複製&下面的代碼粘貼到控制檯並運行，所有的界限數據將顯示在控制檯中。

var svgs = document.getElementsByTagName("svg"); 
for (var i = 0; i < svgs.length; i++) { 
    var babbies = svgs[i].getElementsByTagName("*"); 
    for (var j = 0; j < babbies.length; j++) { 
     console.log(babbies[j].__data__); 
    } 
} 

不幸的是，如果我們在Chrome擴展的內容腳本使用相同的代碼，該數據的所有節點（babbies[j].__data__）的都出現undefined。我們已經運行了調試器，內容腳本中的節點babbies看起來不錯。

所以我們做的內容腳本一些研究，並意識到內容腳本在an "isolated world" environment執行。由於這個原因，內容腳本似乎不能讀取D3節點的有界數據。

我們還嘗試通過this method將腳本注入頁面。但是，注入的腳本的行爲與頁面本身包含的行爲相同，並且未以任何方式連接到擴展。

我們想知道是否有任何方法可以訪問內容腳本中D3節點的有限數據或擴展代碼？

Answer 1

正如您發現的那樣，您無法直接訪問頁面腳本作用域（例如變量和函數）。但是，您可以通過DOM與已經注入到頁面上下文中的腳本進行通信。通常，這意味着使用window.postMessage()和window.addEventListener()，但您也可以使用自定義事件。如果您想操作內容腳本中的數據，則需要將腳本注入頁面上下文並將數據回送給內容腳本。

一種example from MDN（而用於WebExtensions，它工作得很好在Chrome擴展）[下面的代碼是從MDN頁複製]：

頁面的script.js：

var messenger = document.getElementById("from-page-script"); 

messenger.addEventListener("click", messageContentScript); 

function messageContentScript() { 
    window.postMessage({ 
    direction: "from-page-script", 
    message: "Message from the page" 
    }, "*"); 

內容的script.js：

window.addEventListener("message", function(event) { 
    if (event.source == window && 
     event.data.direction && 
     event.data.direction == "from-page-script") { 
    alert("Content script received message: \"" + event.data.message + "\""); 
    } 
}); 

這也適用於我反向將消息從內容腳本發送到頁面腳本。

對於與內容腳本進行通信的這種方法，對於注入頁面的頁面腳本（除了您是作者以外）沒有什麼特別之處。如果您也控制網站，則與您的內容腳本進行通信的代碼可能位於網頁的代碼中。我說你需要控制網站，因爲一些隨機網站不太可能知道有代碼嘗試與你的內容腳本進行通信。

參考文獻：

• Content Scripts: Communication with the embedding page器（Chrome）
• Content scripts: Communicating with the web page（MDN：火狐WebExtensions）