创建 JavaScript 脚本以在 Google Chrome 扩展程序中创建书签列表时出现一些问题

Question

我正在尝试创建一个 JavaScript 脚本来创建用户书签的上下文菜单。我查看了 Chrome 扩展库中可用的各种扩展的代码，但它们都非常复杂，并且在某种程度上存在缺陷（大多数只会查看一定数量的子文件夹，然后停止）。我正在尝试制作一个简单的脚本，该脚本适用于所有可能的项目（即使它们埋藏在非常深的文件夹层次结构中）。

以下脚本不起作用，但它演示了我想到的一个可能的解决方案：

bookmarkObject = ITEM_FROM_ARRAY_OF_ALL_BOOKMARK_OBJECTS;
var OBJECT_NUMBER = chrome.contextMenus.create({
    "contexts": ["all"],
    "onclick": function() {
        return function() {
            if (bookmarkObject.url) {
                chrome.tabs.create({
                    "url": bookmarkObject.url
                });
            }
            else {
                return null;
            };
        };
    }(bookmarkObject),
    "parentId": bookmarkObject.parentId,
    "title": bookmarkObject.title,
    "type": "normal"
});

我相信，如果所有项目都将其 Id 值 (OBJECT_NUMBER) 设置为脚本的变量，则脚本应自动使用该变量作为任何可能的子项的 bookmark.parentId 值，因此会以适当的方式自动嵌套树。 （这只是一个猜测；如果我错了，请告诉我。）

但是，我无法弄清楚如何获取所有书签对象的数组（我只能设法检索特定文件夹中的书签对象的数组） ）。此外，我无法弄清楚如何动态运行我为检索到的每个项目发布的代码，自动将 OBJECT_NUMBER 设置为相关对象的 Id 值。

有人可以提供任何帮助吗？

编辑：我根据 Mohamed Mansour 的演示脚本进行了大量更改，并提出了以下脚本：

window.addEventListener("load", function() {
    init();
}, false);

function init() {
    chrome.bookmarks.getTree(function(children) {
        addBookmarks(children);
    });
};

function addBookmarks(bookmarks, parent) {
    bookmarks.forEach(function(bookmarkObject) {
        var bookmarkObject =    chrome.contextMenus.create({
            "contexts": ["all"],
            "onclick": function() {
                return function() {
                    if (bookmarkObject.url && bookmarkObject.url.length) {
                        chrome.tabs.create({
                            "url": bookmarkObject.url
                        });
                    };
                };
            }(bookmarkObject),
            "parentId": parent,
            "title": function() {
                if (bookmarkObject.url && bookmarkObject.url.length) {
                    return bookmarkObject.title;
                }
                else {
                    return chrome.i18n.getMessage("contextmenu_label");
                };
            }(bookmarkObject),
            "type": "normal"
        });
        if (bookmarkObject.children) {
            addBookmarks(bookmarkObject.children, bookmarkObject);
        };
    });
};

在某种程度上，它似乎有效，因为它没有返回任何错误JavaScript 控制台。但是，虽然根元素显示为上下文菜单（其名称由命令 chrome.i18n.getMessage("contextmenu_label") 检索），但没有嵌套子元素，也没有嵌套子元素。根本不会出现。谁能帮助确定我做错了什么？

Answer 1

你看过书签 API getTree 吗？
http://code.google.com/chrome/extensions/bookmarks.html #method-getTree

它将允许您从整个层次结构中获取所有书签。

chrome.bookmarks.getTree(function(children) {

});

然后您需要解析该结果，因为每个节点都有一个书签列表。您可以递归地执行此操作（如果需要，甚至可以迭代）。

以下是我获取所有书签并在弹出窗口中显示它们的方法（取自我用来帮助用户的内部示例库）：

var prefix = 'bookmark_';

function addBookmark(bookmark, parent) {
  var child = document.createElement('li');
  child.className = 'bookmark';
  child.id = prefix + bookmark.id;
  if (bookmark.url && bookmark.url.length) {
    var link = document.createElement('a');
    link.href = bookmark.url;
    link.innerHTML = bookmark.title;
    link.className = 'bookmark_title';
    link.onclick = function() {
       chrome.tabs.create({url: bookmark.url});
       return false;
    };

    child.appendChild(link);
  } else {
    var title = document.createElement('div');
    title.innerHTML = bookmark.title;
    title.className = 'bookmark_title';
    child.appendChild(title);
  }
  parent.appendChild(child);
}

function addBookmarks(bookmarks, parent) {
  var list = document.createElement('ul');
  parent.appendChild(list);
  bookmarks.forEach(function(bookmark) {
    addBookmark(bookmark, list);
    if (bookmark.children)
      addBookmarks(bookmark.children, list);
  });
}

function loadBookmarks() {
  var container = document.getElementById('container');
  var rootElement = document.createElement('div');

  var rootId = 0;
  rootElement.id = prefix + rootId;

  container.appendChild(rootElement);
  chrome.bookmarks.getTree(function(children) {
    console.log(children);
    addBookmarks(children, rootElement);
  });
}

您可以修改它来修复您的上下文菜单需求。