Переопределить css-стили с помощью GreaseMonkey
 

Хочу с помощью GreaseMonkey переопределить стили на веб-странице, чтобы сайт отображался как мне надо.
Для этого пишу такой скрипт:

function AddStyle(cssStr){
    var n = document.createElement('style');
    n.type = "text/css";
    n.innerHTML = cssStr;
    document.getElementsByTagName('head')[0].appendChild(n);
}

AddStyle("  .monthDay { min-height: 110px } .thisPeriod {margin-top: 0px; margin-bottom: 0px;} .filterPanel {margin-top: 0px; margin-bottom: 0px;}");

Проблема в том, что мой вставленный тэг со стилем почему-то в итоге располагается не самым последним элементов внутри тега head, а где-то посередине, то есть после него возникают какие-то другие стили, переопределяющие мой. Из-за чего мой стиль срабатывает только наполовину.
Как сделать, чтобы он гарантированно переопределял любые стили элементов, то есть всегда был в самом конце?

Firefly, стили не только ты динамически добавляешь.
а) Положить в конец body.
б) Положить в html после body.(ну и что что не валидно, зато наверняка:)).
с) Использовать MutationObserver на всю страницу\setTimeout, наблюдать за добавлениями стилей и передвигать свой всегда в конец.
д) Использовать !important.
е) Использовать относительно свежую фичу css - слои (layers).

Спасибо, буду кумекать :write:

Firefly, если Вы считаете, что Ваши стили перезаписываются из-за того, что загружаются перед стилями сайта, тогда самым простым решением будет просто повысить специфичность селекторов.

https://developer.mozilla.org/ru/doc...SS/Specificity

Встраивать стили можно с помощью функции GM_addStyle(css), добавив в meta-блок скрипта:
@grant GM_addStyle

Спасибо вам за помощь.
Пока остановился на варианте: "Положить в конец body".

Оказалось, что функцию GM_addStyle из GreaseMonkey убрали.
Теперь выдается ошибка:
ReferenceError: GM_addStyle is not defined
Вместо нее предлагают написать свою функцию, точно такую же, как в моем первом сообщении.

Вариант со специфичностью - чуть сложней (для меня), т.к. если правильно понял, для гарантированной перезаписи существующих значений надо проходить циклом по всем элементам страницы и присваивать каждому тэгу мои значения, что не очень удобно.

Скорей всего потом попробую осилить mutationObserver, если будут проблемы с сайтами, динамически подгружающими свое содержимое время от времени.

Firefly, то, что Вы описали, является инлайн стилями (inline styles). Я советую Вам всё-таки разобраться, что такое специфичность, чтобы в будущем понимать, почему одни правила CSS имеют приоритет применения над другими. Это очень важная тема, входящая в основы изучения CSS.

В вашем случае, если использовать CSS Nesting, у которого уже отличная поддержка, потребуется минимальное изменение стилей.

Проще всего специфичность повысить добавив кучку :not(_) :)
Но это для самых жестких случаев, когда на сайте уже и так суперспецифичный селектор с !important. В ином случае хватит и помещения в конец.