如何才能打造一个更好用的浏览器？

用过浏览器的人都知道，浏览器有三大难用，极其影响工作效率

🩴收藏夹太扁平

有多少小伙伴跟我一样喜欢收藏网站，不管以后能不能用到，只要觉得有意思先收藏起来再说；

而我又只喜欢收藏，不喜欢整理，收藏夹吃灰成了一个随手的习惯，但是这里边混杂这一些真的有用的网站，在用到的这些网站的时候找起来是真的麻烦。

🙎网页开太多

有多少人喜欢把浏览器开一堆页面？

反正我是常年开着十几个页面，不会关的那种，也不是乱开，是真的都有用，如果关掉再次找起来不仅麻烦，有很多还会关闭自动清 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

还有什么更好的建议和需求可以在评论区留言