How to change a class CSS with a Greasemonkey/Tampermonkey script?

by

For this, just use the CSS cascade. Add a style sheet to the page with GM_addStyle().
Note:

  • We use the !important flag to cover certain potential conflicts.
  • Use @run-at document-start (or use Stylus, see below) to minimize “flicker” associated with changing styles after the initial render.

A complete script:

// ==UserScript==
// @name     _Override banner_url styles
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @grant    GM_addStyle
// @run-at   document-start
// ==/UserScript==

GM_addStyle ( `
    .banner_url {
        background: url('http://www.pxleyes.com/images/contests/kiwis/fullsize/sourceimage.jpg') no-repeat center center fixed !important;
        -webkit-background-size: cover !important;
        -moz-background-size: cover !important;
        -o-background-size: cover !important;
        background-size: cover !important;
    }
` );

Note that if you are using Greasemonkey 4, it has busted GM_addStyle() (and a great many other things).
It is strongly recommended that you switch to Tampermonkey or Violentmonkey.
In fact, Greasemonkey’s controlling developer says as much himself.

In the mean time, here’s a shim for those masochists that persist with GM4:

function GM_addStyle (cssStr) {
    var D               = document;
    var newNode         = D.createElement ('style');
    newNode.textContent = cssStr;

    var targ    = D.getElementsByTagName ('head')[0] || D.body || D.documentElement;
    targ.appendChild (newNode);
}

Also, for pure CSS manipulation, the Stylish Stylus extension is a better choice than Greasemonkey/Tampermonkey.

More Related Contents:

  1. Can a website know if I am running a userscript?
  2. Simulating a mousedown, click, mouseup sequence in Tampermonkey?
  3. Save images to hard disk WITHOUT prompt?
  4. How to override the alert function with a userscript?
  5. Choosing and activating the right controls on an AJAX-driven site
  6. jQuery in Greasemonkey 1.0 conflicts with websites using jQuery
  7. Run Greasemonkey script on the same page, multiple times?
  8. How to get an AJAX get-request to wait for the page to be rendered before returning a response?
  9. Removing an anonymous event listener
  10. Why is window (and unsafeWindow) not the same from a userscript as from a tag?
  11. Injecting JS functions into the page from a Greasemonkey script on Chrome
  12. How to use greasemonkey to selectively remove content from a website
  13. Userscript to wait for page to load before executing code techniques?
  14. UserScripts & Greasemonkey: calling a website’s JavaScript functions
  15. Detecting combination keypresses (Control, Alt, Shift)?
  16. How can I load a shared web worker with a user-script?
  17. How to exclude iframe in Greasemonkey or Tampermonkey?
  18. Storing user login/password input in a Greasemonkey script on install
  19. How to use GM_xmlhttpRequest in Injected Code?
  20. Clicking a button on a page using a Greasemonkey/userscript in Chrome
  21. Chrome userscript error: “Unsafe JavaScript attempt to access frame”
  22. Add a JavaScript button using Greasemonkey or Tampermonkey?
  23. How do I get Greasemonkey to click on a button that only appears after a delay?
  24. CSS or jQuery : How to get visible top [duplicate]
  25. How to prevent Unicode characters from rendering as emoji in HTML from JavaScript?
  26. How do I clear the content of a div using JavaScript? [closed]
  27. Does .css() automatically add vendor prefixes?
  28. Synchronized scrolling using jQuery?
  29. How do I detect the inherited background-color of an element using jQuery/JS?
  30. Combination of animation and transition not working properly

Leave a Comment