Menu
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.
488
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.
165
Bookmarks are organized in a tree, where each node in the tree is either a bookmark or a group (a folder that can contain nodes). Each node in the tree is represented by a BookmarkTreeNode object.
There is no root bookmarks folder in the sense of a file system object. All the bookmarks are stored in a structured file that you access through the api in the link you provided. The root of the tree is returned by getTree:
chrome.bookmarks.getTree
Okay, I've discovered how to get access to what I want. In retrospect I should have seen it sooner.
http://code.google.com/chrome/extensions/tut_debugging.html
Using the debugger I was able to set a breakpoint and view the objects. [object Object] is an array of length 1.
Using the function given in my example, tree[0].children is the array containing the children. On my default setup tree has two children, tree[0].children[0] is "Bookmarks Bar" and tree[0].children[1] is "Other Bookmarks". The rest of the bookmark tree flows down from there, though "Other Bookmarks" (tree[0].children[1]) is the folder I'm looking for.
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
