最近发现一款比较好用的插件,可以用来在页面中注入自定义的js,这样可以做一些自动化创建的东西,比如我要创建很多订单用来做测试,而手动点的话又太麻烦,所以可以用注入的js解决这个问题,页面加载完后使用js自动填充表单,然后提交。
可以在谷歌网上应用商店下载这个插件:【右上角三个点】–>【更多工具】–>【扩展程序(E)】–>【获取更多扩展程序】搜索tampermonkey就好了,如下:
安装后,右上就会有它的图标,如果有正在运行的脚本,他会有红色的下标:
点击【添加新脚本】就会跳出一个页面,并自动生成一些代码:
上图是我写的一个例子,贴一下代码:
// ==UserScript==
// @name 我的测试demo
// @namespace http://tampermonkey.net/
// @version 0.1
// @description just test!
// @author You
// @match http://so.csdn.net/so/
// @grant none
// @requir https://code.jquery.com/jquery-latest.js
// ==/UserScript==
(function() {
'use strict';
// Your code here...
$("#queryform .search-text").eq(0).val("tampermonkey");
$("#queryform .search-btn").eq(0).click();
})();
上述代码的功能是:在csdn搜索地址中运行两句代码,找到输入框,输入”tampermonkey”然后触发搜索按钮的点击事件。这样在打开搜索页面的时候,就自动执行上面的操作,然后就直接展示搜索结果啦。
@match 这一行是指定脚本生效的网址,如果有多个,再拷贝一行改掉网址就好了。可以使用通配符,比如http://so.csdn.net/* ,表示so.csdn.net站点下全生效。
键 | 示例 | 备注 |
---|---|---|
@name | @name 脚本名称 | 脚本的名称。该项将显示在页面的标题以及链接内容,必填项 |
@description | @description 脚本功能描述 | 脚本功能的描述,显示在脚本标题下面,必填项 |
@namespace | @namespace 及 @name 这两个属性将帮助用户脚本管理器判断是否已安 装该脚本。 | |
@version | @version 0.0.1 | 脚本的版本标记将使用 Mozilla 版本格式 并显示于脚本的简介页面,必填 项。 |
@include | ||
@exclude | ||
@match | @match ://so.csdn.net/ | 描述脚本将执行的页面。该列表会被分析并展示到脚本的简介页面,以及 用于脚本分类。 |
@require | @require http://cdn.bootcss.com/jquery.min.js | 引用外部脚本到您的脚本 |
@updateURL @installURL @downloadURL | 告知用户脚本管理器应该在哪个地址获取脚本更新。 | |
@license | 脚本所使用的许可协议名称或地址,该协议需包含用户是否允许二次分发 或修改 脚本的权利。不提供许可协议则表示用户仅允许个人使用且不得 二次分发;该协 议将在脚本的简介页面显示。 | |
@supportURL | 用户可获得该脚本技术支持的链接地址 (如:错误反馈系统、论坛、电子 邮件),该链接将显示在脚本的反馈页面。 | |
@contributionURL | 用于捐赠脚本作者的链接,该链接将显示在脚本的反馈页面。 | |
@contributionAmount | 建议捐赠金额,请配合 @contributionURL 使用。 | |
@compatible | 标记此脚本与某个浏览器兼容,兼容性信息将显示在脚本的简介页面上。 | |
@incompatible | 标记此脚本与某个浏览器不兼容,兼容性信息将显示在脚本的简介页面 上。 |
贴一个Userscript Header官方文档地址:https://tampermonkey.net/documentation.php?ext=dhdg
以上只是写了个非常简单的例子,很明显,它能做的事非常多,如果掌握熟练,肯定是神器啊!
贴个资源链接:
最后补充一下,使用fiddler也可以注入js代码进行线上调试。具体操作自行搜索吧,网上有很多教程。