1. 找出相簿裡所有的小圖URL
2. 利用小圖URL找出大圖URL
3. 回傳所有的大圖URL資訊.

再來介紹一下 filter function 回傳的結果定義. VIL 支援的回傳結果種類如下:

1. String array, 每個 Element 就是圖片的URL.
2. Object array, 每個 Element 是一個包含圖片相關資訊的 Object. 這個 Object 可包含以下 property:

• src: 圖片的 URL, required.
• desc: 圖片的說明文字, optional
• thumb: 縮圖的 URL, optional.
• link: 圖片在相簿中的連結, optional.

以上這些 properties 只有 src 是必要的, 其它的 property 如果不存在, 則會自動代換成 src.

接下來我們以無名相簿為例來說明怎麼樣寫 Filter Function. 先隨便打開一本無名的熱門相簿來參考. 在網頁上要秀圖片, 最常用的方法就是用 <img> tag. 所以我們可以用以下方法抓出頁面上所有的小圖:

function(){
  var images = document.getElementsByTagName("img");
}

這樣 images 陣列中就是頁面上所有的 <img> 了. 因此, 用以下迴圈就可以找出所有的小圖URL了.

function(){
  var images = document.getElementsByTagName("img");
  for(var i = 0; i < images.length; i++){
     var imgurl = images[i].src;
  }
}

接下來進行第二步, 來看看大圖和小圖片URL有沒有什麼關聯性. 如果你有 Firebug 可以直接用它來觀察:

不然, 用 DOM Inspector也不錯:

再不然直接 "檢視原始碼" 也可以 :

接下來就是找出大圖的URL:

比對一下:

小圖: http://f4.wretch.yimg.com/bunny1010/9/thumbs/t1344171903.jpg
大圖: http://f4.wretch.yimg.com/bunny1010/9/1344171903.jpg

這樣很明顯了吧? 所以我們再把圖片URL處理一下:

function(){
   var images = document.getElementsByTagName("img");
   for(var i = 0; i < images.length; i++){
       var imgurl = images[i].src.replace(/thumb\/t/,'');
   }
}

這樣就是所有的大圖URL了. 再來把所有大圖路徑存入 Array 之後回傳即可.

function(){
  var images = document.getElementsByTagName("img");
  var myurls = new Array();
  for(var i = 0; i < images.length; i++){
     var imgurl = images[i].src.replace(/thumb\/t/,'');
     myurls.push(imgurl);
  }
  return myurls;
}

如此就完成最基本的 filter 了. 當然功能是很陽春的, 不過已經足夠讓 VIL 顯示圖片了. 對進階功能有興趣的朋友可以參考 VIL wiki 上完整版的 filter for wretch. 如果有了什麼成果, 也歡迎跟我聯絡分享喔!

1. 如何比較遠端版本和已安裝的版本?
2. 如何下載並更新本機的Userscript?

首先來看第一個問題. 在 greasemonkey userscript 中, 要取得遠端網站上的資訊可以透過 GM_xmlhttpRequest 來進行, 因此只要遠端的 server 可以提供版本資訊, 或者 Last-Modified, 我們便可以拿來做為判斷依據. 不過以 Last-Modified 來判斷, 比較容易產生誤差. 所幸 VIL 目前是放在 Opensvn上, 而 SVN 會在 HTTP Response Header 的 ETag 中包含 SVN revision number:

---response begin---
HTTP/1.1 200 OK
Date: Sat, 19 Apr 2008 06:24:47 GMT
Server: Apache
Last-Modified: Sat, 19 Apr 2008 05:38:26 GMT
ETag: "55//userscripts/view.image.links.user.js"
Accept-Ranges: bytes
Content-Length: 44055
Connection: close
Content-Type: text/plain
X-Pad: avoid browser bug

所以我們可以比較這個值即可. 但是另一個問題是, 要如何取得已安裝程式的版本呢? 我原本有想過利用 SVN Keyword 的方式, 自動 replace 程式中的 $Revision$ keyword, 不過後來發現 SVN 是由 client 來進行 Keyword replace, 所以使用 HTTP 方式取得的內容Keyword並不會被代換掉, 因此只好用 GM_getValue/GM_setValue 來處理了. 以下便是 check update 的程式碼片斷:

    if('200' != rspDtls.status){
        GM_log('check failed, response HTTP status: '+rspDtls.status);
        return;
    }else{
        var myrev = parseInt(GM_getValue(revtag,'0'));
        var remoterev = parseInt(rspDtls.responseHeaders.match(/Etag:\s+"([0-9]+).*"/)[1]);
        GM_log('remote rev is ' + remoterev + ', current rev is ' + myrev);
        if(myrev < remoterev){
            return updateFunction(rspDtls, remoterev);
        }else{
            if(showOptMessage){
                alert('remote rev is ' + remoterev + ', my rev is ' + myrev + ', no need to update.');
            }
            return true;
        }
    }

至於第二點, "如何下載及更新本機Userscript", 我一開始的想法是直接 window.open() 到 userscript 的 URL, Greasemonkey 便會自動出現安裝提示. 但後來發現, 這樣的安裝方法會清掉現有的 Include/Exclude page 設定, 所以便改用直接覆蓋已安裝檔案的方法. 而問題又來了: 要如何取得現有的安裝路徑及檔名呢? 這時候就要直接去挖 greasemonkey extension 的 source 了. 在 greasemonkey 的 util.js 中可以看到這一段:

function getScriptDir() {
  var dir = getNewScriptDir();

  if (dir.exists()) {
    return dir;
  } else {
    var oldDir = getOldScriptDir();
    if (oldDir.exists()) {
      return oldDir;
    } else {
      // if we called this function, we want a script dir.
      // but, at this branch, neither the old nor new exists, so create one
      return GM_createScriptsDir(dir);
    }
  }
}
function getNewScriptDir() {
  var file = Components.classes["@mozilla.org/file/directory_service;1"]
                       .getService(Components.interfaces.nsIProperties)
                       .get("ProfD", Components.interfaces.nsILocalFile);
  file.append("gm_scripts");
  return file;
}

function getOldScriptDir() {
  var file = getContentDir();
  file.append("scripts");
  return file;
}

直接 copy paste 到 VIL 中就 ok 了. 取得 script install dir, 再用 DOMParser 取得安裝後的檔名(修改自 greasemonkey 的 config.js):

function getInstalledFileName(){
    var installedFilename = '';
    var configContents = getContents(getScriptFileURI("config.xml"));
    var domParser = new DOMParser();
    var doc = domParser.parseFromString(configContents, "text/xml");
    var nodes = doc.evaluate("/UserScriptConfig/Script", doc, null, 0, null);
  for (var node = null; (node = nodes.iterateNext()); ) {
        var fname = node.getAttribute("filename");
    var name = node.getAttribute("name");
    var namespace = node.getAttribute("namespace");
        if(name == MY_NAME && namespace == MY_NAMESPACE){
            installedFilename = fname;
            break;
        }
  }
  return installedFilename;
}

之後就直接 overwite 掉現有的 userscript, 再 alert 提示使用者重新整理頁面即可.

解決這兩個問題之後, userscript 便可以享有 auto-update 的功能了. 有在寫 userscript 的朋友可以參考看看.

完成後:

用 AutoUpdate 有什麼好處呢?

1. 不用重設 include/exclude page (如果直接用 greasemonkey 重新安裝就要重設)
2. 除了自動 update userscript, 還會自動更新 filter config!

設定頁面如下:

趕快安裝後試用看看吧!

PS. 如此你現在已經有另外設定過 include/exclude page, 那麼可以參考以下做法避免重設 include/exclude page:

• 打開 Greasemonkey 管理頁面:

• 先於左側點選 “View Image Links”, 然後再點選下方的 “編輯”:

如此一來, Firefox 會用 text editor 開啟已安裝的 userscript file, 此時自行把最新的 source code 貼上後存檔即可!

如果您有使用到 VIL 的 PicLens 功能或 Download 功能的話, 一定對這個提示視窗不陌生:

因為 PicLens 及 Download 功能, 都有透過 javascript 呼叫 Mozilla 的 XPCOM 元件, 來存取您電腦上的資源, 例如選擇本機目錄或寫入暫存 Media RSS 供 PicLens 讀取等等. 而要呼叫 XPCOM 元件就得先取得 “UniversalXPConnect” 的權限. 例如程式原始碼中可以看到如下片斷:

function browseOutputFolder(){
    unsafeWindow.netscape.security.PrivilegeManager
           .enablePrivilege("UniversalXPConnect");
    const nsIFilePicker = Components.interfaces
           .nsIFilePicker;
    var fp = Components.classes["@mozilla.org/filepicker;1"]
           .createInstance(nsIFilePicker);
    fp.init(window, "Album Output Folder", 
               nsIFilePicker.modeGetFolder);
    var rv = fp.show();
    if (rv == nsIFilePicker.returnOK) {
      _gel('vil_output_path').value = fp.file.path;
    }
}

這段程式會呼叫 XPCOM 中的 filepicker 類別, 讓使用者選擇要存放相簿的目錄. 當程式執行到 PrivilegeManager.enablePrivilege("UniversalXPConnect"); 這一行時, FireFox 就會出現要求使用允許的對話框了. 可是, 為什麼不可以勾選“記住此決定”呢? 假設我們在看無名相簿時使用了PicLens功能, 如果在確認對話框中有勾選“記住此決定”的話, 系統會把以下幾行存放到 profile 目錄下的 pref.js 中:

user_pref("capability.principal.codebase.p0.granted", "UniversalXPConnect");
user_pref("capability.principal.codebase.p0.id", "http://www.wretch.cc/");
user_pref("capability.principal.codebase.p0.subjectName", "");

事實上, 標紅字的部分應該要是執行 enablePrivilege(“UniversalXPConnect”) 的 script 所在的 Domain URL, 但是由於我們是在 Userscript 中執行的, 因此 FireFox 會以“目前的URL”加入記錄, 也就會變成 “http://www.wretch.cc/”. 如此, 以後如果 wretch.cc 中出現了 enablePrivilege(“UniversalXPConnect”) 呼叫, 就會直接被允許了, 形成安全漏洞.

如果您在使用 VIL + PicLens 時, 曾經勾選過“記住此決定”的話, 那麼先關閉FireFox 之後, 把 <profile>/pref.js 中 “capability.principal.codebase….” 相關的設定刪除後再重開 FireFox 即可. 造成大家不便請多多見諒囉! 近期有空的話我會把 VIL 改寫成 FireFox Extension 的, 請大家再耐心等等吧!

先從熱門相簿裡隨便挑一本來看看. 點一下右上角的 “Download” (介面變了, 把原本很多字的 Button 簡化了XD)之後:

點選”Browse”來選擇要儲存的目錄, 確認點選”Start”, 會先出現一個提示(雖然有點多餘, 但是理由下一篇會解釋)

下載時檔案列表會依進度變化, 全部下載完後會出現如下的提示!

以上! 各位圖片松鼠們快去收圖吧!

1. 為你的Firefox安裝以下 extension:
   • Greasemonkey(執行Userscript用)
   • RefControl(因為無名會擋 referer…)
   • PicLens當然也要裝
2. 到 http://userscripts.org/ 安裝 View Image Links userscript.

(如下圖, 按右邊的 “Install this script”)

3. 先設定 RefControl, 以無名相簿為例: - 由 Firefox 選單 Tools –> RefControl Options, 點選”新增網站”後, 依Wiki的說明輸入網站及自訂Referer值:

1. 設定filter, 以無名相簿為例
   • 由 Firefox 選單 Tools –> Greasemonkey –> Manage User Scripts, 左邊選 “View Image Links”, 按右邊的 “Add”, 再輸入 “http://www.wretch.cc/album/album.php*”

• 連到 http://www.wretch.cc/ ,選一本你想看的相簿, 如果設定正確會在右上角出現三個button:

• 點選 Config, 會出現以下的設定畫面, 在這可以依 Wiki的說明設定. 輸入完後點選”Save”.

• 點選 “View Image Links”, 應該會出現如下圖的 viewer 畫面

• 接著請試 “Start PicLens Lite”, 會看到以下的提示訊息:

• 點選確定後會看到 Lite 版的畫面.

• 到 Firefox 網址列輸入 about:config, 把 signed.applets.codebase_principal_support 設定值改為 true

• 回到無名相簿, 再次點選 “Start PicLens Lite”, 會出現以下確認視窗. 建議”不要”勾選”記住此決定”, 點選”允許”. (會出現此確認視窗是因為程式中用到 XPCOM 來寫檔, 檔案會存在 User Home 下的 gm_vil_temp_rss.xml)

• 允許後就會出現 3D 的 PicLens 囉!

大致上就是這樣. 如果你遇到PicLens只有顯示黑框, 但沒有正確顯示圖片, 那表示你的 RefControl 沒有設定好, 或是設定前就用 PicLens 看過同一頁(會被cache住),請設定好 RefControl 後再重開 Firefox即可.相關的 Filter 設定可以在 Wiki 上找到, 以後會陸續增加. 看圖快樂囉!

有這麼帥的工具, 不拿他來看正妹圖實在對不起自己啊! 很可惜的是, 目前正妹兩大集散地: 無名小站 & Pixnet 都沒有支援PicLens, 所以我就決定要自力救濟啦!

我之前寫過一個看圖專用的 Userscripts: View Image Links, 我自己是用得很順手啦, 但是我想沒幾個人像我一樣變態愛看圖, 所以用的人應該不多。這次把原本的程式修改了一下, 把原本由頁面上過濾出來的圖片URL資訊, 轉換成 Media RSS 格式, 再餵給PicLens Lite API, 所以原本單調的看圖畫面:

就變成了 PicLens Lite 版的畫面:

是不是好看多了? 但是…3D特效呢? 為什麼沒出來? 我明明就有安裝 PicLens Firefox Extension 啊?! 仔細研究了一下, 發現我原本的寫法, 是把產生出來的 RSS XML String 直接透過 API 呼叫傳入 PicLens, 而這種方式只會呈現 Lite 版介面(其實我很好奇為什麼有這個限制?). 不過, 山不轉路轉, 在測試之後發現, PicLens API 也接受 “file://” 開頭的 feed URL, 所以馬上動手修改, 3D 畫面就出來囉!

至於要怎麼安裝? 請看下一篇….

• 補一張看起來比較3D一點的圖? XD

整個架構幾乎和台幣歷史匯率一樣, 所以就不多說明了, 有興趣的朋友們請自行取用吧!

其實每年年底這幾個月, 工作都會比較忙碌, 自然也沒什麼時間寫東西, 不過倒是利用零碎時間寫了這個小工具.

有上次開發 Diggirl Gadget 的經驗, 這次開發花的時間就少了很多, 大部分的時間都是花在修改 jQuery Flot library 上(加入”畫游標” 的功能), 還有自訂config頁面上.

這個gadget是寫成 inline mode, 所以不能像 Diggirl Gadget 那樣放在頁面上, 有興趣的朋友可以到 iGoogle 的新增小工具頁面, 查詢台幣歷史匯率, 就可以找到這個gadget. 或者是點選這裡也可以.

另外, 這次我把Gadget的 source code 放到 google code project 裡了, 請自行取用

P.S. 補充一下, flot patch 可在此下載

UPDATED 因為現在 google gadget 不支援 html-inline mode 了, 所以處理 config 頁的部分修改了一下, 不能使用的朋友請等google gadget cache 更新後應該就會正常了.