油猴腳本零基礎(chǔ)開發(fā)示例(免登錄復(fù)制和網(wǎng)頁隨機(jī)變顏色)
1 介紹與安裝
1.1 介紹
油猴腳本(Tampermonkey scripts)是一種用戶腳本管理器,它允許用戶自定義網(wǎng)頁的行為和外觀。油猴腳本是基于JavaScript編寫的,并通過瀏覽器插件(如Tampermonkey)加載和運(yùn)行。
油猴腳本的主要概念是在瀏覽器加載網(wǎng)頁時(shí),腳本可以修改網(wǎng)頁的內(nèi)容、樣式和行為,以滿足用戶的需求。這些腳本可以用于自動(dòng)填寫表單、屏蔽廣告、修改頁面布局、添加自定義功能等。
油猴腳本的應(yīng)用場景非常廣泛。以下是一些常見的應(yīng)用場景:
廣告屏蔽:油猴腳本可以檢測和刪除網(wǎng)頁中的廣告元素,提供更清爽的瀏覽體驗(yàn)。
網(wǎng)頁定制:油猴腳本可以修改網(wǎng)頁的外觀和布局,使其更符合個(gè)人喜好。
自動(dòng)化操作:油猴腳本可以自動(dòng)填寫表單、點(diǎn)擊按鈕、執(zhí)行特定的操作,節(jié)省用戶的時(shí)間和精力。
數(shù)據(jù)提?。河秃锬_本可以從網(wǎng)頁中提取數(shù)據(jù),并將其導(dǎo)出到其他應(yīng)用程序或保存到本地文件中。
功能增強(qiáng):油猴腳本可以添加額外的功能和快捷方式,使網(wǎng)頁更易于使用和導(dǎo)航。
1.2 安裝插件
- 在Edge瀏覽器中,打開擴(kuò)展。

搜索并安裝Tampermonkey擴(kuò)展。

點(diǎn)擊獲取,選擇添加擴(kuò)展。啟動(dòng)該插件

然后點(diǎn)擊任務(wù)欄上插件,進(jìn)入市場搜索,我們就可以添加下載自己需要的腳本了。
比如,我們需要添加一個(gè)免除廣告的腳本,直接在搜索框里輸入免廣告:
然后根據(jù)搜索結(jié)果,安裝對(duì)應(yīng)的腳本即可:
請(qǐng)注意,油猴腳本是由第三方開發(fā)者編寫的,因此請(qǐng)確保只安裝來自可信來源的腳本,并仔細(xì)閱讀腳本的代碼,以確保其安全性和可靠性。
2 開發(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博客鏈接格式來。
- 比如:多找?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打開瀏覽器的開發(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,這樣我們就可以在頁面上選中復(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)擊啟用。
然后打開一篇csdn文章,查看腳本是否生效:

最后可以發(fā)現(xiàn)我們不用登錄也可以成功復(fù)制代碼:
注意??:不同瀏覽器可能腳本效果不同。
other:隨機(jī)讓網(wǎng)頁變顏色腳本
如果上面的腳本無法實(shí)現(xiàn)上述效果,大家可以試試這個(gè)新腳本,感受油猴腳本的作用。
下下面的腳本是讓網(wǎng)頁頁面每個(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ǔ)開發(fā)示例(免登錄復(fù)制和網(wǎng)頁隨機(jī)變顏色)的文章就介紹到這了,更多相關(guān)油猴腳本零基礎(chǔ)開發(fā)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript一個(gè)無懈可擊的實(shí)例化XMLHttpRequest的方法
由于IE新舊版本以及與其他瀏覽器在ajax技術(shù)上的不同,往往需要對(duì)不同的瀏覽器做不同的處理,除了笨拙的瀏覽器嗅探技術(shù),大約也就是對(duì)象檢測技術(shù)可用了。2010-10-10
js倒計(jì)時(shí)簡單實(shí)現(xiàn)方法
這篇文章主要介紹了js倒計(jì)時(shí)簡單實(shí)現(xiàn)方法,方便一些提示重要日期的來臨,感興趣的小伙伴們可以參考一下2015-12-12
ES6初步了解原始數(shù)據(jù)類型Symbol的用法
ES6中為我們新增了一個(gè)原始數(shù)據(jù)類型Symbol,大家是否知道Symbol可以作用在哪?用來定義對(duì)象的私有變量如何寫入對(duì)象,本文對(duì)ES6 Symbol的用法介紹的非常詳細(xì),需要的朋友參考下吧2023-10-10
微信小程序?qū)崿F(xiàn)頁面分享onShareAppMessage
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)頁面分享onShareAppMessage,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
JavaScript之移動(dòng)端H5生成圖片解決方案講解
這篇文章主要介紹了JavaScript之移動(dòng)端H5生成圖片解決方案講解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-08-08
javascript createAdder函數(shù)功能與使用說明
createAdder(x)是一個(gè)函數(shù),返回一個(gè)函數(shù)。在JavaScript中,函數(shù)是第一類對(duì)象:另外它們可以被傳遞到其他函數(shù)作為參數(shù)和函數(shù)返回。在這種情況下,函數(shù)返回本身就是一個(gè)函數(shù)接受一個(gè)參數(shù),并增加了一些東西。2010-06-06

