一、 模擬點擊操作應用場景
當我們需要對一個網頁上的某個按鈕進行多次點擊以求得某種“好處”的時候,例如天貓的搶紅包活動,我們可能需要點擊N次之后才有可能獲得一個紅包,但是這個N是一個未知數,有可能我們要不停地點擊半個小時甚至一個小時都還無法獲得,自己估計也會點鼠標點得醉了。因此,針對這種情況,我們希望自己寫一個小工具來讓計算機幫我們做這件事。

既然是讓計算機模擬我們的點擊操作,其思路自然是找到指定的按鈕或圖片,循環對其執行click事件。於是,我們開始對其做一個最簡單的實現來看看其基本思路。首先,我們准備一個網站,這里我是用ASP.NET開發了一個網頁,其中有一張圖片作為搶紅包的按鈕圖片,然后寫了一個一般處理程序。
(1)前端網頁的HTML代碼:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>測試頁面</title> <script src="Resource/Js/jquery-1.5.1.min.js"></script> <script type="text/javascript"> $(function () { $("#btnGetMoney").bind("click", function () { $.ajax({ type: "GET", url: "MyServiceHandler.ashx?action=GetRedEnvelope", dataType: "json", success: function (data) { if (data.success) { alert("恭喜!您已獲得紅包:" + data.message + " 元"); } else { alert("您的手氣不好,下次再來搶吧"); } }, error: function () { alert('服務器未響應!'); } }); }); }); </script> </head> <body> <div style="text-align:center;"> <hr /> <img id="btnGetMoney" src="Resource/Image/red2014.png" alt="搶紅包" style="cursor:pointer;" /> <hr /> </div> </body> </html>
其顯示效果如下圖所示:

(2)后端一般處理程序代碼:
public void ProcessRequest(HttpContext context) { context.Response.Buffer = true; context.Response.ExpiresAbsolute = DateTime.Now.AddDays(-1); context.Response.AddHeader("pragma", "no-cache"); context.Response.AddHeader("cache-control", ""); context.Response.CacheControl = "no-cache"; context.Response.ContentType = "text/plain"; string returnJson = null; if (!string.IsNullOrEmpty(context.Request["action"])) { switch (context.Request["action"].ToString()) { case "GetRedEnvelope": context.Response.ContentType = "text/XML"; returnJson = GetRedEnvelope(context); break; } } context.Response.Write(returnJson); context.Response.End(); } private static Random ran = new Random(); private string GetRedEnvelope(HttpContext context) { JsonObject json = new JsonObject(); int number = ran.Next(1, 100); if (number > 95) { // 5%的幾率獲得紅包 json.success = true; } else { json.success = false; } json.message = number.ToString(); JavaScriptSerializer serializer = new JavaScriptSerializer(); return serializer.Serialize(json); }
當用戶點擊前端網頁中的圖片時,會發出一個AJAX請求到服務端,服務端會生成一個1到100之間的隨機數來模擬概率,只有在隨機生成的數字達到95以上(即5%的概率)才給用戶返回獲得紅包的效果。
①沒有獲得紅包的點擊后的效果:

②獲得紅包的點擊后的效果:

二、借助WebBrowser控件實現自動點擊
2.1 強大的控件—WebBrowser
新建一個WindowsForm項目,拖入一個GroupPanel、TextBox、Button以及WebBrowser控件構成下面的界面效果:

2.2 借助HtmlElement.InvokeMember方法模擬點擊
PS:這里假設我們已經通過查看HTML代碼知道了要模擬點擊的按鈕的id,不要告訴我說你不會查看網頁的源代碼哦。
void btnGetMoney_Click(object sender, EventArgs e) { AutoClick(10); } void AutoClick(int count = 1) { HtmlDocument dom = webBrowser.Document; if(dom == null) { return; } var btn = dom.GetElementById("btnGetMoney"); for (int i = 0; i < count; i++) { btn.InvokeMember("click"); } }
在C#中封裝了針對DOM樹的類:HtmlDocument,每一個Html標簽都被封裝為HtmlElement。這里我們首先通過DOM操作(GetElementById)找到要點擊的button按鈕,然后一個循環操作,通過封裝的InvokeMember方法執行click事件。默認情況下,這個方法只會執行一次,當然這里我們模擬了10次。
2.3 簡單模擬自動點擊的效果演示

三、借助Google瀏覽器擴展插件實現自動點擊
3.1 關於Google瀏覽器擴展插件
Chrome是什么在此就不做贅述了,想必看到這篇文章的人對其都非常熟悉。Chrome一個突出的特點就是允許用戶開發第三方插件以擴展瀏覽器功能。雖然IE、火狐也都支持第三方插件對瀏覽器功能進行拓展,但對其開發遠沒有Chrome瀏覽器插件方便,加之Chrome瀏覽器市場占有率持續增長,大家對Chrome瀏覽器插件的開發更加感興趣。下圖是迅雷針對Chrome瀏覽器開發的擴展插件。

3.2 開發自動點擊插件AutoClickDemo
(1)插件的總目錄:manifest.json
每個Chrome插件都包含一個manifest.json的文件,這是Chrome插件的總目錄,里面定義了每個資源都是做什么的。manifest.json文件里是一個json類型的數據。
按chrome開發規范,我們首先建一個文件夾,如D:\AutoClickDemo\,在該文件夾下新建一個名為manifest.json的文本文件,並按實際情況放一個圖片文件,作為插件的圖標。然后新建一個名為myscript.js的js腳本文件,作為我們需要自定義模擬點擊的腳本文件。最后,如果需要用到jQuery,還需要把jQuery放到文件夾目錄中:

該manifest.json文件的內容和解釋如下:

具體代碼為:
{ "name": "刷紅包(演示)", "version": "1.0", "manifest_version":2, "description": "This is a auto click plug-in, you can use it in the web site", "icons":{"16":"16.png","48":"48.png","128":"128.png"}, "permissions": ["http://*/*"], "browser_action": { "default_icon": "16.png" }, "content_scripts":[ { "matches":["http://localhost:4351/*"], "js":["jquery-1.7.1.min.js","myscript.js"] } ] }
(2)自定義的腳本:myscript.js
剛剛manifest.json只是幫我們生成了一個目錄給Chrome瀏覽器,具體的操作還得自定義一個js腳本來生成。代碼很簡單,就是每隔1秒鍾點擊一次按鈕。寫好自定義腳本后,在Chrome瀏覽器中添加這個擴展插件,以后在打開指定網頁時都會加載我們的自定義腳本來完成我們想要的操作。
function autoClick(){ $("#btnGetMoney").click(); } setInterval(autoClick,1000); $(function(){ });
(3)為Chrome添加擴展插件
在Chrome菜單中,選擇 工具-擴展程序 ,進入以下界面。然后勾選住 開發者模式,然后加載正在開發的擴展程序。

(4)打開指定網頁體驗模擬點擊效果

四、小結
本次的小插件開發以模擬點擊一個“搶紅包”按鈕為場景,以兩種方式實現了一個簡單得不能再簡單的刷紅包效果,但是其基本思路都我們都已經了解了。以后再面對這種應用,可以自己寫一些功能豐富的插件或者程序來實現了。
