Chrome devtools扩展 - 如何打开元素面板并选择元素

Question

我正在开发一个Chrome devtools扩展程序，它通过内容脚本获取元素列表，并通过后台层将其发送回我的面板。我想要做的是从我的面板传递一个元素，并在元素面板中打开该行HTML。

我在网上看过，但是没有找到任何具体的内容。

流程是这样的：

• 面板向背景发送消息“get me list of elements”
• 后台向内容脚本发送消息，然后返回元素列表（以字符串形式）
• 后台从内容中获取元素列表并将其发送回面板

Panel绘制了一个元素表，我想要做的是能够在我的面板中单击该行HTML，然后在Elements面板中显示该元素。

我在panel.js和我的content_script.js中试过这个：

chrome.devtools.inspectedWindow.eval("inspect(window.getElementById('" + $(code).attr('id') + "'))");

我也尝试过只传递字符串ID，但它没有用。

Answer 1

要将选定元素传递给内容脚本，请尝试使用文档中的代码：

  

内容脚本无法直接访问当前所选元素。但是，使用inspectedWindow.eval执行的任何代码都可以访问DevTools控制台和命令行API。例如，在评估的代码中，您可以使用$0来访问所选元素。

内容脚本中的代码可能如下所示：

function setSelectedElement(el) {
    // do something with the selected element
}

从DevTools页面调用方法，如下所示：

chrome.devtools.inspectedWindow.eval("setSelectedElement($0)",
    { useContentScriptContext: true });

这也可以从相关的SO post中使用。

希望这有帮助。