一、前言
相信有小伙伴在掘金上看过政采云前端团队分享的文章:手把手教你打造属于自己团队的前端小报系统 (建议先阅读后,再看本文), 当时看完觉得也可以开发个,在公司团队中推广使用。说干就干,按照文章中的思路,架构设计,已经开发完成,并在团队中推广使用了。
现将项目进行开源给有需要的小伙伴,项目完整代码请戳 github.com/lego-weekly (对你有帮助的话,🙇♀️给个 star )
接下来,会介绍开发过程中使用到的技术、框架以及关键点,两篇文章一起“食用”,嗯,更香!
二、chrome 插件开发
要开发的 chrome 插件主要功能就是智能识别、一键投稿。我们先了解下一个 Chrome
插件中的模块
Manifest.json
配置文件,开发一个Chrome
插件必不可少,其它的模块都是属于可选项Popup
页Content script
注入到web
页面的脚本,可以是JS
或者CSS
文件Background
后台页,运行在插件后台的页面,用户感觉不到它的存在,常用于监听浏览器事件Options
选项页,给用户提供了配置插件的入口DevTool
页,例如vue
开发调试工具Tab
页,使用扩展提供的页面将Chrome
默认的一些特定页面替换掉
“chrome 插件中的每个模块都是一个入口,所以chrome 插件可以看作是一个多页应用
Chrome 插件的开发,除了上面介绍的多个模块,还有模块之间如何通信,如何动态注入 JS,CSS; 权限、本地存储、国际化等内容,感兴趣的请戳官方文档 或 【干货】Chrome插件(扩展)开发全攻略-小茗同学。
我使用的是 vue 来开发,并使用 github 上的 vue-chrome-extension-template 模版来初始化项目,主要开发的插件模块是 Popup Page
模块, 通过 webpack
打包后会生成 dist
文件夹,在 Chrome
浏览器的扩展管理页面,开启开发者模式,加载已解压的扩展程序就可调试了,具体实现请查看源代码
三、汇总与推送
为了对投稿的文章进行汇总,会以周为单位,将每周的投稿文章汇总成周报,通过邮箱推送到每位团队成员的邮箱中,同时需要一个周报展示系统。
3.1、定时邮箱推送
邮箱推送使用的是 nodemailer
npm 包,按照文档进行设置即可,而定时推送是通过 linux 内置的 cron 进程实现的
在服务器上,执行 crontab -e
命令,在打开的文件中,增加下面的一条定时任务
0 15 * * 5 curl http://www.xxx.com/api/week/add -X POST
结合 cron 定时任务书写,可以看出👆的定时任务是每周五下午3点,请求 www.xxx.com/api/week/ad… 接口
而 /api/week/add 接口会找出数据库中本周所有投稿文章,生成一条周报记录,再通过邮箱推送出去,邮件内容如下图
3.2 、小报展示系统
小报展示系统,使用的是 nuxt 开发,实现服务端渲染,比较简单,具体可查看源代码,并结合 nuxt 官方文档
四、最后
如果本文对你有帮助的话,给本文点个赞吧。项目运行有错误或报错,欢迎留言交流。 最后,再次感谢政采云团队的分享 🎉🎉🎉
“参考文档
- 手把手教你打造属于自己团队的前端小报系统 - 政采云
- vue-chrome-extension-template
- 【干货】Chrome插件(扩展)开发全攻略 - 小茗同学
- 一杯茶的时间,上手 Koa2 + MySQL 开发 - 图雀社区
本文使用 mdnice 排版