У меня есть простое расширение, которое использует страницу devtools для обеспечения функциональности отладки. Если щелкнуть значок browserAction, на этой странице будет вставлен скрипт содержимого на текущей вкладке. Как передать узел DOM (или nodeId) из скрипта содержимого обратно на страницу devtools, чтобы на нем можно было вызывать inspect()
?
Вот что я попробовал
manifest.json содержит:
"devtools_page": "devtools.html"
devtools.html содержит:
<script src="devtools-script.js"></script>
Devtools-script.js:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(tab.id, {
file: 'js/content.js'
}, function () {
chrome.devtools.inspectedWindow.eval('window.searchedElement', {
useContentScriptContext: true
}, function (result) {
console.log('resulting element:', result);
});
});
});
content.js:
window.searchedElement = document.body;
(я использовал document.body
для упрощения примера)
Теперь, когда я перехожу на страницу, открываю DevTools и нажимаю на расширение, происходит следующее:
- DevTools открывает мою страницу devtools.html (при открытии DevTools до нажатия кнопки мыши)
- Моя страница devtools внедряет мой контент-скрипт (после нажатия)
- Код скрипта содержимого устанавливает искомый элемент
- Страница DevTools выполняет
eval()
, чтобы вернуть элемент, ранее установленный скриптом содержимого
В результате получается лог из devtools-скрипта:
результирующий элемент: {}
Так что, очевидно, вы не можете так легко пройти узел. Возможно, я могу дать элементу атрибут id
в скрипте контента, а затем запросить его на странице devtools, но это кажется неуклюжим.
Есть ли лучший способ получить доступ к элементу в проверяемом окне со страницы devtools?