Как изменить внешний вид страницы в браузере с помощью Greasemonkey

Началось все с ворчания, типа раньше вода была мокрее шрифты были красивее. Ворчание было по поводу того, как отображаются текстовые элементы оформления на нашем новоиспеченном долгострое проекте iБлоги. Моя особенность заключается в том, что я люблю четкие и аккуратно прорисованные буковки, поэтому всегда в системе первым делом отключаю совершенно с моей точки зрения идиотскую функцию ClearType. Вот к примеру, фрагмент до отключения ClearType (для наглядности увеличено):
ClearType включено
Не, ну может кому нравятся размытые очертания букв с цветными каемками. Мне нет. Отключаю ClearType, получаю следующее:
ClearType выключено
Уже лучше, но линии букв местами слишком толстые, некрасиво. Проблема в том, что наш дизайнер решил использовать новомодный шрифт «Roboto Condensed», в котором нет оптимизации попиксельной прорисовки, он рассчитан на масштабирование и сглаживание средствами системы. Во время слегка бурного обсуждения проблемы mpanius (он же Михаил Панюшкин) посоветовал использовать Greasemonkey. Это дополнение для Firefox, которое после загрузки страницы запускает заданные пользователем скрипты, которые могут менять внешний вид страницы. После установки Greasemonkey в панели инструментов появляется рожица и все, больше ничего не происходит. Ладно, нажимаем на стрелочку рядом с рожицей и в выпадающем меню выбираем пункт «New User Script...»:
Меню
В окне заполняем хотя бы первые две позиции:

Жмем OK и в открывшееся окно редактора вставляем следующий текст:

// ==UserScript==
// @name Force Verdana font
// @namespace ivan@ivanov.com
// @version 1
// @grant none
// ==/UserScript==
console.log(«Change fonts to Verdana!»);
fontFamily = «Verdana»;
blocks = ['sans', 'inputtext', 'span', 'p', 'a', 'div'];
document.body.style.fontFamily = fontFamily;
for (index = 0; index < blocks.length; index++) {
elements = document.getElementsByTagName(blocks[index]);
for(i = 0; i < elements.length; i++) {
elements[i].style.fontFamily = fontFamily;
}
}

За основу этого скрипта был взят скрипт с этой страницы. К сожалению, в исходном тексте была ошибка и какое-то время ушло на выяснение этого момента (на чем редко пишешь, быстро забывается). В итоге родился приведенный выше текст.
Текст скрипта
Смысл этого скрипта в том, что он в избранных тегах принудительно устанавливает «правильный» шрифт Verdana (ну и выводит в консоль предупреждение). Эти теги задаются в массиве blocks, и далее они перебираются с заменой свойства стиля fontFamily. В итоге после загрузки страницы даже с отключенным сглаживанием она приобретает более-менее пристойный вид:

Да, не совсем такой, как задумывал дизайнер, но такой, которых хочет иметь пользователь. Заметим, что избранный скрипт или Greasemonkey можно оперативно отключать/включать, задавать фильтры для для выбора страниц, на которых будут запускаться те или иные скрипты Greasemonkey, и, разумеется, никто не мешает выбрать свой любимый шрифт или задавать другие правила замены шрифтов (например, заменять только конкретный шрифт), для этого достаточно написать свой скрипт или подправить приведенный в данной заметке. В общем, приятного всем браузинга!
0 0 4369 3
Автор KAlexK Рейтинг -18.16 Сила 2.87
Блог DIY - инструкции, советы, лайфхаки 22 15 RSS

3 комментария

MrTO
тем же способом можно заставить youtube показывать посещённые линки (ну т.е.видосы что ты уже смотрел) фиолетовым цветом, как раньше
mpanius
Да многое можно сделать. Удивительно, что так мало людей об этом знают.
MrTO
в начало надо вставить
// @include www.youtube.com/*
// @include www.youtube.com/*
// @run-at document-end
// @grant GM_addStyle

а потом ниже вот это:

GM_addStyle('a:visited {color: darkmagenta !important; .title {color: inherit !important;}');

Добавить комментарий