作为一名软件开发从业人员, 每天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. layui 无限级多级菜单

    layui 二级菜单 :https://gitee.com/hslr/layui_extension_modulemenu 我更改了下,变成了无线级菜单 layui.define('element', ...

  2. WPF开发快速入门【6】下拉框与枚举类型

    概述 本文讲述下拉框和枚举类型进行绑定的一些操作. 下拉框的基本操作 设计部分: <ComboBox ItemsSource="{Binding Fruits}" Selec ...

  3. 理解Vue 3响应式系统原理

    title: 理解Vue 3响应式系统原理 date: 2024/5/28 15:44:47 updated: 2024/5/28 15:44:47 categories: 前端开发 tags: Vu ...

  4. nginx+php,nginx+tomcat动静分离实战

    1. 动静分离实战 1.1.1 nginx+tomcat 动静分离 主机 用途 10.0.0.63 tomcat服务器 10.0.0.64 nginx服务器 1.1.2 安装 java+tomcat环 ...

  5. (拼多多)pdd的Anti-Content

    声明 本文章中所有内容仅供学习交流,抓包内容.敏感网址.数据接口均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关,若有侵权,请联系我立即删除! 目标网站 aHR0cHM6 ...

  6. 小程序视图组件 scroll-view

    视图容器组件 3.2.1.swiper 滑块视图容器. https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html 3 ...

  7. P6259

    problem 考虑使用 dfs 模拟. 由于一个程序可能在不进入无限循环的情况下运行很多步,这将会非常缓慢.因此,接下来要加速模拟,可以用记忆化搜索. 在网格中,机器人的可能状态(位置和朝向)只有 ...

  8. 快速监控 Oracle 数据库

    Oracle 数据库在行业内应用广泛,通常存放的非常重要的数据,监控是必不可少的,本文使用 Cprobe 采集 Oracle 监控数据,极致简单,分享给大家. 安装配置 Oracle 简单起见,我使用 ...

  9. http请求方式-CloseableHttpClient

    http请求方式-CloseableHttpClient import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONObjec ...

  10. 实验六-Salt本地pojie实验

    [实验目的]了解Salt型密码的加密机制,学会使用本地密码pojie工具来pojieSalt型密码,了解pojie密码原理. [知识点]Salt,密码pojie [实验原理] 1.Salt概念 在密码 ...