Gm_Addstyle Equivalent in Tampermonkey

GM_addStyle equivalent in TamperMonkey

According to the TamperMonkey documentation, it supports GM_addStyle directly, like GreaseMonkey does. Check your include/match rules are correct, then add this demo code to the top of your userscript:

GM_addStyle('* { font-size: 99px !important; }');
console.log('ran');

I just tested it on a fresh userscript in Chrome 35 and it worked as expected. If you have any other @grant rule, you will need to add one for this function, otherwise it should be detected and granted automatically.

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

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.

Multiple urls Tampermonkey

Something like this should do it.

Note that you need to modify the //@match line or it will only work for the given page (i.e. page 3 -- just end the line with a * at the point where the match can be wild-carded.

// ==UserScript==
// @name         voertuig.net SO EXAMPLE
// @namespace    http://tampermonkey.net/
// @match        https://voertuig.net/zoek/merk/volkswagen/datum-tenaamstelling/30-05-2018?pagina=3
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    //Look closely - this is not jQuery
    const $ = document.querySelector.bind(document);
    const $$ = document.querySelectorAll.bind(document);

    $('body').insertAdjacentHTML('beforeend', init_css() );
    $$('.voertuig').forEach((div) => {
        const lp = div.getAttribute('data-kentekenplaat');
        div.insertAdjacentHTML('beforeend', `<a target='_blank' class='finTagA' href='https://finnik.nl/kenteken/${lp}/gratis#historie'>Finnik ${lp}</a>`);
    });

})();
function init_css(){
    return `
    <style id="jdInitCss">
        .finTagA{width:100%;padding:5px;display:flex;justify-content:center;background:white;border-top:1px solid #ccccccCC;}
        .finTagA:hover{color:blue;}
    </style>
    `;
}

---

Related Topics