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

Posted 2022-02-17 IT1995

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

这里直接到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
    
)();