how to customize rightclick on chrome devtools elements panel

Question

devtools elements panel right click

look at the image above. right clicking on any node displays menu of options like 'add attribute' and 'edit attribute' etc...

I want to be able to extend the right click menu to add my custom events. for example, I need to get the xpath of the node. I know I can extend the right click on actual page instead of extending right click on the source of the page.

https://developer.chrome.com/extensions/devtools_panels#type-ElementsPanel API's only supports selection change.

Answer 1

Unfortunately, the Extending DevTools API doesn't expose the context menu from the internal DevTools source code. Sometimes the API documentation omits some available functions/properties, so I confirmed this with:

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

It returned onSelectionChanged,createSidebarPane only, which matches the documentation.

The WebInspector object in the DevTools source code has a populateNodeContextMenu function on WebInspector.ElementsTreeElement.prototype, but this cannot be accessed through the Extending DevTools API. It is completely separate.