1 介紹與安裝

1.1 介紹

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

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

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

1. 廣告屏蔽：油猴腳本可以檢測(cè)和刪除網(wǎng)頁(yè)中的廣告元素，提供更清爽的瀏覽體驗(yàn)。

2. 網(wǎng)頁(yè)定制：油猴腳本可以修改網(wǎng)頁(yè)的外觀和布局，使其更符合個(gè)人喜好。

3. 自動(dòng)化操作：油猴腳本可以自動(dòng)填寫表單、點(diǎn)擊按鈕、執(zhí)行特定的操作，節(jié)省用戶的時(shí)間和精力。

4. 數(shù)據(jù)提?。河秃锬_本可以從網(wǎng)頁(yè)中提取數(shù)據(jù)，并將其導(dǎo)出到其他應(yīng)用程序或保存到本地文件中。

5. 功能增強(qiáng)：油猴腳本可以添加額外的功能和快捷方式，使網(wǎng)頁(yè)更易于使用和導(dǎo)航。

1.2 安裝插件

1. 在Edge瀏覽器中，打開(kāi)擴(kuò)展。

3. 搜索并安裝Tampermonkey擴(kuò)展。
   
   點(diǎn)擊獲取，選擇添加擴(kuò)展。

4. 啟動(dòng)該插件

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

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

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

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

2 開(kāi)發(fā)油猴腳本

2.1 點(diǎn)擊插件選擇添加新腳本

2.2 元注釋

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

// ==UserScript==
// @name         免登錄復(fù)制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

本文自己實(shí)現(xiàn)一個(gè)免登錄復(fù)制csdn的腳本

①將元注釋改為自己的

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

• 比如：多找?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/…。因此我們?cè)⑨屍ヅ湟?guī)則就為：
  https://blog.csdn.net/*/article/details/*

@icon:自己的腳本小圖標(biāo)，這里我直接根據(jù)網(wǎng)絡(luò)請(qǐng)求搜索的".ico"。（f12打開(kāi)瀏覽器的開(kāi)發(fā)者選項(xiàng)，選擇網(wǎng)絡(luò)，篩選.ico，然后刷新網(wǎng)站就可以看到了）然后延用的csdn自己的圖標(biāo)鏈接地址： https://g.csdnimg.cn/static/logo/favicon32.ico

// ==UserScript==
// @name         CSDN免登錄復(fù)制
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  不用登錄CSDN就可以復(fù)制代碼
// @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標(biāo)簽，然后遍歷該標(biāo)簽，設(shè)置其contentEditable屬性為true，這樣我們就可以在頁(yè)面上選中復(fù)制了。

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

③全部腳本

// ==UserScript==
// @name         CSDN免登錄復(fù)制
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  不用登錄CSDN就可以復(fù)制代碼
// @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ā)布并使用

保存好腳本后，點(diǎn)擊啟用。

然后打開(kāi)一篇csdn文章，查看腳本是否生效：

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

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

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

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

// ==UserScript==
// @name         設(shè)置瀏覽器背景顏色為定時(shí)變化
// @version      1.0
// @description  設(shè)置瀏覽器背景顏色為定時(shí)變化
// @author       ziyi
// @match        *://*/*
// ==/UserScript==

(function() {
    'use strict';

    // 定時(shí)器間隔時(shí)間（單位：毫秒）
    const interval = 5000;

    // 隨機(jī)生成顏色
    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();
    }

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

到此這篇關(guān)于油猴腳本零基礎(chǔ)開(kāi)發(fā)示例（免登錄復(fù)制和網(wǎng)頁(yè)隨機(jī)變顏色）的文章就介紹到這了,更多相關(guān)油猴腳本零基礎(chǔ)開(kāi)發(fā)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論