CSS TamperMonkey 中的 GM_addStyle 等效项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23683439/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
GM_addStyle equivalent in TamperMonkey
提问by arserbin3
Is there a TamperMonkey equivalent to GreaseMonkey's GM_addStylemethod for adding CSS?
是否有相当于 GreaseMonkeyGM_addStyle添加 CSS的方法的 TamperMonkey ？
In GreaseMonkey, you can add a bunch of CSS properties to multiple elements like so:
在 GreaseMonkey 中，您可以向多个元素添加一堆 CSS 属性，如下所示：
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:
要在 TamperMonkey 中执行等效操作，我目前必须执行以下操作：
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_addStyleequivalent for TamperMonkey that saves me from having to repeat this on every script?
这有效，但是是否有内置的GM_addStyleTamperMonkey 等效项可以使我不必在每个脚本上重复此操作？
回答by A-312
Version 4.0 or +, update of 2018
4.0或+版本，2018年更新
ReferenceError: GM_addStyle is not defined
You need to create your own GM_addStyle function, like this :
您需要创建自己的 GM_addStyle 函数，如下所示：
// ==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_addStyleheader.
如果GM_addStyle(...)不起作用，请检查您是否有@grant GM_addStyle标题。
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; }");
回答by lpd
According to the TamperMonkey documentation, it supports GM_addStyledirectly, like GreaseMonkey does. Check your include/match rules are correct, then add this demo code to the top of your userscript:
根据TamperMonkey 文档，它GM_addStyle直接支持，就像 GreaseMonkey 一样。检查您的包含/匹配规则是否正确，然后将此演示代码添加到您的用户脚本的顶部：
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 @grantrule, you will need to add one for this function, otherwise it should be detected and granted automatically.
我刚刚在 Chrome 35 中的新用户脚本上对其进行了测试，它按预期工作。如果您有任何其他@grant规则，则需要为此功能添加一条，否则应自动检测并授予。
回答by PaarCrafter
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.
如果有人感兴趣，我更改了代码，这样您就不必在每个 css 规则之后写上“!important”。当然，这仅适用于您使用该函数而不是 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; }');",
这个“ addGlobalStyle('body { color: white; background-color: black; }');”的输出，
will be "body { color: white !important; background-color: black !important; }');"
将是“ body { color: white !important; background-color: black !important; }');”
回答by Pshock13
I was having this same issue. I tried all the fixes, making sure to have // @grant GM_addStylein the header. My issue was, I also had the default code's // @grant noneat 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.
我遇到了同样的问题。我尝试了所有修复，确保// @grant GM_addStyle在标题中有。我的问题是，我// @grant none在标题底部也有默认代码。删除了那部分，现在我所有的 css 都可以工作了。希望这对其他人也有帮助，如果他们也坚持这一点。
