How to edit html with jQuery without conflicts via GreaseMonkey?

Question

I'm trying to find 'banned words' on page and if they're found hide them and all images on a page. Hiding images works fine with this.$ = this.jQuery = jQuery.noConflict(true);, but I have a problem with hide words. I use this code to do that:

txt = txt.replace(new RegExp(bannedWords[index], 'gi'),
'<span style=\'color:#000;background-color:#000\' class=\'banned\'>$&</span>');

there txt is body's html. It works, but also emits conflicts with page's jQuery, because I use $('body').html(txt); in the end.

To repeat my problem, use script

// ==UserScript==
// @name        Words Filter
// @description Filter words and disable images if it founded
// @include     http://myanimelist.net/*
// @version     3
// @require     http://code.jquery.com/jquery-latest.min.js 
// @grant       none
// ==/UserScript==

//window.addEventListener('load', function ()
document.addEventListener('DOMContentLoaded', 
                           function ()
{
    // Monkey jQuery conflict solving
    this.$ = this.jQuery = jQuery.noConflict(true);
    //var $ = jQuery.noConflict(true);

    //$('img').each(function(){$(this).hide();});
    var txt = $("body").html();
    $("body").html(txt);
    console.log('works'); // it doesn't show anything in the console. Why?
});

on MyAnimeList page. On the top of page you can see menu bar with "Profile|Anime|Manga|Community|Industry". It has drop-down list, which isn't appeared with my script. Also, for some reason, console.log('works'); show nothing in the console.

score 0 · Accepted Answer · edited May 23 '17 at 11:57

0

Edit: I found a solution here: jQuery in Greasemonkey 1.0 conflicts with websites using jQuery

Change the @grant to:

// @grant       GM_log

Then everything works well. Tried and tested as such:

// ==UserScript==
// @name        test
// @namespace   test
// @description Filter words and disable images if it founded
// @include     http://myanimelist.net/*
// @version     3
// @require     http://code.jquery.com/jquery-latest.min.js 
// @grant       GM_log
// ==/UserScript==

//window.addEventListener('load', function ()
document.addEventListener('DOMContentLoaded', 
                           function ()
{
    var _$ = this.jQuery = jQuery.noConflict(true);
    var txt = _$("body").html();
    _$("body").append('<span>SEARCH FOR ME IN SITE!</span>');
console.log('123123123123');
});

edited May 23 '17 at 11:57

Community

1
1

answered Jul 14 '14 at 07:48

Etai

1,483
1
11
15

As you have noticed (comment), I've tried `var $`. Tried it again. Doesn't work. You say, comment and this script works for you with page's jQuery? – Nexen Jul 14 '14 at 07:59
1

it works but there is still a conflict... I found a solution and updating – Etai Jul 14 '14 at 08:48
It isn't the solution. As I've said, I search occurences of words in the html, replace it with `WORD` and replace page's html with `$("body").html(txt);`. You dropped this and make it with '.append', which cannot help me. – Nexen Jul 14 '14 at 11:27
1

I gave you an example which shows that there is no conflict and that the console works. What you do with it is your own issue. Furthermore, you must replace each specific text node, and not the whole html itself, since otherwise you are breaking the page functionality (as it had events bound to the dom nodes) which is the only reason the drop down would no longer work. You would be replacing it with a new menu which wasnt created according to the original site developers. The answer i gave solves the problem you posted. If you need help with something else, go post another question. – Etai Jul 14 '14 at 11:45
The true answer is 'there is no way to edit html via $('body').html(), because it breaks DOM. You need to find all text nodes, split it with needed word and .append() word and text after word with -tag' – Nexen Jul 16 '14 at 10:28
Correct, which is why I explained that it is a different issue. Regarding greasemonkey and jquery, you have your answer. Not being able to do .html() on body has nothing to do with jquery+greasemonkey conflicts. – Etai Jul 16 '14 at 11:22

How to edit html with jQuery without conflicts via GreaseMonkey?

1 Answers1