Coding4Fun-Facebook動態消息精簡化顯示

電影鐘點戰有一段一直令我印象深刻,在時間成為貨幣且貧富懸殊的未來世界,窮人們不敢賴床,不穿有繁瑣鈕扣配件的衣服、隨時隨地都在小跑步… 這些年來,工作與生活進入另一種平衡,但老覺可支配時間少得可憐,雖然手臂上沒有一組隨時在倒數的數字(仔細想想,打從一出生就有個看不到的數字在倒數了),無形中養成早起、快食、走路速度逼近小跑步的習慣。如果我在時間財M形化社會身處窮人這一端,另一端的好野人應該是早上睡到十二點,瞇著眼穿拖鞋搖搖晃晃散步去吃早餐的那群大學生吧?:P

這些年,臉書取代部落格成為我吸收技術、八卦時事、知識及人際訊息的主要管道,平日走路都習慣小跑步的時間窮鬼,無法容忍自己好整以暇待在FB動態消息頁面慢慢捲,又生怕漏看錯過重要資訊,兩相矛盾之下,不意外地演變為開著FB網頁拼命滾滑鼠,視窗快速向下捲動,根本開賽車來著 XD

久而久之,我發現有很大一部分被直接略過的訊息,多半是朋友在其他親友的公開貼文按讚、回應或被標註。這是FB設計的優點也是缺點,讓你有機會認識朋友的朋友,接收新訊息,擴大人脈,實踐社群網路的神聖精神。而缺點呢?要一路逛遍陌生人(朋友的朋友)旅遊打卡遛小孩吃下午茶聽演唱會換大頭貼照片的漫長清單,從中過濾找出想看的資訊。雖然不乏經由陌生人貼文認識有趣人、事、物的經驗,但它們畢竟來自陌生人,又常夾雜柴米油鹽等生活瑣事,資訊含量偏低,加上圖文並茂就會將動態時報撐得老長,我的食指滾滑鼠滾輪都快滾出六塊肌了(誤)。當然,將朋友分群組實現資訊減量是種解法,時間不夠就只看重要群組,其餘放生。但你知道的,對資訊焦慮症患者「寧可錯看一百,也不可錯放一個」才是終極奧義 orz

最近,我想出一個貌似兩全其美的做法,寫了個Tampermonkey/Greasemonkey外掛,用JavaScript技巧將朋友說讚、回應、被標註等三類訊息的本文隱藏起來,只留前64個字元當摘要,摘要本身是閞關,點下可展開原文,如下圖所示:

如此,動態消息的頁面長度大幅縮短,減輕食指操勞,而看到有興趣的仍可展開閱讀,不會錯失訊息,魚與熊掌兼得了啊!(喜極而泣)

我把腳本放在Greasy Fork,如果你的瀏覽器有裝Tampermonkey (Chrome) 或 Greasemonkey(Firefox)(堅持用IE的朋友請靜待Microsoft Edge,使用iOS/Android看臉書的朋友請當我沒說),可以點選這裡安裝腳本試用。

這個外掛以自製自用為宗旨,大家如果有意見可以回饋給我(在這裡或FB專頁留言),我會勉力修正強化,如有未盡人意之處,腳本原始碼是公開的,就"Use the source, Luke!"囉~


// ==UserScript==
// @name       Facebook動態消息精簡化顯示
// @namespace  http://blog.darkthread.net/
// @version    0.9
// @description  隱藏動態消息頁面的間接訊息(說讚、回應、被標註),只顯示64字元摘要,但可視需要展開原文
// @match      https://www.facebook.com/
// @copyright  2015+, Jeffrey Lee
// ==/UserScript==
 
//REF:http://stackoverflow.com/questions/15329167/closest-ancestor-matching-selector-using-native-dom
//模擬jQuery.closest()
function closest(elem, selector) {
    var matchesSelector = elem.matches || elem.webkitMatchesSelector || 
                          elem.mozMatchesSelector || elem.msMatchesSelector;
    while (elem) {
        if (matchesSelector.bind(elem)(selector)) {
            return elem;
        } else {
            elem = elem.parentElement;
        }
    }
    return false;
}
//取得頁面總長
function getDocHeight() {
    return document.documentElement.scrollHeight;
}
var lastLen = getDocHeight();
//隱藏元素,取得64個字元作為摘要,並提供展開功能
//PS:此段很脆弱,一旦FB修改DOM格式就會失效
function hidePost(elem) {
    var content = elem.parentElement.parentElement.parentElement
                  .nextElementSibling.nextElementSibling;
    var friend = content.querySelector("h6").innerText.replace(/\n/g, "");
    var abstract = content.querySelector(".userContent").innerText;
    if (abstract.length > 64) abstract = abstract.substr(0, 64) + "...";
    abstract = abstract.replace(/\n/g, " ");
    var spn = document.createElement("a");
    spn.innerText = friend + " - " + abstract;
    spn.onclick = function() { 
        content.style.display = "";
        spn.remove();
        //更新頁面長度
        lastLen = getDocHeight();
    };
    elem.parentElement.appendChild(spn);
    content.style.display = "none";
    
}
var busy = false;
setInterval(function() {
    //長度未改變時不動作
    if (getDocHeight() == lastLen || busy) return;
    busy = true; //防止重覆執行
    var ary = document.querySelectorAll(
        "div[id^=topnews_main_stream] h5 span.fcg:not([data-shrink])");
    for (var i = 0; i < ary.length; i++) { 
        ary[i].setAttribute("data-shrink", "Y"); //處理完畢加上註記
        var t = ary[i].innerText;
        if (t.indexOf("說這個讚") > -1 || t.indexOf("被標註") > -1 || 
            t.indexOf("回應了") > -1) 
            hidePost(ary[i]);
    }    
    //移除推薦貼文
    ary = document.querySelectorAll("div[id^=topnews_main_stream] ._5g-l");
    for (var i = 0; i < ary.length; i++) {
        closest(ary[i], ".userContentWrapper").innerText = ary[i].innerText;
    }
    lastLen = getDocHeight();
    busy = false;
}, 3*1000);

copyText();
歡迎推文分享:
Published 06 June 2015 04:45 PM 由 Jeffrey
Filed under:
Views: 4,502



意見

沒有意見

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<June 2015>
SunMonTueWedThuFriSat
31123456
78910111213
14151617181920
21222324252627
2829301234
567891011
 
RSS
創用 CC 授權條款
【廣告】
twMVC

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication