jQuery and Greasemonkey Notes

2008/04/18
~ 阿亮 ~

Greasemonky : 一個 Firefox/IE 下的 Addon,可以另外寫 Javascript Script 在於特定網頁的 Client 端執行。
jQuery : 一套 javascript library,用在協助做 HTML DOM element 處理。

◎ 最基本在 <head> 內加上下面這行即可做 jQuery 的功能

&lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;

若要有 XPath 處理的擴充功能的話,則還要加

&lt;script type="text/javascript"
     src="http://dev.jquery.com/view/trunk/plugins/xpath/jquery.xpath.js"&gt;
&lt;/script&gt;

◎ jQuery 的操作可以參考這裡:jQuery 的基本教學 

Dive Into Greasemonkey : 詳細的 Greasemonkey 說明書。

◎ 很多情形若要在網頁載入完畢後才能進行,要用以下的方式:

$(document).ready(function(){
    // Your code here
);

若是在 Geasemonkey 下則不需要,因為 Geasemonkey 會在整個網頁 load 完才要動作。

而要 jQuery 在 Geasemonkey 內執行則要加段 Code,可參考這裡 ,這是針對 Firefox 版的,若是要 Greasemonkey for IE 也能 Work,後述有改過的版本。

◎ 基本的 XPath 操作有點不一樣,原本下面的絕對路徑形式

$("/html/body/table[3]/tbody/tr/td/table/tbody/tr/td[2]")

要改成下述 :eq(n-1) 的方式呈現

$("/html/body/table:eq(2)/tbody/tr/td/table/tbody/tr/td:eq(1)")

◎ 若 .html() 的功能,若在 Firefox 正常,而在 IE 下不能 Work 的情形,可以參考這裡,簡單講就是被指定為 child element 時,在 IE 下會有問題,改指定 parent(),比如下面這行不能 Work 的話:

$("tbody/tr/td/table/tbody/tr/td/table/tbody//td/table").eq(1).html(newhtml);

改為下述的情形,應該就會 Work:

$("tbody/tr/td/table/tbody/tr/td/table/tbody//td/table").eq(1).parent().html(newhtml);

◎ 根據這裡 ,可以在 Greasemonkey 內使用 jQuery,但這個並不能在於 Greasemonkey for IE 內使用,所以,要改成下述的情形,這樣的 javascript 才可在 IE, Firefox 兩邊使用。

最主要似乎是 IE 沒辦法處理 unsafeWindow?? 而且用此方法在 IE 會有第一次讀取 jQuery 不完整就往下執行的情形,我只有在大約五秒之後就直接去執行後續的 script,這個方式只能在 IE7 下做, IE6 仍會有問題。

// Add jQuery
var GM_JQ = document.createElement('script');
GM_JQ.src = 'http://code.jquery.com/jquery-latest.js';
GM_JQ.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(GM_JQ);

// Add jQuery XPath Plugin
var GM_JQ2 = document.createElement('script');
GM_JQ2.src = 'http://dev.jquery.com/view/trunk/plugins/xpath/jquery.xpath.js';
GM_JQ2.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(GM_JQ2);

// Check if jQuery's loaded
Browser = navigator.appName;
Net = Browser.indexOf("Netscape");
var count=0;

function pausecomp(millis)
{
   var date = new Date();
   var curDate = null;

   do { curDate = new Date(); }
   while(curDate-date &lt; millis);
} 

window.GM_wait = function() {
   if(Net &gt;= 0) {
      if (typeof unsafeWindow.jQuery == 'undefined') { window.setTimeout(GM_wait,100); }
      else { $ = unsafeWindow.jQuery; letsJQuery(); }
   } else {
      while  (count&lt;30 &amp;&amp; typeof window.jQuery=='undefined')
      {
 	 pausecomp(200);
	 count += 1;
      }
      window.setTimeout(letsJQuery,100);
   }
}
GM_wait();

// All your GM code must be inside this function
function letsJQuery() {
  // alert($); // check if the dollar (jquery) function works
  // Your code here
}

這個網頁 可以將 GreaseMonkey Script 轉換成 Firefox Addon.

Avoid Common Pitfalls in Greasemonkey : 有些正規的 Javascript 可能不能在 GreaseMonkey 內 Work,可以參考這裡。



站內搜尋



本站其他服務

本站其他軟體



  • 股海快訊 (iNews123)

    提供特定個股新聞更新推播、股價警示推播、新聞社群分享以及每日個股收盤價等功能的股票App/股市App.


  • 國道一路通(FreeWay)

    打開定位即實際地圖上繪製所在地中心附近的車況圖,可縮放地圖,不再是小小的縮小圖,快速了解高速公路的路況。


  • 照片去背(PhotoEraser)

    一款方便移除背景的工具,產生透明背景圖可以存回原本相簿,也可分享到其他 App 使用.


  • 條碼掃描器(QRCode)

    支援 QRCode and Barcodes、可連續快速掃描、自動對焦、可打開手電筒供掃描時使用


  • 批踢踢快訊 (pttNews)

    身為鄉民的您,是不是常常覺得現在的批踢踢 (PTT) 閱讀器,明明您就只要看幾個板,都幫您分類好,但不是您要的?甚至您只想關注某個人(或某件事)的消息,卻散布在不同東西,找出來很辛苦? 這個 App 可以解決您這些問題,快來用吧!


  • 臉書粉絲專頁搜尋 (FPSearch)

    不用登入臉書即可搜尋臉書粉絲專頁(臉書粉絲團)所公開的文章。您可以指定特定日期範圍之前的文章,也可設定搜尋粉絲專頁內包含特定關鍵詞的文章。