快捷導航

油猴腳本零基礎(chǔ)開發(fā)示例（免登錄復制和網(wǎng)頁隨機變顏色）

更新時間：2025年12月06日 14:05:51 作者：NPE~

本文介紹了油猴腳本的概念、安裝過程,以及如何開發(fā)一個免登錄復制CSDN代碼的腳本,作者詳細展示了從安裝Tampermonkey插件,到編寫和修改元注釋,再到實現(xiàn)代碼復制功能的步驟,同時,還提到隨機改變網(wǎng)頁背景顏色的示例腳本

1 介紹與安裝

1.1 介紹

油猴腳本（Tampermonkey scripts）是一種用戶腳本管理器，它允許用戶自定義網(wǎng)頁的行為和外觀。油猴腳本是基于JavaScript編寫的，并通過瀏覽器插件（如Tampermonkey）加載和運行。

油猴腳本的主要概念是在瀏覽器加載網(wǎng)頁時，腳本可以修改網(wǎng)頁的內(nèi)容、樣式和行為，以滿足用戶的需求。這些腳本可以用于自動填寫表單、屏蔽廣告、修改頁面布局、添加自定義功能等。

油猴腳本的應(yīng)用場景非常廣泛。以下是一些常見的應(yīng)用場景：

廣告屏蔽：油猴腳本可以檢測和刪除網(wǎng)頁中的廣告元素，提供更清爽的瀏覽體驗。
網(wǎng)頁定制：油猴腳本可以修改網(wǎng)頁的外觀和布局，使其更符合個人喜好。
自動化操作：油猴腳本可以自動填寫表單、點擊按鈕、執(zhí)行特定的操作，節(jié)省用戶的時間和精力。
數(shù)據(jù)提?。河秃锬_本可以從網(wǎng)頁中提取數(shù)據(jù)，并將其導出到其他應(yīng)用程序或保存到本地文件中。
功能增強：油猴腳本可以添加額外的功能和快捷方式，使網(wǎng)頁更易于使用和導航。

1.2 安裝插件

在Edge瀏覽器中，打開擴展。

搜索并安裝Tampermonkey擴展。

點擊獲取，選擇添加擴展。
啟動該插件

然后點擊任務(wù)欄上插件，進入市場搜索，我們就可以添加下載自己需要的腳本了。

比如，我們需要添加一個免除廣告的腳本，直接在搜索框里輸入免廣告：

然后根據(jù)搜索結(jié)果，安裝對應(yīng)的腳本即可：

請注意，油猴腳本是由第三方開發(fā)者編寫的，因此請確保只安裝來自可信來源的腳本，并仔細閱讀腳本的代碼，以確保其安全性和可靠性。

2 開發(fā)油猴腳本

2.1 點擊插件選擇添加新腳本

2.2 元注釋

根據(jù)自己的腳本修改對應(yīng)元注釋即可，不修改也行，主要是為了介紹腳本。

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

本文自己實現(xiàn)一個免登錄復制csdn的腳本

①將元注釋改為自己的

@match：根據(jù)csdn博客鏈接格式來。

比如：多找?guī)灼猚sdn的博客鏈接，https://blog.csdn.net/weixin_45565886/article/details/132630758?spm=1001.2014.3001.5502，我們就可以發(fā)現(xiàn)共性，都是https://blog.csdn.net/…/article/details/…。因此我們元注釋匹配規(guī)則就為：
https://blog.csdn.net/*/article/details/*

@icon:自己的腳本小圖標，這里我直接根據(jù)網(wǎng)絡(luò)請求搜索的".ico"。（f12打開瀏覽器的開發(fā)者選項，選擇網(wǎng)絡(luò)，篩選.ico，然后刷新網(wǎng)站就可以看到了）然后延用的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腳本邏輯

本質(zhì)是獲取html中所有的code標簽，然后遍歷該標簽，設(shè)置其contentEditable屬性為true，這樣我們就可以在頁面上選中復制了。

(function() {
    'use strict';
    //獲取所有代碼塊
    let codes = document.querySelectorAll("code");
    //循環(huán)遍歷所有代碼塊
    codes.forEach(c => {
        //設(shè)置代碼塊可以編輯
        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");
    //循環(huán)遍歷所有代碼塊
    codes.forEach(c => {
        //設(shè)置代碼塊可以編輯
        c.contentEditable = "true";
    })
})();

④保存發(fā)布并使用

保存好腳本后，點擊啟用。

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

最后可以發(fā)現(xiàn)我們不用登錄也可以成功復制代碼：

注意??：不同瀏覽器可能腳本效果不同。

other：隨機讓網(wǎng)頁變顏色腳本

如果上面的腳本無法實現(xiàn)上述效果，大家可以試試這個新腳本，感受油猴腳本的作用。
下下面的腳本是讓網(wǎng)頁頁面每個幾秒隨機變顏色

// ==UserScript==
// @name         設(shè)置瀏覽器背景顏色為定時變化
// @version      1.0
// @description  設(shè)置瀏覽器背景顏色為定時變化
// @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;
    }

    // 設(shè)置背景顏色
    function setBackgroundColor() {
        document.body.style.backgroundColor = getRandomColor();
    }

    // 定時變化背景顏色
    setInterval(setBackgroundColor, interval);
})();