How do I know which element was clicked in context menus?

Question

We develop extensions for Chrome, Firefox and Safari. We want to add context menus to our extensions that will show when right clicking on any form element which is editable. I tried to add an editable context menu to Chrome:

chrome.contextMenus.create({
    "title": "Test editable menu item",
    "contexts": ["editable"],
    "onclick": function(info, tab) {
        console.log("item " + info.menuItemId + " was clicked");
        console.log("info: " + JSON.stringify(info));
        console.log("tab: " + JSON.stringify(tab));
    }
});

But I need to know which element the user clicked on, and info and tab don't contain the element. How do I know which element the user clicked? I would like to have a jQuery object containing the element.

The info object contains the following attributes:

"editable": true
"menuItemId"
"pageUrl"

See "Subproblem 1" in https://stackoverflow.com/a/28198957/938089 — Rob W, Mar 09 '15 at 10:41

score 3 · Answer 1 · answered Mar 10 '15 at 21:03

3

One of the best workarounds I know of is to follow the advice given in this thread to use content scripts to inject a listener in the target page for the 'contextmenu' event.

answered Mar 10 '15 at 21:03

Antony Sargent

842
7
11

1

That qualifies as a link-only answer. Please include relevant parts of the advice in here, your summary is too short. – Xan Mar 10 '15 at 22:07
1

Relevant snippet: "use document.addEventListener( "contextmenu", function... ) from a content script." – Antony Sargent Mar 11 '15 at 20:56

score -2 · Answer 2 · answered Dec 22 '15 at 12:13

I know that is to late for you but I answer here for anyone else who's google it.

My solution was to create a mapping between created menu items and the business model (in this case a "data" array):

var itemsDic = {};
function onClickHandler(info) {
    alert(itemsDic[info.menuItemId]);
};

for(i in data) {
    var currentItem = chrome.contextMenus.create({
            parentId: item,
            title: data[i].ItemName,
            type: data[i].ItemType,
            contexts: ["editable"],
            onclick : onClickHandler
    });
    itemsDic[currentItem] = data[i];
}

You misunderstand the question. The question is not finding out which menu entry was clicked, but what was the HTML element the context menu was invoked on. — Xan, Dec 22 '15 at 14:54

How do I know which element was clicked in context menus?

2 Answers2