用过浏览器的人都知道,浏览器有三大难用,极其影响工作效率
🩴收藏夹太扁平
有多少小伙伴跟我一样喜欢收藏网站,不管以后能不能用到,只要觉得有意思先收藏起来再说;
而我又只喜欢收藏,不喜欢整理,收藏夹吃灰成了一个随手的习惯,但是这里边混杂这一些真的有用的网站,在用到的这些网站的时候找起来是真的麻烦。
🙎网页开太多
有多少人喜欢把浏览器开一堆页面?
反正我是常年开着十几个页面,不会关的那种,也不是乱开,是真的都有用,如果关掉再次找起来不仅麻烦,有很多还会关闭自动清 Token,所以会把 Tab 栏积压的只剩一个小图标,一个网站找半天;
当然如果开多个工作窗口可以解决这个问题,但是面临的新问题就是多工作窗之间切换起来又是令人手忙脚乱。
🥵页面不小心关掉找不到了
有没有经常不小心关掉还有用的网页?或者电脑重启后浏览器没有记住上次打开的状态消失了,又要重新找回;
如果在浏览器历史里找回,拿 Edge 为例,他的历史记录不知道是什么规则,经常没有我刚刚关掉的网页,找回相当的麻烦。
💻︎ARC浏览器
这三个致命问题,特别影响浏览器的体验;
你可能不信,就基于这些问题,国外的开发者开发了一个浏览器叫 ARC,界面美观,使用起来也确实不错;
当然这款浏览器能解决的使用痛点并不局限于这三个,但是它也有自己的问题,比如需要一些魔法才可以使用,还有特效过于炫酷导致卡卡的,那么有没有一个简单的方法可以解决这个问题那?
😎我的方案
当然有,好在浏览器的扩展 API 给了我们获取这些东西的权限,让我们可以制作一个提升浏览器体验的扩展插件
我们在扩展商店可以找到很多解决类似问题的扩展,但是使用过后感觉都不如意,大多都只解决了单个需求,又搭配了一些没有必要的功能。。。
既然市场上没有那就自己来做一个,简单了解了一下 manifest V3 的 API 之后就开始动手;
最初用原生前端做了一个 demo,后来觉得原生前端扩展起来比较麻烦,不如 vue 就决定切换成 vue;
可是切换的时候遇到了问题,我直接用浏览器方式引入了 vue 发现没有任何效果,查了一些资料没有找到答案,只找到了这么一个回答;
又经过一通查询发现了一个库 crxjs,这让我眼前一亮,这是一个 vite 插件,可以用来实时的打包用 vue 写的浏览器扩展,还可以热更新,简直就是扩展开发神器啊;
我们先跟着crxjs的文档搭建一下环境,这里我们直接使用vite3
安装插件:npm i @crxjs/vite-plugin@beta -D
更新 Vite 配置
修改 vite.config.js
文件里的代码
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { crx } from '@crxjs/vite-plugin'
import manifest from './manifest.json' // Node 14 & 16
import manifest from './manifest.json' assert { type: 'json' } // Node >=17
export default defineConfig({
plugins: [
vue(),
crx({ manifest }),
],
})
在根目录创建一个 manifest.json
文件
里边的代码就根据你的需求写,跟原生扩展开发配置没什么区别
配置就完成了,就是这么简单
然后我们直接 npm run dev
就可以看到打包好的 dist 文件了
把这个 dist 文件拖入浏览器扩展页面就可以看到
以后写完代码直接保存就会自动打包更新这个 dist
跟着 crxjs 搭建好环境之后就是业务部分
这里工程代码太长了就不贴了,所有代码均已开源,可以到 github 看开源代码,欢迎 star 哦!!!
开源地址:https://github.com/ponysb/TagPlanet
最终,标签星球诞生了,它如同一个浏览器的仪表盘一样,将你最关注的浏览器信息显示在这个页面上,扩展安装之后新建标签页就可以看到;
布局分为四块,最左边是收藏夹的分组,进入后默认选中第一个分组的网站,右下部分是当前选中分组的网站,以导航的形式显示,可以从左侧导航栏进行切换显示
上部分是显示最近浏览过的十个网站,如果不小心手滑关掉了从这里可以即刻恢复;
当然这个功能推出之后也收到了一些小伙伴们的吐槽,玩意我刚浏览完那种小网站,或者摸完鱼,没有覆盖让别人看到那岂不是。。。这里pony下一个版本会想办法解决;
最右侧就是当前浏览器已经打开的网站,竖向显示,可以容纳超多页面而不会被积压,而且不同工作窗打开的网站都可以显示在这,只需要点击会自动激活工作窗跳到对应的页面,就问你神不神奇;
最上边是搜索栏,可以模糊搜索收藏夹收藏的所有链接,快速找到想要的;
另外还附加了一个小功能,订阅源;
中间区域右上角 导出
按钮,可以导出当前选中收藏夹下的所有网站为json格式,将它托管到任意服务器生成直链,就可以分享给其他小伙伴了;
订阅也很简单,直接点击旁边的 订阅
按钮,填入链接,点击 确定
即可,订阅好了之后会在这里出现订阅的源,点击就可以浏览里边的网站了,源里边的收藏夹可以一层一层点进去,pony制作了几个官方源已经放在下方了可以试试
Edge商店:https://microsoftedge.microsoft.com/addons/detail/podfjomopoejmlkfnhanlmlagcnlappd
Chrome商店:https://chromewebstore.google.com/detail/jeaebbdndojkbnnfcaihgokhnakocbnf
还有什么更好的建议和需求可以在评论区留言