1<html> 2<head> 3<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" rel="stylesheet"> 4<style> 5div, td, th { color: black; } 6</style> 7<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 8<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> 9<script> 10 // Search the bookmarks when entering the search keyword. 11 $(function() { 12 $('#search').change(function() { 13 $('#bookmarks').empty(); 14 dumpBookmarks($('#search').val()); 15 }); 16 }); 17 // Traverse the bookmark tree, and print the folder and nodes. 18 function dumpBookmarks(query) { 19 var bookmarkTreeNodes = chrome.bookmarks.getTree( 20 function(bookmarkTreeNodes) { 21 $('#bookmarks').append(dumpTreeNodes(bookmarkTreeNodes, query)); 22 }); 23 } 24 function dumpTreeNodes(bookmarkNodes, query) { 25 var list = $('<ul>'); 26 var i; 27 for (i = 0; i < bookmarkNodes.length; i++) { 28 list.append(dumpNode(bookmarkNodes[i], query)); 29 } 30 return list; 31 } 32 function dumpNode(bookmarkNode, query) { 33 if (bookmarkNode.title) { 34 if (query && !bookmarkNode.children) { 35 if (String(bookmarkNode.title).indexOf(query) == -1) { 36 return $('<span></span>'); 37 } 38 } 39 var anchor = $('<a>'); 40 anchor.attr('href', bookmarkNode.url); 41 anchor.text(bookmarkNode.title); 42 /* 43 * When clicking on a bookmark in the extension, a new tab is fired with 44 * the bookmark url. 45 */ 46 anchor.click(function() { 47 chrome.tabs.create({url: bookmarkNode.url}); 48 }); 49 var span = $('<span>'); 50 var options = bookmarkNode.children ? 51 $('<span>[<a href="#" id="addlink">Add</a>]</span>') : 52 $('<span>[<a id="editlink" href="#">Edit</a> <a id="deletelink" ' + 53 'href="#">Delete</a>]</span>'); 54 var edit = bookmarkNode.children ? $('<table><tr><td>Name</td><td>' + 55 '<input id="title"></td></tr><tr><td>URL</td><td><input id="url">' + 56 '</td></tr></table>') : $('<input>'); 57 // Show add and edit links when hover over. 58 span.hover(function() { 59 span.append(options); 60 $('#deletelink').click(function() { 61 $('#deletedialog').empty().dialog({ 62 autoOpen: false, 63 title: 'Confirm Deletion', 64 resizable: false, 65 height: 140, 66 modal: true, 67 overlay: { 68 backgroundColor: '#000', 69 opacity: 0.5 70 }, 71 buttons: { 72 'Yes, Delete It!': function() { 73 chrome.bookmarks.remove(String(bookmarkNode.id)); 74 span.parent().remove(); 75 $(this).dialog('destroy'); 76 }, 77 Cancel: function() { 78 $(this).dialog('destroy'); 79 } 80 } 81 }).dialog('open'); 82 }); 83 $('#addlink').click(function() { 84 $('#adddialog').empty().append(edit).dialog({autoOpen: false, 85 closeOnEscape: true, title: 'Add New Bookmark', modal: true, 86 buttons: { 87 'Add' : function() { 88 chrome.bookmarks.create({parentId: bookmarkNode.id, 89 title: $('#title').val(), url: $('#url').val()}); 90 $('#bookmarks').empty(); 91 $(this).dialog('destroy'); 92 window.dumpBookmarks(); 93 }, 94 'Cancel': function() { 95 $(this).dialog('destroy'); 96 } 97 }}).dialog('open'); 98 }); 99 $('#editlink').click(function() { 100 edit.val(anchor.text()); 101 $('#editdialog').empty().append(edit).dialog({autoOpen: false, 102 closeOnEscape: true, title: 'Edit Title', modal: true, 103 show: 'slide', buttons: { 104 'Save': function() { 105 chrome.bookmarks.update(String(bookmarkNode.id), { 106 title: edit.val() 107 }); 108 anchor.text(edit.val()); 109 options.show(); 110 $(this).dialog('destroy'); 111 }, 112 'Cancel': function() { 113 $(this).dialog('destroy'); 114 } 115 }}).dialog('open'); 116 }); 117 options.fadeIn(); 118 }, 119 // unhover 120 function() { 121 options.remove(); 122 }).append(anchor); 123 } 124 var li = $(bookmarkNode.title ? '<li>' : '<div>').append(span); 125 if (bookmarkNode.children && bookmarkNode.children.length > 0) { 126 li.append(dumpTreeNodes(bookmarkNode.children, query)); 127 } 128 return li; 129 } 130</script> 131</head> 132<body onload="dumpBookmarks();" style="width: 400px"> 133<div>Search Bookmarks: <input id="search"></div> 134<div id="bookmarks"></div> 135<div id="editdialog"></div> 136<div id="deletedialog"></div> 137<div id="adddialog"></div> 138</body> 139</html> 140