从原型到源码
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打包，又进一步压缩了最终代码的大小。
有vue真好
使用函数动态变更输出，在循环中过滤列表显示，dom动效天然集成，watch避免父子组件间互相依赖。想实现的效果都能在vue里找到解决方案，开发起来真的是不能再快了。这方面就不多说了，总共的代码也没几个文件。
源码
目前插件已开发完毕并上线，稍微总结整理下经验，给想开发插件的同学。
- sketch原型文件和html导出文件下载
https://pan.baidu.com/s/1qX9ScBM - 源码放在github上
https://github.com/airloy/objective-chrome-extension - 插件在线安装，翻墙地址
https://chrome.google.com/webstore/detail/%E8%A1%8C%E4%BA%8B%E6%98%93/ebaffmkmddpmojnobhnofpgdeibmkhof?hl=zh-CN - 插件手动安装包下载
https://pan.baidu.com/s/1c1Pjve4
网友评论