油猴如何调用js

油猴调用JavaScript的方式包括：通过脚本头部声明、使用@require标签、使用unsafeWindow对象。最常用的方法是通过脚本头部声明，这是最基本且有效的方法。

油猴（Tampermonkey）是一款流行的浏览器扩展，允许用户自定义和增强网页的功能。通过编写用户脚本，用户可以在网页加载时自动执行自定义的JavaScript代码。本文将详细介绍如何在油猴中调用JavaScript，并提供一些专业经验和见解，帮助你更好地利用这一强大工具。

一、油猴简介

油猴是一种用户脚本管理器，广泛应用于主流浏览器如Chrome、Firefox和Safari。用户脚本可以改变网页的外观和行为，添加新功能，自动化任务，并增强浏览体验。油猴支持多种脚本格式和功能，包括JavaScript调用、CSS修改和HTML注入。

1. 油猴的基本功能

• 用户脚本管理：安装、更新和删除用户脚本。
• 自动更新：自动检查和更新已安装的脚本。
• 脚本编辑：提供内置的脚本编辑器，方便用户编写和调试脚本。
• 脚本调试：支持脚本的错误调试和日志记录。

2. 油猴的安装和使用

• 安装油猴扩展：在浏览器扩展商店搜索并安装油猴。
• 安装用户脚本：在用户脚本网站（如Greasy Fork）搜索并安装所需脚本。
• 管理和编辑脚本：通过油猴扩展图标访问管理界面，查看、编辑和删除已安装的脚本。

二、脚本头部声明

油猴用户脚本的头部声明是脚本的元数据部分，定义了脚本的基本信息和运行环境。通过头部声明，可以指定脚本的匹配规则、加载顺序和依赖关系。

1. 基本头部声明

一个典型的油猴用户脚本头部声明包括以下内容：

// ==UserScript==

// @name        Script Name
// @namespace   http://tampermonkey.net/
// @version     1.0
// @description Script Description
// @match       https://example.com/*
// @grant       none
// ==/UserScript==

• @name：脚本名称。
• @namespace：脚本命名空间，用于区分不同脚本。
• @version：脚本版本号。
• @description：脚本描述。
• @match：脚本匹配规则，指定脚本运行的网页。
• @grant：脚本权限声明。

2. 调用JavaScript代码

在头部声明中，定义脚本的元数据后，可以直接编写JavaScript代码。以下是一个简单的例子，展示如何在油猴脚本中调用JavaScript代码：

// ==UserScript==

// @name        Hello World Script
// @namespace   http://tampermonkey.net/
// @version     1.0
// @description A simple Hello World script
// @match       https://example.com/*
// @grant       none
// ==/UserScript==
(function() {
    'use strict';
    console.log('Hello, World!');
})();

在上述脚本中，console.log('Hello, World!');将在匹配的网页上执行，并在浏览器控制台输出“Hello, World!”。

三、使用@require标签

油猴支持通过@require标签加载外部JavaScript文件，从而在脚本中使用外部库和资源。这种方式非常适合需要使用第三方库（如jQuery、Lodash）的场景。

1. 加载外部JavaScript文件

通过@require标签，可以在脚本头部声明中指定外部JavaScript文件的URL。以下是一个示例，展示如何加载并使用jQuery：

// ==UserScript==

// @name        jQuery Example Script
// @namespace   http://tampermonkey.net/
// @version     1.0
// @description A script using jQuery
// @match       https://example.com/*
// @require     https://code.jquery.com/jquery-3.6.0.min.js
// @grant       none
// ==/UserScript==
(function($) {
    'use strict';
    $(document).ready(function() {
        console.log('jQuery is loaded');
    });
})(jQuery);

在上述脚本中，通过@require标签加载jQuery库，并在脚本中使用$符号调用jQuery方法。

2. 多个@require标签

油猴支持在一个脚本中使用多个@require标签，从而加载多个外部JavaScript文件。以下是一个示例，展示如何加载多个外部库：

// ==UserScript==

// @name        Multi-Require Example Script
// @namespace   http://tampermonkey.net/
// @version     1.0
// @description A script using multiple libraries
// @match       https://example.com/*
// @require     https://code.jquery.com/jquery-3.6.0.min.js
// @require     https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js
// @grant       none
// ==/UserScript==
(function($, _) {
    'use strict';
    $(document).ready(function() {
        console.log('jQuery and Lodash are loaded');
        console.log(_.VERSION);
    });
})(jQuery, _);

在上述脚本中，通过两个@require标签分别加载jQuery和Lodash库，并在脚本中使用这两个库的功能。

四、使用unsafeWindow对象

在某些情况下，用户脚本需要与网页的全局上下文进行交互。油猴提供了unsafeWindow对象，允许用户脚本访问和修改网页的全局变量和函数。

1. 访问全局变量

通过unsafeWindow对象，可以访问网页中定义的全局变量。以下是一个示例，展示如何访问和修改全局变量：

// ==UserScript==

// @name        UnsafeWindow Example Script
// @namespace   http://tampermonkey.net/
// @version     1.0
// @description A script using unsafeWindow
// @match       https://example.com/*
// @grant       unsafeWindow
// ==/UserScript==
(function() {
    'use strict';
    // 访问全局变量
    console.log(unsafeWindow.someGlobalVariable);
    // 修改全局变量
    unsafeWindow.someGlobalVariable = 'New Value';
})();

在上述脚本中，通过unsafeWindow对象访问和修改网页中的全局变量someGlobalVariable。

2. 调用全局函数

通过unsafeWindow对象，可以调用网页中定义的全局函数。以下是一个示例，展示如何调用全局函数：

// ==UserScript==

// @name        Call Global Function Script
// @namespace   http://tampermonkey.net/
// @version     1.0
// @description A script calling global function
// @match       https://example.com/*
// @grant       unsafeWindow
// ==/UserScript==
(function() {
    'use strict';
    // 调用全局函数
    unsafeWindow.someGlobalFunction();
})();

在上述脚本中，通过unsafeWindow对象调用网页中的全局函数someGlobalFunction。

五、使用MutationObserver

在某些情况下，用户脚本需要监视网页DOM的变化，并在变化发生时执行特定操作。MutationObserver是一种浏览器API，允许用户脚本监视DOM节点的添加、删除和属性变化。

1. 创建MutationObserver

以下是一个示例，展示如何创建MutationObserver并监视DOM变化：

// ==UserScript==

// @name        MutationObserver Example Script
// @namespace   http://tampermonkey.net/
// @version     1.0
// @description A script using MutationObserver
// @match       https://example.com/*
// @grant       none
// ==/UserScript==
(function() {
    'use strict';
    // 创建MutationObserver
    const observer = new MutationObserver((mutationsList) => {
        for (const mutation of mutationsList) {
            if (mutation.type === 'childList') {
                console.log('A child node has been added or removed.');
            } else if (mutation.type === 'attributes') {
                console.log('The ' + mutation.attributeName + ' attribute was modified.');
            }
        }
    });
    // 配置MutationObserver
    const config = { attributes: true, childList: true, subtree: true };
    // 选择要监视的DOM节点
    const targetNode = document.getElementById('someElement');
    // 开始监视DOM节点
    observer.observe(targetNode, config);
})();

在上述脚本中，通过MutationObserver监视ID为someElement的DOM节点的子节点和属性变化，并在变化发生时输出相应的日志信息。

2. 停止监视

在某些情况下，用户脚本可能需要停止监视DOM变化。可以通过调用MutationObserver的disconnect方法停止监视：

// ==UserScript==

// @name        Stop MutationObserver Script
// @namespace   http://tampermonkey.net/
// @version     1.0
// @description A script stopping MutationObserver
// @match       https://example.com/*
// @grant       none
// ==/UserScript==
(function() {
    'use strict';
    // 创建MutationObserver
    const observer = new MutationObserver((mutationsList) => {
        for (const mutation of mutationsList) {
            console.log('A mutation has occurred.');
        }
    });
    // 配置MutationObserver
    const config = { attributes: true, childList: true, subtree: true };
    // 选择要监视的DOM节点
    const targetNode = document.getElementById('someElement');
    // 开始监视DOM节点
    observer.observe(targetNode, config);
    // 停止监视DOM节点（示例延迟3秒后停止监视）
    setTimeout(() => {
        observer.disconnect();
        console.log('MutationObserver has been disconnected.');
    }, 3000);
})();

在上述脚本中，通过调用observer.disconnect()方法在3秒后停止监视DOM节点的变化。

六、使用事件监听器

用户脚本可以通过添加事件监听器，响应用户在网页上的操作，如点击、键盘输入和鼠标移动。事件监听器允许用户脚本在特定事件发生时执行自定义操作。

1. 添加事件监听器

以下是一个示例，展示如何添加点击事件监听器：

// ==UserScript==

// @name        Click Event Listener Script
// @namespace   http://tampermonkey.net/
// @version     1.0
// @description A script adding click event listener
// @match       https://example.com/*
// @grant       none
// ==/UserScript==
(function() {
    'use strict';
    // 添加点击事件监听器
    document.addEventListener('click', (event) => {
        console.log('A click event has occurred.');
        console.log('Clicked element:', event.target);
    });
})();

在上述脚本中，通过document.addEventListener方法添加点击事件监听器，并在点击事件发生时输出日志信息。

2. 移除事件监听器

在某些情况下，用户脚本可能需要移除事件监听器。可以通过removeEventListener方法移除事件监听器：

// ==UserScript==

// @name        Remove Event Listener Script
// @namespace   http://tampermonkey.net/
// @version     1.0
// @description A script removing event listener
// @match       https://example.com/*
// @grant       none
// ==/UserScript==
(function() {
    'use strict';
    // 定义事件处理函数
    const clickHandler = (event) => {
        console.log('A click event has occurred.');
        console.log('Clicked element:', event.target);
    };
    // 添加点击事件监听器
    document.addEventListener('click', clickHandler);
    // 移除点击事件监听器（示例延迟3秒后移除）
    setTimeout(() => {
        document.removeEventListener('click', clickHandler);
        console.log('Click event listener has been removed.');
    }, 3000);
})();

在上述脚本中，通过document.removeEventListener方法在3秒后移除点击事件监听器。

七、使用fetch API

用户脚本可以使用fetch API发送HTTP请求，从服务器获取数据或提交数据到服务器。fetch API是现代浏览器中用于执行网络请求的标准方法，支持Promise语法。

1. 发送GET请求

以下是一个示例，展示如何使用fetch API发送GET请求：

// ==UserScript==

// @name        Fetch GET Request Script
// @namespace   http://tampermonkey.net/
// @version     1.0
// @description A script sending GET request
// @match       https://example.com/*
// @grant       none
// ==/UserScript==
(function() {
    'use strict';
    // 发送GET请求
    fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => {
            console.log('Received data:', data);
        })
        .catch(error => {
            console.error('Error:', error);
        });
})();

在上述脚本中，通过fetch API发送GET请求，并在成功获取数据后输出接收到的数据。

2. 发送POST请求

以下是一个示例，展示如何使用fetch API发送POST请求：

// ==UserScript==

// @name        Fetch POST Request Script
// @namespace   http://tampermonkey.net/
// @version     1.0
// @description A script sending POST request
// @match       https://example.com/*
// @grant       none
// ==/UserScript==
(function() {
    'use strict';
    // 发送POST请求
    fetch('https://api.example.com/data', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ key: 'value' })
    })
        .then(response => response.json())
        .then(data => {
            console.log('Received data:', data);
        })
        .catch(error => {
            console.error('Error:', error);
        });
})();

在上述脚本中，通过fetch API发送POST请求，并在成功获取数据后输出接收到的数据。

八、使用异步函数

用户脚本可以使用异步函数（async/await）处理异步操作，如网络请求和定时器。异步函数允许用户脚本以更简洁的方式编写异步代码。

1. 定义异步函数

以下是一个示例，展示如何定义和调用异步函数：

// ==UserScript==

// @name        Async Function Script
// @namespace   http://tampermonkey.net/
// @version     1.0
// @description A script using async function
// @match       https://example.com/*
// @grant       none
// ==/UserScript==
(async function() {
    'use strict';
    // 定义异步函数
    async function fetchData() {
        try {
            const response = await fetch('https://api.example.com/data');
            const data = await response.json();
            console.log('Received data:', data);
        } catch (error) {
            console.error('Error:', error);
        }
    }
    // 调用异步函数
    await fetchData();
})();

在上述脚本中，通过async/await语法定义和调用异步函数fetchData，以更简洁的方式处理网络请求。

2. 使用异步函数处理定时器

以下是一个示例，展示如何使用异步函数处理定时器：

// ==UserScript==

// @name        Async Timer Script
// @namespace   http://tampermonkey.net/
// @version     1.0
// @description A script using async function with timer
// @match       https://example.com/*
// @grant       none
// ==/UserScript==
(async function() {
    'use strict';
    // 定义异步定时器函数
    function delay(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }
    // 调用异步定时器函数
    await delay(3000);
    console.log('3 seconds have passed.');
})();

在上述脚本中，通过定义异步定时器函数delay并使用await语法，延迟3秒后执行后续操作。

九、使用自定义事件

用户脚本可以创建和触发自定义事件，允许不同脚本或网页元素之间进行通信和交互。自定义事件是增强用户脚本功能的重要手段。

1. 创建和触发自定义事件

以下是一个示例，展示如何创建和触发自定义事件：

// ==UserScript==

// @name        Custom Event Script
// @namespace   http://tampermonkey.net/
// @version     1.0
// @description A script using custom event
// @match       https://example.com/*
// @grant       none
// ==/UserScript==
(function() {
    'use strict';
    // 创建自定义事件
    const customEvent = new Event('myCustomEvent');
    // 触发自定义事件
    document.dispatchEvent(customEvent);
    // 监听自定义事件
    document.addEventListener('myCustomEvent', () => {
        console.log('Custom event has been triggered.');
    });
})();

在上述脚本中，通过new Event创建自

相关问答FAQs：

1. 如何在油猴中调用JavaScript文件？

• 问题描述：如何在油猴脚本中引入并调用外部的JavaScript文件？
• 回答：在油猴脚本中调用外部的JavaScript文件需要使用@require指令。在脚本的元数据部分，使用@require指令指定外部JavaScript文件的URL。然后在脚本中可以直接使用该文件中的函数和变量。

2. 如何在油猴脚本中调用页面中的JavaScript函数？

• 问题描述：在油猴脚本中如何调用页面中已有的JavaScript函数？
• 回答：要在油猴脚本中调用页面中的JavaScript函数，可以使用unsafeWindow对象。unsafeWindow对象提供了对页面中全局JavaScript对象的访问权限。可以使用unsafeWindow来调用页面中已有的函数。

3. 油猴脚本中如何调用页面中的jQuery函数？

• 问题描述：如何在油猴脚本中调用页面中已引入的jQuery库中的函数？
• 回答：在油猴脚本中调用页面中的jQuery函数，首先需要确保页面中已引入了jQuery库。然后可以使用unsafeWindow.$来访问页面中的jQuery对象，从而调用jQuery的函数。可以使用unsafeWindow.$来进行DOM操作、事件处理等常见的jQuery操作。