问题
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.
回答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.");
}
来源：https://stackoverflow.com/questions/17439306/replace-tumblr-pinterest-flickr-images-with-larger-versions-in-inoreader-rss