css - GM_addStyle equivalente en TamperMonkey

Question

¿Hay un TamperMonkey equivalente al método GM_addStyle de GM_addStyle para agregar CSS?

En GreaseMonkey, puedes agregar un montón de propiedades CSS a varios elementos, como por ejemplo:

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

Para hacer el equivalente en TamperMonkey, actualmente tengo que hacer lo siguiente:

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

Esto funciona, pero ¿hay un GM_addStyle en TamperMonkey que me evita tener que repetir esto en cada script?

Answer 1

Versión 4.0 o +, actualización de 2018

ReferenceError: GM_addStyle is not defined

Necesitas crear tu propia función GM_addStyle, como esta:

// ==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";

OBSOLETO

Si GM_addStyle(...) no funciona, verifique si tiene el encabezado @grant GM_addStyle .

Me gusta esto :

// ==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

De acuerdo con la documentación de TamperMonkey , admite GM_addStyle directamente, como lo hace GreaseMonkey. Verifique que las reglas de inclusión / coincidencia sean correctas , luego agregue este código de demostración en la parte superior de su script de usuario:

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

Acabo de probarlo en un nuevo script de usuario en Chrome 35 y funcionó como se esperaba. Si tiene cualquier otra regla de @grant , deberá agregar una para esta función, de lo contrario, debería detectarse y otorgarse automáticamente.

Answer 3

Si alguien está interesado, cambié el código para que no tenga que escribir "! Important" después de cada regla css. Por supuesto, esto solo funciona, si usa la función en lugar de 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);
}

La salida de este " addGlobalStyle(''body { color: white; background-color: black; }''); ",

será " body { color: white !important; background-color: black !important; }''); "