I have hundreds of bookmarks that I have collected over the years that I would like to put into a searchable table with extra information such as categories, types, descriptions etc.
My first attempt at this was manually putting them into a JSON file and then using the DataTables plug-in to display them, however, this was tedious and time-consuming.
The second attempt was to use Wordpress and use Advanced Custom Fields to do this but again still quite tedious.
Obviously, I can export my bookmarks as an HTML file and I'm considering editing and styling this file to suit my needs but it is absolutely massive and also has loads of extraneous information. I've been trying to use CSV conversions of this file to import it into various Wordpress plug-ins that say they offer this exact functionality to know avail. I've also tried doing something similar with firefox's backup that exports to a JSON file but again no luck.
I know that I will have to manually put in some of the information, but I'm trying to cut down on the workload by about a third. Am I going about this the wrong way? Is it even possible? Just wondering if anyone out there has tried to do the same thing and how they went about it.
To import your Chrome bookmarks, open Chrome and go to Menu > Bookmarks > Bookmark manager and click the three-dot icon. Finally, click Import and select the HTML file you exported. Open Google Chrome. Click the icon with three vertical dots in the top-right corner.
Step 1: How to export your Chrome bookmarks Go to Bookmarks > Bookmark manager. Click the menu icon in the Bookmark manager. Choose "Export Bookmarks". Select a destination to save to, then hit "Save".
That was a lovely challenge, thanks. Basically, what I've done is saved the exported bookmarks as HTML and then created a simple page with an empty table. Then my JS does this:
$(function() {
var example = $("#example").DataTable({
"responsive": true,
"columns": [
{
"title": "Title",
"data": "text"
},{
"title": "Date added",
"data": "date",
"render": function(d){
return moment(d, "X").format("DD/MM/YYYY");
}
},{
"title": "URI",
"data": "href",
"render": function(d){
return $("<a></a>",{
"text": d,
"href": d
}).prop("outerHTML");
}
}
],
"initComplete": function(settings, json) {
$.get("bookmarks_12_2_16.html", function( data ) {
$(data).find("dl").children("dt").children("a").each(function(k, v){
if(!~~$(v).attr("href").indexOf("http")){
example.row.add({
"href": $(v).attr("href"),
"text": $(v).text(),
"date": $(v).attr("add_date")
});
}
});
example.draw();
});
}
});
});
Basically it get
s the HTML and iterates over the dt
s within the dl
and, if the href
is http
or https
, it adds it to the table with the correct date (you'd date function might have to be different seeing as I'm in the UK and I'm using momentjs). Hope that helps.
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