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笔记-脚本的搭建和基本使用的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。