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

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

引用

CSDN

1.

https://blog.csdn.net/weixin_45565886/article/details/132842495

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

1 介绍与安装

1.1 介绍

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

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

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

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

1.2 安装插件

1. 在Edge浏览器中，打开扩展。
2. 搜索并安装Tampermonkey扩展。
3. 启动该插件
4. 进入市场搜索，可以添加下载自己需要的脚本。

比如，我们需要添加一个免除广告的脚本，直接在搜索框里输入免广告：

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

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代码的脚本：

1. 将元注释改为自己的

• @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：自己的脚本小图标，这里直接使用CSDN的图标链接地址：

  https://g.csdnimg.cn/static/logo/favicon32.ico
  

2. 编写JavaScript脚本逻辑
   本质是获取HTML中所有的code标签，然后遍历该标签，设置其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";
    })
})();

3. 保存发布并使用
   保存好脚本后，点击启用。然后打开一篇CSDN文章，查看脚本是否生效：

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

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

其他示例：随机让网页变颜色脚本

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

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