一直使用谷歌浏览器,因为某些原因登录谷歌账号不方便,所以公司和家里的浏览器上收藏的好多书签也不能同步,以前都是直接导出来,然后自己手动导入同步。
最近打算把所有书签整理下放到自己的 blog 上维护,blog 是用 vuepress2 搭建的,里面的 markdown 页面本身也是可以直接写 html 标签的。原以为直接导出的 bookmark.html 文件直接粘贴到 md 中就能用的,还是 to young to simple,导出来的 html 文件长这样:
和我们正常的 html 页面不太一样,所有标签名和属性名全部大写了,DT、P标签都没有结束标签,即未严格标签嵌套,直接放到 vuepress 的 md 中运行和打包都会报错的。
首先想到的当然是看能不能直接简单修改下能解决,直接全局替换和修改下标签确实可以,直接用 vscode 全局替换下就行:
借助 input 的 file 属性可以在浏览器中加载出来 bookmark.html 的文件 File 信息,也就跟我们平时实现的上传选择文件功能一样。
File 接口继承了 Blob 的方法和属性,里面有一个 text 方法,Blob.text()方法返回一个 Promise 对象,包含 blob 中的内容,使用 UTF-8 格式编码。和 FileReader 的 readAsText() 有点类似,我们可以借助这个方法把文件里面的信息转成文本。
注意 File 对象中只存在于浏览器环境中,在 node 环境中米有,不过在 node 中我们可以直接用 fs.readFile 来读取文件内容。
注意 生成 markdown 文件时,超链接的文字内容里带标签的话,vuepress build 编译时会报错:Compiling with vite[vite:vue] Element is missing end tag,解决方式将标签的尖括号去掉:
<!-- 错误方式 -->
[HTML的<pre>标签中嵌套HTML标签时被解析的解决方案](http://xxx.com)
<!-- 正确方式 -->
[HTML的pre标签中嵌套HTML标签时被解析的解决方案](http://xxx.com)
网页版地址:https://cafehaus.github.io/parse-bookmark
大题思路其实和浏览器版本一样,只不过解析 dom 节点我们需要借助第三方 dom 库,如 htmlparser2:
Chrome 浏览器其实有自动生成的json文件,具体位置:
也可以直接在谷歌浏览器地址栏输入 chrome://version,会自动加载出有关谷歌浏览器的各种信息。