1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
|
<!DOCTYPE HTML>
<title>Bookmark View</title>
<style>
.bookmark {
margin-left: 5px;
padding: 2px;
}
.bookmark_title {
display: inline;
border: 1px solid white;
padding: 0px 3px;
}
.bookmark_title:hover {
background-color: silver;
border: 1px solid black;
}
.event-log {
font-family: monospace;
}
</style>
<script>
// XXX Hack: When you call window.open('chrome-extension://...'), the window is
// first navigated to about:blank, and then to the final URL. This confuses the
// code that sets up our v8 extensions, and we don't end up with them running.
//
// If we noticed this happened, reload ourselves, which should fix it.
if (!chromium.bookmarks)
location.reload();
var logEvent = function(name, data) {
var log = document.getElementById("event-log");
log.innerHTML = name + "<br>" + log.innerHTML;
console.log("got event: " + name);
}
chromium.bookmarks.onBookmarkAdded.addListener(function(data) {
logEvent("onBookmarkAdded", data);
});
chromium.bookmarks.onBookmarkRemoved.addListener(function(data) {
logEvent("onBookmarkRemoved", data);
});
chromium.bookmarks.onBookmarkChanged.addListener(function(data) {
logEvent("onBookmarkChanged", data);
});
chromium.bookmarks.onBookmarkMoved.addListener(function(data) {
logEvent("onBookmarkMoved", data);
});
chromium.bookmarks.onBookmarkChildrenReordered.addListener(function(data) {
logEvent("onBookmarkChildrenReordered", data);
});
var prefix = "bookmark_";
var toggleBookmark = function(event) {
event.stopPropagation();
var node = event.currentTarget;
var id_str = node.id;
if (id_str < prefix.length)
return;
var id = parseInt(id_str.substring(prefix.length));
if (id == NaN)
return;
console.log("toggle: " + id);
//console.dir(event);
chromium.bookmarks.get([id], function(bookmark) {
//console.log("toggle get");
console.dir(bookmark[0]);
if (bookmark[0].childrenIds && bookmark[0].childrenIds.length) {
if (node.childNodes.length != 1) {
//console.log("toggle collapse");
node.removeChild(node.childNodes[1]);
} else {
//console.log("before");
chromium.bookmarks.get(bookmark[0].childrenIds, function(children) {
//console.log("toggle expand");
if (children && children.length) {
console.dir(children);
addBookmarks(children, node);
}
});
}
}
});
};
var addBookmark = function(bookmark, parent) {
//console.log("addBookmark " + bookmark.id);
var child = document.createElement('li');
child.className = 'bookmark';
child.id = prefix + bookmark.id;
child.addEventListener('click', toggleBookmark, false);
if (bookmark.url && bookmark.url.length) {
var link = document.createElement('a');
link.href = bookmark.url;
link.innerHTML = bookmark.title;
link.className = 'bookmark_title';
child.appendChild(link);
} else {
var title = document.createElement('div');
title.innerHTML = bookmark.title;
title.className = 'bookmark_title';
child.appendChild(title);
}
parent.appendChild(child);
};
var addBookmarks = function(bookmarks, parent) {
console.log("addBookmarks " + parent.id);
var list = document.createElement("ul");
parent.appendChild(list);
bookmarks.forEach(function(bookmark) { addBookmark(bookmark, list); });
};
var loadBookmarks = function() {
var container = document.getElementById('container');
chromium.bookmarks.get([], function(results) {
var root = results[0];
console.dir(root);
var rootElement = document.createElement("div");
rootElement.id = prefix + root.id;
// root element is empty / invisible, just an id to be looked up
container.appendChild(rootElement);
chromium.bookmarks.get(root.childrenIds, function(children) {
addBookmarks(children, rootElement);
});
});
};
</script>
<body onload="loadBookmarks()">
<div id="container">
</div>
<div id="event-log"></div>
</body>
|
