一直使用谷歌浏览器,因为某些原因登录谷歌账号不方便,所以公司和家里的浏览器上收藏的好多书签也不能同步,以前都是直接导出来,然后自己手动导入同步。
最近打算把所有书签整理下放到自己的 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,解决方式将标签的尖括号去掉: wzxhzdk:0 ## nodejs 版本 大题思路其实和浏览器版本一样,只不过解析 dom 节点我们需要借助第三方 dom 库,如 htmlparser2 ## 系统自动生成的书签json文件 Chrome 浏览器其实有自动生成的json文件,具体位置:
也可以直接在谷歌浏览器地址栏输入 chrome://version,会自动加载出有关谷歌浏览器的各种信息。
解析谷歌浏览器 Chrome 书签 bookmark 数据的 npm 包,同时支持浏览器版和 node 版,网页版的浏览器中打开网址直接选择导出的标签文件处理就可以了:
页面更新:2024-05-29
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号