We Keep Coding

Removing a div class with script

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]);
})();

How can I make setInterval work even when the tab in Chrome is inactive?

Please help me figure it out. I am writing a custom script for Tampermonkey.
Briefly about the script: the script updates the page on the site every 3 minutes, checks for the presence of an object and, if there is one, clicks on it.
Problem: when the tab is inactive (focus on another Google tab or the window is minimized), the script does not work, the setInterval and setTimeout timer stop working and the script does not update or search for anything. How to fix this situation?
// ==UserScript==
// #name User Script
// #namespace http://tampermonkey.net/
// #version 0.1
// #description try to take over the world!
// #author None
// #match https://www.twitch.tv/drops/inventory
// #icon https://www.google.com/s2/favicons?domain=tampermonkey.net
// #require https://code.jquery.com/jquery-1.11.0.min.js
// #grant none
/* globals jQuery, $, waitForKeyElements */
// ==/UserScript==
$(window).load(function(){
'use strict';
setTimeout(function(){
function SearchController(){
var i = 0;
var result = '';
$('.dYkLvU').each(function(){
if ($(this).find('button').find('.phMMp').text() == 'Click'){
$(this).find('button').find('.phMMp').trigger('click');
}
});
}
SearchController();
setInterval(function(){
location.reload();
}, 60000);
}, 4000);
});
I know about this thing (https://github.com/turuslan/HackTimer), but for some reason it doesn't work in Tampermonkey.

If I understand your need correctly, here an example of userscript that check some element and refresh the page every 10sec. It's working even if inactive or not focus.
You might need to ajust regarding your situation.
(function() {
'use strict';
if (window.location.href.indexOf('google') > 0) { //only if url contains 'google'
checkAndClick();
window.setTimeout(reload, 10000); //10sec
}
function reload() {
window.location.reload();
}
function checkAndClick() {
console.log('check and click');
$('.dYkLvU').each(function(){
if ($(this).find('button').find('.phMMp').text() == 'Click'){
$(this).find('button').find('.phMMp').trigger('click');
}
});
}
})();
Note: if you want to active/deactivate, a suggestion would be to add a button on the page, and play with GM_setValue / GM_getValue

Change CSS of the content of an iframe, that has src="about:blank", on Chrome

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.

JQuery add div to Facebook posts fails because of dynamic loading?

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.

Need help to hide the ego_bar in facebook

// ==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();
}
}