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

Question

devtools elements panel right click

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

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

https://developer.chrome.com/extensions/devtools_panels#type-ElementsPanel API仅支持选择更改。

Answer 1

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

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

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

DevTools源代码中的WebInspector对象在populateNodeContextMenu上有WebInspector.ElementsTreeElement.prototype函数，但无法通过Extending DevTools API访问。它是完全独立的。