如何自定义右键单击 chrome devtools 元素面板

【问题标题】：how to customize rightclick on chrome devtools elements panel如何自定义右键单击 chrome devtools 元素面板
【发布时间】：2016-06-24 15:16:24
【问题描述】：

看上面的图片。右键单击任何节点会显示“添加属性”和“编辑属性”等选项菜单...

我希望能够扩展右键菜单来添加我的自定义事件。例如，我需要获取节点的 xpath。我知道我可以在实际页面上扩展右键单击，而不是在页面源上扩展右键单击。

【问题讨论】：

【解决方案1】：

不幸的是，Extending DevTools API 没有从内部 DevTools 源代码中公开上下文菜单。有时 API 文档会省略一些可用的函数/属性，所以我确认了这一点：

alert(Object.getOwnPropertyNames(chrome.devtools.panels.elements));

它只返回onSelectionChanged,createSidebarPane，与文档相匹配。

DevTools 源代码中的 WebInspector 对象在 WebInspector.ElementsTreeElement.prototype 上有一个 populateNodeContextMenu 函数，但这不能通过扩展 DevTools API 访问。它是完全独立的。

【讨论】：