第一章——什么是浏览器插件

在谷歌浏览器或谷歌内核的浏览器里，提供了扩展的方式来扩充浏览器的功能与体验。

官方的说法是：Chrome 扩展程序可通过自定义界面、观察浏览器事件和修改网络来提升浏览体验。

打开 chrome://extensions，我们平时常见的扩展有：

• AdBlock
• 沉浸式翻译
• 油猴
• Vue.js devtools / React Developer Tools
• 身份验证器
• ModHeader
• ...

组合式 API (Composition API) 是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件。

在刚接触 Vue3 的时候，由于了解到 Vue3 最大的变化就是提供了全新的 composition api，因此在初上手的时候，所有组件清一色用的都是 <script setup> + coposition api 编写，想着多用新特性总没错。在经历了一段时间的使用后，才逐渐有了一些自己的理解。

在我看来，组合式 API 不是 Vue3 的必须品，它有些时候更像一种编码思维，在该用到的地方使用会给你提升十分多的效率，但如果是为了用而用，在大多数简单的场景下，可能选项式 API 会显得更简单无脑一些，因为它给你列好了框架，手把手教你该把代码放在哪里。官方的原话是：

照惯例，先上篇参考文章：

关于 chrome 拓展开发的实践与思考(一) - 掘金 (juejin.cn)

这是一个作者写的系列文章，帮助了我很多，在此感谢~

背景

项目中新需求开发，往往会有接口的新增，然后我们一般要手动去 UAC 手动录资源，这个过程比较繁琐而且容易遗漏，再加上 UAC 越更新是越不好用了，因此我手动写了一个 cli 来处理这个事情，但发现 cli 还是不够智能和好用，最后想到的就是 chrome extension，可以取 cookie、发请求、获取 DOM，最重要的是它也在浏览器，会比较地一体化。

Vite1仅仅试用过，Vite2已经更新了，全新插件架构，丝滑的开发体验，和Vue3的完美结合。 出于对尤大的信任与新技术的追求，在做毕设的我尝试着把项目移植到 Vite2 上。

Vite2 官方文档（看了一个星期的英文文档才发现原来中文文档也更新了 T.T）

目标

vite + vue3 + typescript

直接查看 vite 官方文档，通过官方提供的创建项目命令创建一个空项目：

yarn create vite my-vue-app --template vue

提升90%加载速度——vuecli下的首屏性能优化

链接

Vue SPA 首屏加载优化实践

链接