作为一名软件开发从业人员, 每天80%的时间都在与浏览器打交道, 一半的时间在用浏览器开发调试, 另一半时间则是在互联网上搜寻各种知识和资源.

为此, 我的浏览器书签栏存储和很多非常棒的链接, 多到2k屏幕分辨率下一栏都放不下, 为此我只好把这些书签的名称改的短一点, 这样就能展示的更多, 但是这样的话, 整个书签栏就变得非常拥挤.

而在某一天下午, 我在手机的界面上无聊滑动, 看着页面上一个个应用的图标, 忽然觉得他们和浏览器书签栏里的网站链接很像, 我们在手机上安装很多的应用, 在浏览器收藏很多的书签, 这些应用和书签都给我们带来了很多美好的体验.

那么浏览器的书签如果能像手机的应用一样在多个页面中平铺开来, 看起来更舒服, 查找起来也更方便.

这就是我开发EasyDesktop的初衷, 让书签像电脑桌面一样平铺展示在浏览器的页面中.

我花了一个周末的时间, 快速的开发了一个原型版本, 它的功能非常简单, 直接读取浏览器的插件然后展示在new tab上.

为了保证和浏览器自带的书签在结构上保持统一, 在功能的设计上做了一些规则预设:

比如浏览器书签栏第一层的链接, 会自动生成类似 Macos下方的菜单栏, 因为这些链接被放在第一层, 则说明它们是最常使用的, 应该被固定在页面的最下方.

书签栏第一层的文件夹, 会自动生成一个书签页面, 内部的书签和文件夹则会以块的形式自由摆放, 这里因为使用的Grid布局技术的限制, 我没法做到让一个元素在可以拖拽的情况下还能点击, 最终只能把书签强制约束在文件夹内, 然后文件夹以块的形式呈现, 即使书签在第一层文件夹中没有被文件夹包裹.

所以, 如果你的tab页面里面, 多了一个 xx-杂项的文件夹, 不要惊讶, 那是把Tab文件夹内第一层零散的书签自动归纳生成的虚拟文件夹.

这样一来, 我们只需要把最常用的书签放在最外层, 然后把优先级低一点的放到第一个文件夹, 然后依次归纳其他的书签, 最后插件就可以根据书签栏的结构, 像电脑桌面一样把书签平铺展示出来.

原型版本发布之后, 自己重度使用了一段时间, 感觉非常不错, 但是还有不少细节可以优化.

于是在最近的几周, 利用周末闲暇时间, 又增补了一些功能, 主要有:

  1. 支持自定义背景图片(默认使用开发的 bing壁纸api), 整个界面不会再那么单调了, 同时支持调整遮罩的不透明度.
  2. 支持切换深浅色模式, 使用 shadcn-ui 提供的 theme 逻辑, 非常简单.
  3. 书签文件夹导出: 默认的浏览器书签导出, 只能全部导出, 如果我们想把自己的部分书签分享给别人, 操作起来十分麻烦, 于是我在文件夹的设置里面扩展了导出的功能, 可以直接把单个文件夹内的书签导出成浏览器支持的标准html文件.
  4. 文件夹/书签的重命名/删除: 本来打算做一个类似文件管理的通用面板, 但是UI的开发量太大了, 也没找到合适的开源库, 而且浏览器自带的书签管理器本身也很强大, 所以就折中一下, 把最基础的重写了一下, 对于需要批量调整和修改书签的, 可以直接跳转书签管理器编辑.
  5. 文件夹切换链接模式支持设置列数: 对于喜欢链接模式而且又想拉宽的朋友们应该很有帮助

目前是最新的插件效果

看起来有模有样.

这么好用的插件, 肯定要尽早地分享给大家, 欢迎下载体验:

Chrome商城安装地址

EasyDesktop 浏览器书签管理从未如此简单的更多相关文章

  1. Dewey – 标记和搜索 Chrome 浏览器书签

    Dewey 是一个 Chrome 应用程序,用于标记,搜索和排序你的 Chrome 浏览器书签.借助 Dewey,您可以添加自定义标签,生成你的书签截图,灵活快捷的方式进行搜索和排序. 您可能感兴趣的 ...

  2. DAY6 使用ping钥匙临时开启SSH:22端口,实现远程安全SSH登录管理就这么简单

    设置防火墙策略时,关于SSH:22访问权限,我们常常会设置服务器只接受某个固定IP(如公司IP)访问,但是当我们出差或在家情况需要登录服务器怎么办呢? 常用两种解决方案:1.通过VPN操作登录主机: ...

  3. 使用ping钥匙临时开启SSH:22端口,实现远程安全SSH登录管理就这么简单

    设置防火墙策略时,关于SSH:22访问权限,我们常常会设置服务器只接受某个固定IP(如公司IP)访问,但是当我们出差或在家情况需要登录服务器怎么办呢? 常用两种解决方案:1.通过VPN操作登录主机: ...

  4. 接口测试从未如此简单 - Postman (Chrome插件)

    接口测试从未如此简单 - Postman (Chrome插件) 一个非常有力的Http Client工具用来测试Web服务的, 我这里来介绍如何用它测试restful web service 注:转载 ...

  5. jspm 是浏览器包管理工具

    jspm 是浏览器包管理工具. jspm 是 SystemJS 通用模块加载器的包管理器,基于动态 ES6 模块加载器 直接从任意的 registry(比如 npm 或者 GitHub)加载任意模块格 ...

  6. [转]使用ping钥匙临时开启SSH:22端口,实现远程安全SSH登录管理就这么简单

    原文链接:使用ping钥匙临时开启SSH:22端口,实现远程安全SSH登录管理就这么简单 这个留待后面玩一下,还是有安全隐患,非核心业务 临时用一下可以. 设置防火墙策略时,关于SSH:22访问权限, ...

  7. 浏览器中 F12 功能的简单介绍

    chrome浏览器中 F12 功能的简单介绍 由于F12是前端开发人员的利器,所以我自己也在不断摸索中,查看一些博客和资料后,自己总结了一下来帮助自己理解和记忆,也希望能帮到有需要的小伙伴,嘿嘿! 首 ...

  8. Idea书签管理器的使用

    1. 添加书签 以光标所在的行,为落点, 方式一: F11 , 添加一个默认的书签 方式二:Crtl + Shift + 数字 , 添加一个带编号 的书签 2. 查看书签 方式一:Shift + F1 ...

  9. [转]chrome浏览器中 F12 功能的简单介绍

    本文转自:https://www.cnblogs.com/zhuzhubaoya/p/9758648.html chrome浏览器中 F12 功能的简单介绍 由于F12是前端开发人员的利器,所以我自己 ...

  10. 【F12】chrome浏览器中 F12 功能的简单介绍

    chrome浏览器中 F12 功能的简单介绍 由于F12是前端开发人员的利器,所以我自己也在不断摸索中,查看一些博客和资料后,自己总结了一下来帮助自己理解和记忆,也希望能帮到有需要的小伙伴,嘿嘿! 首 ...

随机推荐

  1. 面试题--mysql的数据库优化

    mysql的数据库优化 当有人问你如何对数据库进行优化时,很多人第一反应想到的就是 SQL 优化,如何创建索引,如何改写 SQL,他们把数据库优化与 SQL 优化划上了等号. 当然这不能算是完全错误的 ...

  2. 记录一下Android usb相关的知识学习

    在SecondStageMain中会先调用PropertyInit做属性初始化,该方法会调用PropertyLoadBootDefaults加载持久化的属性主要加载位置: /system/build. ...

  3. 8.16考试总结(NOIP模拟41)[你相信引力吗·marshland·party?·半夜]

    美丽的不是这个世界,而是看世界的你的眼神. T1 你相信引力吗 解题思路 好像只有我一个人没有看出来这个题是单调栈(现在一看区间问题就是双指针,线段树) 维护一个单调递减的栈. 我们把最大值放到左端点 ...

  4. 解决TrueNAS中Smb共享文件路径不区分大小写的问题

    问题 在Truenas中, 默认的smb文件分享中, 文件夹是不区分大小写的. 这在一些情况下会导致无法重命名等问题, 严重时可能会造成拷贝文件时的全文件夹文件丢失. 这是linux下的情况, 在已存 ...

  5. k8s——pod的yaml文件

    理解什么是pod pod基于deployment创建,删除deployment,pod也会被删除 基础pod的yaml文件的资源清单 点击查看列表 | 参数名 | 类型 | 字段说明 | | ---- ...

  6. Vue学习:19.插槽实例

    来个简单示例练练手吧. 实例:插槽实例 思路 在封装表格组件时,通常使用默认插槽和作用域插槽来处理固定的自定义结构. 代码 根组件(APP.vue) <template> <div& ...

  7. 搭建第一个web项目

    实现使用: 1.创建一个普通java文件 2.Java文件的类名实现HttpServlet 3.重写service方法 4.在WEB-INF下的web.xml中添加请求与servlet类的映射关系 定 ...

  8. Java基础(二)继承剖析

    继承剖析 1 若是要直接调用父类的构造方法,不调用子类的方法则需要使用的是super()关键字 Publicclass Child extends Parent {          Public C ...

  9. WAV音频文件按秒切片段

    wav音频文件按秒切片段 import wave def split_wav_by_seconds(input_file, output_file, start_second, end_second) ...

  10. UE4打包发布后,在Windows和Android平台上访问非Asset文件

    1.问题来源 最近的项目里面有个需求,要在打包之后的exe或者apk运行起来后访问工程Content或者安卓目录下的非Asset文件,比如text文件,json文件等,从中读取一些可随时修改的配置项信 ...