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

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

1 介绍与安装

1.1 介绍

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

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

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

  1. 广告屏蔽:油猴脚本可以检测和删除网页中的广告元素,提供更清爽的浏览体验。

  2. 网页定制:油猴脚本可以修改网页的外观和布局,使其更符合个人喜好。

  3. 自动化操作:油猴脚本可以自动填写表单、点击按钮、执行特定的操作,节省用户的时间和精力。

  4. 数据提取:油猴脚本可以从网页中提取数据,并将其导出到其他应用程序或保存到本地文件中。

  5. 功能增强:油猴脚本可以添加额外的功能和快捷方式,使网页更易于使用和导航。

1.2 安装插件

  1. 在Edge浏览器中,打开扩展。

5分钟开发教你零基础开发属于自己的油猴脚本(网页随机变颜色)_第1张图片

  1. 搜索并安装Tampermonkey扩展。
    5分钟开发教你零基础开发属于自己的油猴脚本(网页随机变颜色)_第2张图片
    点击获取,选择添加扩展。

  2. 启动该插件

在这里插入图片描述
然后点击任务栏上插件,进入市场搜索,我们就可以添加下载自己需要的脚本了。
5分钟开发教你零基础开发属于自己的油猴脚本(网页随机变颜色)_第3张图片

比如,我们需要添加一个免除广告的脚本,直接在搜索框里输入免广告:
5分钟开发教你零基础开发属于自己的油猴脚本(网页随机变颜色)_第4张图片
然后根据搜索结果,安装对应的脚本即可:
5分钟开发教你零基础开发属于自己的油猴脚本(网页随机变颜色)_第5张图片

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

2 开发油猴脚本

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

5分钟开发教你零基础开发属于自己的油猴脚本(网页随机变颜色)_第6张图片

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==

5分钟开发教你零基础开发属于自己的油猴脚本(网页随机变颜色)_第7张图片

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";
    })
})();
④保存发布并使用

5分钟开发教你零基础开发属于自己的油猴脚本(网页随机变颜色)_第8张图片
保存好脚本后,点击启用。
5分钟开发教你零基础开发属于自己的油猴脚本(网页随机变颜色)_第9张图片

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

5分钟开发教你零基础开发属于自己的油猴脚本(网页随机变颜色)_第10张图片

最后可以发现我们不用登录也可以成功复制代码:
5分钟开发教你零基础开发属于自己的油猴脚本(网页随机变颜色)_第11张图片

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

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);
})();


5分钟开发教你零基础开发属于自己的油猴脚本(网页随机变颜色)_第12张图片

你可能感兴趣的:(demo,脚本,js,油猴脚本,开发,个人开发)