У меня есть простое расширение, которое использует страницу инструментов разработчика для обеспечения функциональности отладки. При щелчке по значку browserAction эта страница вставляет сценарий содержимого в текущую вкладку. Как передать узел DOM (или nodeId) из сценария содержимого обратно на страницу инструментов разработчика, чтобы на нем можно было вызвать 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.info('resulting element:', result);
});
});
});
content.js:
window.searchedElement = document.body;
(Я использовал document.body
, чтобы упростить пример)
Теперь, когда я перехожу на страницу, открываю DevTools и нажимаю на расширение, происходит следующее:
eval()
для возврата элемента, ранее установленного сценарием содержимогоРезультирующий журнал из сценария разработчика:
resulting element: {}
Таким образом, очевидно, что вы не можете так легко передать узел. Возможно, я могу присвоить элементу атрибут id
в сценарии содержимого, а затем запросить его на странице инструментов разработчика, но это кажется неуклюжим.
Есть ли лучший способ получить доступ к элементу в проверяемом окне со страницы инструментов разработчика?
Между процессами (например, скриптом содержимого, страницей инструментов разработчика, страницей фонового скрипта) в расширении Chrome могут передаваться только данные, пригодные для JSON, а элементы DOM не поддерживаются JSON. Я думаю, что ваш сценарий содержимого может получить индекс элементов в document.getElementsByTagName ('*'), тогда ваш сценарий devtools должен иметь возможность использовать консольный API devtools
inspect(document.getElementsByTagName('*')[thatIndex])