Chrome插件实战（二）可视化你的文章数据漏斗接上回Chrome插件开发系列，本期会涉及到popup功能的增强优化，后

本文正在参加「金石计划 . 瓜分6万现金大奖」

相关链接

Chrome插件开发（一）写个插件随时运营掘金文章

接上回Chrome插件开发系列，本次带来这个系列的第二篇文章，本期会涉及到popup功能的增强优化，后台定时任务，上架应用市场等干货。

速览功能点：

文章数据漏斗
数据卡片下钻
消息通知提醒

可视化

上一篇的核心思路要解决的是操作链路的问题，随时随地，快速查看自己的文章数据，重在效率，这次功能更新的重点会放在可视化运营文章的数据上面，方便作者分析自己的作品。

文章数据漏斗

这里的功能点主要源于上一期插件开发提到一个功能：展示近10篇最新的文章

之前开发的文章列表其实是比较简单的，就是一个列表，然后每篇文章有一些基础的数据信息，然后点击可以跳转到文章详情。

这里就思考能否根据文章的情况做一些运营上的分析，下面其实是我自己列的一个文章不同阶段，读者在每个阶段会带有怎样的动机。

第一阶段 - 展示量

这个阶段其实作者无法直接控制，因为是社区给的流量，但是社区会根据文章的热度情况，持续给到流量，也就是说你的文章越优质，读的人越多，那么展示流量也会滚雪球。

第二阶段 - 阅读量

这里就是文章被点开的次数，你的标题，描述，图片如果足够吸引人，那么阅读量自然也会更高，一个好的标题应该是作者在一开始就得想明白的，不能结尾发布在匆匆补作业。

第三阶段 - 点赞 + 收藏 + 评论

点赞是对于文章的最大认可，并不是每个读过你的文章的读者都会认可你的观点，但是点赞越多，那么也从侧面说明文章越受欢迎，而收藏和点赞的数据其实差不多，有些人会把点赞当收藏来用

第四阶段 - 关注

关注了就成为作者的粉丝了，那么其实是对作者的认可，这个数量其实是相当少的，至少从我这边的数据看是不多的，这也是一篇文章的最终收益。

那么针对这几个阶段，小助手就增加了下面漏斗的功能，点击单个文章的右下角就会出现：

这个是我上一篇文章的数据，转化率还是相当不错的，都有5%以上

关注数无法关联到单个文章上，这里并没有展示

一个反例，这一篇的二级转化率就很低，可能和chrome插件题材的文章看得人不多有关系。

但是我还是会坚持这个系列

单文章趋势

创作者中心里有个单篇文章的趋势分析还不错

那么这里既然已经做了数据漏斗，顺便也可以把这个加上：

效果基本基本无差，都是一样的丝滑

数据卡片下钻

不知道你会不会和我有一样的感觉，就是每次看到下面这个数据小卡片总是很想点击：

所以我就直接对每个卡片做了点击下钻的功能：

单个卡片能针对单个数据进行查看趋势图

右上面的图标tab也能点击查看所有指标的情况：

细节优化

增加通知提示Badge

之前有用过这样一个插件：

番茄工作法，顾名思义就是管理你的时间，每工作25分钟，然后休息5分钟，从而高效专注的完成你的任务

其中有一个交互的细节很吸引我，就是在popup的小icon处会有一个时间倒计时，感觉非常方便：

那这里我就想能否和第一篇开发文章里的通知结合起来，如果有掘金的新消息通知，我就可以在这里显示总数数量的badge，效果如下：

下面就是设置badge的代码，一个是设置颜色，一个是设置文本，这里注意文本只能设置string格式，数字number是不被允许的。

chrome.action.setBadgeBackgroundColor({
  color: '#cb0004'
})
chrome.action.setBadgeText({ text: '10' })

那就会有掘友疑问，这里是怎样做到实时更新通知呢

这里其实是用了最简单的定时任务，原理就是setInterval，代码如下

class Schedule {
  private timer: any
  private gap: number
  private limitHours: [number, number]

  constructor(gapMinutes: number, limitHours: [number, number]) {
    this.gap = gapMinutes * 60 * 1000
    this.limitHours = limitHours
  }

  public register(callback) {
    if (this.timer) {
      clearInterval(this.timer)
    }
    this.timer = setInterval(() => {
      const curHour = new Date().getHours()
      if (curHour >= this.limitHours[0] && curHour <= this.limitHours[1]) {
        return false
      }
      callback()
    }, this.gap)
  }
}

const job = new Schedule(10, [0, 6])

10分钟触发一次，半夜0-6点后就不触发了

其他

剩下就是一些小的细节优化，比如掘力值汇总增加了日均增长和10日增长：

二次打开popup会显示之前打开过的tab：

这里顺便简单贴下vue3的hooks封装：

export const useLocalRef = <T>(keyName: string, defaultValue?: T) => {
  const localInfo = ref<T>(getLocalObj(keyName) || defaultValue || null)

  watch(localInfo, (newVal) => {
    setLocalObj(keyName, newVal)
  })

  return localInfo
}

const tabKey = useLocalRef<string>('popup-tab-key', 'power')