How to get the x and y coordinates of mouse click on browser action context menu item

Add-ons Development
#1

My Firefox add-on is adding a context menu to its browser action (browser toolbar button) using browser.menus.create() and specifying the “browser_action” context. This context menu item will open an extension page in its own popup window.

Is there a way to get the x and y screen coordinates of the toolbar button from where the right-click originated from? I want to be able to set the position of the popup window so that it is adjacent to the toolbar button from which the context menu item invocation happened.

#2

In Firefox maybe partially yes, see " targetElementId":


That way you should get the element on which the context menu was opened and then use getBoundingClientRect to get coordinates.
#3

Hey @juraj.masiar, in my background script I’m trying to do something similar, console.log("info object target element id : ", info.targetElementId);. This log prints undefined for target element id. Do you know when this element can be undefined?

#4

Sadly no, I’ve never used this API because of the bad compatibility.

Anyway, the docs says:

targetElementId Optional

integer . An identifier of the element, if any, over which the context menu was created. Use menus.getTargetElement() in the content script to locate the element. Note that this is not the id attribute of the page element.

So I think you need to use this in the content script instead. Then once you extract what you need, send a message to your background script.

#5

Sure that makes sense, but I think the doc is worded a little differently. I understand that menus.getTargetElement() needs to be called in the content script, but what about info.targetElementId? Is that also in the content script? I believe it should work for the background script, here’s a snippet of code I’m working with

browser.contextMenus.onClicked.addListener(async function (info, tab) {
  console.log("Menu clicked");

  console.log("info object: ", info);
  console.log("info object target element id : ", info.targetElementId);

The issue is that info.targetElementId seems to be undefined in the background script.

#6

So, I’ve done some experimenting and I have to say it doesn’t work as I would expect…

Try to run this example: