Question

我想创建一个扩展，该扩展可以以编程方式检查元素，就像用户右键单击元素并单击“检查”一样。我希望最好在清单中通过devtools_page设置的devtools页面中实现。我想要确切的行为-元素面板打开，该元素在左侧突出显示，其样式在右侧栏。

我将如何实现？

我尝试过的

首先，我希望扩展程序连接调试器并在单击顶部的扩展程序图标后检查文档正文。这是我的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:
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()方法完成了工作：

<iframe src="currentcontext.aspx"></iframe>

它甚至不需要连接调试器。

从Chrome扩展程序内调用DevTools的inspect（）函数

我尝试过的

1 个答案: