Grouped context menu items in a Chrome extension
<p>I have the following data structure (sample):</p>

<pre><code>Folder1
  - Folder2
    - Snip1
    - Snip2
  - Folder3
    - Snip3
  - Snip4
  - Folder4
    - Snip5
</code></pre>

<p><sup>There is no limit on nesting of folders inside one another</sup></p>

<p>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:</p>

<pre><code>- Snip1
- Snip2
- Snip3
- Snip4
- Snip5
</code></pre>

<p>to simply create context menu entries. But, I want better user experience so I will prefer something like:</p>

<p><a href="https://i.stack.imgur.com/eui5u.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eui5u.png" alt="enter image description here"></a></p>

<p>to simulate the folder structure in the actual data.</p>

<p><strong>Question:</strong> Is it possible to generate such type of context menu items' structure though Chrome extensions?</p>

<p>I have looked at the <a href="https://developer.chrome.com/extensions/contextMenus#type-ContextType" rel="nofollow noreferrer">docs</a>, but found nothing useful.</p>

<p><strong>UPDATE:</strong> For anyone interested in the code, here's it:</p>

<pre><code>// 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);
    });
};
</code></pre>

<p>The trick is to use the <code>parentId</code> property.</p>