web-dev-qa-db-fra.com

Équivalent GM_addStyle dans TamperMonkey

Existe-t-il un TamperMonkey équivalent à la méthode GM_addStyle De GreaseMonkey pour ajouter du CSS?

Dans GreaseMonkey, vous pouvez ajouter un tas de propriétés CSS à plusieurs éléments comme ceci:

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

Pour faire l'équivalent dans TamperMonkey, je dois actuellement faire ce qui suit:

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

Cela fonctionne, mais existe-t-il un équivalent GM_addStyle Intégré pour TamperMonkey qui m'évite d'avoir à répéter cela sur chaque script?

csstampermonkey
23
arserbin3

Selon la documentation TamperMonkey , il prend en charge GM_addStyle directement, comme le fait GreaseMonkey. Vérifiez que vos règles d'inclusion/correspondance sont correctes , puis ajoutez ce code de démonstration en haut de votre script utilisateur:

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

Je viens de le tester sur un nouveau script utilisateur en Chrome 35 et cela a fonctionné comme prévu. Si vous en avez d'autres @grant rule , vous devrez en ajouter un pour cette fonction, sinon il devrait être détecté et accordé automatiquement.

29
lpd

Version 4.0 ou +, mise à jour de 2018

ReferenceError: GM_addStyle is not defined

Vous devez créer votre propre fonction GM_addStyle, comme ceci:

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

DÉCONSEILLÉ

Si GM_addStyle(...) ne fonctionne pas, vérifiez si vous avez l'en-tête @grant GM_addStyle.

Comme ça:

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

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

Si quelqu'un est intéressé, j'ai changé le code pour que vous n'ayez pas à écrire "! Important" après chaque règle css. Bien sûr, cela ne fonctionne que si vous utilisez la fonction au lieu 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 sortie de cette "addGlobalStyle('body { color: white; background-color: black; }');",

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

5
PaarCrafter

J'avais ce même problème. J'ai essayé toutes les corrections, en m'assurant d'avoir // @grant GM_addstyle dans l'en-tête. Mon problème était que j'avais toujours le code par défaut // @grant none en bas de l'en-tête. Supprimé cette pièce et maintenant tout mon css fonctionne. J'espère que cela aide quelqu'un d'autre s'il est coincé là-dessus aussi.

0
Pshock13