每次双十一秒杀，都秒杀不到，点击进去就发现已经被抢光了，点击的速度太慢了，所以就想，有没有能够让浏览器自动快速点击的程序，当然，淘宝有防止这种作弊的方式，我只是心血来潮，想试试，如何使网站使用自己编写的脚本，达到自己想要的结果。
控制台编写
写网页的过程中绝对少不了调试，控制台的功能很强大，一般来说，使用chrome的会比较多，chrome开发者文档，讲解的听详细的，可以看看学习。 现在来说如何通过控制台来编写程序从而做到控制网页的： 按F12键调出控制台，选择Source，如图： 在Snippets上点击右键，会出现一个new选项，点击新建一个Script snippet，然后在右边的编辑区域中写上控制的script语句，保存后，点击右边控制区域的开始建，或者在Script snippet文件上方点击右键，选择Run. 举个栗子：我们想控制页面上某个按钮的点击并触发改按钮的点击事件。 页面代码：
<a href="http:ww.baidu.com">baidu</a>
<h1>自动嵌入脚本</h1>
<input type="button" value="自动点击" id="but1" onclick="show()"/>
<div id="div1" style="width:100px;height:50px;border:1px solid black;"></div>
<script type="text/javascript">
function show(){
var colors=['#FFE4E1',' #90EE90','#00BFFF','#FFFF00','#008B8B'];
var co= Math.floor(Math.random() * colors.length + 1)-1;
$('#div1').css('background-color',colors[co]);
}
</script>
我们需要控制id为but1的按钮自动点击来让div框的背景颜色变化，我们可以在Script snippet文件里写上如下代码：
var btn = document.getElementById("but1");
/* //自定义的绑定的onclick方法
btn.onclick=function(){
var today = new Date();
console.log(btn.value + "点击时间是: " + today.toString());
};
*/
function myInterval() {
btn.click();
}
setInterval("myInterval()", 1000); //1000为1秒钟执行一次
这里需要注意，可能只是我个人的能力原因，Script snippet文件里面只运行js代码，对于jquery代码，如果控制的网页有引用jquery.js,那么Script snippet文件可以运行jquery代码，如果控制的网页没有引用jquery.js,那么Script snippet文件运行不了jquery代码，我试过通过创建属性的方法将jquery引用，但是，还是不行。
new_element=document.createElement("script");
new_element.setAttribute("type","text/javascript");
new_element.setAttribute("src"," http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js");
document.body.appendChild(new_element);
还有一点需要注意，如果绑定自动执行的按钮有onclick事件，那么，最好不要再控制台里再绑定自定义的onclick事件，这样，原来的按钮自身的事件不会被执行。一般来说，onclick是可以绑定多个事件的，并且都可以执行，但是这里为啥不能被执行，有点想不通。
chrome devtools插件开发
相信作为前端人员，对浏览器的插件并不陌生，上面的控制台的页面控制有局限性，所以我又尝试了浏览器的插件开发，更专业，更强大。 下面针对的是chrome浏览器的开发，因为我常用的浏览器就是chrome,而且Firefox插件只能运行在Firefox上，而Chrome除了Chrome浏览器之外，还可以运行在所有webkit内核的国产浏览器，比如360极速浏览器、360安全浏览器、搜狗浏览器、QQ浏览器等等。除此之外，Firefox浏览器也对Chrome插件的运行提供了一定的支持。 接下来我们来了解插件的结构目录
插件核心
chrome浏览器插件的核心是mainfest.json文件，我们需要在这里进行配置。
{
// 清单文件的版本，这个必须写，而且必须是2
"manifest_version": 2,
// 插件的名称
"name": "test",
// 插件的版本
"version": "1.0",
// 插件描述
"description": "This is my first extension,just for testing!",
// 图标
"icons":
{
"16": "images/16.png",
"48": "images/48.png",
"128": "images/128.png"
},
// 会一直常驻的后台JS或后台页面
"background":
{
// 2种指定方式，如果指定JS，那么会自动生成一个背景页
//"page": "background.html"
"scripts": ["js/background.js"],
"persistent": true
},
// 浏览器右上角图标设置，browser_action、page_action、app必须三选一
"browser_action":
{
"default_icon":{
"16": "images/16.png",
"48": "images/48.png",
"128": "images/128.png"
},
"default_title":"Hello",
"default_popup":"popup.html"
},
// 当某些特定页面打开才显示的图标
/*"page_action":
{
"default_icon":{
"16": "images/16.png",
"48": "images/48.png",
"128": "images/128.png"
},
"default_title":"Hello",
"default_popup":"popup.html"
},*/
// 需要直接注入页面的JS
"content_scripts":
[
{
//"matches": ["http://*/*", "https://*/*"],
// "<all_urls>" 表示匹配所有地址
"matches": ["<all_urls>"],
// 多个JS按顺序注入
"js":["juery.js","hook.js"],
// 这里的css是全局css样式，相当于浏览器默认的样式
"css": ["css/custom.css"],
// 代码注入的时间，可选值： "document_start", "document_end", or "document_idle"，最后一个表示页面空闲时，默认document_idle
"run_at": "document_start"
},
// 这里仅仅是为了演示content-script可以配置多个规则
{
"matches": ["*://*/*.png", "*://*/*.jpg", "*://*/*.gif", "*://*/*.bmp"],
"js": ["inject.js"]
}
],
// 权限申请
"permissions":
[
"contextMenus", // 右键菜单
"tabs", // 标签
"notifications", // 通知
"webRequest", // web请求
"webRequestBlocking",
"storage", // 插件本地存储
"http://*/*", // 可以通过executeScript或者insertCSS访问的网站
"https://*/*" // 可以通过executeScript或者insertCSS访问的网站
],
//安全机制
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
// 普通页面能够直接访问的插件资源列表，如果不设置是无法直接访问的
"web_accessible_resources": ["mypanel.html", "devtools.html"],
// 插件主页
"homepage_url": "https://luciferlia.github.io./",
// 覆盖浏览器默认页面
"chrome_url_overrides":
{
// 覆盖浏览器默认的新标签页
"newtab": "newtab.html"
},
// Chrome40以前的插件配置页写法
"options_page": "options.html",
// Chrome40以后的插件配置页写法，如果2个都写，新版Chrome只认后面这一个
"options_ui":
{
"page": "options.html",
// 添加一些默认的样式，推荐使用
"chrome_style": true
},
// 向地址栏注册一个关键字以提供搜索建议，只能设置一个关键字
"omnibox": { "keyword" : "go" },
// devtools页面入口，注意只能指向一个HTML文件，不能是JS文件
"devtools_page": "devtools.html"
}
content-scripts
在配置项中，content-scripts是非常重要的一项，content-scripts，其实就是Chrome插件中向页面注入脚本的一种形式，和原始页面共享DOM，但是不共享JS，如要访问页面JS（例如某个JS变量），只能通过injected js来实现。
关于每个配置项的信息解说，可以参考，讲解的很详细。
接下来就是把插件安装在浏览器上了，可以点击浏览器的设置进入扩展程序，将你的插件文件夹直接拖入，就可以安装成功了，安装后，每个插件下面会有一个ID，你可以在电脑中根据ID找到你的安装目录，比如我的安装的一个插件的路径就是C:\Users\liaoqian\AppData\Local\Google\Chrome\User Data\Default\Extensions\fhbjgbiflinjbdggehcddcbncdddomop