目录

先决条件

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

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

  1. 油猴支持在它提供的网页编辑器中进行开发，但我一般喜欢用 vscode 等本地的 ide 进行开发，油猴插件支持访问本地文件，来进行本地开发，下面就来配置一下如何在本地进行开发，如果不需要此步骤的同志，可以跳过。
  2. 首先在扩展程序中找到 Tampermonkey，并点击进入详情。
    在这里插入图片描述
  3. 打开允许访问文件网址选项。
    在这里插入图片描述
  4. 此时，我们在本地文件中创建一个 js 文件，如：D:\code\font_end\practice\monkey\example\demo.js。并在此文件中编辑一个简单的代码。
(function () {
    console.log("天行健，君子以自强不息！！！")
})();
  1. 右击顶部工具栏中的油猴插件图标，在弹出的操作框中选择添加新脚本。
    在这里插入图片描述
  2. 之后你将进入一个编辑页面，我们来看看在这个编辑页面中一些基本的知识点。
    在这里插入图片描述

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

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

  1. 随便打开一个网站，如 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 样式。

参考与拓展

  1. 官方网站
  2. 简单的油猴脚本-本地开发教程
  3. 如何开发一个油猴脚本- 从零开始编写一个油猴脚本
  4. 油猴脚本编写教程
  5. 【油猴脚本】GM_xmlhttpRequest跨域请求初探
# javascript
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

cover

GitTalk | 使用面向业务的狮偶编程语言提升开发效率

avatar GitCode 开源社区
cover

GitTalk | DevUI Suits 场景解决方案

avatar GitCode 开源社区
cover

GitTalk | DevUI Admin 前端项目构建

avatar GitCode 开源社区