处理谷歌浏览器导出书签为json格式
前言
最近在发现一个开源的网址导航的开源项目 Webstack网址导航 还不错， 其实就是一个类似hao123导航类似， 里面的内容是可以自己自定义的， 这不禁让我想到可以吧浏览器的书签导出来，然后放到项目里面去就可以把自己收藏的书签变成一个自己的导航网址，说干就干。
网址导航
开源作者支持部署方式有很多， 所以我这里就采用VUE开发构建的方式，因为这种相对来说比较简单，而且不需要部署后台服务, 有一个简单的NGINX即可
vue项目地址为 WebStack-vue, 也可以直接看我的成品(弄得比较随意,能看就行)-->网址导航demo，其中vue有一个D:\project\WebStack-vue\src\assets\data.json文件，这里面存的就是导航列表所需要的数据， 所以我们本次的目的也就是将谷歌浏览器导出的书签,生成一个data.json文件即可,
data.json文件格式如下:
[
{
"name": "主目录",
"children": [
{
"name": "子目录1",
"children": [],
"web": [
{
"url": "",
"title": "",
"desc": "",
"logo": ""
}
]
}
],
"web": [
{
"url": "",
"title": "",
"desc": "",
"logo": ""
}
]
}
]
谷歌浏览器书签
导出书签
在设书签栏点击书签管理器 或者直接在浏览器地址栏输入chrome://bookmarks/可以直接进入到书签管理,右上角导出书签就可以得到一个Bookmark.html的书签文件,其实就是一段简单的html代码
原理
既然我们知道书签其实就是一段简单的html代码， 我们就可以直接对html操作，使用js将html里面的dom对象处理成我们能接受的json格式的字符串就可以满足我们的需求，具体逻辑请看代码，不做过多赘述。
demo
代码
代码又两个版本， 一个是Java版本的，另外一个是JavaScript版本的,这里先展示JavaScript版本的
JavaScript
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>处理导出的谷歌浏览器书签</title>
<style>
* {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.body {
height: 100%;
}
.box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
button {
width: 100px;
height: 60px;
border-radius: 6px;
background: #cccfff;
border: 0px;
}
input {
width: 20%;
height: 5%;
border: 0px #cccfff solid;
text-align: center;
border-radius: 6px;
margin-bottom: 10px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="body">
<div class="box">
<input type="file" id="file">
<button id="btn" onclick="submit()">确定</button>
</div>
</div>
</body>
<script>
/**
* 点击确认按钮
*/
function submit() {
// 获取文件对象
var file = document.getElementById("file").files[0];
if (file.name.indexOf(".html") < 0) {
// 不处理非html的文件类型
alertErr()
return
}
// 获取文件里面的文本信息
file.text().then(res => {
// 内容转成dom对象
let doms = parseToDOM(res);
for (const dom of doms) {
// 从dom对象中获取DL标签
if (dom.tagName == 'DL') {
let result = textHandle(dom, null);
exportRaw('data.json', JSON.stringify(result.children))
}
}
})
}
/**
* 导出为文件
*/
function exportRaw(name, data) {
var urlObject = window.URL || window.webkitURL || window;
var export_blob = new Blob([data]);
var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
save_link.href = urlObject.createObjectURL(export_blob);
save_link.download = name;
var ev = document.createEvent("MouseEvents");
ev.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchEvent(ev);
}
/**
* 弹错误信息弹窗
*/
function alertErr() {
alert("请不要上传非谷歌浏览器书签文件")
}
/**
*
* @param dl
* @param temp
* @returns {*}
*/
function textHandle(dl, temp) {
// 先获取DL 下面的DT
let dts = getDts(dl);
if (dts.length > 0) {
// 判断DT下面是否有DL标签
for (var i in dts) {
let dt = dts[i], hdl = getTag(dt, "DL");
if (hdl != null) {
let h = getTag(dt, "H3");
let returns = textHandle(hdl, {name: h.textContent, children: [], web: []})
if (temp == null) {
temp = returns;
} else {
temp.children.push(returns);
}
} else {
var a = getTag(dt, "A");
temp.web.push({
url: a.href,
title: a.textContent,
desc: a.textContent,
logo: a.getAttribute("ICON")
})
}
}
}
return temp;
}
/**
* 获取dt下面的标签
*
* @param dl
* @return
*/
function getTag(dt, tagname) {
let dtcs = dt.children, obj = null;
if (dtcs.length < 1) {
return obj
}
for (let dtc of dtcs) {
if ((dtc.tagName.toUpperCase()) == tagname) {
obj = dtc;
break;
}
}
return obj;
}
/**
* 获取DL下面的DT标签
* @param dl
* @returns {[]}
*/
function getDts(dl) {
let dlcs = dl.children, arr = [];
if (dlcs.length < 1) {
return arr;
}
for (let dlc of dlcs) {
if ((dlc.tagName.toUpperCase()) == 'DT') {
arr.push(dlc)
}
}
return arr;
}
/**
* 把String转为DOM对象
* @param str
* @returns {NodeListOf<ChildNode>}
*/
function parseToDOM(str) {
let div = document.createElement("div");
if (typeof str == "string") {
div.innerHTML = str;
}
return div.childNodes;
}
</script>
</html>
Java
待完善
结尾
目前只对谷歌浏览器的书签做了处理，还不知道其他浏览器的书签格式是怎么样的， 当然如果有兴趣也可以对代码稍微改造，便能得到其他浏览器的书签导入格式, 总而言之，处理谷歌浏览器的书签还是比较简单的，不足之处欢迎指出
