Chrome插件开发-掘金签到小助手

前言巧合的是，掘金队有一个新的签到活动。我碰巧喝了咖啡，睡不着。刚好周末不用上班，就写了个插件方便工作日签到（顺便练练手）。首先，让我们来看看成品。目标如下：检测当前用户登录状态判断用户今天是否登录发送登录请求显示信息（用户信息，奖励信息）请求分析用户登录凭据可以通过登录请求[POST]]/passport/web/user/login，请求响应中设置的cookie中有几个键值对。选择一个常见的请求并在邮递员上进行分析。可以看到掘金使用cookie中的sessionid作为用户登录凭证登录相关界面。在签到功能的请求中，按照本次要实现的功能相关的接口有4个，分别是：获取签到天数汇总信息[GET]/growth_api/v1/get_counts获取当前矿石数??量[GET]/growth_api/v1/get_cur_point判断用户今天是否签到[GET]/growth_api/v1/get_today_status用户签到[POST]/growth_api/v1/check_in这里可以大致分析request对应函数，具体参数传递和返回值的含义可以通过浏览器控制台（F12）流程查看下图中通过几个场景的时序图把插件的工作流程解释的很清楚已经安装了npminstall-g@vue/clinpminstall-g@vue/cli-init然后通过vue-web-extension创建了一个项目，我选择的vue-web-extension版本是v1vueinitkocal/vue-web-extension#v1juejin-auto-sign选择你需要的功能根据自己的需要（需要axios）安装elementui（按需加载）cdjuejin-auto-sign&&vueaddelement由于elementui的配置会写在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%","notie11","notop_miniall"]}}]]}#package.json配置文件{......."babel":{"plugins":[["component",{"libraryName":"element-ui","styleLibraryName":"theme-chalk"}]]}}合并后，删除package.json中的babel部分。.babelrc配置文件如下。在项目根目录下执行yarnbuild，yarnbuild可以正常打包。至此，项目基本搭建完成！可以正式放入开发项目的常用命令：yarnbuild构建插件并输出到dist目录yarnbuild-zip构建插件压缩包yarnwatch根据插件名+版本号yarnwatch构建插件并输出到dist目录，如果有变化，关键代码manifest.json配置文件会立即刷新。manifest.json文件记录了插件的原始信息，包括插件的基本信息（插件名称、版本号、ICON等），插件涉及的页面（popup）,options,background等),以及插件需要申请到chrome的权限{//插件名称"name":"juejin-auto-sign",//插件描述"description":"掘金登录Assistant",//插件版本号"version":"1.0.0","manifestst_version":2,"icons":{"48":"icons/icon.png","128":"icons/icon.png"},......//【1】申请掘金"permissions"forcookiesandnetworkrequests:["cookies","*://*.juejin.cn/","webRequest","webRequestBlocking"]}[1]可以看到插件需要申请网络权限webRequest和webRequestBlocking，这两个权限是和用户的登录请求（POST请求）相关的，后面会详细介绍为什么需要这两个权限，弹窗目前实现的是插件的功能弹出页面所谓弹出页面就是浏览在浏览器的插件栏中点击显示的页面，可以查看谷歌翻译插件，红色箭头所指的页面就是弹出页面，有以下几种chrome插件开发中页面和脚本页面的类型：popup,optional,background,不同的页面在插件上的显示位置是不一样的，目的也是不一样的。ent，你只需要了解弹出页面。脚本包括：background.js、contentscript等，不同脚本的语句周期也不同。下面是签到助手插件弹窗的主要代码主要逻辑包含在页面挂载阶段，该阶段需要执行一系列操作，包括获取用户信息、判断cookies有效性、获取用户当前登录状态和打赏信息等。忽略\中一堆笨拙的\标签，我只会写\来修改请求头。签到请求/growth_api/v1/check_in是一个POST请求，浏览器会自动带上值为chrome-extension://xxxxx的origin请求头。请求头中验证来源，非掘金来源直接报403（应该是网关层验证了请求来源）。这时候插件需要修改请求头中的origin字段，但是origin字段不能随意修改。例如说axios强制指定请求头中origin的值是不成立的，插件的控制台会有相应的错误提示。如果操作不符合规范，则需要使用manifest.json中注册的网络请求的权限。响应请求会经过chrome中的statementweek如下图以后如果需要修改请求头字段，可以在onBeforeSendHeaders发送请求头之前通过事件监听修改origin字段。同时，事件监听要贯穿整个插件生命周期，所以代码要写在background.js中//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接受三个参数：监听回调方法，修改请求头的操作要放在这个方法filter中，用来控制监听的url范围，这里选择监听金块相关的请求元信息（opt_extraInfoSpec），简单来说，这个参数填写的值代表了监听器回调方法的执行方式和回调时传入的数据。这个监听器的元数据包含['blocking','requestHeaders','extraHeaders']，这三个值分别代表：blocking就是同步调用回调方法，也就是下次请求的回调方法将在执行请求的回调方法后打开。requestHeaders表示回调方法的参数详情包括请求头数据extraHeaders这个字段比较神奇，因为origin请求头不是随便改的东西，chrome也不推荐。如果真的要修改，必须填写这个字段，这样origin的修改才会在manifest配置中生效。从文件中可以看出，除了webRequest，插件请求的权限还包括webRequestBlocking。增加这个权限是因为在监听方式中使用了阻塞同步方式。实现一个插件的思路基本就介绍完了。总的来说，插件的实现并不难。如果你有兴趣，可以尝试自己实现。当然，插件形式的签到功能并没有太大的提升。为了签到的效率，最好的办法肯定是定期去服务器签到，这样即使不去掘金官网，也能收获大量的矿石来抽奖，不过这势必会暴露用户的登录凭证，可能存在一定的安全隐患，也失去了掘金举办本次活动的意义。要是别人拿到了自己的cookie，把自己的文章删了，那真的是欲哭无泪。本次掘金签到活动依旧举行。可能完成的任务难度很低，规则也很简单，活动入口处签到奖励明显更多。签到一个月，矿石应该有几千，抽几十次应该就可以了。唯一不足的是画了好几天。我什至没有得到一个开关，哈哈哈哈