如何開發一個用戶腳本系列(1)——什麼是用戶腳本

這個系列總共 6 篇文章，將詳細的介紹如何從零開發一個用戶腳本。其中前兩篇將介紹一下什麼是用戶腳本，以及開發腳本須要的一些基礎知識。後面四篇將經過案例講解的形式，選擇以前我開發完成的 4 個腳本，由簡到繁，帶着你一塊兒完成腳本的開發，讓你看完這個系列文章以後，就能夠本身動手開發出本身想要的腳本。

什麼是用戶腳本

用戶腳本是一段代碼，它們可以優化您的網頁瀏覽體驗。安裝以後，有些腳本能爲網站添加新的功能，有些能使網站的界面更加易用，有些則能隱藏網站上煩人的部份內容。——來自 GreasyFork 網站

看完這段話，你應該對用戶腳本的做用有了大概的瞭解，但隨之而來的，應該是各類疑問:這段代碼在什麼環境下運行？是用什麼編程語言編寫的？腳本如何安裝？腳本安裝後在哪裏，如何運行？以及如何開發一個本身的腳本？OK，先彆着急，下面我將一一解釋。

腳本在什麼環境下運行

如今不少瀏覽器均可以安裝插件(官方稱爲擴展程序)，好比 Chrome 瀏覽器、Firefox 瀏覽器、Safari 瀏覽器、Microsoft Edge，以及國內衆多使用 webkit 內核的瀏覽器，好比 360瀏覽器、QQ 瀏覽器等。而在衆多的瀏覽器插件中，有一種叫作用戶腳本管理器的插件。這種插件至關於一個容器，安裝以後，又能夠在它裏面安裝用戶腳本。因此你若是想要運行一個用戶腳本，就先得安裝一個用戶腳本管理器。常見的用戶腳本管理器有 Tampermonkey、Violentmonkey、Greasemonkey。其中 Tampermonkey 支持大多數瀏覽器，而 Greasemonkey 只支持 Firefox 瀏覽器。從開發腳本的角度考慮，Tampermonkey 和 Violentmonkey 的 API 基本同樣，一樣一份代碼不用作什麼改動，就能夠在這兩個裏面運行。而 Greasemonkey 的 API 和它們倆不太同樣，若是在開發腳本的時候想要兼容支持 Greasemonkey，就須要作挺多改動。綜上，當你做爲一個普通用戶使用的時候，建議使用 Tampermonkey，當你做爲一個開發者開發腳本的時候，建議腳本兼容 Tampermonkey 和 Violentmonkey，而 Greasemonkey 就量力而行吧。

腳本使用何種編程語言

你們都知道網頁開發使用的主要是 HTML、CSS、JavaScript，相應的，用戶腳本使用的也是這三個，屬於前端開發的範疇。因此若是你懂前端開發，那麼你將能很快編寫一個用戶腳本，而若是你對前端開發不是太瞭解，那麼建議你能夠先學習一下，經常使用的網站有 W3school 和 菜鳥教程，上面對相關知識的介紹都比較全面，後面在編寫腳本的過程當中，若是忘記了一些語法，也能夠隨時在上面查詢。而本系列的第二篇也將對開發腳本過程當中會用到的前端知識作一些介紹。

腳本如何安裝

最經常使用的用戶腳本網站是 GreasyFork，天天都會有不少開發者在上面發佈新的腳本，也會有不少用戶下載安裝腳本。

在你已經安裝了腳本管理器的前提下，打開 GreasyFork 網站，找到一個腳本，這裏以 百度首頁和搜索頁面添加 Google 搜索框 腳本爲例，點擊安裝此腳本，就會彈出讓你安裝的界面，而後點擊安裝，就會將腳本安裝到你的腳本管理器裏面。

腳本安裝後如何運行

每一個腳本都會有其運行的網站，在腳本開頭的 UserScript 裏面能夠看到 @match 或者 @include 開頭的語句，後面跟的網址就是匹配的站點，只有當前訪問的網站跟腳本運行的網站匹配時，腳本才能生效。

在安裝上面的腳本以前，百度首頁是下面這樣:

而安裝上面的腳本以後將會產生下面的效果:

如何開發一個本身的腳本

開發一個腳本的流程爲:首先確認需求，看你想開發的腳本要在什麼網站上運行，要實現什麼樣的功能，以什麼樣的形式呈現。確認需求以後，開始編寫代碼，通常在腳本管理器裏面新建腳原本編寫，固然你能夠用任意編輯器編寫代碼。

代碼寫完後，在腳本管理器選擇保存，而後到本身的目標網站上看一下運行效果，若是沒有問題，就能夠發佈腳本了，讓更多的人使用你寫的腳本。發佈腳本仍然選擇前面提到的 GreasyFork，首先將腳本保存到電腦本地，是一個以 .user.js 結尾的文件，而後在 GreasyFork 網站上經過本地上傳來發布你的腳本(注意不要勾選對編輯器啓用語法高亮，好像勾選了會遇到問題)。

總結

本文對用戶腳本的安裝、使用、開發過程等進行了一些介紹，若是還有疑問，能夠留言，在下一篇文章中，將會對腳本開發過程當中會用到的基礎知識作一些介紹。