I am trying to remove two elements from youtube. They are gradients that appear white when using chromes force dark mode and are titled div.ytp-gradient-top and div.ytp-gradient-bottom. When I manually delete the thing in the html they go away and achieve the desired result. I am trying to use tamper monkey to write a script that always does this for me but nothing I do seems to work.
here is an example of the effect and class I am trying to remove. there is a top gradient as well.
here you can see when deleted, the ugly gradient goes awaywhen class is deleted the effect is removed
// ==UserScript==
// #name Chrome Force Dark Mode Fix/White Overlay Fix
// #namespace namespace
// #version 1.0
// #match *://youtube.com*
// #description Fixes Chrome Force Dark Mode on YouTube
// #grant GM_addStyle
// #grant GM.getValue
// #require http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// #require https://gist.github.com/raw/2625891/waitForKeyElements.js
// #run-at document-idle
// ==/UserScript==
/* globals jQuery, $, waitForKeyElements */
waitForKeyElements ("div.ytp-gradient-top", removeNode);
waitForKeyElements ("div.ytp-gradient-bottom", removeNode);
function removeNode (jNode) {
jNode.remove ();
}
(function() {
'use strict';
var elems = "div.ytp-gradient-top";
elems.item(0).remove();
var elems1 = document.getElementById("div.ytp-gradient-bottom");
elems1.remove();
})();
var badDivs = $("div.ytp-gradient-top div.ytp-gradient-bottom");
badDivs.parent ().remove ();
// find element
const todelete = document.getElementById('div.ytp-gradient-bottom');
// remove element if found
if (todelete) { todelete.style.display = 'none'; }
This is the code I have so far, taken from a bunch of somewhat similar things I could find online including here, from what I can see this is 4 different ways where I should be able to accomplish my relatively simple goal, but from what I can tell, this doesnt end up doing anything.
Any help would be appriciated.
The code is failing to remove the elements because you're trying to remove the elements by class selectors instead of by the class name itself. You can try changing your code as follows:
// ==UserScript==
// #name Chrome Force Dark Mode Fix/White Overlay Fix
// #namespace namespace
// #version 1.0
// #match *://youtube.com*
// #description Fixes Chrome Force Dark Mode on YouTube
// #grant GM_addStyle
// #grant GM.getValue
// #require http://ajax.googleapis.com/ajax/libs/jquery/2. 1.0/jquery.min.js
// #require https://gist.github.com/raw/2625891/waitForKeyElements.js
// #run-at document-idle
// ==/UserScript==
waitForKeyElements (".ytp-gradient-top", removeNode);
waitForKeyElements (".ytp-gradient-bottom", removeNode);
function removeNode (jNode) {
jNode.remove();
}
This code uses the . symbol to select elements by class name. The waitForKeyElements function waits for elements to appear on the page and removes them when they do.
apparantly something was wrong with the meta data.
I started over and tried this and it worked
// ==UserScript==
// #name Chrome Force Dark Mode Fix/White Overlay Fix
// #namespace http://tampermonkey.net/
// #version 0.1
// #description try to take over the world!
// #author You
// #grant none
// #include http://*
// #include https://*
// ==/UserScript==
(function() {
'use strict';
var elems1 = document.getElementsByClassName('ytp-gradient-bottom');
elems1[0].parentNode.removeChild(elems1[0]);
elems1 = document.getElementsByClassName('ytp-gradient-top');
elems1[0].parentNode.removeChild(elems1[0]);
})();
Related
I filled out the registration form on the site https://register.gotowebinar.com/register/2965111702634965004 automatically with a script.
// ==UserScript==
// #name Duolos autofill registration form
// #namespace http://tampermonkey.net/
// #version 0.1
// #description try to take over the world!
// #author blaz
// #match https://register.gotowebinar.com/register/*
// #icon https://www.google.com/s2/favicons?sz=64&domain=gotowebinar.com
// #grant none
// #run-at document-end
// ==/UserScript==
setTimeout(function(){
console.log("10s later...");
var formFirstName = document.getElementById('registrant.firstName')
var formEmail = document.getElementById('registrant.email')
formFirstName.value = 'My_first_name'
formEmail.value = 'my#email.com'
}, 10000);
However, when I want to confirm the form with the button on the page, I get a message that the fields filled in by the script have no content and I have to fill them in to go further. Is there any way around it?
I'm trying this code to apply new design on the Google Tasks page with the extension Tampermonkey.
When I try html{ display: none !important } then It displays nothing as the html tag is not under iframe.
however, I couldn't modify under iframe[src="about:blank"] element.
How should I modify to make it work?
shot 1. : Doesn't work for inside of iframe[src="about:blank"]
// ==UserScript==
// #name test
// #match https://mail.google.com/tasks/canvas
// #match about:blank
// #grant GM_addStyle
// ==/UserScript==
GM_addStyle ( `
* {color: red !important}
` );
Yes, scripting for iframes with src="about:blank" can be tricky as the normal userscript mechanisms do not work the same. (Currently, #match about:blank does not work, but it would be a bad idea to use it here anyway, since it would have global side effects.)
Fortunately, on Chrome, iframes with src="about:blank" almost always have a documentElement by the time a Tampermonkey script runs, so you do not normally need to wait if you are just adding CSS.
Here is a complete working script, that styles that first iframe:
// ==UserScript==
// #name _Style iframe with src="about:blank"
// #match https://mail.google.com/tasks/canvas
// #grant none
// ==/UserScript==
//-- Adjust the following selector to match your page's particulars, if needed.
var targetFrame = document.querySelector ("iframe[src='about:blank']")
if (targetFrame) {
addStyleToFrame (
`* {color: red !important}`
, targetFrame
);
}
function addStyleToFrame (cssStr, frmNode) {
var D = frmNode.contentDocument;
var newNode = D.createElement ('style');
newNode.textContent = cssStr;
var targ = D.getElementsByTagName ('head')[0] || D.body || D.documentElement;
targ.appendChild (newNode);
}
If the <iframe> tag is javascript created, or other delays hamper the above...
Use the iframeSelector parameter of waitForKeyElements to work around that.
The trick is to pick a node that always appears in the finished iframe, and pass that to waitForKeyElements.
The node should be unique.
But for the following example I used .goog-toolbar:first as a quick first attempt.
Here is that complete working script:
// ==UserScript==
// #name _Style iframe with src="about:blank"
// #match https://mail.google.com/tasks/canvas
// #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.
const desiredStyles = `* {color: red !important;}`;
waitForKeyElements (
".goog-toolbar:first",
addCSS_Style,
false,
"iframe[src='about:blank']"
);
function addCSS_Style (jNode) {
var frmBody = jNode.closest ("body");
//-- Optionally add a check here to avoid duplicate <style> nodes.
frmBody.append (`<style>${desiredStyles}</style>`);
}
Notes:
GM_addStyle() will not work in this case, so we add styles with a frame-aware function.
Google pages use: multiple, nested iframes; complex page (re)mangling; and HTML with poor "info scent". In short they are evil, ever-shifting, and can be a pain to script for. So, this simple example will work, but that's all that's in scope for this question. For more complex scenarios, open a new question and have plenty of beer money on hand.
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.
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');
});
I'm using the mouseover function to add extra content to a Facebook group. I test the DIV class to see if I have already added content.
It works for the first 10 or so DIVs with class storyInnerWrapper but then stops adding the text. I think it is due to the content being dynamic like Arun P Johny said below.
Here is a JSfiddle working example;
http://jsfiddle.net/hellonearthis/WHb2P/ with the fix and it works fine with the example.
Full grease monkey script below.
// ==UserScript==
// #name FaceBook
// #version 0.1
// #description Adds link
// #match https://www.facebook.com/*
// #match https://www.facebook.com/
// #require http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js
// ==/UserScript==
$( "div.storyInnerWrapper" ).mouseover(function() {
var $this = $(this);
if (!$this.data('extra')) {
$this.data('extra', true);
$this.append('<div>Added a div</div>');
}
});
You should not use the "id" attribute to "tag" an element. The "id" values must be unique. Instead, you could use .data() to mark the element, like this:
$('div.storyInnerWrapper').mouseover(function() {
var $this = $(this);
if (!$this.data('extra')) {
$this.data('extra', true);
$this.append('<div>Added a div</div>');
}
});
To fix the Dynamic content problem I was having I used waitForKeyElements
Mentioned countless times by Brock Adams Also big thanks to Arun P Johny for pointing me in the right direction and to John S for helping me improve the base code.
The final Greasemonkey scripts looks like this:
// ==UserScript==
// #name FaceBook_add_stuff
// #description Adds a div to wall posts when mouse is over them.
// #match https://www.facebook.com/*
// #match https://www.facebook.com/
// #require http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// #require https://gist.github.com/raw/2625891/waitForKeyElements.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.
*/
function addExtraSeedLinks (jNode) {
$( "div.storyInnerWrapper" ).mouseover(function() {
var $this = $(this);
if (!$this.data('extra')) {
$this.data('extra', true);
$this.append('<div>Added a div</div>');
}
});
}
waitForKeyElements (".storyInnerWrapper", addExtraSeedLinks);
You should do like this:
$( "div.storyInnerWrapper" ).mouseover(function() {
//var index = $( "div.storyInnerWrapper" ).index();
if ($("div.extra.storyInnerWrapper").index()== 0){ // if no tag
$("div.storyInnerWrapper" ).append( "<div class='extra'>Added a div</div>" );
}
});
Note that I've replaced #extra with .extra as id should be unique.
// ==UserScript==
// #name Supprimer les suggestions d'amis sur facebook
// #namespace facebook
// #description Supprimer les suggestions d'amis sur facebook
// #include *.facebook.com
// #require http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
// #version 1
// ==/UserScript==
// ==/UserScript==
jQuery(function(){ $("#pagelet_ego_pane_w").remove() });
jQuery(function(){ $(".ego_column").remove() });
jQuery(function(){ $(".ego_unit_container").remove() });
//alert ("supprimé ?");
None of these lines worked. I am using this in greasemonkey.
Please see screenshot : http://i.imgur.com/5bowH.jpg
Use waitForKeyElements(). Like so:
// ==UserScript==
// #name Supprimer les suggestions d'amis sur facebook
// #namespace facebook
// #include http://www.facebook.com/*
// #include https://www.facebook.com/*
// #require http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// #require https://gist.github.com/raw/2625891/waitForKeyElements.js
// #version 1
// ==/UserScript==
function removeEgoPane (jNode) {
jNode.remove ();
unsafeWindow.console.log ("Removed");
}
waitForKeyElements ("#pagelet_ego_pane_w, #pagelet_ego_pane", removeEgoPane);
Important:
Only some pages have the #pagelet_ego_pane_w div, and the script works perfectly on those. But, most pages put the ego bar in a #pagelet_ego_pane div. Hence the changed selector in the code above.
If the ego bar returns, check that it's still in one of those 2 nodes.
Do not .hide() the div; that just lets Facebook unhide it and also run slow JS against it. Better to remove those nodes if they are unwanted.
As suggested by subrikumarsao, the .hide() worked fine :)
Did you try $("#pagelet_ego_pane_w").hide() ? – subirkumarsao 3 hours
ago
$("#pagelet_ego_pane, #pagelet_side_ads, .ego_column").remove(); works for me.
I have this wrapped in a MutationObserver.
var target = document.querySelector("body");
// console.log(typeof target);
if (target) {
// create an observer instance
var observer = new MutationObserver(function(mutations) {
// Get rid of ad column on right side of page
$("#pagelet_ego_pane, #pagelet_side_ads, .ego_column").remove();
// Get rid of sponsored links
$("#contentArea .uiStreamSponsoredLink").parentsUntil("._5jmm").remove();
}
}