使用 Greasemonkey 将文本更改为图像(在静态站点上）

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

本文关键字：静态 站点 图像 Greasemonkey 文本 使用      更新时间：2023-09-26

是否可以使用 Greasemonkey 将页面上的文本链接更改为实际图像，并修改这些链接？

假设页面上有一个表，该

表在第二列中显示一堆文件名，如下所示：<tr><td></td><td><a href="wwwlala001.html">wwwlala001.jpg</a></td>...</tr> ）。是否可以在页面加载时，第二列中的所有文件名（而不是链接）（如 wwwlala001.jpg更改为以下内容？

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

我尝试在这里修改代码，但没有运气：

    // ==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
*/

谢谢！

我不是用户脚本专家，但我有一个来自这里的脚本。原始站点已关闭，但这是脚本。

// ==UserScript==
// @name          Inline Image Relinker
// @namespace     /web/20070712085327/http://www.sitzmar.com
// @description   Replaces links to images with the actual image
// @include       *
// ==/UserScript==
(function() 
{
    function getXPath(p, context) 
    { 
        var arr = new Array(); 
        var xpr = document.evaluate(p,context,null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
        for(i = 0;item = xpr.snapshotItem(i); i++)
        { 
            arr.push(item); 
        } 
        return arr; 
    }
    doc = window.document;
    var xpath = "//A[(contains(@href, '.jpg') or contains(@href, '.jpeg') or contains(@href, '.gif') or contains(@href, '.bmp') or contains(@href, '.png')) and not(contains(@href, '.php') or contains(@href, '.asp'))]";
    results = getXPath(xpath, doc);
    for(i = 0; i < results.length; i++)
    {
        var img = document.createElement("img");
        var source = results[i].getAttribute("href");
        img.setAttribute("src", source);
        img.setAttribute("class", "what");
        results[i].textContent = "";
        results[i].appendChild(img);
    }
}
)();

以下是使用 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" />'
    );
} );

笔记：

  1. 切勿将@include *用于此类脚本！
  2. 这假定图像基 URL 始终相同。
  3. 初始选择器应根据部位进行调整，以避免令人不快的副作用。
  4. 如果你锤击一些网站，比如很多快速的图像请求，他们会限制你。 您只会获得几张图片，和/或您将被禁止/阻止。
  5. 像这样设置高度和宽度会扭曲大多数图像。 只需设置一个或另一个。
相关文章：