[jQuery] 在 Greasemonkey 裡面加入 jQuery 的方法

Greasemonky : 是Mozilla Firefox的一個附加元件。它讓使用者安裝一些腳本使大部分HTML為主的網頁於使用者端直接改變得更方便易用。隨著Greasemonkey腳本常駐於瀏覽器，每次隨著目的網頁開啟而自動做修改，使得執行腳本的使用者印象深刻地享受其固定便利性。

Greasemonkey可替網頁加入些新功能、修正網頁錯誤、組合來自不同網頁的資料、或者數繁不及備載的其他功能。寫的好的Greasemonkey腳本甚至可讓其輸出與被修改的頁面整合得天衣無縫，像是原本網頁裡的一部分。

jQuery : 一套 javascript library，用在協助做 HTML DOM element 處理。


一般來說使用基本的 js 就可以達到需要實現的功能
但是相對的程式可能就會變得有點複雜或者不方便重複使用

然後在 userscript 內加入 framework 的話又會讓整個 userscript 顯得有點長
在處理簡短的程式碼時就顯得有點浪費

這時候可以考慮使用 xpath 來做處理
但是 xpath 在查詢上的彈性比較死

對於一些多重複雜性的查詢就相對地比較麻煩
另外現今的 js 也比較少在使用 xpath 語法

所以另外有在 userscript 內加入外部的 framework 的作法

在以前的做法

利用產生 script 元素進行設定來載入外部 framework

作法一

var $;

// Add jQuery
    (function(){
        if (typeof unsafeWindow.jQuery == 'undefined') {
            var GM_Head = document.getElementsByTagName('head')[0] || document.documentElement,
                GM_JQ = document.createElement('script');
   
            GM_JQ.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js';
            GM_JQ.type = 'text/javascript';
            GM_JQ.async = true;
   
            GM_Head.insertBefore(GM_JQ, GM_Head.firstChild);
        }
        GM_wait();
    })();

但是僅僅是如此的話會有一些問題 比如執行程式碼時 如果 jquery 還沒載入的話 就會出錯 這時候可以加上判斷是否已經載入成功的判斷

  // Check if jQuery's loaded
    function GM_wait() {
        if (typeof unsafeWindow.jQuery == 'undefined') {
            window.setTimeout(GM_wait, 100);
        } else {
            $ = unsafeWindow.jQuery.noConflict(true);
            letsJQuery();
        }
    }

// All your GM code must be inside this function
    function letsJQuery() {
        // 這裡加上成功載入後要執行的程式
    }

方法二

在新版的 Greasemonkey 0.7 以後的版本 則有更簡單的作法

只需要加上

// @require        http://code.jquery.com/jquery-latest.js

就可以完成方法一 內所做的事情

不過要注意的是 不要使用被壓縮過的 jquery.min 會由於否些問題造成無法正確載入 jquery