Я хочу создать расширение, которое может программно проверять элемент, как если бы пользователь щелкнул правой кнопкой мыши по элементу и нажал «Проверить». Я хочу, чтобы это происходило, предпочтительно, со страницы devtools, установленной через devtools_page в манифесте. Мне нужно точное поведение - панель «Элементы» открывается, элемент выделяется слева, а его стили - на правой боковой панели.
Как бы мне этого добиться?
Что я пробовал
В качестве отправной точки я хочу, чтобы расширение подключило отладчик и проверило тело документа, как только я нажму на значок расширения в верхней части. Вот мой devtools_page:
chrome.browserAction.onClicked.addListener(function (tab) {
chrome.debugger.attach({tabId: tab.id}, "1.0", function () {
chrome.debugger.sendCommand({tabId: tab.id}, 'Runtime.evaluate', {
expression: 'console.log(document.body); inspect(document.body);'
}, function () {
console.log('Result:', arguments);
});
});
});
Если я сейчас посмотрю на окно DevTools проверяемой страницы, я смогу правильно просмотреть журнал body и щелкнуть по нему, чтобы открыть элемент внутри инспектора. Однако, если я перехожу на страницу devtools расширения и проверяю , что , я вижу там журнал "Result:", который показывает:
Result:
Arguments(1)
0:
exceptionDetails: {columnNumber: 28, exception: {…}, exceptionId: 2, lineNumber: 0, scriptId: "88", …}
result:
className: "ReferenceError"
description: "ReferenceError: inspect is not defined↵ at <anonymous>:1:29"
objectId: "{"injectedScriptId":1,"id":1}"
subtype: "error"
type: "object"
__proto__: Object
__proto__: Object
Таким образом, оцененный код не имеет доступа к функции inspect(), даже если у него есть доступ к элементу, который я хочу проверить. Очевидно, он выполняется в контексте страницы, а не в контексте его DevTools.
Как программно установить проверенный элемент в DevTools из моего расширения?