2

I created a context menu in my chome extension as a checkbox, I am successfull to create the menu which will be visible only for editable field.

The problem is I need to display menu as checked, according to a data attribute in the textfield(focused element). With the following code, it is displaying checked in a global level(means if i checked the menu in one page/elemebt is will remains checked for other page/elements as well.)

How can I make it checked/unchecked according to the element's data attribute ?

var addinMenu = chrome.contextMenus.create({
    "title": "My Addin Menu",
    "contexts": ["editable"]
});
var disableOrEnable = chrome.contextMenus.create({
    "type": "checkbox",
    "title": "Disable",
    "parentId": addinMenu,
    "id": "myaddin_disable",
    "checked": true,
    "contexts": ["editable"],
    "onclick": disableOrEnableMyAddin
});
Ria
  • 10,237
  • 3
  • 33
  • 60
jijesh
  • 197
  • 3
  • 8
  • 1
    Related: [Showing context menu buttons only when right-clicked on classes that start with “Story”](http://stackoverflow.com/questions/14829677/showing-context-menu-buttons-only-when-right-clicked-on-classes-that-start-with) (the example works with a class name, but tweaking the code to use a data attribute shouldn't be too difficult) – Rob W Mar 09 '13 at 16:49
  • Thanks, I will try to tweak this one and let you know. – jijesh Mar 10 '13 at 04:37

1 Answers1

3

Call chrome.contextMenus.update() when the menu properties should change, e.g.:

chrome.contextMenus.update(
  disableOrEnable,
  { type: 'checkbox', checked: false });

It looks like you can catch the oncontextmenu event and make changes that are immediately reflected in the posted menu (but I see from Rob W's comment there may be a race condition with that). This works for me:

var contextMenu = chrome.contextMenus.create(
  {
    type: 'checkbox',
    title: 'how now brown cow',
    checked: false,
    contexts: ['all']
  });

var element = document.getElementById('hello');
element.addEventListener(
  'mouseover',
  function(e) {
    element.setAttribute('underMouse', 'true');
  });
element.addEventListener(
  'mouseout',
  function(e) {
    element.setAttribute('underMouse', '');
  });

window.oncontextmenu = function(e) {
  chrome.contextMenus.update(
    contextMenu,
    {
      type: 'checkbox',
      checked: element.getAttribute('underMouse') == 'true'
    });
}

If you're just interested in the currently focused textfield you could also just change your menu in focus and blur events. You may also want to check out the 'editable' option to the contexts menu property (not sure what that does but sounds like it might restrict the menu to text input elements).

Community
  • 1
  • 1
rhashimoto
  • 15,650
  • 2
  • 52
  • 80
  • This will update the status everywhere, not with respect to one control, I need to display enable/disable in different element. Lets say I have two textfield in one page, If check the menu in one of them , it should not display checked for the other one when I open context menu. – jijesh Mar 09 '13 at 13:56
  • I see. Can you not catch the [right-click](http://stackoverflow.com/questions/9500743/js-detect-right-click-without-jquery-inline) (or other context menu event) and change it? I'm not sure if it will update while the menu is already being displayed. – rhashimoto Mar 09 '13 at 14:43
  • Enter / leave events are not there it seems, only one hook is available to us is after doing the action. in Firefox, we can write our own context to display menu. – jijesh Mar 09 '13 at 15:42