chrome插件开发 | 掘金签到助手

前言

碰巧掘金新上签到活动，碰巧喝了咖啡睡不着，碰巧双休不用上班，所以写了个插件，方便工作日签到（顺道练练手）

先来看看成品

image-20210717064346915

image-20210717103555717

image-20210717064223932

总的来看，插件需要实现以下几个目标：

1. 检测当前用户登录态
2. 判断用户今天是否已签到
3. 发送签到请求
4. 展示信息（用户信息，奖励信息）

搞事情、搞事情、整天就知道搞事情！（熊猫人）

请求分析

用户登录凭证

通过登录请求[POST] /passport/web/user/login可以看到，请求响应设置的Cookie中有好几个键值对，选择一个普通的请求在postman上分析，可以看到掘金通过Cookie中的sessionid作为用户登录凭证

image-20210717143831542

签到相关的接口

在签到功能的请求中，跟这次要实现功能相关的接口有4个，分别是：

1. 获取签到天数的汇总信息 [GET]/growth_api/v1/get_counts
2. 获取当前的矿石数量 [GET]/growth_api/v1/get_cur_point
3. 判断用户今天是否已签到 [GET]/growth_api/v1/get_today_status
4. 用户签到 [POST]/growth_api/v1/check_in

这里大致分析一下功能对应的请求即可，具体传参以及返回值的含义可以通过浏览器控制台查看（F12）

流程图

下面通过几个场景的时序图来阐述清楚插件的工作流程

未登录场景

image.png

未签到场景

image.png

已签到场景

image.png

搭建chrome插件开发工程

通过vue-web-extension实现快速搭建chrome插件开发工程（Vue）

首先确保这两个已经安装了

npm install -g @vue/cli
npm install -g @vue/cli-init

然后通过vue-web-extension创建工程，我选择vue-web-extension的版本是v1

vue init kocal/vue-web-extension#v1 juejin-auto-sign

按需选择自己需要的功能（axios必选）

image-20210717152313855

安装element ui（按需加载）

cd juejin-auto-sign && vue add element

image-20210717174346824

由于element ui的配置会写在package.json文件中babel部分，跟工程原有的.babelrc配置文件重叠了，需要将package.json中关于babel部分的配置合并到.babelrc文件中

合并前

# .babelrc配置文件
{
  "plugins": [
    "@babel/plugin-proposal-optional-chaining"
  ],
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage",
      "corejs": 3,
      "targets": {
        // https://jamie.build/last-2-versions
        "browsers": ["> 0.25%", "not ie 11", "not op_mini all"]
      }
    }]
  ]
}

# package.json配置文件
{
  .......
  "babel": {
    "plugins": [
      [
        "component",
        {
          "libraryName": "element-ui",
          "styleLibraryName": "theme-chalk"
        }
      ]
    ]
  }
}

合并后，将package.json中babel部分删除，.babelrc配置文件如下

在工程根目录下执行yarn build，能够正常打包

yarn build


至此，工程已经基本搭建完成了！可以正式投入开发

工程常用命令：

• yarn build 构建插件，输出到dist目录下
• yarn build-zip 按照插件名+版本号的形式，构建插件压缩包
• yarn watch 构建插件，输出到dist目录下，如果发生改动，会即时刷新

关键代码

manifest.json配置文件

manifest.json文件中记载着插件的原信息，其中包括插件的基础信息（插件名称，版本号，ICON等），以及插件涉及页面（popup，options，background等），还有插件需要向chrome申请的权限

{
  // 插件名称
  "name": "juejin-auto-sign",
  // 插件描述
  "description": "掘金签到助手",
  // 插件版本号
  "version": "1.0.0",
  "manifest_version": 2,
  "icons": {
    "48": "icons/icon.png",
    "128": "icons/icon.png"
  },
  ......
  // [1] 申请掘金的cookie、网络请求的权限
  "permissions": [
    "cookies",
    "*://*.juejin.cn/",
    "webRequest",
    "webRequestBlocking"
  ]
}

[1]处可以看到，插件需要申请网络权限 webRequest 和 webRequestBlocking，这两个权限是跟用户签到请求有关系的（POST请求），后面会详细介绍为什么需要这两个权限

popup页面

目前插件的功能实现都是在popup页面，所谓popup页面就是在浏览器插件栏处点击展示的页面

image-20210717224513506

拿Google翻译插件来看，红色箭头指向的页面就是popup页面

chrome插件开发有分好几种页面以及脚本
页面有：popup，optional，background，插件上不同页面的展示位置是不同，用途也不同，目前只需要了解到popup页面即可
脚本有：background.js，content script等，不同的脚本声明周期也是不同的

下面展示签到助手插件popup页面的主要代码

主要的逻辑都包含在页面mounted阶段，该阶段需要执行一系列操作，包括获取用户信息，判断cookie有效性，获取用户当前签到状态以及奖励信息等等

忽略