Grouped context menu items in a Chrome extension - google-chrome

Question

I have the following data structure (sample):
Folder1
- Folder2
- Snip1
- Snip2
- Folder3
- Snip3
- Snip4
- Folder4
- Snip5
There is no limit on nesting of folders inside one another
I need to allow the user to insert a particular snip whenever he/she right-clicks on a textarea. Now, I can either flatten the above data to:
- Snip1
- Snip2
- Snip3
- Snip4
- Snip5
to simply create context menu entries. But, I want better user experience so I will prefer something like:
to simulate the folder structure in the actual data.
Question: Is it possible to generate such type of context menu items' structure though Chrome extensions?
I have looked at the docs, but found nothing useful.
UPDATE: For anyone interested in the code, here's it:
// this is the top most folder
this.createCtxMenuEntry = function(parentId){
this.list.forEach(function(object, index){
var id = chrome.contextMenus.create({
contexts: ["editable"],
id: // generateUniqueIDYourself
title: object.name,
parentId: parentId
});
if(object is folder) object.createCtxMenuEntry(id);
});
};
The trick is to use the parentId property.

Answer 1

yes, it's possible to create dynamically (based on user data and changes) nested context menu with chrome extension
I created exactly the same thing with my V7 Notes extension (inserting notes in text fields)
example:
first you need to create main item and then recursively (I guess you have folder structure) create sub-folders appended to that main item
var OriginalArrayData = [....]; //or whatever you have
chrome.contextMenus.create({
title : "MAIN title",
id: "main_ID", //call it whatever you like, but it needs to be unique
type : "normal",
contexts : ["editable"],
},function() {
buildTree(OriginalArrayData, 'main_ID'); //pass original array and main_ID in first call
});
function buildTree(a, b) {
for (var i=0, l=a.length; i<l; i++) { //loop trough passed data
var notId = a[i].id, //create random unique ID for new items, I'm using id's from my notes
notText = a[i].text; //create item title, I'm using text from my notes
chrome.contextMenus.create({ //create CTX item
id: notId,//for ID use previously created
parentId: b,//for parent ID use second passed argument in function
title: notText,//for title use previously creted text (or whatever)
type: "normal",
contexts: ["editable"]
});
if (a[i].list) buildTree(a[i].list, notId);//if folder, recursively call the same function
}
}
on the last line, whenever your loop runs into a folder, you need to call your buildTree function, but this time you need to pass data/array from within that folder, and that folder ID so that it can be used as parent ID for further children
When function finishes traversing trough sub folders, it returns one step UP where it was entering those sub-loops
So, to summ up:
- create main item
- in callback create recursive function to loop all your data and create/append those new items to main item
- if you have folder, that folder now becomes main item and all it's children will be append to it...and so on
- this way context menu will follow folders structure of your data as deep as they are
I think this is the easiest and lightest way to create dynamic folder structure on context menus
When some of the data changes, you need to clean context menu and create it all over again... (or update it if you know which to target)