Replace Tumblr, Pinterest, Flickr images with larger versions in InoReader (RSS Reader)

Question

I'm looking to make a Greasemonkey script that will replace the images in Tumblr, Pinterest, Flickr, Facebook, and Webstagram RSS feeds with larger versions in InoReader.

I had been successfully using the following scripts in Google Reader for Tumblr and Pinterest. Would like to port them over to InoReader and combine them all into a single script.

Old Google Reader Tumblr script:

// ==UserScript==
// @name           Big Photos from Tumblr on Google Reader
// @include        http://*.google.com/reader/view/*
// @include        https://*.google.com/reader/view/*
// ==/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];
        r.style.maxHeight = "1080px";
        var i = r.src;
        if (i.indexOf("tumblr") > -1) {
            r.src = r.src.replace("_500.jpg", "_1280.jpg");
            r.onerror = function () {
                this.src = this.src.replace("_1280.jpg", "_500.jpg")
            }
        }
    }
}
}, false)

Old Google Reader Pinterest Script:

// ==UserScript==
// @id             greader-pinteresturlreplacer
// @name           Google Reader - Pinterest URL Replacer
// @version        1.3
// @include        https://www.google.com/reader/*
// ==/UserScript==

document.getElementById("chrome").addEventListener("DOMNodeInserted", function (e) {
var t = e.target;
if (t.tagName && t.tagName == "DIV" && /entry\b/i.test(t.className)) {
    var n = t.getElementsByTagName("img");
    for (var r in n) {
        var i = n[r];
        if (/pinterest\.com.*_b\.\w+$/.test(i.src) || /pinterest\.com\/192x\//.test(i.src)) {
            i.style.width = "inherit";
            i.style.height = "inherit";
            i.src = i.src.replace(/_b\.(\w+)$/, ".$1");
            i.src = i.src.replace(/\.com\/192x\//, ".com/550x/")
        }
    }
}
}, false);
document.getElementById("chrome").addEventListener("DOMNodeInserted", function (e) {
var t = e.target;
if (t.tagName && t.tagName == "DIV" && /entry\b/i.test(t.className)) {
    var n = t.getElementsByTagName("img");
    for (var r in n) {
        var i = n[r];
        if (/pinimg\.com.*_b\.\w+$/.test(i.src) || /pinimg\.com\/192x\//.test(i.src)) {
            i.style.width = "inherit";
            i.style.height = "inherit";
            i.src = i.src.replace(/_b\.(\w+)$/, ".$1");
            i.src = i.src.replace(/\.com\/192x\//, ".com/550x/")
        }
    }
}
}, false)

---

---

The following are working Greasemonkey InoReader scripts for Facebook, Webstagram, and Flickr.

InoReader Facebook:

// ==UserScript==
// @id             inoreaderfacebookthumbs
// @name           InoReader Facebook Thumbnail Replacer
// @version        1.0
// @include        https://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.
*/

/* Facebook Thumbnails */ 
 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;
}

InoReader Webstagram:

// ==UserScript==
// @id             inoreaderwebstagramthumbs
// @name           InoReader Webstagram Thumbnail Replacer
// @version        1.0  
// @include        https://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==

/* Webstagram Thumbnails */ 
waitForKeyElements (
"#reader_pane div.article_full_contents div.article_content a.underlink img",
swapOutWebstgmThumnails
);

function swapOutWebstgmThumnails (jNode) {
/*-- Change src from:
    https://*.amazonaws.com ... _6.jpg
    to:
    https://*.amazonaws.com ... _7.jpg
*/
var newSrc      = jNode[0].src.replace (/amazonaws/, "amazonaws");
newSrc          = newSrc.replace (/_6\.jpg$/, "_7.jpg");
jNode[0].src    = newSrc;
}

InoReader Flickr:

// ==UserScript==
// @id             inoreaderflickrthumbsreplacer
// @name           InoReader Flickr Thumbnail Replacer
// @version        1.0
// @include        https://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==

/* Flickr Thumbnails */ 
waitForKeyElements (
"#reader_pane div.article_full_contents div.article_content a.underlink img",
swapOutFlickrThumnails
);

function swapOutFlickrThumnails (jNode) {
/*-- Change src from:
    https://*.staticflickr ... _m.jpg
    to:
    https://*.staticflickr ... _b.jpg
*/
var newSrc      = jNode[0].src.replace (/staticflickr/, "staticflickr");
newSrc          = newSrc.replace (/_m\.jpg$/, "_b.jpg");
jNode[0].src    = newSrc;
}

Here are some sample RSS feeds for each: Tumblr, Flickr, Pinterest, Facebook, Webstagram

How do I merge these scripts? Thanks in advance.

Answer 1

Forget the older 2 scripts. They use DOMNodeInserted which is deprecated.

Merging the InoReader.com scripts is easy. They all use the same selector for waitForKeyElements(), so merely use if() statements to determine which regex to apply in the callback function.

Something like this should do it:

// ==UserScript==
// @name        InoReader Thumbnail Replacer
// @version     1.0
// @include     http://inoreader.com/*
// @include     http://www.inoreader.com/*
// @include     https://inoreader.com/*
// @include     https://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==

waitForKeyElements (
    "#reader_pane div.article_full_contents div.article_content a.underlink img",
    swapOutThumbnails
);

function swapOutThumbnails (jNode) {
    var imgSrc      = jNode[0].src;

    //-- The necessary regex changes depending on where the images are hosted.

    if (/staticflickr/.test (imgSrc) ) {
        /*-- Change src from:   https://*.staticflickr ... _m.jpg
                          to:   https://*.staticflickr ... _b.jpg
        */
        imgSrc      = imgSrc.replace (/_m\.jpg$/, "_b.jpg");
    }
    else if (/amazonaws/.test (imgSrc) ) {
        /*-- Change src from:   https://*.amazonaws.com ... _6.jpg
                          to:   https://*.amazonaws.com ... _7.jpg
        */
        imgSrc      = imgSrc.replace (/_6\.jpg$/, "_7.jpg");
    }
    else if (/fbcdn\-photos/.test (imgSrc) ) {
        /*-- Change src from:   https://fbcdn-photos- ... _s.jpg
                          to:   https://fbcdn-sphotos- ... _n.jpg
        */
        imgSrc      = imgSrc.replace (/fbcdn\-photos\-/, "fbcdn-sphotos-");
        imgSrc      = imgSrc.replace (/_s\.jpg$/, "_n.jpg");
    }
    else if (/pinimg\.com.*_b\.\w+$/.test (imgSrc) || /pinimg\.com\/192x\//.test (imgSrc) ) {
        /*-- Change src from:   http://*.pinimg.com/192x/...
                          to:   http://*.pinimg.com/550x/...
        */
        imgSrc      = imgSrc.replace(/\.com\/192x\//, ".com/550x/");
    }
    else if (/pinterest\.com.*_b\.\w+$/.test (imgSrc) || /pinterest\.com\/192x\//.test (imgSrc) ) {
        /*-- Change src from:   http://*.pinterest.com/192x/...
                          to:   http://*.pinterest.com/550x/...
        */
        imgSrc      = imgSrc.replace(/\.com\/192x\//, ".com/550x/");
    }

    jNode[0].src    = imgSrc;
}

/* Tumblr */
waitForKeyElements (
    "#reader_pane div.article_full_contents div.article_content img", swapOutThumbnails2
);

function swapOutThumbnails2 (jNode) {
    var imgSrc      = jNode[0].src;
    if (/tumblr/.test (imgSrc)) {
        imgSrc      = imgSrc.replace (/_500\.jpg$/, "_1280.jpg");
        jNode[0].addEventListener ("error", tumblrImgErrFix, false);
    }
    jNode[0].src    = imgSrc;
}

function tumblrImgErrFix () {
    this.src        = this.src.replace ("_1280.jpg", "_500.jpg");
    console.log ("*** Img Err fix.");
}