如何使用Tampermonkey開發並使用一個瀏覽器指令碼

leayun發表於2023-11-27

準備工作

簡介

Tampermonkey 是一款強大的瀏覽器擴充套件，它允許您定製網頁的行為，改變和最佳化網頁的展示方式或者功能以滿足個人需求。透過編寫自定義指令碼，您可以實現許多有趣的功能，從自動化任務到改進網頁介面，一切盡在掌握。
指令碼一般指使用者指令碼(User Script)，他是一段 Javascript 程式碼，它們能夠最佳化您的網頁瀏覽體驗。

安裝

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

油猴指令碼網站：https://greasyfork.org/zh-CN/scripts

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

指令碼編寫和使用

新建指令碼

點選 Tampermonkey 圖示，然後選擇 "新增新指令碼"。
這將開啟一個編輯器，您可以在其中編寫指令碼程式碼。

跳轉到編寫程式碼介面：

常見使用者指令碼標題

屬性名	作用
name	油猴指令碼的名字
namespace	名稱空間，用來區分相同名稱的指令碼，一般寫成作者名字或者網址就可以了
version	指令碼的版本號
icon	可以指定指令碼的圖示，顯示在指令碼管理器中
description	描述，用來告訴使用者這個指令碼是幹什麼用的
author	作者名字
match	這是一個陣列，包含了指令碼要執行的網頁地址。可以使用萬用字元和正規表示式
exclude	與match屬性相反，指定指令碼不應執行的網頁地址
grant	用於指定指令碼需要的特定瀏覽器許可權，如GM_addStyle、GM_xmlhttpRequest等
require	如果指令碼依賴其他js庫的話，可以使用require指令，在執行指令碼之前先載入其他庫，常見用法是載入jquery
resource	用於定義指令碼所需的外部資源，如CSS檔案、圖片等
connect	當使用者使用GM_xmlhttpRequest請求遠端資料的時候，需要使用connect指定允許訪問的域名，支援域名、子域名、IP地址以及*萬用字元

常見API介紹

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

許可權名	功能
GM_setValue(name,defaultValue)，GM_getValue(name,value)	用於在瀏覽器中儲存和獲取使用者指令碼的資料。這可以用於儲存設定或其他資訊。
GM_xmlhttpRequest(details)	允許使用者指令碼進行XMLHttpRequest請求，以便與遠端伺服器進行通訊，獲取資料等。
GM_setClipboard(data, info)	用於將文字複製到剪貼簿，使使用者指令碼可以方便地與剪貼簿互動。
GM_log(message)	用於在控制檯中輸出除錯資訊，方便指令碼除錯，可以使用F12開發者工具檢視。
GM_addStyle(css)	像網頁中新增自定義css，修改網頁外觀。
GM_notification(details, ondone), GM_notification(text, title, image, onclick)	設定網頁通知，請參考文件獲取用法。
GM_openInTab(url, loadInBackground)	允許在新標籤頁中開啟指定的URL。
GM_registerMenuCommand(name, callback, options_or_accessKey)	允許使用者指令碼在瀏覽器中向使用者指令碼的選單中新增一個新條目，並指定在選擇選單項時要呼叫的函式。

詳情請檢視油猴指令碼文件。

實現CSDN 免登入複製

為了更好地理解指令碼的工作原理，我們以一個實際示例來說明如何編寫一個指令碼。下面是一個用於允許使用者在 CSDN 網站上免登入複製程式碼的指令碼示例：

點選檢視程式碼

// ==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(`
    /* 選擇了所有 <pre> 和 <code> 元素，並設定它們的 user-select 屬性為 auto
    // 這個規則的效果是允許使用者可以複製這些元素中的文字內容*/
    pre,
    code {
      user-select: auto !important;
    }

   /* 這一部分選擇了一系列元素，並將它們的 display 屬性設定為 none !important。
    這個規則的效果是隱藏了頁面上這些元素，以實現頁面去除廣告的目的。*/
    #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;
    }

    /* 將頁面主要內容區域的寬度設定為100% */
    main {
      width: 100% !important;
    }

    /* 這個規則的效果是將頁面中的某些元素的高度設定為自動，為了確保這些元素的內容可以根據需要進行展開。*/
    #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)");
 	 });
})();

指令碼注入頁面前
指令碼注入頁面前，頁面可能會有一些限制，如複製受限，指令碼的注入使您能夠繞過這些限制。