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

x33g5p2x  于2022-02-07 转载在 其他  
字(2.3k)|赞(0)|评价(0)|浏览(269)

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

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

相关文章

微信公众号

最新文章

更多