为掘金编写了一款简易版一键三连的油猴脚本（一）-阿里云开发者社区

我正在参加「创意开发投稿大赛」详情请看：掘金创意开发大赛来了！

感觉创意大赛的奖品很丰富，想要多写几篇，发现是真的难~

这次的话，尝试着编写了一个非常简易的一键三连的油猴的脚本文件，内容对于前端开发者来说，应该算是入门级的吧~，对我来说，就没有那么那么容易~，大佬们，轻喷...

前言

我对于油猴插件一直是处于一种非常好奇的状态，感觉别人写出来的插件都特别特别厉害，最典型的就是读书的时候，写个插件，自动刷学习视频等等，网上还有去除广告、统计信息、导出文档、下载视频等等插件，很多很多。

从来没有接触过，就觉得它是一件学习成本非常高的事情，像是洪水猛兽一般，导致一直是搁置的状态，然后这次有活动，我就想到了这个点，就想要试一试。

接触下来后，其实写这样的脚本文件，远没有我想象的那么难，如果是对于前端来说，更没有啥学习成本，因为全部都是js代码~

一、实现效果

点击创建出来的一键三连的按钮，就可以实现点赞、关注、评论，下次看文不迷路~

实现逻辑倒是非常简单，但因为我对于前端没有那么熟悉，所以其中的一些坑，我都给躺了一遍~

二、完整代码

就是写着玩，完整代码如下：

// ==UserScript==
 // @name          掘金牌一键三连
 // @namespace     https://juejin.cn/user/2859142558267559
 // @version       0.0.1
 // @description  打开博文，点击一键点赞评论按钮后自动为该博文点赞收藏关注，前提是已经登录 掘金
 // @author       宁在春
 // @include      *://juejin.cn/post/*
 // @include      *.juejin.cn/post/*
 // ==/UserScript==
 (function() {
     'use strict';
     var tag_list = document.createElement("div");
     tag_list.classList.add('tag-list'); // 给创建出来的div 添加一个 class
     var button = document.createElement("button"); //创建一个按钮
     button.textContent = "一键三连"; //按钮内容
     button.style.width = "90px"; //按钮宽度
     button.style.height = "32px"; //按钮高度
     button.style.align = "center"; //文本居中
     button.style.color = "white"; //按钮文字颜色
     button.style.background = "#e33e33"; //按钮底色
     button.style.border = "1px solid #e33e33"; //边框属性
     button.style.borderRadius = "4px"; //按钮四个角弧度
     button.style.fontSize="14px";
     tag_list.appendChild(button);
     /**
     * ele: html 元素
     * className (string): 要判断的类名
     * 返回值: 元素含有该类名返回 true,不包含返回 false
     */
     function hasClass (ele, className) {
         var reg = new RegExp('(^|\s)' + className + '(\s|$)')
         return reg.test(ele.className)
     }
     // 点赞
     function clickLike(){
         var likeElement=document.getElementsByClassName("panel-btn")[0];
         if(!hasClass(likeElement,"active")){
             likeElement.click(); //点赞
         }
     }
     // 关注
     function clickFollow(){
         var followElement=document.getElementsByClassName("follow-button")[0];
         if(!hasClass(followElement,"followed")){
             followElement.click(); //点击关注
         }
     }
     //获取焦点
     function getFocus() {
         document.getElementsByClassName('rich-input')[0].focus();
     };
     //打开emoje 表情选择框
     function getEmojeClick() {
         document.getElementsByClassName("emoji-box")[0].click();
     }
     var items = [112,102,92,80,71,66,61,55,31,28];
     var randomNumber=items[Math.floor(Math.random() * items.length)];
     //选择emoje表情
     function getChoseEmoje() {
         setTimeout(function(){
             var emojipicker = document.getElementsByClassName("emojipicker")[0];
             var emojeImage = emojipicker.getElementsByClassName("list")[1];
             var item = emojeImage.getElementsByClassName("item")[randomNumber];
             var img = item.getElementsByClassName("image")[0];
             img.click();
         },100);// setTimeout 0.1秒后执行
     }
     //发表评论
     function submitComment(){
         setTimeout(function(){
             document.getElementsByClassName("submit-btn")[0].click(); //发表评论
         },100);// setTimeout 0.1秒后执行
     }
     function clickBotton(){
         setTimeout(function(){
             //调用点赞方法
             clickLike()
             //调用关注方法
             clickFollow()
             //让评论框获取焦点
             getFocus()
             //打开emoje 表情选择框
             getEmojeClick()
             //选择emoje表情
             getChoseEmoje()
             //发表评论
             submitComment();
         },100);// setTimeout 0.1秒后执行
     }
     // 延时将元素添加到页面上，有时候页面加载缓慢，会导致，脚本执行完，但页面还加载完~，导致出现错误
     setTimeout(function(){
         var like_comment = document.getElementsByClassName('tag-list-box'); //getElementsByClassName 返回的是数组，所以要用[] 下标
         like_comment[0].appendChild(tag_list); //把按钮加入到 x 的子节点中
     },500);
     button.addEventListener("click", clickBotton) //监听按钮点击事件
 })(); //(function(){})() 表示该函数立即执行

// ==UserScript==
 // @name          掘金牌一键三连
 // @namespace     https://juejin.cn/user/2859142558267559
 // @version       0.0.1
 // @description  打开博文，点击一键点赞评论按钮后自动为该博文点赞收藏关注，前提是已经登录 掘金
 // @author       宁在春
 // @include      *://juejin.cn/post/*
 // @include      *.juejin.cn/post/*

关于这些 @ 的标识，大家可以直接去搜一下油猴脚本的开发文档即可，当然这几个也很简单，就不多言了，如果感兴趣了，可以去找一找~

将这个脚本添加到油猴的脚本管理页面即可：

（图片说明：点击添加新脚本）

（图片说明：把上面的代码，直接复制粘贴过来，Ctrl+S 保存就可以生效了）

三、踩坑

踩坑全部集中在添加评论那一步。

我原本的想法是

构建好一个评论内容的数组
每次一键三连时，从中随机抽取一条评论

然后踩坑之旅就开始啦~

我们先来看看掘金的评论框区域的代码：

<div data-v-013fc4fa="" data-v-7c7c7498="" class="input-box">
     <div  contenteditable="true"  spellcheck="false"        
         placeholder="输入评论（Enter换行，Ctrl + Enter发送）"                 
         disabled="disabled" class="rich-input   empty">
      </div>
 </div>

这里的话，它是用用了一个 contenteditable来做为输入框的。

我总共是采取了三种方式去尝试实现~

3.1、直接改变 div 的内容

我的想法是，先触发div的点击方法，然后就会出现光标在输入框内，这样就可以改变其中内容啦。

第一次就这么开始啦~

var comment=["针不戳呀，写的针不戳！","学习了！b（￣▽￣）d","本文不错(￣ˇ￣)，值得学习！(=￣ω￣=)","感谢博主的分享！(^ ^)／▽▽＼(^ ^)","感谢博主，你的文章让我得到一些收获！(￣ˇ￣)"];
             var STARTNUMBER = -1;
             var ENDNUMBER = 5;
             var temp_count = Math.floor(Math.random()*(STARTNUMBER-ENDNUMBER+1))+ENDNUMBER 
             document.getElementsByClassName("input-box")[0].click(); //打开评论区
             document.getElementsByClassName('rich-input')[0].classList.remove("empty");
             document.getElementsByClassName("rich-input")[0].innerHTML = comment[temp_count]; //随机把一条预先写好的评论赋值到评论框里面
             document.getElementsByClassName("submit-btn")[0].click(); //发表评论

结果：

内容上去是上去了，但实际点击方法根本没有被触发，这只能说是改变了div的展示内容。

完全没有牵扯到值的变化，在这一步的时候，我又接着这个思路，将底下的按钮的禁用给去掉，手动提交了一遍，果然报评论为空的错误~

咋说勒，对这个想法不死心，我以为是我没有成功触发点击方法的问题，又接着去搜索怎么触发div的点击方法，搜了蛮多的，但是都不太对。

其中还有尝试了下面的这样一个方法：

function emulateMouseClick (element) {
     // 创建事件
     var event = document.createEvent('MouseEvents')
     // 定义事件 参数： type, bubbles：事件冒泡, cancelable ：是否可撤销
     event.initEvent('click', true, true)
     // 触发对象可以是任何元素或其他事件目标
     element.dispatchEvent(event)
 }