Replace Facebook thumbnails in a RSS Reader (InoReader)

Question

I'm looking to create a Greasemonkey script that will replace Facebook thumbnails in InoReader or any other RSS reader. Previously I had been successfully using the script below in Google Reader, but it doesn't work in InoReader, Feedly, or any non-Google RSS Reader.

// ==UserScript==
// @id             greader-facebookurlreplacer
// @name           Google Reader - Facebook URL Replacer
// @version        1.1
// @namespace      
// @author         
// @description    
// @include        https://www.google.com/reader/*
// @include        https://www.feedspot.com/*
// ==/UserScript==

document.getElementById("chrome").addEventListener("DOMNodeInserted", function (e) {
if (e.target.tagName && e.target.tagName == "DIV" && /entry\s?/.test(e.target.className)) {
    var t = e.target.getElementsByTagName("img");
    for (var n in t) {
        var r = t[n];
        if (/.*akamaihd\.net.*_s\.\w+$/.test(r.src)) {
            r.style.width = r.style.height = "inherit";
            r.src = r.src.replace(/_s\.(\w+)$/, "_n.$1")
        }
    }
}
}, false)

I also tried using the following code retrieved from a similar post on stackoverflow, but it doesn't work either in InoReader.

$("img[src^='https://fbcdn-photos-a.akamaihd.net']")
.each(function()
{ 
  this.src = this.src.replace(/(\/[^/]*)s\.jpg$/, '/s720x720$1n.jpg');
});​

Any help would be greatly appreciated.

Answer 1

DOMNodeInserted is deprecated. Don't use that approach anymore. Best to use a utility like waitForKeyElements.

After that, it's just a matter of finding the right jQuery selector for the images, and then the right regex to convert the src to the one for the larger image size. (But note that some sites deliberately make the regex approach impossible.)

For the sample RSS feed you listed, on inoreader.com, we can use Firebug to determine a CSS/jQuery path to the thumbnails of:

#reader_pane div.article_full_contents div.article_content a.underlink img

For the src changes/regex, see the code.

Here's how to replace the images, for that feed, on that reader:

// ==UserScript==
// @name     _InoReader thumbnail replacer
// @include  http://www.inoreader.com/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/
waitForKeyElements (
    "#reader_pane div.article_full_contents div.article_content a.underlink img",
    swapOutFbcdnThumnails
);

function swapOutFbcdnThumnails (jNode) {
    /*-- Change src from:
        https://fbcdn-photos- ... _s.jpg
        to:
        https://fbcdn-sphotos- ... _n.jpg
    */
    var newSrc      = jNode[0].src.replace (/fbcdn\-photos\-/, "fbcdn-sphotos-");
    newSrc          = newSrc.replace (/_s\.jpg$/, "_n.jpg");
    jNode[0].src    = newSrc;
}