Chrome devtools 扩展 - 如何在选择元素的情况下打开元素面板答案

【问题标题】：Chrome devtools extension - How to open elements panel with element selectedChrome devtools 扩展 - 如何在选择元素的情况下打开元素面板
【发布时间】：2017-03-19 14:16:14
【问题描述】：

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

我在网上四处查看，但没有找到任何关于此的具体内容。

流程是这样的：

面板向后台发送消息说“获取我的元素列表”
后台向内容脚本发送消息，然后返回元素列表（以字符串形式）
后台从内容中获取元素列表并将其发送回面板

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

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

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

我也尝试过只传递一个字符串 ID，但它不起作用。

【问题讨论】：

好的，所以我的流程是这样的：Devtools 面板将消息发送到后台，然后将消息发送到内容脚本。内容脚本进行一些 dom 操作，然后将几个不同的数组（其中包含来自页面的 HTML 字符串值）发送到背景层，然后再将其发送回我的面板。在我的面板中，我列出了内容脚本返回的 HTML 字符串。每行 HTML 旁边都有一个按钮，上面写着“检查”。我想做的是单击该按钮并在“元素”面板中显示该元素。

标签： google-chrome-extension google-chrome-devtools

【解决方案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。

希望这会有所帮助。

【讨论】：