GM_addStyle equivalent in TamperMonkey
Solution 1
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.
Solution 2
Version 4.0 or +, update of 2018
ReferenceError: GM_addStyle is not defined
You need to create your own GM_addStyle function, like this :
// ==UserScript==
// @name Example
// @description Usercript with GM_addStyle method.
// ==/UserScript==
function GM_addStyle(css) {
const style = document.getElementById("GM_addStyleBy8626") || (function() {
const style = document.createElement('style');
style.type = 'text/css';
style.id = "GM_addStyleBy8626";
document.head.appendChild(style);
return style;
})();
const sheet = style.sheet;
sheet.insertRule(css, (sheet.rules || sheet.cssRules || []).length);
}
//demo :
GM_addStyle("p { color:red; }");
GM_addStyle("p { text-decoration:underline; }");
document.body.innerHTML = "<p>I used GM_addStyle.</p><pre></pre>";
const sheet = document.getElementById("GM_addStyleBy8626").sheet,
rules = (sheet.rules || sheet.cssRules);
for (let i=0; i<rules.length; i++)
document.querySelector("pre").innerHTML += rules[i].cssText + "\n";
DEPRECATED
If GM_addStyle(...)
doesn't work, check if you have @grant GM_addStyle
header.
Like this :
// ==UserScript==
// @name Example
// @description See usercript with grant header.
// @grant GM_addStyle
// ==/UserScript==
GM_addStyle("body { color: white; background-color: black; } img { border: 0; }");
Solution 3
If somebody is interessted, I changed the code so you don't have to write "!important" after every css rule. Of course this only works, if you use the function instead of GM_addStyle.
function addGlobalStyle(css) {
var head, style;
head = document.getElementsByTagName('head')[0];
if (!head) { return; }
style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = css.replace(/;/g, ' !important;');
head.appendChild(style);
}
The output of this "addGlobalStyle('body { color: white; background-color: black; }');
",
will be "body { color: white !important; background-color: black !important; }');
"
Solution 4
I was having this same issue. I tried all the fixes, making sure to have // @grant GM_addStyle
in the header. My issue was, I also had the default code's // @grant none
at the bottom of the header. Removed that piece and now all my css works. Hope this helps someone else if they are stuck on this too.
arserbin3
Currently developer in ASP.Net MVC and C#, as the tech lead and head of VCU Advancement Service's programming team.
Updated on July 09, 2022Comments
-
arserbin3 almost 2 years
Is there a TamperMonkey equivalent to GreaseMonkey's
GM_addStyle
method for adding CSS?In GreaseMonkey, you can add a bunch of CSS properties to multiple elements like so:
GM_addStyle("body { color: white; background-color: black; } img { border: 0; }");
To do the equivalent in TamperMonkey, I'm currently having to do the following:
function addGlobalStyle(css) { var head, style; head = document.getElementsByTagName('head')[0]; if (!head) { return; } style = document.createElement('style'); style.type = 'text/css'; style.innerHTML = css; head.appendChild(style); } addGlobalStyle('body { color: white; background-color: black; }');
This works, but is there a built-in
GM_addStyle
equivalent for TamperMonkey that saves me from having to repeat this on every script? -
arserbin3 almost 10 yearsHeh, I didn't think to test something seemingly unlikely like that .. with its
GM_
prefix. They should work on better PageRank of that documentation .. currently invisible on google.com/search?q=tampermonkey+gm_addstyle - Thanks! -
Husky about 9 yearsThis doesn't seem to work, i'm getting
ERROR: Execution of script failed! GM_addStyle is not defined
messages in the console. -
lpd about 9 years@Husky remember you must grant the function as described in the answer (I wouldn't rely on automatic detection), and obviously any code you inject into the page context will not be able to access the GM functions. I just tested as above and the function still appears to be working fine.
-
Black over 6 yearsThere is no info about this in your answer.
-
GWu over 5 yearsDon't forget to add // @grant GM_addStyle in header!
-
Malvineous almost 5 yearsAs of 2019
GM_addStyle
works if you put it in the@grant
line too. -
Franklin Yu about 4 years@Malvineous But it’s not documented in official documentation so I tend to think that it’s private API subject to change.
-
Franklin Yu about 4 yearsOh, functions starting with
GM_
is deprecated in Greasemonkey 4, while the new version won’t arrive any time soon.. Yet another reason to write your own! -
dashard almost 4 yearsThe
GM_addStyle
function you posted is perfect. If it's not working make sure to add a listener in case the DOM target is not fully loaded. ;) -
mrpandey over 3 yearsI suggest using backticks instead of quotes if you want to write CSS in multiple lines inside GM_addStyle.
-
Nils Lindemann about 3 yearsPlease add @GWu s example to your answer.