Some problems in creating a JavaScript script to create a list of bookmarks in a Google Chrome extension

I'm trying to create a JavaScript script that will create a context-menu of the user's bookmarks. I've had a look at the code of various extensions available in the Chrome Extension Gallery, but they are all very complicated and, to an extent, flawed (most will only look inside a certain number of sub-folders and then stop). I'm trying to make a simple script that will work for all possible items (even if they are buried inside a very deep folder hierarchy).

The following script does not work, but it demonstrates a possible solution I thought of:

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

I believe that if all items have their Id value (OBJECT_NUMBER) set as a variable by the script, the script should automatically use that variable as the bookmark.parentId value for any possible child items and as such automatically nest the tree in the appropriate manner. (This is just a guess; if I'm wrong, please let me know.)

However, I cannot work out how to get an array of all bookmark objects (I can only manage to retrieve an array of bookmark objects in a specific folder). Furthermore, I cannot work out how to dynamically run the code I posted for every item retrieved, setting the OBJECT_NUMBER to the relevant object's Id value automatically.

Can anyone offer any help?

EDIT: I've made a good number of changes as per Mohamed Mansour's demo script, and come up the following script:

win开发者_如何学Cdow.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);
        };
    });
};

To an extent, it seems to be working, as it is not returning any errors in the JavaScript console. However, while the root element is appearing as a context-menu (whose name is retrieved by the command chrome.i18n.getMessage("contextmenu_label")), no child elements are being nested, nor do they appear at all. Could anyone help determine what have I done wrong?

Have you looked at the bookmarks API getTree? http://code.google.com/chrome/extensions/bookmarks.html#method-getTree

It will allow you to get all the bookmarks from the entire hierarchy.

chrome.bookmarks.getTree(function(children) {

});

Then you need to parse that result since each node has a list of bookmarks. You can do that recursively (even iterative if you want).

Here is how I get all the bookmarks and show them on the popup (taken from my internal examples library that I use to help users):

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

You can modify that to fix your context menu needs.