TLTR

基于parcel2的chrome插件模板，方便大家快速上手

• 支持热加载、typescript、eslint
• 后续考虑增加popup页面，使用svelte进行开发

预研方案

最近有针对第三方网站做自动化的需求，需要抓取数据、本地缓存数据、扩展界面等，所以想了几个方案

油猴

优点:

• 开发简单，可以使用@require，引入外部文件；即仍在vsocde中开发，引入编译好的文件
• gm_xmlhttprequest也可以实现跨域传输数据

缺点:

• 不太适合做一些常驻的事情（类似于chrome插件background persistent的特性）
• 如果是我对油猴了解不深，麻烦大大路过顺手指教下

electron

优点:

• 完美结合node的特性
• 可以常驻进程（注意，浏览器进程可能不会常驻，所以这点其实优于chrome插件）
• 推荐一个比较的初始化项目: github.com/ci010/elect…

缺点:

• 推广起来肯定没有chrome插件方便

chrome插件

优点: 中规中矩

缺点: 热加载技术不成熟，下面是我遇到的问题，希望有大大知道的顺手指点下

webpack

开发content的时候，HMR可能有https问题

不过说真的，从webpack出生我就觉得这东西太复杂太不友好了

rollup

测试了exten-chrome, 编译遇到了部分问题，暂时放弃了

ReferenceError: exports is not defined

这个猜测是commonjs没有编译到node_modules？但明明已经设置了include

ReferenceError: async is not defined

引入了babel但是也没生效

最后的选择parcel

parcel一直是一个简单高效的编译工具，以下是官网列出来的特性

• 极致的性能，充分利用多核编译，以及文件系统缓存，即使在重新启动后也可快速重建
• 无需安装额外插件，开箱即用地支持 JS、CSS、HTML、文件等
• 自动编译Babel, PostCSS, and PostHTML甚至node_modules
• 0配置即可只用动态import
• 热加载
• 友好的错误提示 - 高亮代码块助您准确定位

目前v2仍是测试版，不过已经可以开始使用了，欢迎大家使用我的chrome插件模板体验parceljs极致便利

当然，参考官网也可以很轻松的从0开始搭建vue模板，比webpack简单nnnnnn倍