油猴介绍

油猴（Tampermonkey）是一款非常流行的浏览器扩展程序，它允许用户在网页上运行自定义的JavaScript程序，这些程序被称为“用户脚本”或“油猴脚本”。以下是对油猴的详细介绍：

一、主要功能

1. 脚本管理：油猴插件是一个脚本管理工具，用户可以通过它搜索、安装、管理各种用户脚本。这些脚本能够改变网站的行为和外观，增强或添加新的功能。
2. 广告拦截：油猴脚本可以轻松过滤网络广告，让浏览环境更清爽。
3. 网页增强：通过安装相应的脚本，用户可以添加实用功能，例如下载器、自动填写表单和自定义主题等。
4. 社交媒体优化：油猴脚本能够提升社交媒体体验，例如群组管理、自动点赞和内容过滤等。
5. 隐私保护：一些油猴脚本还可以保护用户的在线隐私，例如跟踪器拦截和cookie管理。
6. 数据转换：用户可以将网页数据转换为不同格式，例如csv、json和xml等。

二、特色功能（以手机版为例）

1. 日期倒数：可以将重要节日添加到产品中，清楚地看到距离该日期还有多长时间。
2. 打卡签到：可以有效地提高用户的自律性。
3. 护眼功能：浏览网页时开启该功能，可以改变网页背景色为豆沙绿，有效减少白色背景对用户眼睛的刺激。
4. 界面简洁：产品没有弹窗广告、信息流等，基本不会打扰用户，回归浏览本身。
5. UI设计：符合大众审美，且会持续优化更新。

三、兼容性

油猴支持多种浏览器，包括Chrome、Firefox、Edge、Safari等。用户可以根据自己的需求选择适合自己浏览器的版本进行安装和使用。

四、使用教程

1. 安装插件：打开Tampermonkey官网，安装对应版本的插件。安装好后自动启用，扩展区域会出现相应扩展图标。
2. 安装脚本：打开Greasyfork，搜索需要的脚本，输入大致名称或用途即可。进入安装页面，点击“安装此脚本”->“安装”，完成脚本安装。脚本安装完成后，只会在有效的网站上自动启用。
3. 管理脚本：在浏览器扩展栏可以快捷查看和管理脚本。进入“管理面板”可以管理已安装的脚本，包括开关、更新、编辑、删除等操作。也可以添加自己编写的脚本。

自己写一个

百度一下改为百度两三下

// ==UserScript==
// @name         百度两下
// @namespace    http://tampermonkey.net/
// @version      2024-12-01
// @description  百度两三下
// @author       happyfe呀
// @match        https://www.baidu.com/*
// @match        https://www.hao123.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=baidu.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    var baidu=document.getElementById("su");
    var baidu2=document.getElementsByClassName("button-hook s_btn")[0]
    if(!!baidu2){
        baidu2.value="百度三下"
    }
    if(!!baidu){
        baidu.value="百度两下"
        baidu.style.background="pink"
       // baidu.style.display="none"
    }


})();

油猴脚本（Tampermonkey Scripts）中的元注释（Meta Block）是一种特殊的注释，它位于脚本的开头部分，用于定义脚本的一些元数据和设置。这些元数据包括脚本的名称、版本、描述、作者、许可证、匹配网址等信息。元注释对于油猴插件来说非常重要，因为它决定了脚本的行为和适用范围。

• @name：脚本的名称。
• @namespace：脚本的命名空间，通常使用油猴的官方命名空间。
• @version：脚本的版本号。
• @description：脚本的描述，简要说明脚本的功能和用途。
• @author：脚本的作者。
• @match：指定脚本适用的网址模式，使用通配符（*）来匹配多个网址。
• @grant：指定脚本需要的油猴API权限，none表示不需要任何特殊权限。
• @license：脚本的许可证类型，常见的许可证类型包括MIT、GPL等。

元注释中的这些指令对于油猴插件来说非常重要，它们决定了脚本如何被识别、加载和执行。例如，@match指令告诉油猴插件哪些网页应该加载和执行这个脚本，而@grant指令则告诉油猴插件这个脚本需要哪些API权限。

请注意，元注释必须位于脚本的最开头部分，并且紧跟在// ==UserScript==和// ==/UserScript==之间。如果元注释的格式不正确或位置不正确，油猴插件可能无法正确识别和执行脚本。

CSDN免登录复制

// ==UserScript==
// @name         CSDN免登录代码复制
// @namespace    http://tampermonkey.net/
// @version      2024-11-30
// @description  CSDN免登录代码复制，啦啦啦
// @author       happyfe呀
// @match        https://blog.csdn.net/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    function addCss(code, id) {
        const style = document.createElement("style");
        const css = document.createTextNode(code);
        style.setAttribute("data-id", id || "codebox-css");
        style.appendChild(css);
        document.head.appendChild(style);
    }

    function copyCodeCssFunc() {
        const css = `
    #content_views pre,
    #content_views pre code {
      -webkit-touch-callout: auto !important;
      -webkit-user-select: auto !important;
      -khtml-user-select: auto !important;
      -moz-user-select: auto !important;
      -ms-user-select: auto !important;
      user-select: auto !important;
    }`;
    addCss(css);
}

    function copyCodeFunc() {
        copyCodeCssFunc()
        // 内容区开启复制
        var content_views = document.querySelector("#content_views")
        content_views.replaceWith(content_views.cloneNode(true))

        // 功能一： 修改复制按钮，支持一键复制
        const buttons = document.querySelectorAll(".hljs-button")

        buttons.forEach((btn) => {
            // 更改标题
            btn.dataset.title = "复制"

            // 移除点击事件
            btn.setAttribute("onclick", "")

            // 克隆按钮
            var elClone = btn.cloneNode(true)

            // 替回按钮
            btn.parentNode.replaceChild(elClone, btn)

            // 重新添加点击事件
            elClone.addEventListener("click", (e) => {
                // 实现复制
                const target = e.target
                const parentPreBlock = target.closest("pre")
                const codeBlock = parentPreBlock.querySelector("code")

                navigator.clipboard.writeText(codeBlock.innerText)
                console.log(codeBlock.innerText);

                target.dataset.title = "复制成功"
                setTimeout(() => {
                    target.dataset.title = "复制"
                }, 1000)
                e.stopPropagation()
                e.preventDefault()
            })
        })
    }

    copyCodeFunc()

})();

京东自动申请价保

// ==UserScript==
// @name         京东
// @namespace    http://tampermonkey.net/
// @version      2024-12-07
// @description  try to take over the world!
// @author       happyfe呀
// @match        https://pcsitepp-fm.jd.com/
// @icon         https://www.google.com/s2/favicons?sz=64&domain=jd.com
// @grant        none
//@require       https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js
// ==/UserScript==

(function () {
  "use strict";

  $(function () {
    console.log("jquery 加载完成");
    setInterval(function () {
      $(".co-th").each(function () {
        var aBtn = $(this).find(".btn").find("a");
        var text = aBtn.text().trim();
        if (text == "申请价保") {
          aBtn.click();
        }
      });
      window.location.reload();
    }, 10 * 60 * 1000);
  });
})();

fetch发送网络请求

// ==UserScript==
// @name         获取B站关注数
// @namespace    http://tampermonkey.net/
// @version      2024-12-07
// @description  try to take over the world!
// @author       You
// @match        https://space.bilibili.com/371312151
// @icon         https://www.google.com/s2/favicons?sz=64&domain=bilibili.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    async function getFollowingCount(vmid) {
        const url = `https://api.bilibili.com/x/relation/stat?vmid=${vmid}`;
        try {
            const response = await fetch(url);
            if (!response.ok) {
                throw new Error(`HTTP error! Status: ${response.status}`);
            }
            const data = await response.json();
            if (data.code === 0) {
                return data.data;
            } else {
                throw new Error(`API error! Message: ${data.message}`);
            }
        } catch (error) {
            console.error('Error fetching following count:', error);
            return null;
        }
    }

    const vmid = 371312151; // 替换为实际的用户UID
    getFollowingCount(vmid).then(data => {
        if (data !== null) {
            console.log(`用户 ${vmid} 的粉丝数为: ${data.follower}`);
            console.log(`用户 ${vmid} 的关注数为: ${data.following}`);
        }
    });
})();

jquery ajax发送网络请求

// ==UserScript==
// @name         获取B站关注数
// @namespace    http://tampermonkey.net/
// @version      2024-12-07
// @description  try to take over the world!
// @author       You
// @match        https://space.bilibili.com/371312151
// @icon         https://www.google.com/s2/favicons?sz=64&domain=bilibili.com
// @grant        none
//  @require     https://code.jquery.com/jquery-3.7.1.min.js
// ==/UserScript==

(function() {
    'use strict';

    function getFollowingCount(vmid) {
        const url = `https://api.bilibili.com/x/relation/stat?vmid=${vmid}`;
        $.ajax({
            url: url,
            method: 'GET',
            dataType: 'json',
            success: function(data) {
                if (data.code === 0) {
                    console.log(`用户 ${vmid} 的粉丝数为啦啦啦: ${data.data.follower}`);
                    console.log(`用户 ${vmid} 的关注数为啦啦啦: ${data.data.following}`);
                } else {
                    console.error(`API error! Message: ${data.message}`);
                }
            },
            error: function(xhr, status, error) {
                console.error('Error fetching following count:', error);
            }
        });
    }

    const vmid = 371312151; // 替换为实际的用户UID
    getFollowingCount(vmid);
})();

GM_xmlhttpRequest 解决跨域

// ==UserScript==
// @name         获取B站关注数
// @namespace    http://tampermonkey.net/
// @version      2024-12-07
// @description  try to take over the world!
// @author       You
// @match        https://www.happyfe.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=bilibili.com
// @grant        GM_xmlhttpRequest
// ==/UserScript==

(function () {
  "use strict";

  function getFollowingCount(vmid) {
    const url = `https://api.bilibili.com/x/relation/stat?vmid=${vmid}`;
    GM_xmlhttpRequest({
      method: "GET",
      url: url,
      responseType: "json",
      onload: function (response) {
        if (response.status >= 200 && response.status < 300) {
          const data = response.response;
          if (data.code === 0) {
            console.log(
              `用户 ${vmid} 的粉丝数happyfe为: ${data.data.follower}`
            );
            var span = document.createElement("span");
            span.innerText = `B站粉丝数: ${data.data.follower}`;
            document.querySelector(".clip").appendChild(span);
            console.log(
              `用户 ${vmid} 的关注数happyfe为: ${data.data.following}`
            );
          } else {
            console.error(`API error! Message: ${data.message}`);
          }
        } else {
          console.error(`HTTP error! Status: ${response.status}`);
        }
      },
      onerror: function (error) {
        console.error("Error fetching following count:", error);
      },
    });
  }

  const vmid = 371312151; // 替换为实际的用户UID
  getFollowingCount(vmid);
})();

fetch 网络请求拦截

//index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
     我运行了
    <div id="json"></div>
  </body>
  <script src="test.js"></script>
</html>

//test.js
fetch("http://localhost:3002/api/query")
  .then((response) => response.json())
  .then((res) => {
    console.log(res);
    const dom = document.getElementById("json");
    dom.innerText = res.data;
  });

// server.js
const Koa = require("koa");
const Router = require("koa-router");
const cors = require("koa-cors");

const app = new Koa();
const router = new Router();

// 跨域
app.use(async (ctx, next) => {
  ctx.set("Access-Control-Allow-Origin", "http://127.0.0.1:5500");
  ctx.set(
    "Access-Control-Allow-Headers",
    "Content-Type, Content-Length, Authorization, Accept, X-Requested-With"
  );
  ctx.set("Access-Control-Allow-Methods", "PUT, POST, GET, DELETE, OPTIONS");
  if (ctx.method === "OPTIONS") {
    ctx.body = 200;
  } else {
    await next();
  }
});

router.get("/api/query", async (ctx) => {
  ctx.body = {
    data: [1, 2, 3, 4],
    code: 0,
    msg: "成功",
  };
});

// 使用路由中间件
app.use(router.routes());

// 启动服务器
app.listen(3002, () => {
  console.log("Server is running on http://localhost:3002");
});

// ==UserScript==
// @name         fetch 拦截
// @namespace    http://tampermonkey.net/
// @version      2024-12-08
// @description  try to take over the world!
// @author       You
// @match        http://127.0.0.1:5500/index.html
// @icon         https://www.google.com/s2/favicons?sz=64&domain=0.1
// @grant unsafeWindow
// @run-at       document-start
// ==/UserScript==

(function () {
  console.log(window.unsafeWindow);
    const originFetch = fetch;
    console.log(originFetch);
    window.unsafeWindow.fetch = (url, options) => {
      return originFetch(url, options).then(async (response) => {
        console.log(url);
        if (url === "http://localhost:3002/api/query") {
          const responseClone = response.clone();
          let res = await responseClone.json();
          res.data.push("油猴脚本修改数据happyfe");
          const responseNew = new Response(JSON.stringify(res), response);
          return responseNew;
        } else {
          return response;
        }
      });
    };


})();

xhr 网络请求拦截

//test.js
setTimeout(() => {
  const xhr = new XMLHttpRequest();
  xhr.open("GET", "http://localhost:3002/api/query");
  xhr.send();
  xhr.onload = function () {
    const res = JSON.parse(this.responseText);
    console.log(res,777)
    const dom = document.getElementById("json");
    dom.innerText = res.data;
  };
}, 0);

// ==UserScript==
// @name        xhr 拦截
// @namespace    http://tampermonkey.net/
// @version      2024-12-08
// @description  try to take over the world!
// @author       You
// @match        http://127.0.0.1:5500/index.html
// @icon         https://www.google.com/s2/favicons?sz=64&domain=0.1
// @grant        none
// @run-at document-start
// ==/UserScript==

(function () {
  "use strict";

  const originOpen = XMLHttpRequest.prototype.open;
  XMLHttpRequest.prototype.open = function (_, url) {
    if (url === "http://localhost:3002/api/query") {
      const xhr = this;
      const getter = Object.getOwnPropertyDescriptor(
        XMLHttpRequest.prototype,
        "response"
      ).get;
      Object.defineProperty(xhr, "responseText", {
        get: () => {
          let result = getter.call(xhr);
          try {
            const res = JSON.parse(result);
            res.data.push("油猴脚本修改数据888888");
            return JSON.stringify(res);
          } catch (e) {
            return result;
          }
        },
      });
    }
    originOpen.apply(this, arguments);
  };

  //写法2
  // const originOpen = XMLHttpRequest.prototype.open;
  // XMLHttpRequest.prototype.open = function (_, url) {
  //   if (url === "http://localhost:3002/api/query") {
  //     this.addEventListener("readystatechange", function () {
  //       if (this.readyState === 4) {
  //         const res = JSON.parse(this.responseText);
  //         // 当前 xhr 对象上定义 responseText
  //         Object.defineProperty(this, "responseText", {
  //           writable: true,
  //         });
  //         res.data.push("油猴脚本修改数据");
  //         this.responseText = JSON.stringify(res);
  //       }
  //     });
  //   }

  //   originOpen.apply(this, arguments);
  // };


})();

QQ学习交流群

• 群号：1005894762
• 群名：happyfe呀的学习交流群
• 进群口令: happyfe呀
• 群二维码: