Tampermonkey笔记-脚本的搭建和基本使用

首先要知道的，网页脚本，主要是解放双手，完成前端相关的工作。

这里直接到Tampermonkey官网在线安装就可以了。然后新建一个脚本：

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://www.baidu.com
// @icon         https://www.google.com/s2/favicons?domain=csdn.net
// @grant        none
// ==/UserScript==(function() {'use strict';// Your code here...
})();

要注意的地方：

@match是匹配的网址，这里先给他给成include简单点，如匹配所有

// @include  *

如果要匹配某bbs就：

// @include      *://bbs.xxx.com*

②如果要添加JQuery使用@require就可以了：

// @require      https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js

如下结构：

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @require      https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js
// @version      0.1
// @description  try to take over the world!
// @author       You
// @include      *://bbs.xxx.com*
// @icon         https://www.google.com/s2/favicons?domain=csdn.net
// @grant        none
// ==/UserScript==(function() {'use strict';// Your code here...})();

这样就可以搞自己的脚本了。

比如，当网页加载完成后，填某些表单，自动提交某些数据：

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @require      https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js
// @version      0.1
// @description  try to take over the world!
// @author       You
// @include      *://bbs.xxx.com*
// @icon         https://www.google.com/s2/favicons?domain=csdn.net
// @grant        none
// ==/UserScript==(function() {'use strict';// Your code here...window.onload=function(){// TODO}
})();

又如，搞页面上搞一个按钮，到时候人为点击下执行脚本：

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @require      https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js
// @version      0.1
// @description  try to take over the world!
// @author       You
// @include      *://bbs.xxx.com*
// @icon         https://www.google.com/s2/favicons?domain=csdn.net
// @grant        none
// ==/UserScript==(function() {'use strict';// Your code here...var btn = document.getElementById("zan_btn") || document.createElement("div");btn.style.padding = "20px 40px";btn.style.color = "#fff";btn.style.backgroundColor = "#f78989";btn.style.border = "1px solid #f78989";btn.style.position = "fixed";btn.style.right = "10px";btn.style.top = "10px";btn.style.zIndex = "99999";btn.style.borderRadius = "4px";btn.style.fontSize = "22px";btn.style.cursor = "pointer";btn.innerHTML = "开始脚本";btn.id = "zan_btn";btn.onclick = () =>{// TODO}
})();

Tampermonkey笔记-脚本的搭建和基本使用相关推荐

学习笔记1：搭建floodlight+mininet+sflow环境
学习笔记1:搭建floodlight+mininet+sflow环境浏览了大量的CSDN博客和师兄继承下来的学习笔记,自己想总结一下搭环境的过程,为以后给自己查看时候好整理全部都在VM虚拟机中ub ...
React Native学习笔记一之搭建开发环境
因为项目需要,今天开始正式学习React Native,先来搭建个开发环境忐忑的心情因为项目比较急,而且客户要求使用React Native开发,只能先学点基础然后在项目中使用的时候,边做边学了, ...
深度学习（二）theano学习笔记(1)环境搭建
theano学习笔记(1)环境搭建原文地址:http://blog.csdn.net/hjimce/article/details/46654229 作者:hjimce 搭建theano实属不易,因 ...
Django 笔记1 -- 环境搭建
Django 笔记1 – 环境搭建 Django 系列笔记是笔者学习.实践使用 Django 的相关笔记,大量参考了知了课堂的<Django零基础到项目实战>教程. 参考文档: Djang ...
Redis运维和开发学习笔记(3)redis搭建集群
Redis运维和开发学习笔记(3)redis搭建集群文章目录 Redis运维和开发学习笔记(3)redis搭建集群 Redis集群搭建 Redis集群搭建 cp /etc/redis.d/redis ...
websocket 获取连接id_Swoole学习笔记七：搭建WebSocket长连接之使用 USER_ID 作为身份凭证...
Swoole学习笔记七:搭建WebSocket长连接之使用 USER_ID 作为身份凭证 2年前阅读 3678 评论 0 喜欢 0 ### 0.前言前面基本的WebSocket操作,我们基本都 ...
C# 入门笔记(脚本)
C# 入门笔记(脚本) 本人初学,学艺不精,如有错误,欢迎指出笔记不全,为纯基础,不建议通过本人笔记进行系统学习第一节 Hello Word 输出Hello Word Console.WriteL ...
通过Shell脚本快速搭建高效Rsync服务
在我们的日常运维中,会经常遇到搭建rsync服务的需求,如:网站文件的同步(镜像或备份),patch的更新,各种异机备份等容灾备份等等.如果把rsync服务的搭建写成脚本,那么就可以在执行脚本之后, ...
Go学习笔记_环境搭建
Go学习笔记_环境搭建 Go背景知识 go的特点(官网): Build fast, reliable, and efficient software at scale- Go is an open s ...

Tampermonkey笔记-脚本的搭建和基本使用

Tampermonkey笔记-脚本的搭建和基本使用相关推荐

最新文章

热门文章