Question

我有以下数据结构（示例）：

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

^{将文件夹嵌套在另一个内容中没有限制}

我需要允许用户在他/她右键单击textarea时插入特定剪辑。现在，我可以将上述数据压平为：

- Snip1
- Snip2
- Snip3
- Snip4
- Snip5

简单地创建上下文菜单条目。但是，我想要更好的用户体验，所以我更喜欢这样的东西：

模拟实际数据中的文件夹结构。

问题：是否可以通过Chrome扩展程序生成此类上下文菜单项的结构？

我查看了docs，但没有发现任何有用的内容。

更新：对于对代码感兴趣的人，请点击此处：

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

诀窍是使用parentId属性。

Answer 1

是的，可以动态创建（基于用户数据和更改）带有chrome扩展的嵌套上下文菜单
我使用V7 Notes扩展名（在文本字段中插入注释）创建了完全相同的内容例： Alt

首先你需要创建主项目然后递归（我猜你有文件夹结构）创建附加到该主要项目的子文件夹

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

在最后一行，每当你的循环进入一个文件夹时，你需要调用你的buildTree函数，但这次你需要从该文件夹中传递数据/数组，以及该文件夹ID以便它可以用作其他孩子的父ID

当函数完成遍历子文件夹时，它返回向上一步，进入那些子循环

所以，总结一下：
- 创建主项目
- 在回调中创建递归函数以循环所有数据并将这些新项目创建/附加到主项目
- 如果你有文件夹，那么该文件夹现在成为主要项目，所有它的孩子都会附加到它...等等 - 这样，上下文菜单将跟随数据的文件夹结构，只要它们是

我认为这是在上下文菜单上创建动态文件夹结构的最简单，最轻松的方法当某些数据发生变化时，您需要清理上下文菜单并重新创建...（如果您知道要定位哪个数据，则更新它）

Chrome扩展程序中的分组上下文菜单项

1 个答案: