How to configure right button on chrome devtools toolbar

Question

right-click devtools toolbar

Look at the image above. right-clicking on any node displays a menu of parameters such as "add attribute" and "edit attribute", etc.

I want to be able to expand the right-click menu to add my custom events. for example, I need to get xpath for node. I know that I can expand the right mouse button on the actual page, and not just right-click on the page source.

The https://developer.chrome.com/extensions/devtools_panels#type-ElementsPanel API only supports change choices.

Answer 1

Unfortunately, the DevTools API Extension does not display a context menu from the DevTools internal source code. Sometimes the API documentation does not have some available functions / properties, so I confirmed this with

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

It only returns onSelectionChanged,createSidebarPane , which is consistent with the documentation.

The WebInspector object in the DevTools source code has a populateNodeContextMenu function on WebInspector.ElementsTreeElement.prototype , but it cannot be accessed through the DevTools extension APIs. It is completely divided.