Как изменить класс CSS с помощью скрипта Greasemonkey/Tampermonkey?

Я пытаюсь установить фоновое изображение тела, но только там, где он использует класс banner_url. HTML выглядит следующим образом:

<body id="app_body" class="banner_url desktopapp" data-backdrop-limit="1">

в принципе, я хотел бы заставить страницу использовать следующий CSS вместо этого:

.banner_url {
    background: url('http://www.pxleyes.com/images/contests/kiwis/fullsize/sourceimage.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Я пытаюсь сделать это с помощью Greasemonkey, если это имеет значение. Кто-нибудь знает, как я могу это сделать? Я начал со следующего, однако не очень повезло:

function randomBG(){
    document.getElementsByClassName("banner_url").style.backgroundImage="url('http://www.pxleyes.com/images/contests/kiwis/fullsize/sourceimage.jpg')no-repeat center center fixed;";
} 
randomBG();
28
css greasemonkey javascript tampermonkey userscripts

2 ответов

для этого просто используйте каскад CSS. Добавьте таблицу стилей на страницу с помощью GM_addStyle().
Примечание:

  • мы используем !important флаг для покрытия некоторых потенциальных конфликтов.
  • использовать @run-at document-start (или используйте стилус, см. ниже) чтобы минимизировать "мерцание", связанное с изменением стилей после начального рендеринга.

полный скрипт:

// ==UserScript==
// @name     _Override banner_url styles
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @grant    GM_addStyle
// @run-at   document-start
// ==/UserScript==

GM_addStyle ( `
    .banner_url {
        background: url('http://www.pxleyes.com/images/contests/kiwis/fullsize/sourceimage.jpg') no-repeat center center fixed !important;
        -webkit-background-size: cover !important;
        -moz-background-size: cover !important;
        -o-background-size: cover !important;
        background-size: cover !important;
    }
` );

отметим, что если вы используете Greasemonkey 4, он перебрал GM_addStyle() (и многое другое).
Это настоятельно рекомендуется переключиться на Tampermonkey или Violentmonkey.
Фактически, контролирующий разработчик Greasemonkey говорит сам.

в то же время, вот прокладка для тех мазохистов, которые упорствуют с GM4:

function GM_addStyle (cssStr) {
    var D               = document;
    var newNode         = D.createElement ('style');
    newNode.textContent = cssStr;

    var targ    = D.getElementsByTagName ('head')[0] || D.body || D.documentElement;
    targ.appendChild (newNode);
}

также, для чистой манипуляции CSS, стильное расширение стилус является лучшим выбором, чем Greasemonkey / Tampermonkey.

50

Как насчет чего-то подобного ?

document.getElementsByClassName("banner_url")[0] .style.backgroundImage="url('http://www.pxleyes.com/images/contests/kiwis/fullsize/sourceimage.jpg')";

но я должен признать, что не уверен, что понимаю вопрос

3