如何开发一个油猴插件的脚本

You,•5 min read
工具
Back

如何开发一个油猴插件的脚本

要实现您描述的脚本功能，我们需要编写一个适用于 Chrome 的 Tampermonkey 脚本。下面是具体的实现步骤：

1. 安装 Tampermonkey 插件

首先，确保您的 Chrome 浏览器已安装 Tampermonkey 插件。如果没有安装，请前往 Chrome 网上应用店安装。

2. 创建新脚本

在 Tampermonkey 中，创建一个新脚本。您可以在 Tampermonkey 插件图标上点击右键选择“添加新脚本”或在 Tampermonkey 仪表盘中点击“创建新脚本”。

3. 编写脚本

脚本的基本结构如下所示。请将此代码复制并粘贴到 Tampermonkey 的编辑器中：

// ==UserScript==
// @name         Jenkins Scroll Helper
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Add scroll to top/bottom buttons on Jenkins pages
// @author       You
// @match        https://jenkins.xx/view/*
// @grant        none
// ==/UserScript==
 
(function() {
    'use strict';
 
    // 检查并修改元素样式
    function modifyElementStyle() {
        const element = document.getElementById('out');
        if (element) {
            element.style.height = '80vh';
            element.style.overflowY = 'auto';
            addScrollButtons(element);
        }
    }
 
    // 添加滚动按钮
    function addScrollButtons(element) {
        // 创建向上滚动按钮
        const scrollUpButton = document.createElement('div');
        scrollUpButton.innerHTML = '⬆️'; // 使用 Emoji 作为图标
        scrollUpButton.style.position = 'fixed';
        scrollUpButton.style.bottom = '60px';
        scrollUpButton.style.right = '20px';
        scrollUpButton.style.cursor = 'pointer';
        scrollUpButton.onclick = () => element.scrollTop = 0;
 
        // 创建向下滚动按钮
        const scrollDownButton = document.createElement('div');
        scrollDownButton.innerHTML = '⬇️'; // 使用 Emoji 作为图标
        scrollDownButton.style.position = 'fixed';
        scrollDownButton.style.bottom = '20px';
        scrollDownButton.style.right = '20px';
        scrollDownButton.style.cursor = 'pointer';
        scrollDownButton.onclick = () => element.scrollTop = element.scrollHeight;
 
        // 将按钮添加到页面
        document.body.appendChild(scrollUpButton);
        document.body.appendChild(scrollDownButton);
    }
 
    // 当 DOM 完全加载后执行
    window.addEventListener('load', modifyElementStyle);
})();

4. 保存并测试脚本

保存脚本并访问 https://jenkins.xtrfr.cn/view。脚本将自动运行，应用样式更改，并添加两个滚动按钮。

注意事项

通过这些步骤，您应该能够成功实现所需的功能。如果在实施过程中遇到任何问题，请随时咨询以获得进一步帮助。

脚本示例

// ==UserScript==
// @name         Jenkins Scroll Helper
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Add scroll to top/bottom buttons on Jenkins pages
// @author       You
// @match         https://jenkins.xx.com/*/console
// @grant        GM_notification
// ==/UserScript==
 
(function() {
    'use strict';
 
    // 检查并修改元素样式
    function modifyElementStyle(element) {
        if (element) {
            element.style.height = '60vh';
            element.style.overflowY = 'auto';
            addScrollButtons(element);
        }
    }
 
    // 添加滚动按钮
    function addScrollButtons(element) {
        // 创建一个函数来处理按钮的点击事件
        function buttonClickHandler(direction) {
            const text = direction === 'up' ? '向上' : '向下';
            const targetScroll = direction === 'up' ? 0 : element.scrollHeight;
 
            // 显示文案并放大按钮
            this.innerHTML = `${direction === 'up' ? '⬆️' : '⬇️'} ${text}`;
            this.style.transform = 'scale(1.5)';
 
            // 滚动元素
            element.scrollTop = targetScroll;
 
            // 重置按钮样式
            setTimeout(() => {
                this.innerHTML = direction === 'up' ? '⬆️' : '⬇️';
                this.style.transform = 'scale(1)';
            }, 600);
        }
 
        // 创建按钮的共用样式
        function createButton() {
            const button = document.createElement('div');
            button.style.position = 'fixed';
            button.style.right = '24px';
            button.style.cursor = 'pointer';
            button.style.transition = 'transform 0.3s ease';
            return button;
        }
 
        // 创建向上滚动按钮
        const scrollUpButton = createButton();
        scrollUpButton.innerHTML = '⬆️';
        scrollUpButton.style.bottom = '50vh';
        scrollUpButton.onclick = buttonClickHandler.bind(scrollUpButton, 'up');
 
        // 创建向下滚动按钮
        const scrollDownButton = createButton();
        scrollDownButton.innerHTML = '⬇️';
        scrollDownButton.style.bottom = '40vh';
        scrollDownButton.onclick = buttonClickHandler.bind(scrollDownButton, 'down');
 
        // 将按钮添加到页面
        document.body.appendChild(scrollUpButton);
        document.body.appendChild(scrollDownButton);
    }
 
    // 发送通知
    function sendNotification(title, message, url) {
        GM_notification({
            title: title,
            text: message,
            timeout: 4000,
            onclick: function() {
                window.open(url, '_blank').focus(); // 在新标签页中打开链接并聚焦
            }
        });
    }
 
    // 监听元素内部的变化
    function observeElementChanges(element) {
        const observer = new MutationObserver(mutations => {
            mutations.forEach(mutation => {
                if (mutation.type === 'childList' || mutation.type === 'characterData') {
                    const textContent = mutation.target.textContent;
                    if (textContent.includes('Finished: SUCCESS')) {
                        sendNotification('构建成功', '点击查看详情', window.location.href);
                        observer.disconnect(); // 停止监听
                    }
                }
            });
        });
 
        observer.observe(element, { childList: true, subtree: true, characterData: true });
    }
 
 
    // 当 DOM 完全加载后执行
    window.addEventListener('load', () => {
        const element = document.querySelector('.console-output');
        if (element) {
            modifyElementStyle(element);
            addScrollButtons(element);
            observeElementChanges(element);
        }
    });
 
})();
2026 © Lizhenyui.