Adding sub contextMenus in Google Chrome extension

Question

I can currently create a contextMenu (right-click menu) in a Google Chrome extension as follows:

chrome.contextMenus.create({
  title: "The name to click",
  contexts:["selection"],
  onclick: theFunctionToRun
});

However, I would like to be able to add a contextMenu of submenus. I am implementing 10 tools that can be invoked through the right-click menu, but would like to have 2 menus each with 5 tools in them based on their categorization.

I have not been able to find any info online or in documentation about this. I'm surprised other people do not want this feature as well so maybe I am just searching for the wrong thing.

Is creating a contextMenu of submenus possible? If so, how can I do this?

score 20 · Accepted Answer · answered Nov 10 '17 at 22:34

20

I figured it out. I needed to specify an id in the parent menu and then reference the parent ID in the other menus as follows:

chrome.contextMenus.create({
  title: "The name of the parent menu",
  id: "parent",
  contexts:["selection"]
});

chrome.contextMenus.create({
  title: "The first action to click",
  parentId: "parent",
  contexts:["selection"],
  onclick: theFirstFunction
});

chrome.contextMenus.create({
  title: "The second action to click",
  parentId: "parent",
  contexts:["selection"],
  onclick: theSecondFunction
});

answered Nov 10 '17 at 22:34

kojow7

10,308
17
80
135

2

You can also use the return value of `chrome.contextMenus.create()` and use it as a `parentId`, then you don't need to set the `id`. – TrySpace Nov 30 '19 at 12:58
@redfoxofdeath It should work. Maybe create another post with your code and someone should respond to it. – kojow7 Apr 20 '21 at 22:14
How to create them separately without being collapsed into one single parent item? – EnthusiastiC Jan 30 '23 at 22:11
@EnthusiastiC Not exactly sure what you mean, if you remove the parentId line, then they will not be a child entry. – kojow7 Jan 31 '23 at 15:23
1

@kojow7 In [this documentation](http://www.dre.vanderbilt.edu/~schmidt/android/android-4.0/external/chromium/chrome/common/extensions/docs/contextMenus.html) they confirmed this matter. " You can create as many context menu items as you need, but if more than one from your extension is visible at once, Google Chrome automatically collapses them into a single parent menu." – EnthusiastiC Jan 31 '23 at 15:58

score 3 · Answer 2 · edited Aug 11 '20 at 08:17

Basically a combination of answers above worked for me. This is my example (there are 2 ways to create menus - declare in var or directly use in chrome.contextMenus.create) :

var contextMenuItem = {
    "id": "addRecipe",
    "title": "Add Recipe",
    "contexts": ["selection"]
};

chrome.contextMenus.create(contextMenuItem);

chrome.contextMenus.create({
    title: "Add new recipe name",
    parentId: "addRecipe",
    id: "name",
    contexts:["selection"]
});

chrome.contextMenus.create({
    title: "Add shopping list",
    parentId: "addRecipe",
    id: "list",
    contexts:["selection"]
});

chrome.contextMenus.create({
    title: "Add ingredients",
    parentId: "addRecipe",
    id: "ingredients",
    contexts:["selection"]
});

chrome.contextMenus.create({
    title: "Add cooking steps",
    parentId: "addRecipe",
    id: "steps",
    contexts:["selection"]
});

score 0 · Answer 3 · answered Mar 03 '18 at 16:12

It may be a bit simpler. First I will own up and say this is not my original code, however, the submenu bit is. The code I am basing it on comes from: https://www.youtube.com/watch?v=DH7QVll30XQ and his Github repo https://github.com/gopinav/Chrome-Extensions. Here' how I changed the event page just added another context menu item. The parent menu title is the name on the Manifest which I changed just to be sure. I hope this is of some use to somebody.

    var priceItem = {
    "id": "saveAsPrice",
    "title": "Save as Price",
    "contexts": ["selection"]
};

var nameItem = {
    "id": "saveAsName",
    "title": "Save as Name",
    "contexts": ["selection"]
};


chrome.contextMenus.create(priceItem);
chrome.contextMenus.create(nameItem);

Chrome Extension Context submenu

Thanks for your input, but this isn't what I was looking for. I needed to be able to add both parent and child sub menus. You have only included code that is for 'parent' menus without child items. — kojow7, Apr 14 '18 at 01:51

Simon Ugorji · Answer 4 · 2022-06-24T18:05:35.377

For MV3 you can add sub-menus to the context menu like this;

const menuId = "myMenu";

function callback1(){
  console.log('my first callback');
};

function callback2(){
  console.log('my second callback');
};

//primary menu
chrome.contextMenus.create({
  id : menuId,
  title : "Menu Name",
  contexts : ["all"]
});

//sub-menu
chrome.contextMenus.create({
  id : "myMenuSub1",
  parentId : menuId,
  title : "An Action",
  contexts : ["all"]
}, callback1);

//sub-menu
chrome.contextMenus.create({
  id : "myMenuSub2",
  parentId : menuId,
  title : "Another Action",
  contexts : ["all"]
}, callback2);

PREVIEW

ONCLICK EVENTS

To handle onclick events on any of the sub-menus, do something like this:

chrome.contextMenus.onClicked.addListener((info, tab) => {
  console.log(info);
  console.log(tab);
});

The info parameter returns an object containing the context menu item's data. You can use it to check the sub-menu item that was clicked, and then perform an action on it.

INFO PREVIEW

The tab callback parameter returns an object containing the current tab where the sub-menu item was clicked.

Adding sub contextMenus in Google Chrome extension

4 Answers4

PREVIEW

ONCLICK EVENTS

INFO PREVIEW

TAB PREVIEW

Linked