- 相关链接
Chrome插件踩坑日志（一）Vite + Vue3 Chrome插件踩坑日志（二）vite插件手动实现“热更新” Chrome插件踩坑日志（三）热更新解耦 + 本地存储差异化
接上回Chrome踩坑系列，这次就是利用之前沉淀的vite-crx-template进行开发，看看在实际业务场景中模板的体验如何。
老规矩，上代码（新仓库）：
痛点分析
平时用掘金的时候，会发现一些使用上的痛点，这里先拿来分享一下
掘金插件的Badge
用过掘金插件的掘友们肯定知道，安装完插件，新tab页会被修改，差不多是下面这个样子
这个新tab页功能还是很不错的，可以刷最新的文章，github势头猛的项目，快捷搜索等
右上角有个用户的头像，如果有通知就会标红
悬浮上去却没有显示通知类型的下拉，我本以为会和掘金网页里面的交互一样，然而并没有，感觉链路有点深
创作信息
那么顺着刚才的思路，作为掘金的创作者，还是会经常去看一些自己的文章有多少的阅读量，点赞，掘力值等信息，这时候就会进入创作者中心
作为偷懒工程师的我感觉每次看下掘力值明细都要经过下面这好几步操作就有点难受
解决方案
上面两个痛点可能都是掘金本身的一些运营用户的策略，这里不做讨论，但是为了偷懒，我感觉可以自己弄个插件来，随时随地的打开一些快捷方式，减少操作链路，提高效率。
这时候就想到了chrome插件的popup，如果我有一个类似google翻译一样的popup，那就可以随时随地的打开一个弹窗，做一些快捷操作
对popup感兴趣的可以去看下Chrome踩坑日志系列二
功能开发
掘金已经有自己的插件了，这里当然要做点不一样的，直接先贴上插件的演示动图：
快捷消息通知
最上面一栏其实隐含有三部分信息：
-
用户名
-
头像
-
通知信息
用户名和头像其实很好理解，通过chrome开发者工具很方便就能找到对应的接口：
然后封装成通用的接口即可，
ajax对象是对axios的封装，便于调用
不过这里还得注意在manifest.json里加上一个配置：
这个配置其实就是允许插件调用外部接口，星号表示通配符，如果你的插件想要上市场，还是老老实实把实际的请求域名填上。
接下来就是用相同的办法找到通知信息的接口：
对应关系是：
1：点赞
2：关注
3：评论
4：系统消息
7：私信
最终效果如下，悬浮通知icon就能有下拉显示，并且也能点击跳转到相关页面
掘力值
作为创作者，掘力值还是比较关心的，所以这里就把掘力值的菜单放到了第一个默认的地方
同时，这里调整了下明细的展示方式，利用数据可视化的形式来展示近10天的数据（掘力总值，当天变化值），用的是@antv/g2的多轴图表方案：
10月26号的掘力值还真是高呢，果然要多发文章
具体是哪个接口这里就不贴了，network找接口是每个前端的基本功，相信大家应该都会。
数据卡片
第二个菜单就是数据卡片了，其实是直接把掘金后台的大卡片移植到了这里，样式缩小了一些，这样看概览也非常方便。
掘金数据源：
插件效果：
文章列表
第三个菜单用来展示已经写过的前10篇文章，用来粗略看下文章的情况，每个记录都能快捷跳转到相关文章
安装教程
目前已经在github上发布了一个v0.0.1的版本
点击这个v0.0.1.zip文件链接就能下载，下载后记得解压，解压会得到extension文件夹
然后chrome前往：chrome://extensions，点击加载已解压的扩展程序
最后记得把插件icon在右上角固定住：
接下来就好好体验功能把！！！
结束
这里声明下，本插件不会收集任何用户信息，所以不用担心你的数据被别人看到，不信的话可以直接看源码，然后如果掘友有其他的想法也可以在评论区留言，后续的迭代会安排上去。
插件的宗旨：简单，快捷，好用
创造不易，希望jym多多 点赞 + 关注 + 收藏 三连，持续更新中！！！
PS: 文中有任何错误，欢迎掘友指正
往期精彩📌
