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

change log 在 https://opensvn.csie.org/traccgi/MirrorScripts/trac.cgi/changeset/14 以下是新功能的 screenshot:

Enjoy!

Usage

這個 userscript 的預設行為是把目前頁面中所有的 “image link” 抓出來, (ex: <a href="aabbcc.jpg">aabbcc</a> 這樣的 link), 然後用類似看圖程式的方法顯示。

例如這樣的測試頁面:

如果有安裝這個 userscript, 右上角會出現一個 “Show image links viewer” 的 button:

按下這個 button 後, 就會出現 Viewer 畫面了:

使用方式滿直覺的, 有興趣請玩玩看吧!

P.S. 每個 button 都加上了 access key, 都設定為button的第一個字元. 所以 alt-n = Next, alt-p = Prev…etc.

Install

click here: view.image.links.user.js

NOTE: 這個 userscript 並沒有預設的 included page url pattern, 安裝後請自行到 “Manage User Scripts” 指定.

Hack!

當然, 如果只能看 Apache index page 的話還真的沒什麼意思, 所以接下來要介紹的是這個 userscript 的特點: filter config

這個程式用的 filter function 只有一個限制, 就是傳回值必須是一個內含圖片 URL 的 Array。例如, 預設的 filter code 如下:

//this is the default filter function
function defaultFilter(){
    //the array to store image urls
    var myurls = new Array();
    // get all <a href="....."> in current document
    var links = document.getElementsByTagName('a');
    //check all links
    for(var i=0;i<links.length;i++){
        // if the URL ended with jpg/gif/png
        if(links[i].href.match(/.*\.(jpg|gif|png)$/i)){
            //push to buffer
            myurls.push(links[i].href);
        }
    }
    //ta da!
    return myurls;
}

寫好了 filter code 之後, 就可以設定給 VIL. 但還必需指定這個 filter function 是給哪個 URL 用的。完整的 filter config 其實是一個 javascript associated array, key 是一個 regex pattern。 例如:

{ '^.*foo\.bar\.com.*$' : function(){ //filter function code here }}

表示 URL 中出現 foo.bar.com 的話, 就用這個 filter function. 若config 中設定的 regex pattern 跟目前的 URL 都不 match, 那麼程式會自動使用預設的 Filter.

寫好 filter config 後(強烈建議使用Javascript Shell來開發&測試), 您可以用 工具-> User Script Command 中的 “Image Link Viewer Filter…” 指令把 config 指定進去:

這個功能用到了 Javascript 裡的 prompt() function, 但一次只能輸入一行, 所以你得把 filter config 全部變成一行才能貼上。如果有人知道更好的方法請告訴我 :p

設定完後, refresh 就會生效了.

Example

以下的 filter config 範列是在看某相片很多的站用的, 請參考 :p

{
    '^.*www\.wretch\.cc.*$': function() {
        var myurls = new Array();
        var links = document.getElementsByTagName('img');
        for (var i = 0; i < links.length; i++) {
            if (!links[i].src.match( /^.*ad\.wretch.*$/ )) {
                myurls.push(links[i].src.replace( /thumbs\/t/,''));
            }
        }
        return myurls;
    }
}

縮成一行後:

{'^.*www\.wretch\.cc.*$': function() {var myurls = new Array();var links = document.getElementsByTagName('img');for (var i = 0; i < links.length; i++) {if (!links[i].src.match( /^.*ad\.wretch.*$/ )) {myurls.push(links[i].src.replace( /thumbs\/t/,''));}}return myurls;}}

請享用! XD

倒是在”新功能”裡看到, gmail 現在也有 virus scan 了, 不過那個說明…還真的滿冷的.. :p