TamperMonkey 中的 GM_addStyle 等效项

Posted 2023-03-15

【中文标题】TamperMonkey 中的 GM_addStyle 等效项

【英文标题】：GM_addStyle equivalent in TamperMonkey

【发布时间】：2014-07-04 04:59:07

【问题描述】：

是否有一个 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; ');

这可行，但是否有一个内置的 GM_addStyle 等效于 TamperMonkey 可以让我不必在每个脚本上重复此操作？

【参考方案1】：

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

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

我刚刚在 Chrome 35 中的一个新用户脚本上对其进行了测试，它按预期工作。如果您还有其他@grant rule，则需要为该功能添加一个，否则应自动检测并授予。

【讨论】：

嘿，我没想过要测试一些看起来不太可能的东西.. 用它的GM_ 前缀。他们应该提高该文档的 PageRank .. 目前在 google.com/search?q=tampermonkey+gm_addstyle 上不可见 - 谢谢！

这似乎不起作用，我在控制台中收到ERROR: Execution of script failed! GM_addStyle is not defined 消息。

@Husky 请记住，您必须授予答案中描述的功能（我不依赖自动检测），显然您注入页面上下文的任何代码都无法访问 GM职能。我刚刚按照上面的方法进行了测试，该功能似乎仍然可以正常工作。

您的回答中没有这方面的信息。

别忘了在标题中添加 // @grant GM_addStyle！

【参考方案2】：

版本 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";

已弃用

如果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; ");

【讨论】：

自 2019 年起，GM_addStyle 也可以在 @grant 行中使用。

@Malvineous 但是official documentation 中没有记录，所以我倾向于认为它是私有 API，可能会发生变化。

哦，以 GM_ 开头的函数在 Greasemonkey 4 中已被弃用，而 new version won’t arrive any time soon.. 又一个编写自己的理由！

您发布的GM_addStyle 功能非常完美。如果它不起作用，请确保添加一个侦听器，以防 DOM 目标未完全加载。 ;)

【参考方案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; ');”

【参考方案4】：

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