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 = "https://cdn.jxasp.com:9143/image/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 = "https://cdn.jxasp.com:9143/image/22px";
  	btn.style.cursor = "pointer";
  	btn.innerHTML = "开始脚本";
  	btn.id = "zan_btn";
    btn.onclick = () =>{
        
        // TODO
    }
})();