# 前言 **碰巧**掘金新上签到活动，**碰巧**喝了咖啡睡不着，**碰巧**双休不用上班，**所以**写了个插件，方便工作日签到（顺道练练手）先来看看成品 ![image-20210717064346915](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/86a14ed7eeae4f12936b208f3d9336ea~tplv-k3u1fbpfcp-zoom-1.image) ![image-20210717103555717](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/652a97b951314c7e944ec06e9f32a802~tplv-k3u1fbpfcp-zoom-1.image) ![image-20210717064223932](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2c6492f409894cb19531a07bb6cf2dba~tplv-k3u1fbpfcp-zoom-1.image) 总的来看，插件需要实现以下几个目标： 1. 检测当前用户登录态 2. 判断用户今天是否已签到 3. 发送签到请求 4. 展示信息（用户信息，奖励信息） ![搞事情、搞事情、整天就知道搞事情！（熊猫人）](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5b7820e935304ead998777178ee8bdd2~tplv-k3u1fbpfcp-zoom-1.image) # 请求分析 ## 用户登录凭证通过登录请求`[POST] /passport/web/user/login`可以看到，请求响应设置的`Cookie`中有好几个键值对，选择一个普通的请求在`postman`上分析，可以看到`掘金`通过`Cookie`中的`sessionid`作为`用户登录凭证` ![image-20210717143831542](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/deef13b57b49439da7415aeb545edbdd~tplv-k3u1fbpfcp-zoom-1.image) ## 签到相关的接口在签到功能的请求中，跟这次要实现功能相关的接口有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`） # 流程图下面通过几个场景的时序图来阐述清楚插件的工作流程 ## 未登录场景 ```mermaid sequenceDiagram participant user as 用户 participant plugin as 插件 participant chrome as 浏览器 participant juejin as 掘金 user->>+plugin: 打开插件 plugin->>+chrome: 获取掘金cookie chrome-->>-plugin: return sessionid plugin->>+juejin: [GET] /user_api/v1/user/get juejin-->>-plugin: return 当前用户信息 plugin->>plugin: 判断当前cookie无效 plugin-->>-user: 用户未登录，显示登录按钮 user->>+plugin: 点击登录按钮 plugin->>+juejin: 跳转到登录页 juejin->>juejin: 用户登录 juejin-->>-plugin: 登录成功 plugin-->>-user: 登录成功 ``` ## 未签到场景 ```mermaid sequenceDiagram participant user as 用户 participant plugin as 插件 participant chrome as 浏览器 participant juejin as 掘金 user->>+plugin: 打开插件 plugin->>+chrome: 获取掘金cookie chrome-->>-plugin: return sessionid plugin->>+juejin: [GET] /user_api/v1/user/get juejin-->>-plugin: return 当前用户信息 plugin->>plugin: 判断当前cookie有效 plugin->>+juejin: [GET]/growth_api/v1/get_today_status juejin-->>-plugin: return 用户签到状态 plugin->>plugin: 判断用户还没签到 plugin-->>-user: 展示用户信息，显示签到按钮 user->>+plugin: 点击签到按钮 plugin->>+juejin: [POST]/growth_api/v1/check_in juejin-->>-plugin: return 奖励矿石数量 & 当前总矿石数量 plugin-->>-user: 签到成功，展示奖励信息 ``` ## 已签到场景 ```mermaid sequenceDiagram participant user as 用户 participant plugin as 插件 participant chrome as 浏览器 participant juejin as 掘金 user->>+plugin: 打开插件 plugin->>+chrome: 获取掘金cookie chrome-->>-plugin: return sessionid plugin->>+juejin: [GET] /user_api/v1/user/get juejin-->>-plugin: return 当前用户信息 plugin->>plugin: 判断当前cookie有效 plugin->>+juejin: [GET]/growth_api/v1/get_today_status juejin-->>-plugin: return 用户签到状态 plugin->>plugin: 判断用户已签到 plugin-->>-user: 展示用户信息，矿石数量 ``` # 搭建chrome插件开发工程通过[vue-web-extension](https://github.com/Kocal/vue-web-extension)实现快速搭建chrome插件开发工程（Vue）首先确保这两个已经安装了 ```shell npm install -g @vue/cli npm install -g @vue/cli-init ``` 然后通过`vue-web-extension`创建工程，我选择`vue-web-extension`的版本是`v1` ```shell vue init kocal/vue-web-extension#v1 juejin-auto-sign ``` 按需选择自己需要的功能（`axios`必选） ![image-20210717152313855](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2d3eb81bc1854a888b62c628c7533784~tplv-k3u1fbpfcp-zoom-1.image) 安装`element ui`（按需加载） ```shell cd juejin-auto-sign && vue add element ``` ![image-20210717174346824](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/83fb87f11abe419bb369817e0448bbd6~tplv-k3u1fbpfcp-zoom-1.image) 由于`element ui`的配置会写在`package.json`文件中`babel`部分，跟工程原有的`.babelrc`配置文件重叠了，需要将`package.json`中关于`babel`部分的配置合并到`.babelrc`文件中合并前 ```shell # .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`，能够正常打包 ```shell yarn build ``` ![image-20210717175823529](/Users/luoxiongjian/Library/Application Support/typora-user-images/image-20210717175823529.png) > 至此，工程已经基本搭建完成了！可以正式投入开发工程常用命令： - yarn build 构建插件，输出到dist目录下 - yarn build-zip 按照插件名+版本号的形式，构建插件压缩包 - `yarn watch` 构建插件，输出到dist目录下，如果发生改动，会即时刷新 # 关键代码 ## manifest.json配置文件 manifest.json文件中记载着插件的原信息，其中包括插件的基础信息（插件名称，版本号，ICON等），以及插件涉及页面（popup，options，background等），还有插件需要向chrome申请的权限 ```json { // 插件名称 "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](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/adf2cf1310b94b4f802c92672176d88e~tplv-k3u1fbpfcp-zoom-1.image) 拿`Google翻译`插件来看，红色箭头指向的页面就是popup页面 > chrome插件开发有分好几种页面以及脚本 > 页面有：popup，optional，background，插件上不同页面的展示位置是不同，用途也不同，目前只需要了解到popup页面即可 > 脚本有：background.js，content script等，不同的脚本声明周期也是不同的下面展示签到助手插件popup页面的主要代码 ```vue ``` 主要的逻辑都包含在页面`mounted`阶段，该阶段需要执行一系列操作，包括获取用户信息，判断cookie有效性，获取用户当前签到状态以及奖励信息等等 > 忽略\中的一堆笨拙的\标签，前端我只会写\ ![img](https://images-1255831004.cos.ap-guangzhou.myqcloud.com/online/2021-07-17-145924.jpg) ## 修改请求头签到请求`/growth_api/v1/check_in`是一个`POST`请求，浏览器会自动带上`origin`请求头，其值为`chrome-extension://xxxxx`，此时掘金会校验请求头中的`origin`，非掘金的origin会直接报`403`（应该是网关层做了请求来源的校验） ![image-20210717230835866](https://images-1255831004.cos.ap-guangzhou.myqcloud.com/online/2021-07-17-150836.png) 此时插件就需要修改请求头中的`origin`字段，然而`origin`字段并不能随意修改比方说axios强制指定请求头中origin的值是不生效的，并且插件的控制台会有对应的错误提示，该操作不符合规范此时就需要使用到`manifest.json`中注册的网络请求的权限一个正常响应的请求在chrome中会经历如下图所示的声明周期 ![Life cycle of a web request from the perspective of the webrequest API](https://images-1255831004.cos.ap-guangzhou.myqcloud.com/online/2021-07-17-151756.png) 如果我们需要修改请求头字段的话，则可以在`onBeforeSendHeaders`发送请求头之前通过事件监听的方式修改`origin`字段，同时，该事件监听应该是贯穿整个插件的生命周期的，所以代码应该写在`background.js`中 ```javascript // background.js文件 chrome.webRequest.onBeforeSendHeaders.addListener( function(details) { details.requestHeaders.push({ name: 'origin', value: 'https://juejin.cn' }); return { requestHeaders: details.requestHeaders }; }, { urls: ['*://*.juejin.cn/*'] }, ['blocking', 'requestHeaders', 'extraHeaders'] ); ``` 上述代码中可以看到，`chrome.webRequest.onBeforeSendHeaders.addListener`接受三个参数： 1. 监听器回调方法，修改请求头的操作应该放在这个方法中 2. 过滤器，用于控制监听的URL范围，这里选择监听掘金相关的请求 3. 元信息（opt_extraInfoSpec），简单来说就是，这个参数填写的值代表监听器的回调方法的执行方式以及回调时传入的数据本次监听器的元数据中包含`['blocking', 'requestHeaders', 'extraHeaders']`，这三个值分别表示： - `blocking` 表示回调方法是同步调用的，就是说一个请求的回调方法执行完之后才会轮到下一个请求的回调方法 - `requestHeaders` 表示回调方法的参数`details` 中包含请求头的数据 - `extraHeaders` 这个字段比较神奇，由于`origin`请求头这玩意不是说改就改的，`chrome`也不推荐，如果真的要修改的话，就必须要填写这个字段，这样对`origin`的修改才会生效 > 在manifest配置文件中可以看到，插件申请的权限除了`webRequest`之外，还有`webRequestBlocking`，添加这个权限是因为监听方法中使用`blocking`同步的方式 # 总结至此，这个插件的实现思路基本介绍完了，总的来看，插件的实现难度不高，有兴趣的可以自己试着尝试实现一下当然，以插件的形式来实现签到的功能其实并没有极大幅度地提高签到的效率，最好的方式肯定还是在服务器中定时签到，这样即使不上掘金网站，也能收获满满的矿石用以抽奖，但是这样不可避免地将用户登录凭证暴露出去，可能存在一些安全风险，同时也丧失了掘金举办这个活动的意义 > 万一被别人拿到自己的cookie跑去删除自己的文章，那真的是欲哭无泪这次掘金的签到活动个人觉得还是办的可以的 - 任务难度很低，规则简单，活动入口明显 - 签到奖励比较多，一个月签到下来，应该都有好几千矿石，应该能抽奖好几十次 > 唯一不好的地方就是我抽了好几天都没抽到switch，哈哈哈哈