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