How to Use Greasemonkey to Selectively Remove Content from a Website

How to use greasemonkey to selectively remove content from a website

For questions like this, post a link to the target page. Or, if that is really not possible, save the page to pastebin.com and link to that.

Anyway, the general answer to your question is not too hard with the jQuery contains() selector. Something like this will work:

// ==UserScript==
// @name _Remove annoying divs
// @include http://YOUR_SERVER/YOUR_PATH/*
// @require http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @grant GM_addStyle
// ==/UserScript==
//- The @grant directive is needed to restore the proper sandbox.

/*--- Use the jQuery contains selector to find content to remove.
Beware that not all whitespace is as it appears.
*/
var badDivs = $("div div:contains('Annoying text, CASE SENSITIVE')");

badDivs.remove ();

//-- Or use badDivs.hide(); to just hide the content.



Update for the newly clarified question/code:

In your specific example, you would use this:

var badDivs = $("div.entry div.foo:contains('Yes')");

badDivs.parent ().remove ();



Update for the site specified in the comments:

Note that there is no need to search for text because the site conveniently gives the key div a class of isHot or notHot.

// ==UserScript==
// @name _Unless they're hot, they're not (shown).
// @include http://www.ratemyprofessors.com/SelectTeacher.jsp*
// @require http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @grant GM_addStyle
// ==/UserScript==
//- The @grant directive is needed to restore the proper sandbox.

var badDivs = $("#ratingTable div.entry").has ("div.notHot");

badDivs.remove ();




Finally, for dynamic (AJAX driven) pages,

use MutationObserver or waitForKeyElements. (WaitForKeyElements also works fine on static pages.)

Here's the above script rewritten to be AJAX aware:

// ==UserScript==
// @name _Unless they're hot, they're not (shown).
// @include http://www.ratemyprofessors.com/SelectTeacher.jsp*
// @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==
//- The @grant directive is needed to restore the proper sandbox.

waitForKeyElements ("#ratingTable div.entry", deleteNotHot);

function deleteNotHot (jNode) {
if (jNode.has("div.notHot").length) {
jNode.remove ();
}
}

How to use Greasemonkey to selectively remove content from a website?

That content appears to be static. So just leverage the page's jQuery like so:

// ==UserScript==
// @name _Remove sponsored content
// @match *://www.monitor.hr/*
// @grant none
// ==/UserScript==

$(".supertitle > a[href*='marketing/sponzorirana']").closest (".news").remove ();


If more of those blocks are added dynamically, use waitForKeyElements() as shown in this answer. Something like this (untested in GM4):

// ==UserScript==
// @name _Remove sponsored content
// @match *://www.monitor.hr/*
// @require https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant none
// ==/UserScript==
waitForKeyElements (".supertitle > a[href*='marketing/sponzorirana']", removeNewsNode);

function removeNewsNode (jNode) {
jNode.closest (".news").remove ();
}



Finally, per Greasemonkey's own developers, switch to Tampermonkey or Violentmonkey. Greasemonkey 4+ has serious deficiencies.

Specific Website content removal via Greasemonkey

Actually, that first article you linked has the technique you need. Since your target page adds the offensive content using javascript, you need to use something like waitForKeyElements().

Note that :contains searches for text, but the offending "this-week-in-anime" is in various node attributes. So, we look for links with it in their href.

Here's the configuration for your target website:

// ==UserScript==
// @name _Anime News Network, remove "This Week in Anime" articles
// @match *://www.animenewsnetwork.com/*
// @require https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant none
// ==/UserScript==
//-- WARNING: Using the page's copy of jQuery. This may blow up at some point.
/* global $, waitForKeyElements */

waitForKeyElements (".thumbnail > a[href*='this-week-in-anime']", hideContainerNode);

function hideContainerNode (jNode) {
//-- jQuery closest() finds an ancestor of current node.
var containerNode = jNode.closest (".herald.box");
containerNode.hide ();
}

Greasemonkey Script Failing To Remove Element

There are many problems with that userscript, but they mostly boil down to: You need to note the error messages in the console and google the functions that are causing them.

For example:

  • That's not how getElementsByClassName works.
  • querySelectorAll does not return a node.
  • parentNode and removeChild both act on a single node.

Also: the second setTimeout does not appear to be needed. And the load event listener is also (probably) superfluous.

Here is the script with those deficiencies corrected:

// ==UserScript==
// @name Gocomics, Strip Sidebar
// @match https://www.gocomics.com/*
// @version 2
// @grant none
// ==/UserScript==

var interval = Math.random () * 5000 + 1000;
setTimeout (killsidebar, interval);

function killsidebar () {
//-- querySelector() and querySelectorAll () are not the same.
var adSidebar = document.querySelector ('.gc-container-fluid .layout-2col-sidebar, .gc-page-header--hero .layout-2col-sidebar');
if (adSidebar) {
adSidebar.parentNode.removeChild (adSidebar);
}
}

Although, this script will probably perform better:

// ==UserScript==
// @name Gocomics, Strip Sidebar
// @match https://www.gocomics.com/*
// @version 2
// @require https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant GM_addStyle
// @grant GM.getValue
// ==/UserScript==
//- The @grant directives are needed to restore the proper sandbox.

waitForKeyElements (
".gc-container-fluid .layout-2col-sidebar, .gc-page-header--hero .layout-2col-sidebar",
removeNode
);

function removeNode (jNode) {
jNode.remove ();
}

It uses waitForKeyElements -- which is faster and more robust that a straight setTimeout.

Remove a javascript function with Greasemonkey

It's not clear that update is a global function. If it isn't then that approach won't work.

But you can override the keypress handler with:

unsafeWindow.document.onkeypress = function(){};



For a general, high-powered way to selectively block, or replace, any JS (on Firefox), use @run-at document-start and the checkForBadJavascripts function, like so:

// ==UserScript==
// @name _Replace select javascript on a page
// @include http://YOUR_SERVER.COM/YOUR_PATH/*
// @require https://gist.github.com/raw/2620135/checkForBadJavascripts.js
// @run-at document-start
// @grant GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
introduced in GM 1.0. It restores the sandbox.
*/

checkForBadJavascripts ( [
[ false,
/document\.onkeypress\s*=\s*update/,
function () {
addJS_Node (myKeypressFunction.toString() );
addJS_Node ('document.onkeypress = myKeypressFunction;');
}
]
] );

function myKeypressFunction (evt) {
/* DO WHATEVER HERE BUT USE NO GREASEMONKEY FUNCTIONS INSIDE
THIS FUNCTION.
*/
console.log ("Keypress function fired.");
}

See this answer, for more information on checkForBadJavascripts.

Need javascript help on how to 'back-step' x location to delete a different type of tag inside the same tree

If your code only needs to run on a recent version of Firefox/Greasemonkey you can use:

var objA = document.querySelector("a[name='JustDoIT']");
objA.parentNode.parentNode.remove();

However if you need backwards compatibility to older/other browsers, you need:

var objA = document.querySelector("a[name='JustDoIT']");
var grandParent = objA.parentNode.parentNode;
grandParent.parentNode.removeChild(grandParent);

References:

https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove

https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild



Related Topics



Leave a reply



Submit