Greasemonkey script to hide AJAXed content on Twitter

Question

I am trying to hide all the protected accounts in Twitter without luck. The code is working on other pages with different classes of course, like here in Stack Overflow, though.

It has to do with the Ajax, but how can I fire it after the Ajax is completed?

// ==UserScript==
// @name          Hide twitter locked accounts
// @namespace     
// @description   I want to rule the world
// @include       *
// @require      http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
// ==/UserScript==


$(document).ready(function() {
$('.stream-item-content:has(.protected-icon)').hide();
});

perhaps becuase of the AJAX nature of Twitter ? ie the code above runs before the images are actually loaded — Manse, Nov 28 '11 at 21:29
If you mean the interface element images most of them are `background` images in the CSS not `` tags, though profile pictures are ``s — Ben Brocka, Nov 28 '11 at 21:31
See this ->http://stackoverflow.com/questions/1086417/how-to-load-a-greasmonkey-script-after-ajax-request — Manse, Nov 28 '11 at 21:31
@BenBrocka I tried a lot of scripts but nothing worked. I posted the *images* example though. — EnexoOnoma, Nov 28 '11 at 21:33
Ah, I see; @ManseUK is probably on the right track, Twitter is all AJAX — Ben Brocka, Nov 28 '11 at 21:35
[How can I intercept XMLHttpRequests from a Greasemonkey script?](http://stackoverflow.com/a/629782/829835) — rlemon, Nov 28 '11 at 21:42

jontro · Answer 1 · 2011-11-28T21:40:27.600

1

First of all I would do the loop more readable:

for (var n = images.length -1 ; n >=0; n--) {

After that set

img.style.display = "none";

to hide the image

Another approach would be to disable all image elements with a css selector. You can do this with jQuery and greasemonkey with

$('img').css({ 'display': 'none'});

Edit: This creates a style element which will match all img tags even if it's loaded afterwards with ajax.

var styleTag = document.createElement('style');
styleTag.type = "text/css";
styleTag.appendChild(document.createTextNode("img {display:none;}");
document.body.appendChild(styleTag);

edited Nov 28 '11 at 21:40

answered Nov 28 '11 at 21:30

jontro

10,241
6
46
71

Thank you for this, however the problem is that I want to fire the script after the Ajax request. – EnexoOnoma Nov 28 '11 at 21:35
+1 for the css solution, tho I must add I sort of like the original loop construct – Kris Nov 28 '11 at 21:36

score 0 · Answer 2 · edited May 23 '17 at 12:03

0

Twitter uses AJAX to bring in everything - text and images ... so you need to run the code after the AJAX loads have run - this answer How to load a greasemonkey script after AJAX-Request provides a function to do that ....

As per comment from @rlemon on question another example:

How can I intercept XMLHttpRequests from a Greasemonkey script?

edited May 23 '17 at 12:03

Community

1
1

answered Nov 28 '11 at 21:37

Manse

37,765
10
83
108

Hi again. I have updated my question with the exact thing I am trying to do. I am trying to make it work with the examples given but nothing.. – EnexoOnoma Nov 28 '11 at 21:51
That just waits until the DOM is ready not the ajax is loaded ... updated my answer to include another example – Manse Nov 28 '11 at 21:53

score 0 · Accepted Answer · answered Nov 29 '11 at 05:51

The most robust way to do this is to poll the page using an efficient interval-timer. This is also a lot easier in practice than intercepting and deciphering the AJAX calls.

Here's a script that does that, using my utility function "waitForKeyElements":

// ==UserScript==
// @name    Twitter: Hide protected accounts
// @include http://twitter.com/*
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
// ==/UserScript==

function HideProtectedAccounts (jNode) {

    jNode.hide();
}

waitForKeyElements ( 
    ".stream-item-content:has(.protected-icon)", 
    HideProtectedAccounts
);

/*--- waitForKeyElements():  A handy, utility function that
    does what it says.
*/
function waitForKeyElements (
    selectorTxt,    /* Required: The jQuery selector string that
                        specifies the desired element(s).
                    */
    actionFunction, /* Required: The code to run when elements are
                        found. It is passed a jNode to the matched
                        element.
                    */
    bWaitOnce,      /* Optional: If false, will continue to scan for
                        new elements even after the first match is
                        found.
                    */
    iframeSelector  /* Optional: If set, identifies the iframe to
                        search.
                    */
)
{
    var targetNodes, btargetsFound;

    if (typeof iframeSelector == "undefined")
        targetNodes     = $(selectorTxt);
    else
        targetNodes     = $(iframeSelector).contents ()
                                           .find (selectorTxt);

    if (targetNodes  &&  targetNodes.length > 0) {
        /*--- Found target node(s).  Go through each and act if they
            are new.
        */
        targetNodes.each ( function () {
            var jThis        = $(this);
            var alreadyFound = jThis.data ('alreadyFound')  ||  false;

            if (!alreadyFound) {
                //--- Call the payload function.
                actionFunction (jThis);
                jThis.data ('alreadyFound', true);
            }
        } );
        btargetsFound   = true;
    }
    else {
        btargetsFound   = false;
    }

    //--- Get the timer-control variable for this selector.
    var controlObj      = waitForKeyElements.controlObj  ||  {};
    var controlKey      = selectorTxt.replace (/[^\w]/g, "_");
    var timeControl     = controlObj [controlKey];

    //--- Now set or clear the timer as appropriate.
    if (btargetsFound  &&  bWaitOnce  &&  timeControl) {
        //--- The only condition where we need to clear the timer.
        clearInterval (timeControl);
        delete controlObj [controlKey]
    }
    else {
        //--- Set a timer, if needed.
        if ( ! timeControl) {
            timeControl = setInterval ( function () {
                    waitForKeyElements (    selectorTxt,
                                            actionFunction,
                                            bWaitOnce,
                                            iframeSelector
                                        );
                },
                200
            );
            controlObj [controlKey] = timeControl;
        }
    }
    waitForKeyElements.controlObj   = controlObj;
}

Notes:

This is for the main twitter site, right? If it's for a page with iFramed twitter content, adjust the parameters passed to waitForKeyElements, to match.
The key adjustables are the action function (HideProtectedAccounts, in this case) and the CSS selector(s) passed to waitForKeyElements.

Greasemonkey script to hide AJAXed content on Twitter

3 Answers3