GM_addStyle эквивалент в TamperMonkey

Есть ли эквивалент 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, который избавляет меня от необходимости повторять это на каждом script?

Ответы

Ответ 1

Согласно документации TamperMonkey, она поддерживает GM_addStyle напрямую, как это делает GreaseMonkey. Проверьте правильность правильных правил включения/сопоставления, затем добавьте этот демонстрационный код в начало вашего документа:

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

Я только что протестировал его на новом пользовательском скрипте в Chrome 35, и он работал, как ожидалось. Если у вас есть другое правило @grant, вам нужно будет добавить его для этой функции, иначе оно должно быть обнаружено и предоставлено автоматически.

Ответ 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";

Ответ 3

Если кто-то заинтересован, я изменил код, поэтому вам не нужно писать "! important" после каждого правила CSS. Конечно, это работает, только если вы используете функцию вместо 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 GM_addstyle. Моя проблема заключалась в том, что у меня все еще был код по умолчанию //@grant none в нижней части заголовка. Убрал этот кусок и теперь все мои css работает. Надеюсь, что это поможет кому-то еще, если они застряли на этом тоже.