油猴开发笔记

grant

none就是直接运行在前端页面中

否则就是运行在一个沙盒环境,需要使用unsafeWindow去操作前端的元素.

unsafeWindow可以调用GM_*函数去执行一些更强大的操作，但一些原有的函数不能调用，也可以通过grant进行获得

//@grant none

//使用unsafewindow
//@grant unsafeWindow
//@grant window.onurlchange

~~onurlchange为url变换时调用的函数~~

沙盒

[油猴脚本开发指南]沙盒机制的前世今生-油猴中文网

RUN-AT

//脚本尽快注入，加载完html标签就执行
// @run-at document-start

//脚本在网页加载结束时注入，加载完js等执行
// @run-at document-end

GM_*函数/油猴API

Tampermonkey油猴用户脚本API文档

GM_*函数使用前都需要申明

//@grant GM_*

GM_xmlhttpRequest跨域请求

GM_xmlhttpRequest 函数跨域与JQuery相似

//示例
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);
        }//onload相当于success
    });

使用前需要申明使用了api和链接的域名

// @grant        GM_xmlhttpRequest
// @connect      api.bilibili.com

外部资源引用

js资源的引用

// @require      https://jsd.imbai.cn/pics/npm/vue@2.6.12/dist/vue.min.js

如果是在沙盒环境(unsafeWindow)下,window函数不可用

如果是在原网环境下，可能会与原网页引用的js冲突

GM_*函数没用时的备用方法

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

css资源的引用

// @resource css https://blog.icodef.com/wp-content/themes/Kratos-3.0.7/assets/css/kratos.min.css?ver=3.2.4
//此处css为变量名

console.log(GM_getResourceURL("css"),GM_getResourceText("css"));//url是一个base64的url,text为css内容
GM_addStyle(GM_getResourceText("css"));

备用方法

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

备用方法缺点：没有预加载好资源,很明显的感觉到了刷新的样子. js的也一样

JQuery引入冲突解决办法

在开头引入这一段代码

this.$ = this.jQuery = jQuery.noConflict(true);

油猴菜单设置

鼠标右键菜单

// @run-at       context-menu
//申明后执行下面代码
alert("菜单被点击了");

浏览器右上角菜单

// @grant    GM_registerMenuCommand
// @grant    GM_unregisterMenuCommand

语法:

GM_registerMenuCommand("菜单名字",执行的函数名,快捷键);
//例如：
GM_registerMenuCommand("投币任务",tb,"t");

let id = GM_registerMenuCommand("菜单名字",执行的函数名,快捷键);
GM_unregisterMenuCommand(id);//删除菜单

GM_get/setValue

// @grant        GM_setValue
// @grant        GM_getValue
GM_setValue("qqq",123);//将123赋值给qqq
GM_getValue("qqq");//输出123

GM_addStyle

GM_addStyle('#HMRichBox{display:none !important}')

给相应的标签添加样式display:none样式，广告将不会显示。

如果网页内的iframe标签也存在广告的话，匹配iframe标签内的域名，添加对应的css样式即可。

这里不采用js处理，js处理对于一些后加载和iframe标签内的广告无法处理，同时也会让广告显示一会再消失，体验不好

本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。