Как получить данные узла D3 в скрипте содержимого Chrome Extension

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

К сожалению, если мы будем использовать тот же самый код в скрипта содержимого из Extension 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 + "\""); 
    } 
}); 

Это также работает I n отменить отправку сообщений из вашего скрипта контента в скрипты страниц.

В отношении этого метода связи с сценарием контента нет ничего особенного в том, что скрипт страницы вы вводили на страницу (кроме того, что вы являетесь автором). Если вы также управляете сайтом, код для связи с вашим скриптом контента может быть в коде, обслуживаемом веб-страницей. Я говорю, что вам нужно контролировать сайт, потому что маловероятно, что какой-нибудь случайный веб-сайт будет знать, что у него есть код, чтобы попытаться связаться с вашим сценарием контента.

Ссылки:

• Content Scripts: Communication with the embedding page (хром)
• Content scripts: Communicating with the web page (MDN: Firefox WebExtensions)