版本4.0或+，更新2018

Question

是否有一个TamperMonkey等同于GreaseMonkey的GM_addStyle方法来添加CSS？

在GreaseMonkey中，您可以向多个元素添加一堆CSS属性，如下所示：

GM_addStyle("body { color: white; background-color: black; } img { border: 0; }");

要在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; }');

这样可行，但TamperMonkey是否有内置的GM_addStyle等价物，这使我不必在每个脚本上重复此操作？

Answer 1

版本4.0或+，更新2018

ReferenceError: GM_addStyle is not defined

您需要创建自己的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

如果GM_addStyle(...)不起作用，请检查您是否有@grant GM_addStyle标题。

喜欢这样：

// ==UserScript==
// @name           Example
// @description    See usercript with grant header.
// @grant          GM_addStyle
// ==/UserScript==

GM_addStyle("body { color: white; background-color: black; } img { border: 0; }");

Answer 2

根据the TamperMonkey documentation，它直接支持GM_addStyle，就像GreaseMonkey一样。 检查您的包含/匹配规则是否正确，然后将此演示代码添加到用户的顶部：

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

我刚刚使用Chrome 35中的新用户测试它，它按预期工作。如果您有任何其他@grant rule，则需要为此功能添加一个，否则应自动检测并授予它。

Answer 3

如果有人被强迫，我改变了代码，这样你就不必在每个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);
}

此“addGlobalStyle('body { color: white; background-color: black; }');”的输出，

将是“body { color: white !important; background-color: black !important; }');”

Answer 4

我遇到了同样的问题。我尝试了所有修复程序，确保标题中包含// @grant GM_addstyle。我的问题是我仍然在标题底部保留默认代码的// @grant none。删除了那一块，现在我所有的CSS都可以工作了。希望这对其他人也有帮助。

TamperMonkey中的GM_addStyle等价物

4 个答案:

版本4.0或+，更新2018

DEPRECATED