首先要感謝這些愛用者的支持. 老實說, 這個問題在 3.0b1 時我就已經知道了, 看起來是 Firefox 在 3.0 中對 XPCOM 元件的安全性修正而造成的問題. 到目前為止, 我還找不到對應的解法, 所以得先請各位忍耐一下. 真的非 PicLens 不可的話可以考慮使用 Portable Firefox(在頁面下半的Legacy Versions中可找到2.0.0.14版的下載連結)。

事實上, VIL 在處理 PicLens / Download 功能時採用的方法不算是很正統的處理方式, 而要完全解決這個問題, 只有自己開發 extension 了. 目前我正在著手進行 VIL+ 的開發, 但是最近頗忙, 所以目前還處於停滯狀態 :p anyway, 先放個 screen shot 給大家看看:

VIL Viewer with local directory index. Auto Fit, Thumbs and Info panel are enabled.

總之, 請大家再多耐心等等吧!

這怎麼可能? 這幾個檔加起來也才不到200K吧? 怎麼會off limit? 後來去查了一下 googlepages 的 help, 也沒明確寫出 bandwidth/page view limit 是多少, 只好自立救濟一下囉! 首先把 jquery 指到 Google AJAX Libraries API, 再把其它幾個獨立的 static file(js/css/images, gadgets 程式(xml)本身會被 www.google.com/ig parse 後 cache 起來, 所以不用處理), 移到自己的 hosting, 再加上 gzip & expires header, 以減少 http access 次數.

目前 gadgets 程式檔已經更新, 應該等 igoogle cache 更新後就會生效. 如果有哪位朋友還是遇到 gadget 不正常的話請再通知我囉!

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 貼上後存檔即可!

這次的議程一如往常非常充實, 第一天議程主要由各 Sponsor 主講, 內容涵蓋 OS, Web/javascript, Distributed Computing 及語文處理, 最後還有 Kawasaki 桑的 Jet Stream Attack!, 第二天則分兩個場地同時進行, 而高天師一人主講三場更是當天的最佳男主角 第二天最後的 Lightning Talk 我也有報名參加. 事實上, 這是我第一次在這類活動中上台分享, 內容就是前幾篇提到的View Image Links. 時間只有短短5分鐘, 不得不很快帶過, 但是重點應該是都有講到了, 大家似乎也聽得很高興, 算是還不錯啦!

當然, 議程豐富之外, 網路(雖然我的網卡太舊連不上 orz)、點心及正妹一樣不缺(真相請到 flickr 上的 OSDC.tw Pool 找…), 更是大快人心!! 尤其是點心的充實程度, 差點讓我停不下來 XD 另外, 會場文化大學大新館離我當兵時的營區很近, 所以中午時自然是由我帶路找飯吃. 第一天吃了桃源街的菜肉大餛飩(Kawasaki桑還在他的旅遊書上找到推薦 XD). 而第二天則是吃了我很懷念的龍記搶鍋麵, 真是滿足啊!! 不過貪嘴的後果就是兩天下來胖了一公斤多 :~~~

明年的 OSDC 還會不會繼續舉辦呢? 這麼好的活動我當然是希望會繼續辦下去囉….也希望我明年還有空參加 XD

PS. 我在 Lightning Talk 的 Slides 可以在 這裡線上觀看, 或是在這裡下載PDF檔.

如果您有使用到 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 上找到, 以後會陸續增加. 看圖快樂囉!