油猴脚本的学习使用

发表于 2026-02-03 更新于 2026-03-28 分类于工具，油猴阅读次数： Waline：阅读次数：

1、打开其权限

在浏览器的扩展里面打开开发者模式，打开其详情

然后用以下代码做个简单的测试

// ==UserScript==
// @name         Print Message on Specific Page
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  在特定页面上打印消息
// @author       You
// @match        https://cms.zjjtgc.com/jg-web/jg-inventory/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    
        alert('您已经访问了目标页面！');
        
})();

说明

@name：脚本的名称。这个会在 Tampermonkey 插件中显示，便于识别。
@namespace：给脚本定义一个命名空间，通常是脚本源的 URL。这里用的是 Tampermonkey 的官方 URL。
@version：脚本的版本号，这里是 1.0。
@description：脚本的简要描述，说明该脚本的功能。在此脚本中，描述的是“在特定页面上打印消息”。
@author：脚本的作者，通常是脚本编写者的名字。
@match：定义哪些 URL 会触发脚本运行。这里的 https://cms.zgc.com/jg-web/jg-inventory/* 表示所有访问 https://cms.zgc.com/jg-web/jg-inventory/ 开头的页面都会运行这个脚本。
@grant：用于定义脚本的权限，none 表示不使用任何特定的权限。

然后就可以使用js愉快的编写油猴脚本了。

2、基础

查找元素

直接使用window.addEventListener(‘load’, function() {}查找元素时很可能查找不到，原因是文档加载完了，但是js还有一些没有，这里可以考虑三种方法

一、加延迟时间，最简单

window.addEventListener('load', function() {
    setTimeout(() => {
    ...............
    }, 2000);  // 延迟2秒检查
});

二、创建MutationObserver观察

const observer = new MutationObserver(() => {
	..................
}

observer.observe(document.body, { childList: true, subtree: true });

三、循环查找，耗性能

window.addEventListener('load', function() {
	const intervalId = setInterval(() => {
	.............
    }, 500);  // 每500ms检查一次
});

添加元素和样式

修改样式还可以添加

newButton.setAttribute('style', 'background-color: #4CAF50; color: white; border-radius: 5px; padding: 5px 15px; font-size: 14px; cursor: pointer;');
不过会覆盖原有样式

newButton.style.cssText = `
            background-color: #4CAF50;       /* 设置背景色 */
            color: white;                    /* 设置文字颜色 */
            border-radius: 5px;              /* 设置圆角 */
            padding: 5px 15px;               /* 设置按钮的内边距 */
            font-size: 14px;                 /* 设置字体大小 */
            cursor: pointer;                /* 鼠标悬停时变成指针 */
        `;
 最实用吧

还有效果的

// 为按钮添加鼠标悬停效果
newButton.addEventListener('mouseover', function() {
    newButton.style.backgroundColor = '#45a049'; // 悬停时的背景色
});

文本获取

以xpath来获取的

请求添加

站点概览