阅读 97

TagDown 扩展程序设计

TagDown 是一款开源的书签管理插件, 您可以使用扩展程序浏览新增修改书签,它也支持以不同方式导出书签。

除了常见的书签管理功能,还具有以下特点:

  • 支持 ???? 新增书签,并附加额外的信息,例如 tagsgroups

  • 支持 ???? 导出任意书签为 json 文档

  • 以 ???? 树图的形式浏览层级结构的书签数据

  • 一键打开多个书签,支持在 ???? 标签组内打开书签

设计

该扩展程序与用户的交互界面主要是通过一个弹出窗 popup,当用户点击工具栏上扩展程序的图标时,会弹出一个 HTML 页面,该页面实现了大部分扩展程序的功能。

该页面有两种状态:

  • 浏览状态 browser:用户可以浏览 Chrome 中已存的所有书签

  • 编辑状态 edit:用户在编辑页面可以新增、修改、删除书签

tagdown-ui.png

扩展程序在后台会监控标签切换激活状态,以分析当前访问的 URL 是否已收藏为书签,动态切换工具栏上扩展程序的图标状态。

扩展程序还提供一个配置页面 option page,可以对 IndexedDB 数据库执行导出、导入、删除操作,还可以按需导出书签。

tagdown-options-page.png

更详细的设计稿可以查看这里,还有一个原型可以体验扩展程序的基本交互。


作者:Benbinbin
链接:https://juejin.cn/post/7018369446347538462


文章分类
后端
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐