唬人斯不唬人

昨天下班前突發奇想, 想來寫個 userscripts 來改善一下某些網站的看圖方法…於是, 就寫了這個 “View Image Links(VIL)”. 你可以想像這是某種 javascript 漫畫機 (布丁大師說這是 “AJAX漫畫機”, 我是覺得沒那麼偉大啦…:p )

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