如何使GreaseMonkey脚本在页面显示之前影响页面中的元素？ [英] How to make a GreaseMonkey script affect elements in a page before they're displayed?

问题描述

我试图确保某个网站中的图片不显示，但仍然显示替代文字。最初我试图用Stylish（使用Firefox）来完成这个任务，并提出以下问题：

如何强制图像的替代文字显示，而不是图像？

接受的答案为我提供了一个使用Greasemonkey的替代解决方案。该脚本使用 waitForKeyElements 来隐藏图像，即使它们是使用AJAX添加的。

我将给定的脚本更改为以下内容：

  // == UserScript = = 
 // @name _Hide pics除了替代文字
 // @include http://YOUR_SERVER.COM/YOUR_PATH/* 
 // @require http：//ajax.googleapis。 com / ajax / libs / jquery / 2.1.0 / jquery.min.js 
 // @require https://gist.github.com/raw/2625891/waitForKeyElements.js 
 // @grant GM_addStyle 
 // == / UserScript == 
 
 GM_addStyle（\ 
 * {\ 
 background-image：none！important; \ 
} \ 
）; 
 
 waitForKeyElements（img，hideImageExceptForAltText）; 
 
 function hideImageExceptForAltText（jNode）{
 var imgAlt = jNode.attr（alt）; 
 var imgTitle = jNode.attr（title）; 
 
 jNode.css（display，none）; 
 
 var newSpan = $（< span>< / span>）; 
 newSpan.attr（title，imgTitle）; 
 newSpan.append（imgAlt）; 
 
 jNode.parent（）。append（newSpan）; 
} 
  

就像原始脚本一样，它存在图像仍然显示的问题在页面加载的过程中有一段时间。

是否有可能确保给定的函数能够防止页面上的图像立即显示， t是可见的吗？

编辑：布鲁克亚当斯的回复有我缺少的线索。如果有人正在寻找这样的事情，以下是我最终使用的。它在我需要的网站上运行良好，但我无法保证它可以在其他网站或其他浏览器上运行，而不是Firefox。

以下隐藏图像并替换他们与一个链接（背景图像除外）。点击该链接将显示图像。

  // == UserScript == 
 // @name TCRF images 
 // @namespace SOMETHING 
 // @include http://YOUR_SERVER.COM/YOUR_PATH/* 
 // @require http://ajax.googleapis.com/ajax/libs/jquery /2.1.0/jquery.min.js 
 // @require https://gist.github.com/raw/2625891/waitForKeyElements.js 
 // @version 1 
 // @grant GM_addStyle 
 // @ run-at document-start 
 // == / UserScript == 
 
 GM_addStyle（\ 
 * {\ 
 background-image：none！important; \ 
} \ 
 \ 
 img.gmImgHideHidden {\ 
 display：none！important; \ 
} \ 
）; 
 
 var num = 0; 
 
函数gmImgHideShowImg（imgId，linkId）
 {
 //使用普通的JavaScript，因为页面本身可能没有jquery 
 var img = document.getElementById（imgId） ; 
 img.className = img.className.replace（/（？：^ | \s）gmImgHideHidden（？！\S）/ g，''）; 
 
 var lnk = document.getElementById（linkId）; 
 lnk.parentNode.removeChild（lnk）; 
} 
 
 //导出显示图像功能，使其可以在网页中使用
 unsafeWindow.gmImgHideShowImg = exportFunction（gmImgHideShowImg，unsafeWindow）; 
 
 waitForKeyElements（img，hideImageExceptForAltText）; 
 
 function hideImageExceptForAltText（jNode）{
 var imgId = jNode.attr（id）; 
 
 //确保存在一个id，以便以后可以搜索图像
 if（typeof（imgId）==undefined）
 {
 imgId = gmImgHideImg+ num; 
 jNode.attr（id，imgId）; 
} 
 
 var imgDisp = jNode.css（display）; 
 
 var imgAlt = jNode.attr（alt）; 
 jNode.addClass（gmImgHideHidden）; 
 
 var linkId =gmImgHideLink+ num; 
 
 var linkNode = $（< a>< / a>）; 
 linkNode.attr（id，linkId）; 
 linkNode.append（Image：+ imgAlt）; 
 linkNode.attr（onclick，gmImgHideShowImg（'+ imgId +'，'+ linkId +''）; return false;）; 
 
 jNode.parent（）。append（linkNode）; 
 
 num ++; 
 
  

解决方案

这是为了在页面的其余部分加载之前设置CSS第一件事。

@ run-at document-start

code>和 GM_addStyle（）执行此操作。 （在Firefox上;未在最新的Tampermonkey上测试过）

这样，图像即使在几分之一秒内也不会显示出来，就像它们与原始代码一样，

这个完整的脚本显示了这个过程：

  // == UserScript == 
 // @name _Hide pics除了替代文字
 // @include http：// YOUR_SERVER .COM / YOUR_PATH / * 
 // @require http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js 
 // @require https：/ /gist.github.com/raw/2625891/waitForKeyElements.js 
 // @grant GM_addStyle 
 // @ run-at document-start 
 // == / UserScript == 
 GM_addStyle（\ 
 * {\ 
 background-image：none！important; \ 
} \ 
 img {\ 
显示：无！重要; \ 
} \ 
）; 
 
 / * --- $（document）.ready（）对于现代Firefox并不总是需要的，但
使用最大可移植性，当脚本运行在document-start时。
 * / 
 $（document）.ready（function（）{
 waitForKeyElements（img，hideImageExceptForAltText）; 
}）; 
 
 function hideImageExceptForAltText（jNode）{
 var imgAlt = jNode.attr（alt）||; 
 var imgTitle = jNode.attr（ title）;; 
 
 jNode.after（'< span title =''+ imgTitle +'>'+ imgAlt +'< / span>'）; 
} 
  

I'm trying to ensure that images in a certain website are not displayed, but the alt text is still displayed. Initially I attempted to accomplish this with Stylish (using Firefox) and asked the following question:

How to force an image's alt text to display instead of the image?

The accepted answer provided me with an alternative solution using Greasemonkey. The script uses waitForKeyElements to hide images even if they're added using AJAX.

I changed the given script to the following:

// ==UserScript==
// @name     _Hide pics except for alt text
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==

GM_addStyle ( "                                 \
    * {                                         \
        background-image: none !important;      \
    }                                           \
" );

waitForKeyElements ("img", hideImageExceptForAltText);

function hideImageExceptForAltText (jNode) {
    var imgAlt = jNode.attr("alt");
    var imgTitle = jNode.attr("title");

    jNode.css("display", "none");

    var newSpan = $("<span></span>");
    newSpan.attr("title", imgTitle);
    newSpan.append(imgAlt);

    jNode.parent().append(newSpan);
}

Just like the original script, this has the problem that the images are still displayed for a few moments as the page is loading.

Is it possible to ensure that the given function will prevent images on a page from being displayed immediately, so that they won't be visible at all?

EDIT: Brock Adams' reply had the clue I was missing. In case anyone is looking for something like this, the following is what I ended up using. It works fine on the site I needed it for, but I can't guarantee it will work on other sites or other browsers than Firefox.

The following hides images and replaces them with a link (except for background images). Clicking that link will display the image.

// ==UserScript==
// @name        TCRF images
// @namespace   SOMETHING
// @include     http://YOUR_SERVER.COM/YOUR_PATH/*
// @require     http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require     https://gist.github.com/raw/2625891/waitForKeyElements.js
// @version     1
// @grant       GM_addStyle
// @run-at      document-start
// ==/UserScript==

GM_addStyle ( "\
    * {\
       background-image: none !important;\
    }\
\
    img.gmImgHideHidden {\
       display: none !important;\
    }\
" );

var num = 0;

function gmImgHideShowImg(imgId, linkId)
{
    // Using plain JavaScript because the page itself may not have jquery
    var img = document.getElementById(imgId);
    img.className = img.className.replace( /(?:^|\s)gmImgHideHidden(?!\S)/g , '' );

    var lnk = document.getElementById(linkId);
    lnk.parentNode.removeChild(lnk);
}

// Exporting the "show image" function so that it can be used in the webpage
unsafeWindow.gmImgHideShowImg = exportFunction(gmImgHideShowImg, unsafeWindow);

waitForKeyElements ("img", hideImageExceptForAltText);

function hideImageExceptForAltText (jNode) {
    var imgId = jNode.attr("id");

    // Ensuring an id exists so the image can be searched for later
    if(typeof(imgId) == "undefined")
    {
        imgId = "gmImgHideImg" + num;
        jNode.attr("id", imgId);
    }

    var imgDisp = jNode.css("display");

    var imgAlt = jNode.attr("alt");
    jNode.addClass("gmImgHideHidden");

    var linkId = "gmImgHideLink" + num;

    var linkNode = $("<a></a>");
    linkNode.attr("id", linkId);
    linkNode.append("Image: " + imgAlt);
    linkNode.attr("onclick", "gmImgHideShowImg('" + imgId + "', '" + linkId + "'); return false;");

    jNode.parent().append(linkNode);

    num++;
}

解决方案

A simple, robust way to do this is to set CSS first-thing, before any of the rest of the page loads.

@run-at document-start and GM_addStyle() do this. (on Firefox; not tested on latest Tampermonkey)

That way, the images are not displayed even for a fraction of a second, like they are with the original code or with a complicated, finicky MutationObserver approach.

This complete script shows the process:

// ==UserScript==
// @name     _Hide pics except for alt text
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// @run-at   document-start
// ==/UserScript==
GM_addStyle ( "                                 \
    * {                                         \
        background-image: none !important;      \
    }                                           \
    img {                                       \
        display: none !important;               \
    }                                           \
" );

/*--- $(document).ready() is not always needed for modern Firefox, but
    use for maximum portability, when script runs at document-start.
*/
$(document).ready ( function () {
    waitForKeyElements ("img", hideImageExceptForAltText);
} );

function hideImageExceptForAltText (jNode) {
    var imgAlt      = jNode.attr("alt")     || "";
    var imgTitle    = jNode.attr("title")   || "";

    jNode.after ('<span title="' + imgTitle + '">' + imgAlt + '</span>');
}

这篇关于如何使GreaseMonkey脚本在页面显示之前影响页面中的元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！