一、 模拟点击操作应用场景

　　当我们需要对一个网页上的某个按钮进行多次点击以求得某种“好处”的时候，例如天猫的抢红包活动，我们可能需要点击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>

View Code

　　其显示效果如下图所示：

自己动手写工具：自动点击小插件-风君雪科技博客

　　（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);
        }

View Code

　　当用户点击前端网页中的图片时，会发出一个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）打开指定网页体验模拟点击效果

自己动手写工具：自动点击小插件-风君雪科技博客

四、小结

　　本次的小插件开发以模拟点击一个“抢红包”按钮为场景，以两种方式实现了一个简单得不能再简单的刷红包效果，但是其基本思路都我们都已经了解了。以后再面对这种应用，可以自己写一些功能丰富的插件或者程序来实现了。

作者：周旭龙

出处：http://edisonchou.cnblogs.com/

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。