Chrome插件之油猴(详尽版本)
官方文档: https://www.tampermonkey.net/documentation.php#google_vignette
1.注释语法:
// @match https://passport.yhd.com/
// ==UserScript==
// @name 第一个脚本-HelloWorld
// @namespace https://learn.scriptcat.org/
// @version 0.1
// @description 第一个脚本！弹出HelloWorld对话框
// @author lanlang
// @match https://bbs.tampermonkey.net.cn/
// @grant none
// @run-at document-start
// @connect api.bilibili.com
// ==/UserScript==
说明:
@name: 脚本名称
@match: 匹配网站，*表示通配
@icon 用于设置脚本的图标
@grant 这个属性可用来申请GM_*函数和unsafeWindow权限。相当于放在脚本header里面告诉油猴扩展，你需要用些什么东西，然后它就会给你相应的权限。
默认的情况下，你的脚本运行在油猴给你创建的一个沙盒环境下，这个沙盒环境无法访问到前端的页面，也就无法操作前端的一些元素等。
如果在页面最前方声明// @grant none，那么油猴就会将你的脚本直接放在网页的上下文中执行，这是的脚本上下文(window)就是前端的上下文。但是这样的话就无法使用GM_*等函数，无法与油猴交互，无法使用一些更强的功能。
所以一般写脚本的时候是使用unsafeWindow与前端交互，而不使用// @grant none，这样就可以使用grant去申请油猴的一些更强的函数功能。
@run-at: 主要是设置脚本运行的时候
@connect: 设置允许通过的域名，使用 @connect 配置确保此跨域请求是计划内的行为
创建方式:
1)新建一个脚本
2)在指定网址,选择并新建自动匹配当前地址,例如:@match https://passport.yhd.com/
2.使用
1)对于系统函数进行劫持
(function() {
'use strict';
// 修改系统函数
// 1)系统函数重新赋值给一个新变量
let hookSetInterval = window.setInterval;
window.setInterval = function(a, b){
return hookSetInterval(a, 1000 * 10);
}
})();
注意:若是一开始就需要注入的系统函数, 需要设置run-at,在一开始就进行注入
2)http访问
GM_xmlhttpRequestAPI
// ==UserScript==
// @name 油猴中文网-自动关注up主
// @namespace https://bbs.tampermonkey.net.cn/
// @version 0.1
// @description 油猴中文网-自动关注up主
// @author Wyz
// @match https://bbs.tampermonkey.net.cn/
// @grant GM_xmlhttpRequest
// @connect api.bilibili.com
// ==/UserScript==
(function() {
'use strict';
GM_xmlhttpRequest({
url:"https://api.bilibili.com/x/relation/modify",
method :"POST",
data:"fid=1037793830&act=1&re_src=11&jsonp=jsonp&csrf=e37f1881fd98f16756d16ab71109d37a",
headers: {
"Content-type": "application/x-www-form-urlencoded"
},
onload:function(xhr){
console.log(xhr.responseText);
}
});
})();
3) 插入新元素
let div = document.createElement("div");
div.innerHTML = '<span>span1</span><span>span2</span>';
// 插入到页面的body中
document.body.append(div);
4)添加监听器
div.addEventListener("click", function (ev) {
console.log(ev);
});