作为一名软件开发从业人员, 每天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. k8s&dapr开发部署实验(1)服务调用

    前置条件 安装docker与dapr: 手把手教你学Dapr - 3. 使用Dapr运行第一个.Net程序 安装k8s dapr 自托管模式运行 新建一个webapi无权限项目 launchSetti ...

  2. 基于Python的性能优化

    一.多线程 在CPU不密集.IO密集的任务下,多线程可以一定程度的提升运行效率. import threading import time import requests def fetch_url( ...

  3. ef.core 事务不回滚的我遇到的一种情况分享

    比如有几个Repository:_storeRep,_inventoryRep,_storeItemRep.基类封装有BeginTransaction():   using(var trans=_st ...

  4. iNeuOS工业互联网操作系统,增加电力IEC104协议

    1.      概述... 2 2.      配置IEC104协议设备驱动... 2 1.   概述 IEC60870-5-104 是一种电力自动化系统中常用的通信协议,使用 TCP/IP 协议作为 ...

  5. 错误 CS1617 Invalid option '7.3' for /langversion; must be ISO-1, ISO-2, Default or an integer in range 1 to 6.

    严重性 代码 说明 项目 文件 行 禁止显示状态错误 CS1617 Invalid option '7.3' for /langversion; must be ISO-1, ISO-2, Defau ...

  6. vue中退出循环的方法

    forEachforEach不能使用break和continue.return也无法退出循环. 使用break,会报错(报错信息:SyntaxError: Illegal break statemen ...

  7. 以 ZGC 为例,谈一谈 JVM 是如何实现 Reference 语义的

    本文基于 OpenJDK17 进行讨论 1. Reference 相关概念及其应用场景总览 Reference(引用)是 JVM 中非常核心且重要的一个概念,垃圾回收器判断一个对象存活与否都是围绕着这 ...

  8. 内部网关协议RIP-路由选择协议

    路由信息协议RIP(Routing Information Protocol)是内部网关协议IGP中最先得到广泛使用的协议,其相关标准文档为RFC1058. 一.RIP基本工作原理 RIP要求自治系统 ...

  9. springboot项目配置多数据源

    springboot项目配置多数据源 //关键:mybatis文件的目录需要区分开来 sqlSessionFactoryBean.setMapperLocations(new PathMatching ...

  10. redis简单应用demo - 订单号自增长的思路:业务编码+地区+自增数值

    redis简单应用demo1.字符串127.0.0.1:6379> set hello toneyOK127.0.0.1:6379> type hellostring127.0.0.1:6 ...