利用tampermonkey向页面注入自定义Javascript

  最近发现一款比较好用的插件,可以用来在页面中注入自定义的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代码进行线上调试。具体操作自行搜索吧,网上有很多教程。
  

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页