我正在参加「创意开发 投稿大赛」详情请看：掘金创意开发大赛来了！
感觉创意大赛的奖品很丰富，想要多写几篇，发现是真的难~
这次的话，尝试着编写了一个非常简易的一键三连的油猴的脚本文件，内容对于前端开发者来说，应该算是入门级的吧~，对我来说，就没有那么那么容易~，大佬们，轻喷...
前言
我对于油猴插件一直是处于一种非常好奇的状态，感觉别人写出来的插件都特别特别厉害，最典型的就是读书的时候，写个插件，自动刷学习视频等等，网上还有去除广告、统计信息、导出文档、下载视频等等插件，很多很多。
从来没有接触过，就觉得它是一件学习成本非常高的事情，像是洪水猛兽一般，导致一直是搁置的状态，然后这次有活动，我就想到了这个点，就想要试一试。
接触下来后，其实写这样的脚本文件，远没有我想象的那么难，如果是对于前端来说，更没有啥学习成本，因为全部都是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) }
参考链接：
这个时候，我又想到了 div 身上的 contenteditable="true" 属性，对这个属性有点陌生，感觉它应该对我有点帮助，然后就搜到了下面的内容：
（图片说明：链接）
看到可编辑之后这几个字后，我又往这个方向继续去探索~
又继续搜到以下的内容：
contenteditable联合v-html实现数据双向绑定的vue组件
找着找着，我就去找如何让div触发焦点事件了，就又有了下面的尝试
为掘金编写了一款简易版一键三连的油猴脚本（二）+https://developer.aliyun.com/article/1394365?spm=a2c6h.13148508.setting.14.2acd4f0eNPy9VT
