油猴腳本快速入門帶簡易案例

油猴腳本快速入門帶簡易案例

很簡短。。

通過本文，你將學會

1. 如何編寫、發布油猴腳本
2. 了解油猴腳本提供的封裝好的瀏覽器插件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);
})();

發布腳本到Greasy Fork

1. 登陸 https://greasyfork.org/zh-CN 可用github賬號快速登陸
2. 進入用戶界面-控制台-點擊發布你編寫的腳本
3. 好了...