I'm trying to write a better bookmark manager in Chrome extensions. The problem is that there are no simple examples (that I can find) about how to actually use the bookmarks
API.
I've looked at the example source (when I d/led and installed it on my computer it didn't do anything except provide a search box. Typing/typing and pressing return failed to do anything) and can't find anything useful.
My ultimate goal is to make an extension that allows me to save pages to come and read later without having to go sign up for an account on some service somewhere. So I plan to create either one or two bookmark folders in the root folder/other bookmarks - at minimum an "unread pages" folder. In that folder I'll create the unread bookmarks. When the user marks the item as read, it will be removed from that folder.
So that's what I'm trying to do... any help will be greatly appreciated, even if it's just pointing me to some good examples.
UPDATE:
...<script>
function display(tree){
document.getElementById("Output").innerHTML = tree;
}
function start(){
chrome.bookmarks.getTree(display);
}
</script>
</head>
<body>
<h4 id="Output"></h4>
<script>
start();
</script>
...
That displays [object Object]
, that suggests (at least to me with a limited JavaScript experience) that an object exists. But how to access the members of that object?
Changing tree
to tree.id
or any other of what look to be parameters displays undefined
.
Currently, there is no good way to find folders such as "Other Bookmarks" or "Bookmarks Bar" in the bookmarks API. You would have to iterate through all the bookmarks and find which node has those root folders and save its bookmark id. The bug is filed Issue 21330.
The root id is always 0, and when I mean 0, it corresponds to "Bookmarks bar" and "Other bookmarks". As any tree structure, each node has children. If you want to fetch all the bookmarks under one folder, you can use getChildren API and get every node recursively (you can do it iteratively too). For example, the following will get every single bookmark:
printBookmarks('0');
function printBookmarks(id) {
chrome.bookmarks.getChildren(id, function(children) {
children.forEach(function(bookmark) {
console.debug(bookmark.title);
printBookmarks(bookmark.id);
});
});
}
Now, why do we have to call the API for every iteration? Their is an API to get the whole Tree. If you tried it out, you will see that every node in the getTree will have a list of children. That is perfect:
chrome.bookmarks.getTree(function(bookmarks) {
printBookmarks(bookmarks);
});
function printBookmarks(bookmarks) {
bookmarks.forEach(function(bookmark) {
console.debug(bookmark.id + ' - ' + bookmark.title + ' - ' + bookmark.url);
if (bookmark.children)
printBookmark(bookmark.children);
});
}
That is all, you can do all this iteratively as well which is better performance, but you can figure that out :) Note that since you want to redo the bookmarks bar, you can override that page in extensions (soon): http://code.google.com/chrome/extensions/override.html
If you want to show a nice HTML tree of your bookmarks, you can easily do that by extending the getTree functionality I showed above to accept a parent DOM. You can do something like this. Edit the code to make use of the getTree or collapse everything and make use of the getChildren and fetch more bookmarks if they request it.