第 1 章 開(kāi)始

1 Greasemonkey 是什么
2 安裝 Greasemonkey
3 安裝用戶腳本
參考資料

編輯用戶腳本
第 2 章 編寫第一個(gè)用戶腳本

1 Hello World

例 21 helloworlduserjs

2 用元數(shù)據(jù)描述您的用戶腳本

參考資料

3 編寫用戶腳本代碼

例 23 顯示Hello world提示信息

例 24 延遲調(diào)用函數(shù)的錯(cuò)誤方法

例 25 延遲調(diào)用函數(shù)的更好方法

例 26 延遲調(diào)用函數(shù)的最好方法
參考資料

4 保存用戶腳本

第 3 章 修改網(wǎng)頁(yè)操作

1 給網(wǎng)頁(yè)添加一個(gè)按鈕

第 1 章 開(kāi)始

1.1. Greasemonkey 是什么？

Greasemonkey 是一個(gè)跨越chrome、firefox的擴(kuò)展，它具有通過(guò)編寫腳本來(lái)改變被訪問(wèn)網(wǎng)頁(yè)的功能。
可以：
1. 使訪問(wèn)的網(wǎng)站更便于閱讀或者更便于使用；
2. 修復(fù)網(wǎng)頁(yè)渲染的缺陷，而無(wú)須煩擾網(wǎng)站管理員。
3. 讓網(wǎng)頁(yè)更好地使用殘疾人援助技術(shù)，清楚響亮地說(shuō)出網(wǎng)頁(yè)內(nèi)容，或者將網(wǎng)頁(yè)內(nèi)容變?yōu)槊の摹?br />4. 自動(dòng)地獲得其它網(wǎng)站的數(shù)據(jù)，從而使兩個(gè)網(wǎng)站更好地相互鏈接起來(lái)。

然而 Greasemonkey 本身并沒(méi)有作這些事。實(shí)際上，在您安裝它之后，您注意到根本沒(méi)有任何變動(dòng)…直到您開(kāi)始安裝一種叫做“用戶腳本”的東西。用戶腳本(user script)就是一大塊Javascript代碼，還有些附加信息，用來(lái)告訴 Greasemonkey 腳本應(yīng)該在何時(shí)何地運(yùn)行。每個(gè)用戶腳本能夠針對(duì)具體頁(yè)面，具體網(wǎng)站，或者一批網(wǎng)站。用戶腳本能做到您在Javascript中可做到的任何事情。實(shí)際上，它能做得更多，因?yàn)?Greasemonkey 提供了專供用戶腳本使用的函數(shù)。

這里是Greasemonkey 腳本庫(kù)含了上百個(gè)用戶腳本，這些都是用戶為了滿足自己的需要而寫的。一旦您寫了自己的用戶腳本，只要您認(rèn)為別人也許發(fā)現(xiàn)它有用，您可以把它添加到腳本庫(kù)中。您也可以自己使用，因?yàn)閺木帉戇^(guò)程中獲得知識(shí)，獲得滿足感，才是更重要的。

目前國(guó)內(nèi)主要的油猴腳本網(wǎng)站是：Greasy Fork

1.2. 安裝 Greasemonkey

要使用用戶腳本，您首先需要安裝一個(gè)用戶腳本管理器。根據(jù)您使用的瀏覽器不同，可用的用戶腳本管理器也有所不同。

Chrome：Tampermonkey或Violentmonkey
Firefox：Greasemonkey、Tampermonkey或Violentmonkey

我使用的是chrome瀏覽器，安裝的是Tampermonkey。安裝過(guò)程可能需要翻墻，我是在chrome的網(wǎng)上應(yīng)用商店直接下的。

其他瀏覽器，請(qǐng)參考：深入淺出 Greasemonkey

1.3. 安裝用戶腳本

Greasemonkey “用戶腳本”是用 Javascript 編寫的獨(dú)立文件，用來(lái)定制一個(gè)或多個(gè)網(wǎng)頁(yè)。

[提示] 您可以在Greasemonkey腳本庫(kù)，找到許多用戶腳本。盡管沒(méi)人要求您必須把腳本放到那兒去，但是實(shí)際上，您可以把您的腳本共享到任何地方，這樣別人就可以安裝它了。甚至您根本不需要一臺(tái)網(wǎng)絡(luò)服務(wù)器，因?yàn)槟憧梢詮谋镜匚募邪惭b用戶腳本。

用戶腳本的文件名必須以.user.js結(jié)尾。

鼠標(biāo)左鍵點(diǎn)擊油猴圖標(biāo)，出現(xiàn)如圖所示界面，其中“網(wǎng)頁(yè)限制解除”、“DownloadAllContent”等等，都是之前添加的油猴腳本。
添加新腳本的時(shí)候，點(diǎn)擊“添加新腳本”，彈出新建用戶腳本編輯界面。

界面內(nèi)編輯器里，可以添加腳本，現(xiàn)在出現(xiàn)的是默認(rèn)設(shè)置。
點(diǎn)擊獲取新腳本，轉(zhuǎn)到油猴腳本庫(kù)，可以從中選擇合適的油猴腳本。

參考資料

Greasemonkey 腳本庫(kù)有上百個(gè) Greasemonkey 腳本。

2. 編輯用戶腳本

如果愿意可以安裝很多個(gè) Greasemonkey 腳本。 Greasemonkey 帶有配置對(duì)話框來(lái)管理用戶腳本：暫時(shí)禁用，改變配置或卸載腳本。

on/off可以選擇啟用或暫停腳本。
點(diǎn)擊管理面板，可以對(duì)腳本進(jìn)行管理，編輯，卸載

管理比較簡(jiǎn)單，一看就懂。

第 2 章 編寫第一個(gè)用戶腳本

2.1. Hello World

我們步入 Greasemonkey 美妙世界的萬(wàn)里長(zhǎng)征將從第一步開(kāi)始，所有讀過(guò)技術(shù)手冊(cè)的讀者都會(huì)很熟悉這一步：讓您的電腦打出“Hello world”。

例 2.1. helloworld.user.js

// Hello World! example user script
// version 0.1 BETA!
// 2005-04-22
// Copyright (c) 2005, Mark Pilgrim
// Released under the GPL license
// http://www.gnu.org/copyleft/gpl.html
//
// --------------------------------------------------------------------
//
// This is a Greasemonkey user script.
//
// To install, you need Greasemonkey: http://greasemonkey.mozdev.org/
// Then restart Firefox and revisit this script.
// Under Tools, there will be a new menu item to "Install User Script".
// Accept the default configuration and install.
//
// To uninstall, go to Tools/Manage User Scripts,
// select "Hello World", and click Uninstall.
//
// --------------------------------------------------------------------
//
// ==UserScript==
// @name          Hello World
// @namespace     http://diveintogreasemonkey.org/download/
// @description   example script to alert "Hello world!" on every page
// @include       *
// @exclude       http://diveintogreasemonkey.org/*
// @exclude       http://www.diveintogreasemonkey.org/*
// ==/UserScript==
alert('Hello world!');

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

正如您所見(jiàn)到的，這個(gè)Hello World腳本的大部分都是注釋。有些注釋，比如如何安裝，沒(méi)什么特殊含義；那只是對(duì)初學(xué)者的一些指導(dǎo)。但是，有一節(jié)注釋確實(shí)有特殊含義，下一節(jié)會(huì)有詳細(xì)的解釋。

要看到腳本的效果，您首先要安裝，然后訪問(wèn)一個(gè)不在diveintogreasemonkey.org域名下的網(wǎng)站(例如，Google)。這個(gè)頁(yè)面將會(huì)像平時(shí)一樣顯示出來(lái)，還會(huì)彈出一個(gè)對(duì)話框：“Hello world!”

下載

helloworld.user.js](http://www.firefox.net.cn/dig/download/helloworld.user.js)

2.2. 用元數(shù)據(jù)描述您的用戶腳本

每個(gè)用戶腳本都含有一段元數(shù)據(jù)，用來(lái)向 Greasemonkey 描述這個(gè)腳本自身的信息：發(fā)行者，執(zhí)行規(guī)則等等。

例 2.2. Hello World 元數(shù)據(jù)

// ==UserScript==
// @name          Hello World
// @namespace     http://diveintogreasemonkey.org/download/
// @description   example script to alert "Hello world!" on every page
// @include       *
// @exclude       http://diveintogreasemonkey.org/*
// @exclude       http://www.diveintogreasemonkey.org/*
// ==/UserScript==

1
2
3
4
5
6
7
8

這里有六條獨(dú)立的元數(shù)據(jù)信息，作為一個(gè)整體包含在注釋中。現(xiàn)在讓我們按順序逐條解釋。首先講最外面的這層包裝。

// ==UserScript==
//
// ==/UserScript==

1
2
3

上述標(biāo)記很重要，必須完全吻合。Greasemonkey 用它們來(lái)標(biāo)記用戶腳本的元數(shù)據(jù)段。這段注釋可以放在用戶腳本的任何部位，但經(jīng)常會(huì)放在靠近頂部的地方。
在元數(shù)據(jù)段內(nèi)，第一項(xiàng)是名字。

// @name          Hello World

1

這是您的用戶腳本的名字。它將會(huì)在您第一次安裝腳本時(shí)在安裝對(duì)話框（install dialog）中顯示出來(lái)。之后會(huì)顯示在“管理用戶腳本”對(duì)話框中。這個(gè)名字應(yīng)該言簡(jiǎn)意賅。

@name可選的。如果存在，它只能被定義一次。如果不存在，將會(huì)默認(rèn)顯示用戶腳本的去掉擴(kuò)展名.user.js的文件名。

下一個(gè)是命名空間(namespace)。

// @namespace     http://diveintogreasemonkey.org/download/

1

這是一個(gè) URL，Greasemonkey 用它來(lái)區(qū)分名稱相同但是作者不同的用戶腳本。如果您有一個(gè)域名，您可以使用它作命名空間。另外您也可以用tag: URI。

@namespace是可選的。如果存在，它只能被定義一次。如果不存在，將會(huì)默認(rèn)使用下載用戶腳本的網(wǎng)站域名。

元數(shù)據(jù)可以以任意次序排列。推薦使用@name，@namespace，@description，@include，最后是@exclude，但是其它的順序也沒(méi)關(guān)系。

下一項(xiàng)是描述。

// @description   example script to alert "Hello world!" on every page

1

這是關(guān)于用戶腳本功能的描述。在您第一次安裝腳本時(shí)，它將會(huì)在安裝對(duì)話框中顯示，之后會(huì)在“管理用戶腳本”對(duì)話框中顯示。描述不應(yīng)多于兩句。

@description是可選的。如果使用它，那么它只能被定義一次。如果不使用，默認(rèn)會(huì)顯示為空白。

[重要]
不要忘記寫@description。即使您所寫的用戶腳本是給自己用的。你最后很可能會(huì)擁有很多腳本，如果沒(méi)有描述的話，在“管理用戶腳本”對(duì)話框中管理腳本將會(huì)成為一件令人頭疼的事。

下面三行是最重要的 (從Greasemonkey的角度來(lái)看)：@include和@exclude URL。

// @include       *
// @exclude       http://diveintogreasemonkey.org/*
// @exclude       http://www.diveintogreasemonkey.org/*

1
2
3

這幾行讓 Greasemonkey 知道在那些網(wǎng)站上執(zhí)行您的用戶腳本。您可以明確的指定一個(gè) URL，或者用通配符*來(lái)代替域名或路徑中的部分字符。在這個(gè)例子中，我們告訴 Greasemonkey 在除了http://diveintogreasemonkey.org/和http://www.diveintogreasemonkey.org/的所有網(wǎng)站上執(zhí)行。排除(Excludes)優(yōu)先于包含(includes)，所以即使http://diveintogreasemonkey.org/download/匹配*(所有網(wǎng)站)，它還是會(huì)被排除掉，因?yàn)樗€匹配http://diveintogreasemonkey.org/* 。

@include和@exclude是可選的，可以自定義執(zhí)行和豁免的 URL，但必須每條規(guī)則各占一行。如果您沒(méi)有任何定義，Greasemonkey將會(huì)對(duì)所有的網(wǎng)站執(zhí)行您的用戶腳本。(等同于@include *)。

[注意]
您需要定義非常精確的@include和@exclude元數(shù)據(jù)。Greasemonkey不會(huì)對(duì)域名作任何的假設(shè)，如果一個(gè)網(wǎng)站符合http://example.com/和http://www.example.com/，您需要把這兩個(gè)網(wǎng)址都標(biāo)示出來(lái)。

參考資料

tag: URIs

2.3. 編寫用戶腳本代碼

我們的第一個(gè)用戶腳本是在執(zhí)行時(shí)簡(jiǎn)單地顯示一條提示信息：“Hello world!”。

例 2.3. 顯示“Hello world!”提示信息

alert('Hello world!');

1

盡管這段代碼仿佛夠用了，而且也達(dá)到了目的。Greasemonkey 實(shí)際上在幕后做了很多的事情來(lái)確保用戶腳本不會(huì)與頁(yè)面所包含的原有腳本發(fā)生嚴(yán)重的沖突。特別是它會(huì)自動(dòng)的把您的用戶腳本封裝在一個(gè)匿名的函數(shù)包里。一般情況下，您可以忽視，但是終究有一天會(huì)讓您遇到麻煩。所以最好現(xiàn)在就了解一下。

最經(jīng)常遇到的麻煩之一是在用戶腳本里定義的變量和函數(shù)不能被別的腳本訪問(wèn)。事實(shí)上，只要用戶腳本運(yùn)行完了，所有的變量和函數(shù)就都不能使用了。如果您期望使用window.setTimeout函數(shù)，或者在鏈接掛上字符串式的 onclick 屬性然后期望 Javascript 稍后調(diào)用您的函數(shù)，那么您會(huì)遇到問(wèn)題。

例如，下面這個(gè)用戶腳本中定義了一個(gè)函數(shù)helloworld， 然后嘗試設(shè)置一個(gè)計(jì)數(shù)器來(lái)在一秒后調(diào)用這個(gè)函數(shù)。

例 2.4. 延遲調(diào)用函數(shù)的錯(cuò)誤方法

function helloworld() {
alert('Hello world!');
}
window.setTimeout("helloworld()", 60);

1
2
3
4

這段代碼沒(méi)有起任何作用；不會(huì)彈出提示窗口。如果您打開(kāi)錯(cuò)誤控制臺(tái)，會(huì)看到一個(gè)異常：Error: helloworld is not defined.這是因?yàn)楫?dāng)延遲結(jié)束，開(kāi)始調(diào)用helloworld()時(shí)，helloworld函數(shù)已經(jīng)不存在了。

如果您需要引用用戶腳本中的變量或者函數(shù)，應(yīng)該顯式的把它們定義為window對(duì)象的屬性，它是始終存在的。

例 2.5. 延遲調(diào)用函數(shù)的更好方法

window.helloworld = function() {
    alert('Hello world!');
    }

window.setTimeout("helloworld()", 60);

1
2
3
4
5

目的達(dá)到了！頁(yè)面完成加載一秒后，一個(gè)提示框驕傲的彈了出來(lái)，寫著：“Hello world!”

然而，在window上設(shè)置屬性依然不太理想；這有點(diǎn)像用全局變量來(lái)做局部變量該做的事。（事實(shí)上，就是那么回事，window是全局的，可以被頁(yè)面中的所有腳本訪問(wèn)。更實(shí)際的講，它可能會(huì)與頁(yè)面自身的腳本，甚至是其它的用戶腳本相互干擾。

最佳的解決方案是定義匿名函數(shù)，把它作為第一個(gè)參數(shù)傳遞給window.setTimeout。

例 2.6. 延遲調(diào)用函數(shù)的最好方法

window.setTimeout(function() { alert('Hello world!') }, 60);

1

我在這里所做的是建立一個(gè)沒(méi)有名字的函數(shù)（一個(gè)“匿名函數(shù)”)，然后直接把它傳遞給window.setTimeout。這樣可以完成與上個(gè)例子相同的事，而不會(huì)留下痕跡。例如不會(huì)被其它的腳本檢測(cè)到。

我發(fā)現(xiàn)我在寫用戶腳本時(shí)經(jīng)常使用匿名函數(shù)。它們很適合創(chuàng)建“一次性”函數(shù)，然后當(dāng)作參數(shù)傳遞給類似window.setTimeout，document.addEventListener或者賦值給事件句柄像 click 或 submit。

參考資料

Javascript 中的匿名函數(shù)
Block Scope in Javascript
associated discussion thread

2.4. 保存用戶腳本

對(duì)于腳本的作者來(lái)講，“管理用戶腳本”對(duì)話框有個(gè)很實(shí)用的功能：編輯按鈕可以“動(dòng)態(tài)的(live)”修改已安裝的腳本。
修改/編輯完腳本文件后，點(diǎn)擊保存按鈕，腳本文件就自動(dòng)加載到油猴里面。

這時(shí)候打開(kāi)新網(wǎng)頁(yè)，就會(huì)彈出hello world對(duì)話框。

第 3 章 修改網(wǎng)頁(yè)操作

在chrome上編輯油猴腳本的時(shí)候，可以按F12鍵，調(diào)出chrome的控制臺(tái)幫助調(diào)試，一些錯(cuò)誤命令會(huì)在控制臺(tái)上顯示出來(lái)，比較方便。

油猴腳本庫(kù)中，有一個(gè)下載小說(shuō)的腳本，我覺(jué)得對(duì)我這種重度小說(shuō)依賴癥來(lái)說(shuō)，是個(gè)福音。因此，我練手的時(shí)候，打算以此為藍(lán)本，練習(xí)自己的代碼。計(jì)劃是這樣：在小說(shuō)網(wǎng)站的網(wǎng)頁(yè)上添加一個(gè)下載小說(shuō)的按鈕，如果想下載小說(shuō)，可以按此按鈕一鍵下載。

首先，先看一下，如何在頁(yè)面上添加一個(gè)按鈕。

3.1 給網(wǎng)頁(yè)添加一個(gè)按鈕

這個(gè)腳本用作練習(xí)，功能是在網(wǎng)頁(yè)上指定位置添加一個(gè)按鈕。

腳本如下：

// ==UserScript==
// @name          Hello World_cjn2
// @namespace
// @description   
// @include       https://www.bixia.org/*
// @include       https://bixia.org/*
// ==/UserScript==
(function() {
    'use strict';
    var button = document.createElement("input"); //創(chuàng)建一個(gè)input對(duì)象（提示框按鈕）
    button.setAttribute("type", "button");
    button.setAttribute("value", "下載");
    button.style.width = "60px";
    button.style.align = "center";
    button.style.marginLeft = "250px";
    button.style.marginBottom = "10px";
    button.style.background = "#b46300";
    button.style.border = "1px solid " + "#b46300";//52
    button.style.color = "white";
    var x = document.getElementById("maininfo");
    x.appendChild(button);
    // Your code here...
})();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

效果如下，加載完頁(yè)面后，會(huì)在畫圈的位置添加一個(gè)按鈕：

代碼的前半部分，都是用來(lái)給按鈕添加各種屬性。后半部分指明了添加在網(wǎng)頁(yè)中的位置，這里給元素節(jié)點(diǎn)maininfo追加一個(gè)子節(jié)點(diǎn)button

var x = document.getElementById("maininfo");
x.appendChild(button);

1
2

有時(shí)候，調(diào)試不成功要注意查看控制臺(tái)輸出錯(cuò)誤，看看哪里不對(duì)。

總結(jié)

以上是生活随笔為你收集整理的油猴安装、编写及添加脚本 笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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