油猴入门使用

油猴入门使用

https://blog.csdn.net/weixin_42067967/article/details/105863853

油猴是一个浏览器拓展，用户能添加脚本代码来操作对应网页。

用户脚本标题

1.  
   // ==UserScript==
2.  
   // @name test
3.  
   // @namespace http://tampermonkey.net
4.  
   // @version 0.1
5.  
   // @description try to take over the world!
6.  
   // @author You
7.  
   // @match https://www.baidu.com/*
8.  
   // @include https://www.zhihu.com/*
9.  
   // @exclude https://www.zhihu.com
10.  
    // @require https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js
11.  
    // @grant unsafeWindow
12.  
    // @grant GM_xmlhttpRequest

脚本的描述信息、需要引用的文件、接口等均可在此设定

@name : 脚本的名称

@namespace：脚本的名称空间

@version：脚本版本

@auth：作者

@description：描述，简短的描述该脚本的功能，利于后续管理

@include、match：该脚本运行于此页面，可以明确指定一个url或使用通配符*来代替路径中的部分字符

@exclude：排除url，即使已经@include、@match也会排除

@require：脚本运行前加载并执行的js文件

@grant：用于引进GM_*函数，unsafeWindow，这个对象可以获取到网站中的一些变量和 JavaScript 函数

以上是常用的脚本标题，想了解更多请查看Tampermonkey 文档

应用程序接口

GM_setValue(name, value)：

设置“name”的值到storage中

GM_getValue(name, defaultValue)：

从storage中获取“name”的值，没有则返回默认值

GM_deleteValue(name)：

从storage中删掉“name”

GM_addValueChangeListener(name, function(name, old_value, new_value, remote) {})：

监听storage中“name”值的改变，并返回侦听器的id，remote为true表示在另一个标签页中修改的，false则表示在当前页面修改的。

GM_removeValueChangeListener(listener_id)：

删除对应id的侦听器

GM_openInTab(url, options), GM_openInTab(url, loadInBackground)：

打开标签页，options对象有以下属性:

active ：新标签页获得焦点

insert：新标签页在当前页面之后添加

setParent：当新标签页关闭后，焦点给回当前页面

incognito: 新标签页在隐身模式或私有模式窗口打开

loadInBackground 可以是 Boolean 类型，如果是 true，则当前 tab 不变，如果是 false，则当前 tab 变为新打开的 tab

若只有一个参数则新标签页不会聚焦，该函数返回一个对象，有close()、监听器onclosed和closed的标记

GM_xmlhttpRequest(details)：

创建一个xmlhttpRequest，可以实现跨域请求，属性：

method:

url:

headers:

onload :

......

例：

1.  
   GM_xmlhttpRequest({
2.  
   url:"",
3.  
   method:'POST',
4.  
   data:"",
5.  
   onerror:function(res){
6.  
   console.log(res);
7.  
   },
8.  
   onload:function(res){
9.  
   console.log(res);
10.  
    }
11.  
    });

以上是部分应用程序接口，具体请查看Tampermonkey 文档

示例：（个人经验）

在开发过程中有时候会遇到标签页之间需要通信，这时GM的相关方法就起到了很好作用，可以通过它来实现标签页之间互相监听动态，这只是其中一种方法，使用可以看下面的案例：

该案例使用了GM_*来实现标签页之间通信，在百度页面打开知乎页面，知乎页面3秒后改变状态，然后监听器监听到状态改变后就关闭页面，脚本如下：

1.  
   // ==UserScript==
2.  
   // @name test
3.  
   // @namespace http://tampermonkey.net
4.  
   // @version 0.1
5.  
   // @description 通过GM_*实现标签页间通信
6.  
   // @author You
7.  
   // @match https://www.baidu.com/*
8.  
   // @match https://www.zhihu.com/*
9.  
   // @grant unsafeWindow
10.  
    // @grant GM_setValue
11.  
    // @grant GM_getValue
12.  
    // @grant GM_openInTab
13.  
    // @grant GM_addValueChangeListener
14.  
    // ==/UserScript==
15.  
     
16.  
    (function() {
17.  
    'use strict';
18.  
     
19.  
    var newTap;
20.  
    //打开新页面
21.  
    var onpenNewTap = function (){
22.  
    newTap = GM_openInTab("https://www.zhihu.com",{ active: true, setParent :true});
23.  
    GM_setValue("newTapState", true);
24.  
    };
25.  
    //关闭页面
26.  
    var closeNewTap = function(){
27.  
    newTap.close();
28.  
    };
29.  
    //监听新标签页的状态
30.  
    var listenNewTap = function(){
31.  
    GM_addValueChangeListener('newTapState', function(name, old_value, new_value, remote){
32.  
    if(new_value == false){
33.  
    closeNewTap();
34.  
    }
35.  
    })
36.  
    };
37.  
     
38.  
    var host = window.location.host
39.  
    if(host.indexOf("baidu") > -1){
40.  
    onpenNewTap();
41.  
    listenNewTap();
42.  
    } else if(host.indexOf("zhihu") > -1){
43.  
    setTimeout(function(){
44.  
    GM_setValue("newTapState", false);
45.  
    }, 3 * 1000);
46.  
    }
47.  
     
48.  
    })();

这里使用GM_openInTab的方法打开新的页面，当然你也可以使用window.open

注意：

通过GM存储的数据只能在同个油猴脚本下运行的脚本才能互相读取。若多个功能分脚本实现，可以在脚本标题中通过require来引入。