零基础油猴脚本安装、配置、开发入门教程(图文)

先决条件

1. 安装油猴插件。
2. 了解基本的 js 语言知识。
3. 请首先阅读配置本地开发环境，虽然是【可选】但里面有部分基本的标签配置的讲解，如果是第一次进行开发，推荐快速阅读该部分。

配置本地开发环境【可选】

1. 油猴支持在它提供的网页编辑器中进行开发，但我一般喜欢用 vscode 等本地的 ide 进行开发，油猴插件支持访问本地文件，来进行本地开发，下面就来配置一下如何在本地进行开发，如果不需要此步骤的同志，可以跳过。
2. 首先在扩展程序中找到 Tampermonkey，并点击进入详情。
   
3. 打开允许访问文件网址选项。
   
4. 此时，我们在本地文件中创建一个 js 文件，如：D:\code\font_end\practice\monkey\example\demo.js。并在此文件中编辑一个简单的代码。

(function () {
    console.log("天行健，君子以自强不息！！！")
})();

5. 右击顶部工具栏中的油猴插件图标，在弹出的操作框中选择添加新脚本。
   
6. 之后你将进入一个编辑页面，我们来看看在这个编辑页面中一些基本的知识点。
   

这里重要的点有两个，一个是设置匹配的网站，默认的初始生成的代码中，没有对 https 的网址进行匹配，仅对 http 网址进行了匹配，所以要自己添加。这里 @match 标签的作用是让你的脚本在 @match 标签仅在规定的网站上运行，比如 @match https://www.baidu.com，表示在百度这个网址下运行。再比如，@match https://\*//* 表示在所有 https 下的网站都可以运行。

第二个就是通过 @require 标签来添加你本地的文件地址，这样当你在本地进行开发的代码，就可以直接在对应的网站上执行了。当然 @require 标签还可以用来引入一些你开发时需要的第三方库，如 jQuery。

7. 随便打开一个网站，如 https://www.baidu.com（百度），打开它的控制台，我们就发现脚本已经执行了，并且油猴插件会显示正在执行的脚本。
   
   【注】可以看到在网页编辑页面有一个 UserScript 包裹的部分，里面包含了如 @name，@namespace 等，这些称之为用户脚本标签，你可以在官方文档中查看所有的标签。

快速插入复杂的 HTML

在油猴脚本开发的过程中，有时候需要插入一些自己的 HTML 结构。一般来说通过 innerHTML 来实现这种需求。下面举一个简单的例子。

比如我现在在百度的 logo 下面希望增加如下的结构：

<div>
    <div class="h1">标题</div>
    <p class="des">这是一段描述</p>
</div>

那么我们在脚本中可以这样书写

// 快速创建复杂 HTML 结构
function createHTML() {
    // 获取百度首页 logo 
    let logo = document.querySelector("#lg")
    // 创建一个自己的结构
    let example = document.createElement("div")
    // 给 example 这个 div 设置类名
    example.classList.add("wrap")
    example.innerHTML = `<div class="h1">标题</div>
                            <p class="des">这是一段描述</p>`
    logo.appendChild(example)

}

(function () {
    'use strict';
    console.log("learn_style")
    createHTML()
})();

脚本编辑页面我做了如下的配置。主要是设置了 @match 标签和 @require 标签。

// ==UserScript==
// @name         example
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://www.baidu.com
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// @require      file:///D:\code\font_end\practice\study_monkey\learn_style.js
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...
})();

现在我们打开百度首页查看效果

除了“这是一段描述”这句话被百度自身的样式遮盖了外，至少创建一个 HTML 的结构的目标是达到了。

使用 innerHTML 的方式可以快速创建一个比较复杂的，油猴脚本需求的 HTML 结构。

设置 CSS 样式

上面的一节介绍了如何快速创建一个复杂的 HTML 结构，接下来，我们继续上面的教程，来看看如何为这个 HTML 结构添加一个 css 样式。

首先，我们要在 @grant 标签中设置 GM_addStyle

然后，我们就可以直接编写 css 样式的代码

// 这里是创建 HTML 的代码，参考上一节
function createHTML() {...}

// 添加 css 样式
function addStyle() {
    let css = `
    .wrap{
        padding: 5px
    }
    
    .h1{
        font-size: 16px;
        color: green;
    }
    
    .des{
        font-size: 10px;
    }
    `

    GM_addStyle(css)
}


(function () {
    'use strict';
    console.log("learn_style")
    createHTML()
    addStyle()
})();

最终效果可以看到实现了（PS：因为搜索框本身的样式挡住了演示效果，所以删除）

发布与更新你的脚本

通常我们会选择一个油猴插件应用商店来发布自己的插件，通常大家会选择 greasyfork，具体的操作可以参考下面的内容：

1. Greasy Fork 有关发布脚本的规则
2. Greasy Fork 将如何改写已发布的脚本
3. 发布新脚本

对于更新，通常我的流程是如下：

1. 在本地进行开发和测试（测试有一个测试版插件）。
2. 测试成功后，将其推送到 github 上存档。
3. 复制你的脚本代码到 greasyfork 进行更新。

常见标签简析

@connect

当用户使用 GM_xmlhttpRequest 请求远程数据的时候，需要使用 connect 指定允许访问的域名，支持域名、子域名、IP地址以及*通配符。

它的语法如下：// @connect <value>。value 通常是不带顶级域名的子域名，如 baidu.com。具体的 value 还可以有其它的值，你可以访问这个链接。

另外将 @connect * 添加到脚本中。通过这样做，Tampermonkey 仍会询问用户是否允许下一次连接到未提及的域，但还会提供“始终允许所有域”按钮。如果用户单击此按钮，则将自动允许所有未来的请求。

@grant

该标签的作用是可以调用油猴本身提供的一些 API 与浏览器互动，突破本身的一些安全策略。比如该标签可以调用 GM_* 函数，来获取一些应用程序接口，比如如果要进行跨域，可以使用 GM_xmlhttpRequest 函数。

@include

脚本可以运行的页面。允许多个标签实例（即允许匹配多个网址）。特别的是 @match 标签的作用和它几乎类似，但有更加严格的语法。推荐使用 @match 标签。

// 示例
// @include http://www.tampermonkey.net/*
// @include http://*
// @include https://*
// @include /^https:\/\/www\.tampermonkey\.net\/.*$/ // @include *

@require

指向在脚本本身（编辑页面中的脚本）开始运行之前加载和执行的 JavaScript 文件。我们可以利用该标签引入诸如 jQuery 这样的第三方库或者关联本地文件进行开发。

1. 引入 jQuery 库示例：// @require https://code.jquery.com/jquery-2.1.4.min.js。
2. 引入本地文件进行开发示例：// @require file:///D:\code\font_end\practice\study_monkey\learn_style.js

【注】引入本地文件进行开发，还需要对油猴插件进行设置，详细请看配置本地开发环境【可选】

常见应用程序接口简析

GM_xmlhttpRequest

该函数提供了进行 xmlhttpRequest 请求的功能。如果你要使用该函数，则务必对 @connect 标签进行设置。

下面展示 GM_xmlhttpRequest 方法的一个实例，实例来源 MoreMovieRating 油猴插件。

function getURL_GM(url) {
    return new Promise(resolve => GM.xmlHttpRequest({
        method: 'GET',
        url: url,
        onload: function (response) {
            if (response.status >= 200 && response.status < 400) {
                resolve(response.responseText);
            } else {
                console.error(`Error getting ${url}:`, response.status, response.statusText, response.responseText);
                resolve();
            }
        },
        onerror: function (response) {
            console.error(`Error during GM.xmlHttpRequest to ${url}:`, response.statusText);
            resolve();
        }
    }));
}

GM_addStyle

在脚本开发中，有时需要操作 css 样式，油猴脚本提供了 GM_addStyle 方法用来方便的解决这个问题，具体的实例参考上面的设置 CSS 样式。

总结

到此这篇关于零基础油猴脚本安装、配置、开发入门教程(图文)的文章就介绍到这了,更多相关油猴脚本开发入门内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论