Google chrome extension Chrome开发工具扩展-如何在选定元素的情况下打开“元素”面板

Google chrome extension Chrome开发工具扩展-如何在选定元素的情况下打开“元素”面板,google-chrome-extension,google-chrome-devtools,Google Chrome Extension,Google Chrome Devtools,我正在开发一个ChromeDevTools扩展,它通过内容脚本获取元素列表,并通过背景层将其发送回我的面板。我想做的是从我的面板中传递一个元素,然后在元素面板中打开那行HTML 我在网上到处找了找,但没有找到任何关于这方面的具体信息 流程如下: 面板向后台发送消息说“获取元素列表” 后台将消息发送到内容脚本,然后内容脚本返回元素列表(以字符串形式) 后台从内容中获取元素列表并将其发送回面板 该面板绘制了一个元素表,我想做的是能够在我的面板中单击该行HTML,然后在“元素”面板中显示该元素 我

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

我在网上到处找了找,但没有找到任何关于这方面的具体信息

流程如下:

  • 面板向后台发送消息说“获取元素列表”
  • 后台将消息发送到内容脚本,然后内容脚本返回元素列表(以字符串形式)
  • 后台从内容中获取元素列表并将其发送回面板
该面板绘制了一个元素表,我想做的是能够在我的面板中单击该行HTML,然后在“元素”面板中显示该元素

我在panel.js和content_script.js中尝试了这一点:

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

我也尝试过只传递字符串ID,但不起作用。

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

内容脚本无法直接访问当前选定的元素。但是,您使用的任何代码都可以访问DevTools控制台和命令行api。例如,在计算代码中,您可以使用
$0
访问所选元素

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

function setSelectedElement(el) {
    // do something with the selected element
}
chrome.devtools.inspectedWindow.eval("setSelectedElement($0)",
    { useContentScriptContext: true });
从DevTools页面调用该方法,如下所示:

function setSelectedElement(el) {
    // do something with the selected element
}
chrome.devtools.inspectedWindow.eval("setSelectedElement($0)",
    { useContentScriptContext: true });
这也是从相关SO中使用的


希望这有帮助。

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

内容脚本无法直接访问当前选定的元素。但是,您使用的任何代码都可以访问DevTools控制台和命令行api。例如,在计算代码中,您可以使用
$0
访问所选元素

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

function setSelectedElement(el) {
    // do something with the selected element
}
chrome.devtools.inspectedWindow.eval("setSelectedElement($0)",
    { useContentScriptContext: true });
从DevTools页面调用该方法,如下所示:

function setSelectedElement(el) {
    // do something with the selected element
}
chrome.devtools.inspectedWindow.eval("setSelectedElement($0)",
    { useContentScriptContext: true });
这也是从相关SO中使用的


希望这有帮助。

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