CODEWITHSUNDEEP
google-chrome
kojow7
kojow7

Reputation: 11384

Adding sub contextMenus in Google Chrome extension

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?

Upvotes: 11

Views: 7659

Answers (4)

kojow7
kojow7

Reputation: 11384

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

Upvotes: 21

Simon Ugorji
Simon Ugorji

Reputation: 65

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

Upvotes: 0

deepictorial
deepictorial

Reputation: 31

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

Upvotes: 3

Alex Gallacher
Alex Gallacher

Reputation: 1

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

Upvotes: 0

Related Questions