gruppierten Kontextmenüelemente in einer Chrome-Erweiterung

Question

Ich habe die folgende Datenstruktur (Probe):

Folder1 
    - Folder2 
    - Snip1 
    - Snip2 
    - Folder3 
    - Snip3 
    - Snip4 
    - Folder4 
    - Snip5 

^{Es gibt keine Begrenzung auf Verschachtelung von Ordnern ineinander}

Ich brauche das zu ermöglichen, Benutzer, um einen bestimmten Ausschnitt einzufügen, wenn er/sie mit der rechten Maustaste auf einen Textbereich klickt. Nun kann ich die obigen Daten entweder auf

- Snip1 
- Snip2 
- Snip3 
- Snip4 
- Snip5 

reduzieren, um einfach Kontextmenüeinträge zu erstellen. Aber, ich will bessere Benutzererfahrung, damit ich so etwas wie lieber:

die Ordnerstruktur in den aktuellen Daten zu simulieren.

Frage: Ist es möglich, solche Art von Kontext Menüelemente Struktur zu generieren, obwohl Chrome-Erweiterungen?

Ich habe mir die docs angesehen, aber nichts nützliches gefunden.

UPDATE: Für alle Interessierten in den Code, hier ist es:

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

Der Trick ist, die parentId Eigenschaft zu verwenden.

Answer 1

ja, es ist möglich, dynamisch zu erstellen (basierend auf Benutzerdaten und Änderungen) verschachtelt Kontextmenü mit Chrome-Erweiterung
ich genau mit meiner V7 Notes Verlängerung (Einfügen von Notizen in Textfeldern)
Beispiel die gleichen erstellt:

müssen Sie zuerst Hauptelement erstellen und dann rekursiv (ich denke, Sie Ordnerstruktur haben) zu diesem Hauptpunkt beigefügten Unter Ordner erstellen

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

in der letzten Zeile, wenn Ihre Schleife in einen Ordner läuft, müssen Sie Ihre buildTree Funktion aufrufen, aber dieses Mal müssen Sie Daten/Array innerhalb dieses Ordners übergeben, und diese Ordner-ID, so dass es als übergeordnete ID verwendet werden kann für weitere Kinder

Wenn die Funktion Ordner durchquert Trog Unter beendet, gibt er einen Schritt nach oben, wo sie jene Unterschleifen

So eintreten, Summ up:
- Hauptsache erstellen
- in Callback rekursive Funktion erstellen, um alle Ihre Daten zu loopen und diese neuen Artikel an den Hauptartikel
anzulegen- Wenn Sie einen Ordner haben, wird dieser Ordner jetzt zum Hauptelement und alle Kinder werden an ihn angehängt ...und so weiter
- auf diese Weise Kontextmenü Ordnerstruktur Ihrer Daten folgen, so tief wie sie sind

Ich denke, dies ist die einfachste und leichteste Art und Weise dynamische Ordnerstruktur auf Kontextmenüs zu erstellen
Wenn einige der Daten Änderungen, müssen Sie das Kontextmenü reinigen und neu erstellen ... (oder aktualisieren Sie es, wenn Sie wissen, welche zu zielen)