Skip to content

a visaul project for chrome browser bookmark; which can make access to muti-depth bookmark more easily.

License

Notifications You must be signed in to change notification settings

inspurer/ChromeBookmarkVisual

Repository files navigation

浏览器书签可视化项目

Chrome BookMark Visual Project

as well as FireFox, Microsoft Edge

完成这个 mini-project 的初衷是书签太多,层次深,无法直观触达 故可视化之,项目的叶子节点可以直接点击打开书签

Chrome 扩展

对应的 chrome 扩展已上线 Chrome 应用商店,在线安装即可,无需配置,体验地址,求个好评

https://chrome.google.com/webstore/detail/bookmarktree/obhnldggnjdmbmidjkjjnlclooehbngf?hl=zh-CN

插件的源代码在本项目的 chrome-extension-src 文件夹下

可视化效果

全景图:

选中叶子节点可点击直达书签的地址:

运行环境

python 3.6.6 及 python3.6.6+

运行步骤

  1. git clone git@github.com:inspurer/ChromeBookmarkVisual.git

  2. pip install requirements.txt

  3. 在浏览器中将收藏的书签导出为 html,命名为 bookmarks.html

  4. 运行 parse_bookmark_html_to_json.py 得到 bookmarks.json

  5. 在 Pycharm 中选择浏览器打开 tree-radial.html,即可看到可视化效果,并可点击叶子节点;注意不要直接在文件夹中打开这个 html,会被 CROS 拦住 json 文件无法加载

过程可以参考B站对应视频:Chrome 浏览器书签层次可视化

个性配置

  1. 可在 parse_bookmark_html_to_json.py 文件中 exclude_collection 变量中添加不需要可视化的根书签收藏夹。

  2. 可在 tree-radial.htmlmyChart.setOption 设置图表样式,如 layout = orthogonal 可设置成层次树状图, initialTreeDepth 可以设置初始最大层数。

参考

使用ECharts绘制网址径向树状图

其他

转载引用本项目中的代码,请注明来源

About

a visaul project for chrome browser bookmark; which can make access to muti-depth bookmark more easily.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published