油猴指令碼快速入門帶簡易案例

阿新 • • 發佈：2021-12-23

油猴指令碼快速入門帶簡易案例

很簡短。。

通過本文，你將學會

如何編寫、釋出油猴指令碼
瞭解油猴指令碼提供的封裝好的瀏覽器外掛API

油猴指令碼入門

油猴指令碼頭部的註釋資訊很重要，他除了宣告該指令碼的基本資訊之外，還標註了該指令碼可在哪些指定的頁面上執行，宣告將要引入的外部檔案、指令碼執行時機，如果要呼叫油猴提供的API(GM_xxx)或者向指定域名發起請求也需要在頭部註釋段進行宣告。

重要宣告欄位

@match | @include

兩者幾乎類似，宣告指令碼該執行的頁面，可宣告多次。但不支援URL hash引數

// @include http://www.tampermonkey.net/*
// @match   *://link.csdn.net/?target=*
// @match   /^https?:\/\/(www)?\.?(juejin|zhihu)\.(com|cn)/          使用正則匹配知乎或掘金
// 其他匹配模式可參考：https://developer.chrome.com/docs/extensions/mv3/match_patterns/

@require

在指令碼執行前載入且執行的的JavaScript檔案

// @require https://code.jquery.com/jquery-2.1.4.min.js
// @require https://code.jquery.com/jquery-2.1.3.min.js#sha256=23456...
// @require https://code.jquery.com/jquery-2.1.2.min.js#md5=34567...,sha256=6789...
// @require tampermonkey://vendor/jquery.js
// @require tampermonkey://vendor/jszip/jszip.js

@resource

通過GM_getResourceURL and GM_getResourceText預載入可訪問的資源

// @resource customCSS https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css
// @resource icon1 http://www.tampermonkey.net/favicon.ico
// @grant        GM_addStyle
// @grant        GM_getResourceText
.......
   // 程式碼內部    引入bootstrap的css檔案並加入html中
   const css = GM_getResourceText("customCSS");
   GM_addStyle(css);

@connect

定義可以被GM_xmlhttpRequest訪問的網站(domains)(包含子網站)。要呼叫一些API介面，就得在這提前宣告。
// @connect *
// @connect *://*.test.com/

@grant

宣告將會用到的GM_* API

API列表：https://www.tampermonkey.net/documentation.php#unsafeWindow

@run-at

宣告指令碼執行時機，只能宣告一次

// @run-at document-start  	以最快速度注入指令碼
// @run-at document-body	當body元素存在時(body掛載時)
// @run-at document-end		在`DOMContentLoaded`時/後(when or afte)
// @run-at document-idle	在`DOMContentLoaded`後（default）
// @run-at context-menu 	點選了右鍵選單

GM_XXX API

有點多，大概就是新增樣式、持久化儲存、新增、移除監聽、獲取獲取 @resource 中宣告的資源、操作tab/xhr發起請求、發起桌面通知、

案例- 自動跳過網站的外鏈提示

// ==UserScript==
// @name         自動跳過網站的外鏈提示
// @namespace    http://tampermonkey.net/undefined
// @version      0.2
// @description  一個很簡單的小指令碼，用於自動跳轉知乎、掘金、簡書等開啟外鏈的跳轉/離開提示(不算是外鏈直達)，這樣寫簡單又通用。\n另外可以用外鏈直達方式，那就是替換頁面中的跳轉連結為真實連結或者接管a標籤的點選事件
// @author       禾幾元
// @match        *://link.zhihu.com/?target=*
// @match        *://link.juejin.cn/?target=*
// @match        *://www.jianshu.com/go-wild?ac=2&url=*
// @match        *://c.pc.qq.com/middlem.html?pfurl=*
// @match        *://gitee.com/link?target=*
// @match        *://link.csdn.net/?target=*

// @run-at       document-start

// ==/UserScript==

// 各大網站跳轉頁面中url的跳轉引數名
const siteJumpParamMap = new Map([
  ['zhihu','target'],
  ['csdn','target'],
  ['juejin','target'],
  ['gitee','target'],
  ['jianshu','url'],
  ['qq','pfurl'],
]);

// 獲取網站名稱 @example: getSiteName('www.baidu.com'); // 'baidu'
const getSiteName = hostname => hostname.match(/([^\.]+)\.[^\.]+$/)[1];

(function() {
    'use strict';
    // 清空頁面原有內容，防閃爍(非必須)
    window.document.documentElement.innerHTML=''
    // 獲取URL中的請求引數
    const params = new URLSearchParams(location.search.substring(1));
    // 獲取網站名稱，用於查詢對應的跳轉引數名
    const siteName = getSiteName(location.hostname);
    // 獲取該網站的的跳轉URL的引數名，進而獲取目標URL
    const targetURL = params.get(siteJumpParamMap.get(siteName));
    // 利用replace()方法進行跳轉,保證無用的跳轉頁面不會產生在歷史記錄中
    location.replace(targetURL);
})();