準備工作

簡介

Tampermonkey 是一款強大的瀏覽器擴展，它允許您定制網(wǎng)頁的行為，改變和優(yōu)化網(wǎng)頁的展示方式或者功能以滿足個人需求。通過編寫自定義腳本，您可以實現(xiàn)許多有趣的功能，從自動化任務(wù)到改進網(wǎng)頁界面，一切盡在掌握。
腳本一般指用戶腳本(User Script)，他是一段 Javascript 代碼，它們能夠優(yōu)化您的網(wǎng)頁瀏覽體驗。

安裝

首先，確保您已安裝了 Tampermonkey 擴展。
油猴官方下載地址：http://www.tampermonkey.net/

油猴腳本網(wǎng)站：https://greasyfork.org/zh-CN/scripts

油猴支持的瀏覽器有 Chrome, Microsoft Edge, Safari, Opera Next, Firefox,和 UC 瀏覽器等等，各大主流瀏覽器幾乎都支持了。

腳本編寫和使用

新建腳本

點擊 Tampermonkey 圖標，然后選擇 "添加新腳本"。
這將打開一個編輯器，您可以在其中編寫腳本代碼。

跳轉(zhuǎn)到編寫代碼界面：

常見用戶腳本標題

屬性名	作用
name	油猴腳本的名字
namespace	命名空間，用來區(qū)分相同名稱的腳本，一般寫成作者名字或者網(wǎng)址就可以了
version	腳本的版本號
icon	可以指定腳本的圖標，顯示在腳本管理器中
description	描述，用來告訴用戶這個腳本是干什么用的
author	作者名字
match	這是一個數(shù)組，包含了腳本要運行的網(wǎng)頁地址。可以使用通配符和正則表達式
exclude	與match屬性相反，指定腳本不應運行的網(wǎng)頁地址
grant	用于指定腳本需要的特定瀏覽器權(quán)限，如GM_addStyle、GM_xmlhttpRequest等
require	如果腳本依賴其他js庫的話，可以使用require指令，在運行腳本之前先加載其他庫，常見用法是加載jquery
resource	用于定義腳本所需的外部資源，如CSS文件、圖片等
connect	當用戶使用GM_xmlhttpRequest請求遠程數(shù)據(jù)的時候，需要使用connect指定允許訪問的域名，支持域名、子域名、IP地址以及*通配符

常見API介紹

Tampermonkey 提供了一系列常用的 API，使您能夠與頁面交互和修改其行為。以下是一些常見的 Tampermonkey API：

權(quán)限名	功能
GM_setValue(name,defaultValue)，GM_getValue(name,value)	用于在瀏覽器中存儲和獲取用戶腳本的數(shù)據(jù)。這可以用于保存設(shè)置或其他信息。
GM_xmlhttpRequest(details)	允許用戶腳本進行XMLHttpRequest請求，以便與遠程服務(wù)器進行通信，獲取數(shù)據(jù)等。
GM_setClipboard(data, info)	用于將文本復制到剪貼板，使用戶腳本可以方便地與剪貼板交互。
GM_log(message)	用于在控制臺中輸出調(diào)試信息，方便腳本調(diào)試，可以使用F12開發(fā)者工具查看。
GM_addStyle(css)	像網(wǎng)頁中添加自定義css，修改網(wǎng)頁外觀。
GM_notification(details, ondone), GM_notification(text, title, image, onclick)	設(shè)置網(wǎng)頁通知，請參考文檔獲取用法。
GM_openInTab(url, loadInBackground)	允許在新標簽頁中打開指定的URL。
GM_registerMenuCommand(name, callback, options_or_accessKey)	允許用戶腳本在瀏覽器中向用戶腳本的菜單中添加一個新條目，并指定在選擇菜單項時要調(diào)用的函數(shù)。

詳情請查看油猴腳本文檔。

實現(xiàn)CSDN 免登錄復制

為了更好地理解腳本的工作原理，我們以一個實際示例來說明如何編寫一個腳本。下面是一個用于允許用戶在 CSDN 網(wǎng)站上免登錄復制代碼的腳本示例：
`
// UserScript
// @name CSDN 免登錄復制
// @version 1.0
// @icon https://blog.csdn.net/favicon.ico
// @description CSDN 免登錄復制，凈化頁面
// @match ??/.csdn.net/*
// @grant GM_addStyle
// /UserScript

(function () {
"use strict";

// 添加樣式以隱藏特定元素
GM_addStyle(`
/* 選擇了所有

 和  元素，并設(shè)置它們的 user-select 屬性為 auto

// 這個規(guī)則的效果是允許用戶可以復制這些元素中的文本內(nèi)容*/

pre,

code {

user-select: auto !important;

}

/* 這一部分選擇了一系列元素，并將它們的 display 屬性設(shè)置為 none !important。

這個規(guī)則的效果是隱藏了頁面上這些元素，以實現(xiàn)頁面去除廣告的目的。*/

#blogExtensionBox,

.hide-article-box,

.insert-baidu-box,

.signin,

.wwads-horizontal,

.wwads-vertical,

.blog-top-banner,

.blog_container_aside,

.programmer1Box,

.recommend-box,

.recommend-nps-box,

.template-box,

.hide-preCode-box {

display: none !important;

}
/* 將頁面主要內(nèi)容區(qū)域的寬度設(shè)置為100% */
main {
  width: 100% !important;
}

/* 這個規(guī)則的效果是將頁面中的某些元素的高度設(shè)置為自動，為了確保這些元素的內(nèi)容可以根據(jù)需要進行展開。*/
#article_content,
main div.blog-content-box pre.set-code-hide {
  height: auto !important;
}

`);
// 移除登錄限制類名
let buttons = document.querySelectorAll(".hljs-button");
buttons.forEach(button => {
	button.classList.remove("signin");
  button.setAttribute("data-title", "免登錄復制");
  });

 // 添加點擊事件以防止剪貼板劫持
  let codeElements = document.querySelectorAll("code");
	codeElements.forEach(code => {
	code.setAttribute("onclick", "mdcp.copyCode(event)");
 });

})();

`
腳本注入頁面前
腳本注入頁面前，頁面可能會有一些限制，如復制受限，腳本的注入使您能夠繞過這些限制。

登錄前

click綁定攔截了復制方法，復制按鈕綁定了signin類限制訪問

登錄后

注入腳本

腳本注入頁面后

發(fā)布腳本
上傳腳本
油猴腳本支持好幾個網(wǎng)站，其中目前最主流的是GreasyFork，登錄這個網(wǎng)站注冊一個賬號，然后進入用戶頁面選擇發(fā)布你編寫的腳本，然后填寫腳本代碼和各項信息。
https://greasyfork.org/zh-CN/users


``

這樣腳本就可以提交上去了，其他人也可以搜索到并安裝腳本了。

總結(jié)

以上是生活随笔為你收集整理的如何使用Tampermonkey开发并使用一个浏览器脚本的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。