If the menu item types are identical (i.e. same type, type, etc.), then you can declare the context menu and specify multiple contexts. Then the menu item will show up if any of the contexts match.
You've however stated that you really need separate context menu declarations:
- Menu item with title "Make note" for the "selection" context.
- Menu item with title "Insert note" for the "editable" context.
- Menu item with title "Make note" when both contexts apply, e.g. when text is selected in an input field (so without the "Insert note" menu item).
The contextMenus
API does not directly support this use case. So the next best alternative is to remove the context menu for the "editable" before the context menu appears in the third situation (and restore the context menu when the third situation is no longer relevant).
In your situation, I would use selectionchange
to detect when the user (de)selects text. Upon selecting text, check whether an input field is in the selection (to do so you can combine the Selection
, Range
and/or DOM (traversal) APIs). If you find an input field, remove your desired context menu item.
Regardless of whether you find a menu item, add listeners for key and/or mouse events to detect whether the user's pointer is on an input field.
Here is an example that uses selectionchange
(https://stackoverflow.com/a/13673942/938089) and another one for Showing context menu buttons only when right-clicked on classes that start with “Story”.
chrome.contextMenus.create
call. Is that an option for you?