从 chrome 扩展中调用 DevTools 的 inspect() 函数

Question

我想创建一个可以以编程方式检查元素的扩展程序，就像用户右键单击一个元素并单击“检查”一样。我希望这种情况发生，最好是通过清单中的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 页面并检查 that，我可以在那里看到“结果：”日志，它显示：

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 中设置检查的元素？

Answer 1

正如@Pa Wa 指出的那样，chrome.devtools.inspectedWindow 通过其eval() 方法完成了这项工作：

chrome.devtools.inspectedWindow.eval('inspect(document.body)');

它甚至不需要附加调试器。