油猴脚本开发

安装油猴

找到各自浏览器安装油猴插件，自行百度不做一一介绍

切记，一定要打开扩展程序页面的开发者模式，否则脚本注入不了，如果打开了还没应用就来回打开关闭或者重启浏览器即可

打开编辑页面

浏览器右上角扩展程序中心，双击篡改猴，点击添加新脚本即可进入编辑页面

实现百度页面文字更换

// 将百度页面搜索按钮的百度一下改成百度两下,背景改成粉色

// ==UserScript==
// @name         百度搜索按钮文字和背景更换
// @namespace    https://www.baidu.com/
// @version      1.0.0
// @description  第一个脚本
// @author       萧寂
// @match        https://www.baidu.com/
// @icon         https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    document.querySelector('.s_btn').value = '百度两下'
    document.querySelector('.s_btn').style.backgroundColor = 'pink'
    // Your code here...
})();

• @name：定义用户脚本的名称，这里命名为“百度搜索按钮文字和背景更换”。
• @namespace：定义用户脚本的命名空间，通常是一个URL，用于区分不同的脚本，避免命名冲突。
• @homepage: 脚本主页地址，也可以使用@homepageURL或者@website
• @source: 脚本源代码地址
• @antifeature: 声明脚本是否包含某些反功能（如广告、跟踪等）。
• @version：定义用户脚本的版本号，这里设置为“1.0.0”。
• @description：描述用户脚本的功能或目的，这里写的是“第一个脚本”
• @author：定义用户脚本的作者，这里写的是“You”，表示由用户自己编写。
• @match：定义用户脚本适用的网页地址。这里设置为“https://www.baidu.com/”，表示该脚本只会在访问百度首页时生效。
• @icon：定义用户脚本的图标链接。
• @grant：定义用户脚本需要的特殊权限。这里设置为“none”，表示不需要任何特殊权限。
• @require：加载并执行脚本之前需要的外部 JavaScript 文件。
• @resource：预加载资源，可通过 GM_getResourceURL 和 GM_getResourceText 访问。
• @include：指定脚本应该运行的页面，也可以使用@match
• @exclude：排除某些页面，即使它们被 @include 或 @match 包含。
• @run-at：指定脚本运行的时间点（如 document-start、document-end 等）。
• @run-in：指定脚本运行的上下文（如 content、sandbox 等）。
• @sandbox：启用沙盒模式，限制脚本的权限。
• @tag：为脚本添加标签，方便分类。
• @connect：允许脚本连接到指定的域名。
• @noframes：声明脚本不在 iframe 中运行。
• @updateURL：脚本的更新 URL。
• @downloadURL：脚本的下载 URL。
• @supportURL：用户可以报告问题并获得支持的 URL。
• @webRequest：允许脚本拦截和修改网络请求。
• @unwrap：该标签被忽略，因为 Google Chrome/Chromium 不需要它。
• @copyright：声明脚本的版权信息。

使用css样式

GM_addStyle权限就允许使用css类型的样式加载，如下

// ==UserScript==
// @name         百度搜索按钮文字和背景更换
// @namespace    https://www.baidu.com/
// @version      1.0.0
// @description  第一个脚本
// @author       萧寂
// @match        https://www.baidu.com/
// @icon         https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png
// @grant        GM_addStyle
// ==/UserScript==
GM_addStyle(`
  .s_btn {
    background-color: pink !important;
  }
`);
(function() {
    'use strict';
    document.querySelector('.s_btn').value = '百度两下'
    // Your code here...
})();

动态引入本地资源和网络资源

引入本地资源

简洁版本

复杂版本

静态加载本地资源

预加载，页面显示时触发

新增如下两行

// @grant GM_getResourceText // @resource exampleTxt file:///D:/aaa.txt

// ==UserScript==
// @name         百度搜索按钮文字和背景更换
// @namespace    https://www.baidu.com/
// @version      1.0.0
// @description  第一个脚本
// @author       萧寂
// @match        https://www.baidu.com/
// @icon         https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png
// @grant        GM_addStyle
// @grant        GM_getResourceText
// @resource     exampleTxt file:///D:/aaa.txt
// ==/UserScript==

// 使用 GM_addStyle 修改按钮样式
GM_addStyle(`
  .s_btn {
    background-color: black !important;
  }
`);

(function() {
    'use strict';
    // 修改搜索按钮的文本
    document.querySelector('.s_btn').value = '百度两下';

    // 获取本地资源文件的内容
    const resourceContent = GM_getResourceText('exampleTxt');
    console.log('本地资源文件内容:', resourceContent);
})();

动态加载本地资源

通过文件选择选项，可以在每次文件更新后选择文件以拿到最新数据

// ==UserScript==
// @name         百度搜索按钮文字和背景更换
// @namespace    https://www.baidu.com/
// @version      1.0.0
// @description  第一个脚本
// @author       萧寂
// @match        https://www.baidu.com/
// @icon         https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png
// @grant        GM_addStyle
// ==/UserScript==

// 使用 GM_addStyle 修改按钮样式
GM_addStyle(`
  .s_btn {
    background-color: black !important;
  }
`);

(function() {
    'use strict';
    // 修改搜索按钮的文本
    document.querySelector('.s_btn').value = '百度两下';

    // 创建一个按钮
    const customButton = document.createElement('button');
    customButton.textContent = '点击选择本地文件';
    customButton.style.position = 'fixed';
    customButton.style.top = '10px';
    customButton.style.left = '10px';
    customButton.style.zIndex = '10000';
    customButton.style.padding = '5px 10px';
    customButton.style.fontSize = '14px';
    customButton.style.backgroundColor = 'blue';
    customButton.style.color = 'white';
    customButton.style.border = 'none';
    customButton.style.borderRadius = '5px';
    customButton.style.cursor = 'pointer';

    // 添加文件选择器
    const fileInput = document.createElement('input');
    fileInput.type = 'file';
    fileInput.style.display = 'none';

    // 为按钮添加点击事件
    customButton.addEventListener('click', function() {
        // 重置文件选择器的值
        fileInput.value = '';
        fileInput.click();
    });

    // 为文件选择器添加事件
    fileInput.addEventListener('input', function(event) {
        const file = event.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                const resourceContent = e.target.result;
                console.log('本地资源文件内容:', resourceContent);

                // 在百度首页上显示资源文件的内容
                const contentDiv = document.createElement('div');
                contentDiv.style.position = 'fixed';
                contentDiv.style.top = '60px';
                contentDiv.style.left = '10px';
                contentDiv.style.width = '300px';
                contentDiv.style.height = '200px';
                contentDiv.style.overflow = 'auto';
                contentDiv.style.backgroundColor = 'white';
                contentDiv.style.border = '1px solid black';
                contentDiv.style.padding = '10px';
                contentDiv.style.zIndex = '10000';

                contentDiv.textContent = '本地资源文件内容：\n' + resourceContent;

                document.body.appendChild(contentDiv);
            };
            reader.readAsText(file);
        }
    });

    // 将按钮和文件选择器添加到页面
    document.body.appendChild(customButton);
    document.body.appendChild(fileInput);
})();

引入网络资源

静态加载网络资源

预加载，页面显示时触发

// ==UserScript==
// @name         百度搜索按钮文字和背景更换
// @namespace    https://www.baidu.com/
// @version      1.0.0
// @description  第一个脚本
// @author       萧寂
// @match        https://www.baidu.com/
// @icon         https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png
// @grant        GM_addStyle
// @grant        GM_getResourceURL
// @grant        GM_getResourceText
// @resource     exampleTxt https://gitee.com/xiaojisengren/tuchuang/raw/master/test/aaa.txt
// ==/UserScript==

// 使用 GM_addStyle 修改按钮样式
GM_addStyle(`
  .s_btn {
    background-color: black !important;
  }
`);

(function() {
    'use strict';
    // 修改搜索按钮的文本
    document.querySelector('.s_btn').value = '百度两下';

     // 获取资源文件的 URL
    const resourceURL = GM_getResourceURL('exampleTxt');
    console.log('资源文件的 URL 为:', resourceURL);

    // 获取资源文件的内容
    const resourceContent = GM_getResourceText('exampleTxt');
    console.log('资源文件的内容为:', resourceContent);
})();

PS: 如果网络资源有改动，但是因为缓存没更新，可以将resource这一行删除重新刷新页面，然后再放回来就基本可以解决缓存问题的

动态请求网络资源

点击按钮以请求最新数据

// ==UserScript==
// @name         百度搜索按钮文字和背景更换
// @namespace    https://www.baidu.com/
// @version      1.0.0
// @description  第一个脚本
// @author       萧寂
// @match        https://www.baidu.com/
// @icon         https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png
// @grant        GM_addStyle
// @grant        GM_xmlhttpRequest
// ==/UserScript==

// 使用 GM_addStyle 修改按钮样式
GM_addStyle(`
  .s_btn {
    background-color: black !important;
  }
`);

(function() {
    'use strict';
    // 修改搜索按钮的文本
    document.querySelector('.s_btn').value = '百度两下';

    // 动态加载网络文件内容
    const url = "https://gitee.com/xiaojisengren/tuchuang/raw/master/test/aaa.txt";

    function fetchLocalFile(url) {
        return new Promise((resolve, reject) => {
            GM_xmlhttpRequest({
                method: "GET",
                url: url,
                onload: function(response) {
                    if (response.status === 200) {
                        resolve(response.responseText);
                    } else {
                        reject(new Error(`Failed to load file: ${response.statusText}`));
                    }
                },
                onerror: function(error) {
                    reject(new Error(`Network error: ${error.statusText}`));
                }
            });
        });
    }

    // 创建一个按钮
    const customButton = document.createElement('button');
    customButton.textContent = '重新获取网络文件';
    customButton.style.position = 'fixed';
    customButton.style.top = '10px';
    customButton.style.left = '10px';
    customButton.style.zIndex = '10000';
    customButton.style.padding = '5px 10px';
    customButton.style.fontSize = '14px';
    customButton.style.backgroundColor = 'blue';
    customButton.style.color = 'white';
    customButton.style.border = 'none';
    customButton.style.borderRadius = '5px';
    customButton.style.cursor = 'pointer';

    // 将按钮和文件选择器添加到页面
    document.body.appendChild(customButton);

    // 为按钮添加点击事件
    customButton.addEventListener('click',async function() {
        try {
            const resourceContent = await fetchLocalFile(url);
            console.log('网络文件文件内容:', resourceContent);
        } catch (error) {
            console.error('加载本地文件失败:', error);
        }
    });

})();

发送接口请求

get和post请求如下

// ==UserScript==
// @name         百度搜索按钮文字和背景更换
// @namespace    https://www.baidu.com/
// @version      1.0.0
// @description  第一个脚本
// @author       萧寂
// @match        https://www.baidu.com/
// @icon         https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png
// @grant        GM_addStyle
// @grant        GM_xmlhttpRequest
// ==/UserScript==

// 使用 GM_addStyle 修改按钮样式
GM_addStyle(`
  .s_btn {
    background-color: black !important;
  }
`);

(function() {
    'use strict';
    // 修改搜索按钮的文本
    document.querySelector('.s_btn').value = '百度两下';

    let flag = false // true发送get请求,false发送post请求

    // 创建一个按钮
    const customButton = document.createElement('button');
    customButton.textContent = '发送请求';
    customButton.style.position = 'fixed';
    customButton.style.top = '10px';
    customButton.style.left = '10px';
    customButton.style.zIndex = '10000';
    customButton.style.padding = '5px 10px';
    customButton.style.fontSize = '14px';
    customButton.style.backgroundColor = 'blue';
    customButton.style.color = 'white';
    customButton.style.border = 'none';
    customButton.style.borderRadius = '5px';
    customButton.style.cursor = 'pointer';

    const get = ()=>{
        GM_xmlhttpRequest({
            method: "GET",
            url: "https://fts.jd.com/area/get?fid=-1",
            onload: function(response) {
                console.log('get请求的结果为',JSON.parse(response.responseText));
            }
        });
    }

    const post = ()=>{
        // post请求参数
        const data = {
            RequestPack: '{"DeviceCode":"smallprogram_MMXY","AuthKey":"","Method":"LoginService.CheckProductCodeFlag","ParamsJson":"{\\"CRMID\\":\\"130183849\\",\\"ProductCode\\":\\"68302990702531225\\"}","Sequence":90339633,"ServiceCode":"LoginService.CheckProductCodeFlag"}'
        };

        // 将参数对象序列化为表单数据
        const formData = new URLSearchParams(data).toString();

        GM_xmlhttpRequest({
            method: "POST",
            url: "https://jifen.yilibabyclub.com/mclubif2/mcswsiapi.asmx/Call", // 目标URL
            headers: {
                "content-type": "application/x-www-form-urlencoded" // 或者 "application/x-www-form-urlencoded" 根据你的需求
            },
            data: formData,
            onload: function(response) {
                console.log("post请求的状态码为:", response.status);
                console.log("post请求到的结果为:", response.responseText);
            },
            onerror: function(error) {
                console.error("post请求失败:", error);
            }
        });
    }

    // 为按钮添加点击事件
    customButton.addEventListener('click', function() {
        if(flag){
            get()
        }else{
            post()
        }
    });
    // 将按钮和文件选择器添加到页面
    document.body.appendChild(customButton);
})();

存储和读取本地数据

// ==UserScript==
// @name         百度搜索按钮文字和背景更换
// @namespace    https://www.baidu.com/
// @version      1.0.0
// @description  第一个脚本
// @author       萧寂
// @match        https://www.baidu.com/
// @icon         https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_deleteValue
// @grant        GM_listValues
// ==/UserScript==

(function() {
    'use strict';
    // 设置存储数据和获取存储数据
    GM_setValue("username", "kimi");
    const username1 = GM_getValue("username");
    // 列出所有本地存储的键
     console.log('本地存储数据所有键为: ',GM_listValues());
    // 删除存储数据
    GM_deleteValue('username')
    const username2 = GM_getValue("username");
    console.log(username1,username2);
})();

读取和存储cookie

// ==UserScript==
// @name         百度搜索按钮文字和背景更换
// @namespace    https://www.baidu.com/
// @homepage     https://jinweizhe.netlify.app/
// @version      1.0.0
// @description  第一个脚本
// @author       萧寂
// @match        https://www.baidu.com/
// @icon         https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png
// @grant        GM_cookie
// ==/UserScript==

// 设置指定域名的cookie
GM_cookie.set({
    url: 'https://www.baidu.com/',
    name: 'test',
    value: '123'
});

// 删除指定域名的指定的cookie
GM_cookie.delete({
    url: 'https://www.baidu.com/',
    name: 'test'
}, function() {
    console.log('Cookie deleted');
});

// 查看当前地址的所有cookie
GM_cookie.list({}, function(cookies) {
    console.log(cookies);
});

脚本打开新网页

// ==UserScript==
// @name         百度搜索按钮文字和背景更换
// @namespace    https://www.baidu.com/
// @version      1.0.0
// @description  第一个脚本
// @author       萧寂
// @match        https://www.baidu.com/
// @icon         https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png
// @grant        GM_openInTab
// ==/UserScript==

(function() {
    'use strict';
    GM_openInTab("https://kimi.moonshot.cn/chat/d0em32s5rbs1r33448i0");
})();

脚本显示通知

// ==UserScript==
// @name         百度搜索按钮文字和背景更换
// @namespace    https://www.baidu.com/
// @version      1.0.0
// @description  第一个脚本
// @author       萧寂
// @match        https://www.baidu.com/
// @icon         https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png
// @grant        GM_notification
// ==/UserScript==

(function() {
    'use strict';
    GM_notification({
        text: "百度网页被篡改猴篡改了",
        title: "来自百度的消息",
        image: "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
        timeout: 5000,
        onclick: function() {
            console.log("Notification clicked");
        }
    });
})();

脚本下载文件

// ==UserScript==
// @name         百度搜索按钮文字和背景更换
// @namespace    https://www.baidu.com/
// @version      1.0.0
// @description  第一个脚本
// @author       萧寂
// @match        https://www.baidu.com/
// @icon         https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png
// @grant        GM_download
// ==/UserScript==

(function() {
    'use strict';
    GM_download({
        url: "https://gitee.com/xiaojisengren/tuchuang/raw/master/test/aaa.txt",
        name: "example.txt",
        saveAs: true
    });
})();

获取当前脚本元数据信息

// ==UserScript==
// @name         百度搜索按钮文字和背景更换
// @namespace    https://www.baidu.com/
// @version      1.0.0
// @description  第一个脚本
// @author       萧寂
// @match        https://www.baidu.com/
// @icon         https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png
// @grant        GM_info
// ==/UserScript==

(function() {
    'use strict';
    const scriptInfo = GM_info.script;
    console.log(scriptInfo)
    console.log(scriptInfo.name);
    console.log(scriptInfo.version);
})();

在Tampermonkey菜单中添加自定义命令

// ==UserScript==
// @name         百度搜索按钮文字和背景更换
// @namespace    https://www.baidu.com/
// @version      1.0.0
// @description  第一个脚本
// @author       萧寂
// @match        https://www.baidu.com/
// @icon         https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png
// @grant        GM_registerMenuCommand
// ==/UserScript==

(function() {
    'use strict';
    GM_registerMenuCommand("My Command", function() {
        alert("Hello, world!");
    });
})();

贴个效果图

将文本复制到剪贴板

// ==UserScript==
// @name         百度搜索按钮文字和背景更换
// @namespace    https://www.baidu.com/
// @version      1.0.0
// @description  第一个脚本
// @author       萧寂
// @match        https://www.baidu.com/
// @icon         https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png
// @grant        GM_setClipboard
// ==/UserScript==

(function() {
    'use strict';
    if (navigator.clipboard) {
        navigator.clipboard.writeText("Hello, world!")
            .then(() => {
            console.log("Copied to clipboard: Hello, world!");
            alert("已复制到剪贴板: Hello, world!");
        })
            .catch(err => {
            console.error("Failed to copy to clipboard", err);
            alert("复制到剪贴板失败");
        });
    } else {
        console.error("Clipboard API not available");
        alert("当前浏览器不支持剪贴板操作");
    }
})();

将日志信息记录到Tampermonkey的控制台

// ==UserScript==
// @name         百度搜索按钮文字和背景更换
// @namespace    https://www.baidu.com/
// @version      1.0.0
// @description  第一个脚本
// @author       萧寂
// @match        https://www.baidu.com/
// @icon         https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png
// @grant        GM_log
// ==/UserScript==

(function() {
    'use strict';
    GM_log("This is a log message");
})();

打印当前网页元信息

// ==UserScript==
// @name         百度搜索按钮文字和背景更换
// @namespace    https://www.baidu.com/
// @version      1.0.0
// @description  第一个脚本
// @author       萧寂
// @match        https://www.baidu.com/
// @icon         https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png
// ==/UserScript==

(function() {
    'use strict';
    console.log(window.location)
})();

发布脚本(别人可搜索和安装)

打开: https://greasyfork.org/zh-CN

• 上面网站打不开的话使用点魔法就行
• 点击右上角登录
• 然后展开更多
• 点击库
• 点击右边我的脚本
• 点击发布你编写的脚本
• 上面编辑框粘贴代码
• 标识记得加@license MIT许可协议
• 下方点击发布即可
• 然后回到首页搜索你脚本的关键词
• 找到后点击进去 - 复制上方网页地址就可以给别人用了
• 对方如果要使用也需要对方浏览器安装篡改猴
• 并且要点击扩展管理页面打开开发者模式，否则脚本注入不了，打开开发者之后要重启篡改猴插件即可使用

油猴网站

油猴中文网: https://bbs.tampermonkey.net.cn/ 油猴教程: https://bbs.tampermonkey.net.cn/thread-184-1-1.html 油猴脚本开发教程: https://learn.scriptcat.org/