Git Product home page Git Product logo

chromebookmarkvisual's Introduction

浏览器书签可视化项目

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 [email protected]: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绘制网址径向树状图

其他

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

chromebookmarkvisual's People

Contributors

inspurer avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

chromebookmarkvisual's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.