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);
});

5) 引入外部JS文件
-- @require 需要使用这个来引入需要的JS文件

let script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.src = "https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js";
document.documentElement.appendChild(script);

6) 引入外部css资源
// @resource css https://blog.icodef.com/wp-content/themes/Kratos-3.0.7/assets/css/kratos.min.css?ver=3.2.4

// @resource SRIsecured1 http://example.com/favicon1.ico#md5=ad34bb...
// @resource SRIsecured2 http://example.com/favicon2.ico#md5=ac3434...,sha256=23fd34...
// @require https://code.jquery.com/jquery-2.1.1.min.js#md5=45eef...
// @require https://code.jquery.com/jquery-2.1.2.min.js#md5-ac56d...,sha256-6e789...
// @require https://code.jquery.com/jquery-3.6.0.min.js#sha256-/xUj+3OJU...ogEvDej/m4=

# 注: require 和 resource 支持 window.crypto 校验，例如 SHA-256, MD5, SHA-1, SHA-384 和 SHA-512。

console.log(GM_getResourceURL("css"),GM_getResourceText("css"));
GM_addStyle(GM_getResourceText("css"));

GM_getResourceText 会返数据的内容，

GM_getResourceURL 则会返回数据的 dataURL, 本例中，即 data:text/css;base64,[base64]

let script = document.createElement('link');
script.setAttribute('rel', 'stylesheet');
script.setAttribute('type', 'text/css');
script.href = "https://blog.icodef.com/wp-content/themes/Kratos-3.0.7/assets/css/kratos.min.css?ver=3.2.4";
document.documentElement.appendChild(script);

脚本:

1) 打印hook cookie

https://github.com/JSREI/js-cookie-monitor-debugger-hook?tab=readme-ov-file

2) 监听页面跳转事件(页面被重定向情况)

// ==UserScript==
// @name 页面跳转监控
// @namespace http://tampermonkey.net/
// @version 2024-08-21
// @description try to take over the world!
// @author You
// @match *://*/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=tampermonkey.net
// @grant none
// @run-at document-start
// ==/UserScript==

(function() {
'use strict';
    // 页面跳转前debug
    //window.onbeforeunload = () => {
        // debugger;
    // return false;
    //}

// 添加监听时间
    window.addEventListener('beforeunload', function(e){
        // Cancel the event
        e.preventDefault();
        // Chrome requires returnValue to be set
        e.returnValue = '自定义文本';

debugger;
});

})();