Chrome谷歌浏览器书签bookmark转成json数据或markdown格式
Chrome谷歌浏览器书签bookmark转成json数据或markdown格式
一直使用谷歌浏览器，因为某些原因登录谷歌账号不方便，所以公司和家里的浏览器上收藏的好多书签也不能同步，以前都是直接导出来，然后自己手动导入同步。
最近打算把所有书签整理下放到自己的 blog 上维护，blog 是用 vuepress2 搭建的，里面的 markdown 页面本身也是可以直接写 html 标签的。原以为直接导出的 bookmark.html 文件直接粘贴到 md 中就能用的，还是 to young to simple，导出来的 html 文件长这样：
和我们正常的 html 页面不太一样，所有标签名和属性名全部大写了，DT、P标签都没有结束标签，即未严格标签嵌套，直接放到 vuepress 的 md 中运行和打包都会报错的。
一、自己手动替换修改
首先想到的当然是看能不能直接简单修改下能解决，直接全局替换和修改下标签确实可以，直接用 vscode 全局替换下就行：
- 删掉第一个 DL 标签前面的代码
- 全局删掉所有开始 P 标签
- H3 和 A 结束标签末尾加上 DT 结束标签
- 如果报错：Unexpected EOF in tag...删掉报错标签上除了常规属性，如 href 属性之外的其他属性
- DL、DT、H3、A 标签全部替换成小写，否则 build 时会报错：TypeError: Invalid value used as weak map key
二、借助浏览器解析标签
借助 input 的 file 属性可以在浏览器中加载出来 bookmark.html 的文件 File 信息，也就跟我们平时实现的上传选择文件功能一样。
File 接口继承了 Blob 的方法和属性，里面有一个 text 方法，Blob.text()方法返回一个 Promise 对象，包含 blob 中的内容，使用 UTF-8 格式编码。和 FileReader 的 readAsText() 有点类似，我们可以借助这个方法把文件里面的信息转成文本。
注意 File 对象中只存在于浏览器环境中，在 node 环境中米有，不过在 node 中我们可以直接用 fs.readFile 来读取文件内容。
思路：
- 先通过 File 对象读取 bookmark.html 成字符串文本
- 然后再将文本直接借助浏览器的 DOM 节点的 innerHTML 渲染成 html 标签，这一步浏览器会自动帮我们转成节点列表 NodeList，也不需要我们自己在额外处理标签未严格嵌套的问题
- 然后就可以直接遍历 NodeList 来格式化我们想要的数据了，注意书签数据在最外层的 dl 节点下
注意 生成 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
三、nodejs 版本
大题思路其实和浏览器版本一样，只不过解析 dom 节点我们需要借助第三方 dom 库，如 htmlparser2：
- npm 包：parse-bookmark
- Github仓库：https://cafehaus.github.io/parse-bookmark
四、系统自动生成的书签json文件
Chrome 浏览器其实有自动生成的json文件，具体位置：
- windows 系统 C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\Bookmarks
- mac 系统 /Users/${一般是你的电脑账号名}/Library/Application Support/Google/Chrome/Default/Bookmarks
也可以直接在谷歌浏览器地址栏输入 chrome://version，会自动加载出有关谷歌浏览器的各种信息。