I wondering if it's possible to create a Tampermonkey script with javascript that will find and replace an existing html or css element that already exists.

In my case I want to add this to the css element at the domain google to change display to none:

    #tvcap {
        display: none;
    }

This prevents me from seeing annoying ads. I use Pi-hole, so at this point they are just taking up space on my screen.

I installed Amino: Live CSS Editor chrome extension and it's working great. I only have to use these 3 lines of code but I'd preferably want to use Tampermonkey with a JS script.

example:

Before:

After:

I wondering if it's possible to create a Tampermonkey script with javascript that will find and replace an existing html or css element that already exists.

In my case I want to add this to the css element at the domain google. to change display to none:

    #tvcap {
        display: none;
    }

This prevents me from seeing annoying ads. I use Pi-hole, so at this point they are just taking up space on my screen.

I installed Amino: Live CSS Editor chrome extension and it's working great. I only have to use these 3 lines of code but I'd preferably want to use Tampermonkey with a JS script.

example:

Before:

After:

• javascript
• html
• css
• tampermonkey

Share Improve this question Follow edited Dec 13, 2020 at 7:35 coder9741 asked Dec 13, 2020 at 7:12 coder9741coder9741 10111 silver badge1212 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

You could use a simple utility function like this:

function addStyle(styleText){
    let s = document.createElement('style')
    s.appendChild(document.createTextNode(styleText))
    document.getElementsByTagName('head')[0].appendChild(s)
}

Using the template string format, it is now easy to add css:

addStyle(`
  body{
    color:red;
  }
`)

That's really a nice idea.

You can't directly change the CSS in the way you are doing.

You need to find the element using the ID with getElementById and change the style property of the HTML element

In your case, simplest code will be:

document.getElementById("tvcap").style.display = "none";

Daniele

This works.

// ==UserScript==
// @name         Block google ads
// @namespace    http://tampermonkey/
// @version      0.1
// @description  try to take over the world!
// @author       You, credit: https://stackoverflow./users/5053475/daniele-rugginenti
// @match        https://*/*
// @grant        none
// ==/UserScript==



(function() {
    'use strict';

    document.getElementById("tvcap").style.display = "none";
})();