Adding sub contextMenus in Google Chrome extension

user_4698242 0
Viewed 4863

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?

google-chrome
4 Answers

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
});
user_46982420

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"]
});
user_131483700

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

context menus chrome extension mv3

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

enter image description here

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

TAB PREVIEW

enter image description here

user_146042240
Related