如何開發一個油猴腳本- csdn 手動一鍵點贊評論

📢博客主頁：https://blog.csdn.net/mukes
📢歡迎點贊👍收藏?留言📝如有錯誤敬請指正！

前言

之所以開發這個插件，是因為昨天在知乎看了一篇文章:為什么CSDN上很少人會去給文章點贊？，我參考一下其中一個答主的回答：

只有我自己寫博客了，我才發發現這個問題，閱讀幾百上千，評論0，點贊 0 ，可能是點贊的按鈕不明顯，我說說我自己看csdn博客的情況：程式遇到問題，網上查一下，按csdn的博文操作，沒效果，關了繼續查，有效果，繼續作業，就這樣了，很少去點贊，就算查了非常久的問題，結果發現在某個博主那里得到解決，也會留個評論吐槽順便支持下博主，還是不會點贊，

這情況和我本人差不多，每次遇到問題，有時要看好幾篇博文才能解決問題，而這幾篇博文中恰好只有一篇才是最有價值的，也就是能解決我的問題的那篇，但是解決問題總不能白嫖吧？
至少點個贊或者留個評論如“博主666”之類的，
但是呢查文章多了發現寫評論是真的浪費時間，于是我想，不如我把我一些評論事先寫好，遇到對我有幫助的博文再一鍵點贊評論，說干就干，于是花了一點點時間就寫好了這個腳本，

開發腳本之前的準備作業

1.什么是油猴(Tampermonkey )

首先，油猴和油猴腳本有什么區別？
Tampermonkey 就是一款免費的瀏覽器擴展和最為流行的用戶腳本管理器，它適用于 Chrome, Microsoft Edge, Safari, Opera Next, 和 Firefox 等等，你安裝后你的瀏覽器不會發生任何變動，直到你開始安裝一種叫做油猴腳本(用戶腳本)的東西，

油猴腳本一般指用戶腳本(User Script)，ta 是一段 Javascript 代碼，它們能夠優化您的網頁瀏覽體驗，一般有包含但不限于以下幾種功能：

• 能為網站添加新的功能，比如本篇博文所介紹的csdn 手動一鍵點贊評論腳本，
• 能使網站的界面更加易用，比如一些改變網站樣式、排版的腳本等，
• 能隱藏網站上煩人的部分內容，比如一些去廣告的腳本，

博主日常用的比較多的油猴腳本網站：https://greasyfork.org/zh-CN/

2.安裝油猴(Tampermonkey )

油猴官方下載地址：http://www.tampermonkey.net/

點進去你會發現上面有各個瀏覽器的選項；而下面則是下載地址，油猴擴展有兩個版本，一個 stable 版本，一個 beta 版本，顧名思義，一個是穩定版，一個是測驗版，下載穩定版就好了，

油猴支持的瀏覽器有 Chrome, Microsoft Edge, Safari, Opera Next, Firefox,和 UC 瀏覽器等等，各大主流瀏覽器幾乎都支持了，

3.新建一個油猴腳本

安裝好油猴后，在瀏覽器工具列上點擊油猴，添加新腳本

接著跳轉到腳本撰寫界面

圖里的代碼頭是自帶的，叫做元資料，每個用戶腳本都含有一段元資料，用來向 Tampermonkey 描述這個腳本自身的資訊：腳本名，作者，描述，執行規則等等

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        http://*/*
// @grant        none
// ==/UserScript==

我粗略解釋一下

// ==UserScript==
// @name         這里是你的撰寫的油猴腳本的名字
// @namespace    這個是命名空間；用來區分名稱相同但是作者不同的用戶腳本，一般都是寫作者的個人網址，沒有也可以寫你的博客地址
// @version      0.1  這個是版本號
// @description  這個是功能描述，描述你的這個腳本是用來干嘛的
// @author       這個是作者的名字，比如我：mukes
// @match        這個是該腳本匹配的網址，支持通配符匹配
// @include		 這個也是該腳本匹配的網址，支持通配符匹配
// @exclude		 這個和 iclude 配合使用，排除匹配到的網址，優先于 include
// @grant        none 
// ==/UserScript==

match 和 include 是有一點區別的，區別在這？match更嚴格一點，它對 * 角色的含義設定了更嚴格的規則，詳情點擊這里

關于元資料更詳細介紹：點擊這里 或者 點擊官方博客介紹

如果你不會 不想自己寫一個腳本的話，那你可以去 油猴腳本網站 搜索你需要的腳本，

腳本需求分析迭代程序

我不是做好需求分析再寫代碼的，因為當時腦子里面只有一個朦朧的概念而已，我就打算邊寫邊實踐邊改代碼，

v0.0.1版本
一開始的插件是一點開博文就自動點贊和評論
然后我發現我打開自己的博文也會點贊評論…我去，不行，得改(￣.￣)

v0.0.2版本
在腳本檔案頭加了排除自動點贊評論自己博文的一行代碼

// @exclude      https://blog.csdn.net/mukes/article/details/*

刷著刷著博文，我發現一重繪頁面又會自動評論Σ( ° △ °|||)︴，那我重繪幾次豈不是就會評論幾次？不行，得改(￣▽￣)"

v0.0.3 版本
本來想寫一個函式判斷自己是否評論點贊了，結果突然冒出來一個想法：有一些文章對我零作用啊，我不想點贊和評論 >_<，為什么不改成手動一鍵點贊評論？so~此版本 卒╮(╯▽╰)╭

v0.0.4 版本
在瀏覽器頁面添加一個按鈕，直接把自動點贊評論改為手動點擊
雖然我前端渣得要死，但是我也知道這個按鈕是真的丑，又得改╮(￣▽￣)╭

v0.0.5 版本
我又雙叒叕發現了一個問題，這個按鈕固定在標簽頁的話，如果我閱讀到文章末尾，那我豈不是又要按 “home” 鍵回到文章開頭再點贊？？？能一步就一步，干嘛要變成兩步呢？(>_<)

于是我找啊找，呀嘿~發現了 ≧◇≦

如何所示，csdn 博文頁面一共有兩個地方在閱讀滑動滑鼠的時候仍然保持不動的
那么選擇哪里放按鈕就顯而易見了

按鈕改了位置后，發現樣式和csdn 自帶的不一致（似憾訓進了一個奇怪的東西 ）：

留著 v0.0.6 版本再改吧，我已經看到勝利在向我招手了 b（￣▽￣）d

v0.0.6 版本
要改和網頁端一樣的樣式的話，那就需要用到一個神奇的按鍵 F12 了，用谷歌瀏覽器打開博文：https://blog.csdn.net/mukes/article/details/103480696，點擊 F12 ，跳出 DevTools 工具視窗，如下圖：

點擊圖中的箭頭
然后再把滑鼠移動到網頁上一鍵三連這個元素上

由上圖就可以獲得很多資訊了，比如 一鍵三連這個按鈕的寬和高是74x28
背景顏色是#E33E33，字體顏色為#FFFFFF，

想要看更具體的資訊只需要點擊一下該元素，然后在 DevTools 視窗中會自動跳到對應該元素的代碼，而視窗的右邊則是該元素詳細的樣式資訊，

在樣式我們又可以知道 一鍵三連 這個元素的圓角的邊框屬性為：border-radius: 4px;
因此我們只需要改我們這個插件按鈕的：
寬和高，字體顏色，底色，以及圓角邊框的屬性就可以了，其他的細節就不用扣了，

button.style.width = "90px"; //按鈕寬度
button.style.height = "20px"; //按鈕高度
button.style.align = "center"; //文本居中
button.style.color = "white"; //按鈕文字顏色
button.style.background = "#b46300"; //按鈕底色
button.style.borderRadius = "4px"; //按鈕四個角弧度

最終代碼

// ==UserScript==
// @name          csdn 手動一鍵點贊評論
// @namespace     https://blog.csdn.net/mukes
// @version       0.0.6
// @description  打開博文，點擊一鍵點贊評論按鈕后自動為該博文點贊以及評論，前提是已經登錄 csdn 博客
// @author       mukes
// @include      *://blog.csdn.net/*/article/details/*
// @include      *.blog.csdn.net/article/details/*
// ==/UserScript==
(function() {
    'use strict';
    var button = document.createElement("button"); //創建一個按鈕
    button.textContent = "一鍵點贊評論"; //按鈕內容
    button.style.width = "90px"; //按鈕寬度
    button.style.height = "28px"; //按鈕高度
    button.style.align = "center"; //文本居中
    button.style.color = "white"; //按鈕文字顏色
    button.style.background = "#e33e33"; //按鈕底色
    button.style.border = "1px solid #e33e33"; //邊框屬性
    button.style.borderRadius = "4px"; //按鈕四個角弧度    
    button.addEventListener("click", clickBotton) //監聽按鈕點擊事件
    
    function clickBotton(){
        setTimeout(function(){

        var comment=["針不戳呀，寫的針不戳！","學習了！b（￣▽￣）d","本文不錯(￣ˇ￣)，值得學習！(=￣ω￣=)","感謝博主的分享！(^ ^)／▽▽＼(^ ^)","感謝博主，你的文章讓我得到一些識訓！(￣ˇ￣)"];
        var STARTNUMBER = -1;
        var ENDNUMBER = 5;
        var temp_count = Math.floor(Math.random()*(STARTNUMBER-ENDNUMBER+1))+ENDNUMBER ;//取STARTNUMBER-ENDNUMBER之間的亂數 [STARTNUMBER,ENDNUMBER]

        document.getElementsByClassName("tool-item-comment")[0].click(); //打開評論區
        document.getElementById("comment_content").value = comment[temp_count]; //隨機把一條預先寫好的評論賦值到評論框里面
        document.getElementsByClassName("btn-comment")[0].click(); //發表評論
        document.getElementById("is-like").click() //點贊，把該代碼注釋后只會一鍵評論

},100);// setTimeout 0.1秒后執行
    }


    var like_comment = document.getElementsByClassName('toolbox-list')[0]; //getElementsByClassName 回傳的是陣列，所以要用[] 下標
    like_comment.appendChild(button); //把按鈕加入到 x 的子節點中
    
})(); //(function(){})() 表示該函式立即執行

最終效果：

動態展示效果：

ps：如果你覺得博主寫得針不戳的話，歡迎點贊收藏 ~(゜ - ゜) つロ 干杯~
如有疑問，歡迎留言討論~
pps：如何想測驗腳本可行性的話，歡迎在此界面測驗，同時也把你的個性留言秀出來吧?乛?乛?

最后：
感謝以下 3 位博主在我撰寫這個腳本時做出的巨大貢獻：
https://blog.csdn.net/u010598445/article/details/108880602
https://blog.csdn.net/jayandchuxu/article/details/79113755
https://dyqdzh.blog.csdn.net/article/details/107399298

官方檔案
https://www.tampermonkey.net/documentation.php