Use Greasemonkey to change Text to Images (on a static site)?

Matthew 发表于 Dev

user1445975

Is it possible to use Greasemonkey to change text links on a page to actual images, and also to modify those links?

Let's say there's a table on a page that is displaying a bunch of filenames in the second column like this: <tr><td></td><td><a href="wwwlala001.html">wwwlala001.jpg</a></td>...</tr>). Is it possible to have it so that when the page loads, all of the filenames (not the links) in the second column like wwwlala001.jpg change to this?:

<img src="http://domain.com/images/wwwlala001.jpg" width="200" height="200" />

I tried modifying the code here, but I had no luck:

    // ==UserScript==
// @name    _Image delinker
// @include http://dotup.org
// @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==

var imageExtensions = ["gif", "png", "jpg", "jpeg"];
var imgExtRegex     = new RegExp(
    '\\.(' + imageExtensions.join ('|') + ')$', 'i'
);

/*-- Tune the CSS path, for each site, to only find links that can be
    the image links you care about.
*/
//-- For forums.hardwarezone.com.sg
waitForKeyElements ("page div > a", delinkImage);

function delinkImage (jNode) {
    var imgUrl  = jNode.attr ("href");

    if (imgExtRegex.test (imgUrl) ) {
        //-- Found an image link.  Replace contents.
        jNode.html (
            '<img src="http://domain.com/images/' + imgUrl
            + '" width="200" height="200" class="gmDeLinked" alt="GM replaced image">'
        );
    }
}

GM_addStyle ( "                                 \
    img.gmDeLinked {                            \
        border:             1px solid lime;     \
        max-width:          90vw;               \
    }                                           \
" );
/*
Exception: waitForKeyElements is not defined
@Scratchpad/2:18
*/

Thank you!

Brock Adams

Here is the classic, simple approach for a static site, using jQuery:

// ==UserScript==
// @name     _image delinker, static site
// @include  http://dotup.org/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.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.
*/

var imageExtensions = ["gif", "png", "jpg", "bmp"];
var imgExtRegex     = new RegExp(
    '\\.(' + imageExtensions.join ('|') + ')$', 'i'
);

//-- This jQuery selector is custom for each new site...
var imgLinks    = $("table tr td > a")
//-- Also custom for the site...
var urlBase     = "http://www.dotup.org/uploda/";

//-- Remove non-image links.
imgLinks.filter ( function() {
    return imgExtRegex.test (this.textContent);
} );

imgLinks.each ( function () {
    var jThis       = $(this);  // This is one of the links
    var filename    = $.trim (jThis. text () );

    //-- Rreplace link content with image:
    jThis.html (
        '<img src="' + urlBase + filename + '" height="200" />'
    );
} );

Notes:

NEVER use @include * for this kind of script!
This assumes that the image base URL is always the same.
The initial selector should be tuned to the site, to avoid unpleasant side effects.
If you hammer some sites, like this for a lot of rapid image requests, they will throttle you. You'll only get a few images, and/or you'll get banned/blocked.
Setting both the height and width like that will distort most images. Just set one or the other.

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。