{"id":13621965,"url":"https://github.com/inspurer/ChromeBookmarkVisual","last_synced_at":"2025-04-15T05:32:57.611Z","repository":{"id":45799538,"uuid":"442701681","full_name":"inspurer/ChromeBookmarkVisual","owner":"inspurer","description":"a visaul project for chrome browser bookmark; which can make access to muti-depth bookmark more easily.","archived":false,"fork":false,"pushed_at":"2022-01-01T02:39:00.000Z","size":2030,"stargazers_count":14,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-16T23:26:10.251Z","etag":null,"topics":["bookmarks","chrome-bookmarks","data-visualization","echarts"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/inspurer.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-12-29T07:58:36.000Z","updated_at":"2024-07-08T23:18:03.000Z","dependencies_parsed_at":"2022-07-17T10:00:53.551Z","dependency_job_id":null,"html_url":"https://github.com/inspurer/ChromeBookmarkVisual","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inspurer%2FChromeBookmarkVisual","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inspurer%2FChromeBookmarkVisual/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inspurer%2FChromeBookmarkVisual/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inspurer%2FChromeBookmarkVisual/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/inspurer","download_url":"https://codeload.github.com/inspurer/ChromeBookmarkVisual/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249015953,"owners_count":21198824,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bookmarks","chrome-bookmarks","data-visualization","echarts"],"created_at":"2024-08-01T21:01:12.537Z","updated_at":"2025-04-15T05:32:56.765Z","avatar_url":"https://github.com/inspurer.png","language":"HTML","readme":"# 浏览器书签可视化项目\n\nChrome BookMark Visual Project\n\nas well as FireFox, Microsoft Edge\n\n完成这个 mini-project 的初衷是书签太多，层次深，无法直观触达\n故可视化之，项目的**叶子节点可以直接点击打开书签**。\n\n## Chrome 扩展\n\n对应的 chrome 扩展已上线 Chrome 应用商店，在线安装即可，无需配置，体验地址，求个好评\n\n[https://chrome.google.com/webstore/detail/bookmarktree/obhnldggnjdmbmidjkjjnlclooehbngf?hl=zh-CN](https://chrome.google.com/webstore/detail/bookmarktree/obhnldggnjdmbmidjkjjnlclooehbngf?hl=zh-CN)\n\n**插件的源代码在本项目的 chrome-extension-src 文件夹下**\n\n## 可视化效果\n\n全景图: \n\n![](./img/all.png)\n\n选中叶子节点可点击直达书签的地址：\n\n![](./img/click.png)\n\n## 运行环境\npython 3.6.6 及 python3.6.6+\n\n## 运行步骤\n1.  `git clone git@github.com:inspurer/ChromeBookmarkVisual.git`\n\n2.  `pip install requirements.txt`\n\n3.  在浏览器中将收藏的书签导出为 html，命名为 `bookmarks.html`\n\n4.  运行 `parse_bookmark_html_to_json.py` 得到 `bookmarks.json`\n\n5.  在 Pycharm 中选择浏览器打开 `tree-radial.html`，即可看到可视化效果，并可点击叶子节点；**注意不要直接在文件夹中打开这个 html，会被 CROS 拦住 json 文件无法加载**\n\n过程可以参考B站对应视频：[Chrome 浏览器书签层次可视化\n](https://www.bilibili.com/video/BV1JY411p7f2)\n\n## 个性配置\n\n1. 可在 `parse_bookmark_html_to_json.py` 文件中 `exclude_collection` 变量中添加不需要可视化的根书签收藏夹。\n\n2. 可在 `tree-radial.html` 中 `myChart.setOption` 设置图表样式，如 `layout = orthogonal` 可设置成层次树状图，\n   `initialTreeDepth` 可以设置初始最大层数。\n\n\n## 参考\n\n[使用ECharts绘制网址径向树状图](https://www.cnblogs.com/rustfisher/p/15219690.html)\n\n## 其他\n\n转载引用本项目中的代码，请注明来源\n","funding_links":[],"categories":["HTML"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finspurer%2FChromeBookmarkVisual","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finspurer%2FChromeBookmarkVisual","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finspurer%2FChromeBookmarkVisual/lists"}