使用vue2开发chrome插件 - 简书 - 程序猿·D·安宇雨 DeepMind

使用vue2开发chrome插件 - 简书

安宇雨 - 随手采集
2021-12-22 16:58:03
随手采集
0000-未整理-等待研究

从原型到源码

demo2.gif

本次要开发的插件其实是很简单功能，显示每天的待办清单，能够添加，能够打勾，其它差不多就行了。之前对chrome插件开发没接触，以为会有很多api和开发模式需要学习，经过大致的了解，发现要实现的大部分功能都在一个网页里——点击插件图标，展现一个本地网页。所以应该和web开发差不多，只需要最后再稍微修饰下就可以。

选型

考虑到要实现的功能很简单，最终的插件包就要尽量的小，网页的加载和显示也该尽量快，对资源的占用也该小到忽略不计。

因而jQuery肯定是淘汰的，最好是不依赖其它js库。最开始简单写了几行代码发现，对dom的操作还是挺多的，这样的开发效率太慢。测试了一下vue2，各方面都很符合要求，开发效率却是翻了好几番，决定采纳。保持简单，vuex和router就免了。

语言上当然首选es6、es7，不用async，await来写网络接口请求代码，我受不了！开发上vue和webpack实时更新非常方便，使用cookingjs，webpack2、vue2、打包脚本等一应俱全，免去了集成调试的烦恼，完全和开发网页一样一样的啊。

项目构成

项目分两部分，一个部分是纯网页，点击插件图标显示的popup.html页面；另一部分就是chrome相关的接口，目前涉及不多，后面会加上定时和通知功能。网页的部分按cooking的方式开发网页就行了，插件的部分没几行代码，手写。

目录结构

目录.png

src 为网页源码，最终打包后会输出到crx目录下指定的位置。这样crx就是一个干净、完整的chrome插件目录，可以本地加载来做最后的测试，也可以直接压缩成zip提交到chrome应用商店发布。

css样式

开发前先使用sketch制作原型，这样开发的时候就不需要再考虑布局的事情。通过sketch插件导出部分的css代码，再稍微改装下，基本也够用，更高级的我也不会了。postcss不错，适合开发人猿。

es 配置

为了让eslint支持最新的特性，加上这两段太强大，好像都不需要再去调整啥了。
"parserOptions": { "ecmaVersion": 2017, "sourceType": "module" }, "env": { "es6": true }

cooking 的额外配置

如果只是纯粹的网页，cooking的默认配置就够用，不过为了方便开发和打包，自己又做了一些调整。

打包的输出，修改dist目录和最终的文件名，去除其它不必要文件和为了避免缓存的hash文件重命名。
设置代理，方便api接口调用，保证开发和发布的代码的一致性。
增加对依赖库的打包。由于airloy使用rollup打包，为了减少两种不同的打包方式而增加额外的最终代码，对airloy相关库使用源码的方式引入，再全部使用webpack打包，又进一步压缩了最终代码的大小。