5分钟开发教你零基础开发属于自己的油猴脚本（网页随机变颜色）

NPE~

6447人浏览 · 2023-09-12 23:47:11

NPE~ · 2023-09-12 23:47:11 发布

5分钟开发属于自己的油猴脚本

1 介绍与安装

1.1 介绍

油猴脚本（Tampermonkey scripts）是一种用户脚本管理器，它允许用户自定义网页的行为和外观。油猴脚本是基于JavaScript编写的，并通过浏览器插件（如Tampermonkey）加载和运行。

油猴脚本的主要概念是在浏览器加载网页时，脚本可以修改网页的内容、样式和行为，以满足用户的需求。这些脚本可以用于自动填写表单、屏蔽广告、修改页面布局、添加自定义功能等。

油猴脚本的应用场景非常广泛。以下是一些常见的应用场景：

广告屏蔽：油猴脚本可以检测和删除网页中的广告元素，提供更清爽的浏览体验。
网页定制：油猴脚本可以修改网页的外观和布局，使其更符合个人喜好。
自动化操作：油猴脚本可以自动填写表单、点击按钮、执行特定的操作，节省用户的时间和精力。
数据提取：油猴脚本可以从网页中提取数据，并将其导出到其他应用程序或保存到本地文件中。
功能增强：油猴脚本可以添加额外的功能和快捷方式，使网页更易于使用和导航。

1.2 安装插件

在Edge浏览器中，打开扩展。

在这里插入图片描述

搜索并安装Tampermonkey扩展。

点击获取，选择添加扩展。
启动该插件

在这里插入图片描述
然后点击任务栏上插件，进入市场搜索，我们就可以添加下载自己需要的脚本了。

比如，我们需要添加一个免除广告的脚本，直接在搜索框里输入免广告：
在这里插入图片描述
然后根据搜索结果，安装对应的脚本即可：

请注意，油猴脚本是由第三方开发者编写的，因此请确保只安装来自可信来源的脚本，并仔细阅读脚本的代码，以确保其安全性和可靠性。

2 开发油猴脚本

2.1 点击插件选择添加新脚本

在这里插入图片描述

2.2 元注释

根据自己的脚本修改对应元注释即可，不修改也行，主要是为了介绍脚本。

// ==UserScript==
// @name         免登录复制csdn代码
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  copy csdn code
// @author       ziyi
// @match        https://editor.csdn.net/md?not_checkout=1&spm=1001.2014.3001.5352&articleId=132842495
// @icon         https://www.google.com/s2/favicons?sz=64&domain=csdn.net
// @grant        none
// ==/UserScript==

在这里插入图片描述

2.3 编写脚本：修改元注释及js

本文自己实现一个免登录复制csdn的脚本

①将元注释改为自己的

@match：根据csdn博客链接格式来。

比如：多找几篇csdn的博客链接，https://blog.csdn.net/weixin_45565886/article/details/132630758?spm=1001.2014.3001.5502，我们就可以发现共性，都是https://blog.csdn.net/…/article/details/…。因此我们元注释匹配规则就为：
https://blog.csdn.net/*/article/details/*

@icon:自己的脚本小图标，这里我直接根据网络请求搜索的".ico"。（f12打开浏览器的开发者选项，选择网络，筛选.ico，然后刷新网站就可以看到了）然后延用的csdn自己的图标链接地址： https://g.csdnimg.cn/static/logo/favicon32.ico

// ==UserScript==
// @name         CSDN免登录复制
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  不用登录CSDN就可以复制代码
// @author       ziyi
// @match        https://blog.csdn.net/*/article/details/*
// @icon         https://g.csdnimg.cn/static/logo/favicon32.ico
// @grant        none
// ==/UserScript==

②编写js脚本逻辑

本质是获取html中所有的code标签，然后遍历该标签，设置其contentEditable属性为true，这样我们就可以在页面上选中复制了。

(function() {
    'use strict';
    //获取所有代码块
    let codes = document.querySelectorAll("code");
    //循环遍历所有代码块
    codes.forEach(c => {
        //设置代码块可以编辑
        c.contentEditable = "true";
    })
})();

③全部脚本

// ==UserScript==
// @name         CSDN免登录复制
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  不用登录CSDN就可以复制代码
// @author       ziyi
// @match        https://blog.csdn.net/*/article/details/*
// @icon         https://g.csdnimg.cn/static/logo/favicon32.ico
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    //获取所有代码块
    let codes = document.querySelectorAll("code");
    //循环遍历所有代码块
    codes.forEach(c => {
        //设置代码块可以编辑
        c.contentEditable = "true";
    })
})();

④保存发布并使用

在这里插入图片描述
保存好脚本后，点击启用。

然后打开一篇csdn文章，查看脚本是否生效：

在这里插入图片描述

最后可以发现我们不用登录也可以成功复制代码：

注意📢：不同浏览器可能脚本效果不同。

other：随机让网页变颜色脚本

如果上面的脚本无法实现上述效果，大家可以试试这个新脚本，感受油猴脚本的作用。
下下面的脚本是让网页页面每个几秒随机变颜色

// ==UserScript==
// @name         设置浏览器背景颜色为定时变化
// @version      1.0
// @description  设置浏览器背景颜色为定时变化
// @author       ziyi
// @match        *://*/*
// ==/UserScript==

(function() {
    'use strict';

    // 定时器间隔时间（单位：毫秒）
    const interval = 5000;

    // 随机生成颜色
    function getRandomColor() {
        const letters = '0123456789ABCDEF';
        let color = '#';
        for (let i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }

    // 设置背景颜色
    function setBackgroundColor() {
        document.body.style.backgroundColor = getRandomColor();
    }

    // 定时变化背景颜色
    setInterval(setBackgroundColor, interval);
})();