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,可以參考這裡。



歡迎留言

敝站會審核留言的適宜性,您的留言可能會較晚發佈,而且小弟保留刪除的權利!!

站內搜尋



本站其他服務

本站其他軟體



  • 台灣空污警報(AirInfo)

    設定特定站點為推播通知關注點後,當該站點空氣品質變糟時,即時推播通知給您。另外提供站點附近基本天氣預測資料。


  • 標案快訊

    讓你可以輕鬆追蹤含有您想要關注關鍵詞的任何採購標案,只要有最新的資訊,「標案快訊」即會推播通知給你.


  • 下一班火車 (nextRail)

    這個 app 只要開啟後,就根據定位幫你過濾出最近火車站的時刻表,不用再按任何按鈕了,方便您在很快時間內確定要坐的哪一班火車


  • 下一班高鐵 (nextTHSR)

    這個 app 只要開啟後,就根據定位幫你過濾出最近高鐵站的時刻表,不用再按任何按鈕了,方便您在很快時間內確定要坐的哪一班高鐵


  • 條碼掃描器(QRCode)

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


  • 照片去背(PhotoEraser)

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