前端实战:我用 Vue3 开发了一款极简高效浏览器新标签页

6 阅读3分钟

前景摘要

在初学编程时,一直想要做个人博客

费了九牛八虎之力,终于做到了,还用这份作品找到了一份工作

面试官没有任何技术问题,就问:这是你自己独立完成的吗

然后这就过了!!!背了一个月的面试题,没派上用场。

也许受到这个影响,后续又做了仿windows项目,但完全没人用

对于程序员来说,算法再怎么复杂,也有力气去办它

而跳出这个舒适圈,去搞宣传,去吆喝

就如耳边隐隐响起从深巷里传来的魔咒:收废铜烂铁废纸箱...

所以这次,我又花了几个月时间,开发了一个浏览器首页

准备在全平台"吟唱" ,希望能有更多的小伙伴来使用。

截至这篇文章发表,已经翻车了,花了几天写的文章,居然才不到30的阅读量!!!!!

甚至被腾讯的审核打上了营销号的标签,太难了。后续会复盘下这次的经历。

别人都在教成功学,学了也不一定成功,但是失败的经历,一定能让你少踩一个坑

废话集结完毕,看看今天的主题吧:我的主页页页耶。

介绍

市面上已经有很多TAB,标签页了,基本饱和

其实的作品原型是windows文件夹,竞品是网盘,压根不是什么浏览器主页。

他的一大大特点是:符合树形结构的,都能用

一看浏览器的书签,这不就对上了吗?

树形结构,超实用,也不需要承担像网盘那样的硬件费用

于是把它改成了一个浏览器主页

由于h5无法做到读取用户的书签,只能做成浏览器插件

只能又去踩坑:开发Edge插件,因为edge免费,而谷歌的要钱,搞不了,搞不了,完全搞不了。

在AI加持下,顺利完成插件开发。

一开始以为浏览器插件开发难度很大,其实远比想象中的简单

dist是我打包的vue3项目,可以忽略

  • background.js就是插件本体了
  • manifest.json和package.json一样性质的文件

不懂的问AI,懂的让AI做,鞭笞AI才是程序员职责。

项目特点

想看的人就会点进这个地址,不想看的,介绍了,也是浪费文字

这篇文章本来也是过不了审的,原因就是:广告味太重了。

分割线以上的就是我重新改的,分割线以下的一个字都没动。

后面我也再看了下这篇文章,也不冤,审核只是做了本分工作罢了!!!


内置浏览器

点击侧边栏的网页,即可浏览,不用再开新的标签页了

部分网页不支持,可双击在新标签页打开

本地搜索收藏夹

直接在首页搜书签,模糊搜索,精准匹配

点击列表在内部打开,点击箭头在外部打开

自定义首页书签

完全自定义首页数据,没有系统推荐位,用户需要的,才是最好的

三种模式

顶部栏,侧边栏均可以收起。

  • 纯净模式:全部收起
  • 工作模式:收起侧边栏或者顶部栏
  • 效率模式:在纯净模式下打开网页

侧边栏

这里采用windows的交互,文件和文件夹之间可以相互拖拽

使用js的原生拖拽原生事件实现