先決條件

1. 安裝油猴插件。
2. 了解基本的 js 語言知識(shí)。
3. 請(qǐng)首先閱讀配置本地開發(fā)環(huán)境，雖然是【可選】但里面有部分基本的標(biāo)簽配置的講解，如果是第一次進(jìn)行開發(fā)，推薦快速閱讀該部分。

配置本地開發(fā)環(huán)境【可選】

1. 油猴支持在它提供的網(wǎng)頁編輯器中進(jìn)行開發(fā)，但我一般喜歡用 vscode 等本地的 ide 進(jìn)行開發(fā)，油猴插件支持訪問本地文件，來進(jìn)行本地開發(fā)，下面就來配置一下如何在本地進(jìn)行開發(fā)，如果不需要此步驟的同志，可以跳過。
2. 首先在擴(kuò)展程序中找到 Tampermonkey，并點(diǎn)擊進(jìn)入詳情。
   
3. 打開允許訪問文件網(wǎng)址選項(xiàng)。
   
4. 此時(shí)，我們?cè)诒镜匚募袆?chuàng)建一個(gè) js 文件，如：D:\code\font_end\practice\monkey\example\demo.js。并在此文件中編輯一個(gè)簡(jiǎn)單的代碼。

(function () {
    console.log("天行健，君子以自強(qiáng)不息?。?！")
})();

5. 右擊頂部工具欄中的油猴插件圖標(biāo)，在彈出的操作框中選擇添加新腳本。
   
6. 之后你將進(jìn)入一個(gè)編輯頁面，我們來看看在這個(gè)編輯頁面中一些基本的知識(shí)點(diǎn)。
   

這里重要的點(diǎn)有兩個(gè)，一個(gè)是設(shè)置匹配的網(wǎng)站，默認(rèn)的初始生成的代碼中，沒有對(duì) https 的網(wǎng)址進(jìn)行匹配，僅對(duì) http 網(wǎng)址進(jìn)行了匹配，所以要自己添加。這里 @match 標(biāo)簽的作用是讓你的腳本在 @match 標(biāo)簽僅在規(guī)定的網(wǎng)站上運(yùn)行，比如 @match https://www.baidu.com，表示在百度這個(gè)網(wǎng)址下運(yùn)行。再比如，@match https://\*//* 表示在所有 https 下的網(wǎng)站都可以運(yùn)行。

第二個(gè)就是通過 @require 標(biāo)簽來添加你本地的文件地址，這樣當(dāng)你在本地進(jìn)行開發(fā)的代碼，就可以直接在對(duì)應(yīng)的網(wǎng)站上執(zhí)行了。當(dāng)然 @require 標(biāo)簽還可以用來引入一些你開發(fā)時(shí)需要的第三方庫，如 jQuery。

7. 隨便打開一個(gè)網(wǎng)站，如 https://www.baidu.com（百度），打開它的控制臺(tái)，我們就發(fā)現(xiàn)腳本已經(jīng)執(zhí)行了，并且油猴插件會(huì)顯示正在執(zhí)行的腳本。
   
   【注】可以看到在網(wǎng)頁編輯頁面有一個(gè) UserScript 包裹的部分，里面包含了如 @name，@namespace 等，這些稱之為用戶腳本標(biāo)簽，你可以在官方文檔中查看所有的標(biāo)簽。

快速插入復(fù)雜的 HTML

在油猴腳本開發(fā)的過程中，有時(shí)候需要插入一些自己的 HTML 結(jié)構(gòu)。一般來說通過 innerHTML 來實(shí)現(xiàn)這種需求。下面舉一個(gè)簡(jiǎn)單的例子。

比如我現(xiàn)在在百度的 logo 下面希望增加如下的結(jié)構(gòu)：

<div>
    <div class="h1">標(biāo)題</div>
    <p class="des">這是一段描述</p>
</div>

那么我們?cè)谀_本中可以這樣書寫

// 快速創(chuàng)建復(fù)雜 HTML 結(jié)構(gòu)
function createHTML() {
    // 獲取百度首頁 logo 
    let logo = document.querySelector("#lg")
    // 創(chuàng)建一個(gè)自己的結(jié)構(gòu)
    let example = document.createElement("div")
    // 給 example 這個(gè) div 設(shè)置類名
    example.classList.add("wrap")
    example.innerHTML = `<div class="h1">標(biāo)題</div>
                            <p class="des">這是一段描述</p>`
    logo.appendChild(example)

}

(function () {
    'use strict';
    console.log("learn_style")
    createHTML()
})();

腳本編輯頁面我做了如下的配置。主要是設(shè)置了 @match 標(biāo)簽和 @require 標(biāo)簽。

// ==UserScript==
// @name         example
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://www.baidu.com
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// @require      file:///D:\code\font_end\practice\study_monkey\learn_style.js
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...
})();

現(xiàn)在我們打開百度首頁查看效果

除了“這是一段描述”這句話被百度自身的樣式遮蓋了外，至少創(chuàng)建一個(gè) HTML 的結(jié)構(gòu)的目標(biāo)是達(dá)到了。

使用 innerHTML 的方式可以快速創(chuàng)建一個(gè)比較復(fù)雜的，油猴腳本需求的 HTML 結(jié)構(gòu)。

設(shè)置 CSS 樣式

上面的一節(jié)介紹了如何快速創(chuàng)建一個(gè)復(fù)雜的 HTML 結(jié)構(gòu)，接下來，我們繼續(xù)上面的教程，來看看如何為這個(gè) HTML 結(jié)構(gòu)添加一個(gè) css 樣式。

首先，我們要在 @grant 標(biāo)簽中設(shè)置 GM_addStyle

然后，我們就可以直接編寫 css 樣式的代碼

// 這里是創(chuàng)建 HTML 的代碼，參考上一節(jié)
function createHTML() {...}

// 添加 css 樣式
function addStyle() {
    let css = `
    .wrap{
        padding: 5px
    }
    
    .h1{
        font-size: 16px;
        color: green;
    }
    
    .des{
        font-size: 10px;
    }
    `

    GM_addStyle(css)
}


(function () {
    'use strict';
    console.log("learn_style")
    createHTML()
    addStyle()
})();

最終效果可以看到實(shí)現(xiàn)了（PS：因?yàn)樗阉骺虮旧淼臉邮綋踝×搜菔拘Ч詣h除）

發(fā)布與更新你的腳本

通常我們會(huì)選擇一個(gè)油猴插件應(yīng)用商店來發(fā)布自己的插件，通常大家會(huì)選擇 greasyfork，具體的操作可以參考下面的內(nèi)容：

1. Greasy Fork 有關(guān)發(fā)布腳本的規(guī)則
2. Greasy Fork 將如何改寫已發(fā)布的腳本
3. 發(fā)布新腳本

對(duì)于更新，通常我的流程是如下：

1. 在本地進(jìn)行開發(fā)和測(cè)試（測(cè)試有一個(gè)測(cè)試版插件）。
2. 測(cè)試成功后，將其推送到 github 上存檔。
3. 復(fù)制你的腳本代碼到 greasyfork 進(jìn)行更新。

常見標(biāo)簽簡(jiǎn)析

@connect

當(dāng)用戶使用 GM_xmlhttpRequest 請(qǐng)求遠(yuǎn)程數(shù)據(jù)的時(shí)候，需要使用 connect 指定允許訪問的域名，支持域名、子域名、IP地址以及*通配符。

它的語法如下：// @connect <value>。value 通常是不帶頂級(jí)域名的子域名，如 baidu.com。具體的 value 還可以有其它的值，你可以訪問這個(gè)鏈接。

另外將 @connect * 添加到腳本中。通過這樣做，Tampermonkey 仍會(huì)詢問用戶是否允許下一次連接到未提及的域，但還會(huì)提供“始終允許所有域”按鈕。如果用戶單擊此按鈕，則將自動(dòng)允許所有未來的請(qǐng)求。

@grant

該標(biāo)簽的作用是可以調(diào)用油猴本身提供的一些 API 與瀏覽器互動(dòng)，突破本身的一些安全策略。比如該標(biāo)簽可以調(diào)用 GM_* 函數(shù)，來獲取一些應(yīng)用程序接口，比如如果要進(jìn)行跨域，可以使用 GM_xmlhttpRequest 函數(shù)。

@include

腳本可以運(yùn)行的頁面。允許多個(gè)標(biāo)簽實(shí)例（即允許匹配多個(gè)網(wǎng)址）。特別的是 @match 標(biāo)簽的作用和它幾乎類似，但有更加嚴(yán)格的語法。推薦使用 @match 標(biāo)簽。

// 示例
// @include http://www.tampermonkey.net/*
// @include http://*
// @include https://*
// @include /^https:\/\/www\.tampermonkey\.net\/.*$/ // @include *

@require

指向在腳本本身（編輯頁面中的腳本）開始運(yùn)行之前加載和執(zhí)行的 JavaScript 文件。我們可以利用該標(biāo)簽引入諸如 jQuery 這樣的第三方庫或者關(guān)聯(lián)本地文件進(jìn)行開發(fā)。

1. 引入 jQuery 庫示例：// @require https://code.jquery.com/jquery-2.1.4.min.js。
2. 引入本地文件進(jìn)行開發(fā)示例：// @require file:///D:\code\font_end\practice\study_monkey\learn_style.js

【注】引入本地文件進(jìn)行開發(fā)，還需要對(duì)油猴插件進(jìn)行設(shè)置，詳細(xì)請(qǐng)看配置本地開發(fā)環(huán)境【可選】

常見應(yīng)用程序接口簡(jiǎn)析

GM_xmlhttpRequest

該函數(shù)提供了進(jìn)行 xmlhttpRequest 請(qǐng)求的功能。如果你要使用該函數(shù)，則務(wù)必對(duì) @connect 標(biāo)簽進(jìn)行設(shè)置。

下面展示 GM_xmlhttpRequest 方法的一個(gè)實(shí)例，實(shí)例來源 MoreMovieRating 油猴插件。

function getURL_GM(url) {
    return new Promise(resolve => GM.xmlHttpRequest({
        method: 'GET',
        url: url,
        onload: function (response) {
            if (response.status >= 200 && response.status < 400) {
                resolve(response.responseText);
            } else {
                console.error(`Error getting ${url}:`, response.status, response.statusText, response.responseText);
                resolve();
            }
        },
        onerror: function (response) {
            console.error(`Error during GM.xmlHttpRequest to ${url}:`, response.statusText);
            resolve();
        }
    }));
}

GM_addStyle

在腳本開發(fā)中，有時(shí)需要操作 css 樣式，油猴腳本提供了 GM_addStyle 方法用來方便的解決這個(gè)問題，具體的實(shí)例參考上面的設(shè)置 CSS 樣式。

總結(jié)

到此這篇關(guān)于零基礎(chǔ)油猴腳本安裝、配置、開發(fā)入門教程(圖文)的文章就介紹到這了,更多相關(guān)油猴腳本開發(fā)入門內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！