Продвинутые пользовательские стили сайтов, не ограниченные одним css?

Question

[Константин Мельников]

Доброго времени суток товарищи. Какими инструментами можно создавать свои оформления чужих сайтов? Скажем захожу я на какой то сайт и мне нужно вычленить с него какую то конкретную информацию. Если сделать более компактный дизайн что б на экране без прокрутки помещалось как можно больше. Или изменить размеры по умолчанию видеоплеера/ридера картинок.

Для большинства задач подходят расширения браузера по типу Stylus в которых можно делать пользовательские стили CSS. Для большинства но не для всех. Скажем я не могу применить какой то особый стиль к тексту внутри <span></span>, основываясь на тексте который записан. Скажем выделить цвет красным, если <span>Красный</span>. Тут уже нужно что-то более глубокое чем CSS.

Другой пример когда мне нужно применить какой то стиль к

#responsive_page_template_content > div.page_content_ctn > div

Если в теге

#responsive_page_template_content > div.page_content_ctn > div > div > div

есть искомое мной значение, будь то класс .class или текст [href="text"]

И я не один раз сталкивался с какой то задачей которую хотелось бы сделать, но CSS так не умеет

В связи с этим вопрос. Существует ли какой то более продвинутый и комплексный инструментарий по тину Stylus для таких целей? Или тут нужно как то самому свои расширения браузера писать?

Answer 1

[VoidVolker]

Это называется "пользовательские скрипты". Раньше в браузерах оно было из коробки, но потом выпилили зачем-то и теперь только через расширения - TemperMonkey и прочее.

Comments

[Константин Мельников]

Уже что-то. Насколько сложно сделать скрипт TemperMonkey ? Какой язык там используется? CSS я не изучал совсем но разобраться в нем проще простого просто смотря исходный код страницы. Так же я немного изучал C#...

[VoidVolker]

Очень просто - JS же.

[Константин Мельников]

VoidVolker, очень просто писать на языке который не знаешь

[tukreb]

Почему "зачем-то" ? Известно же, чтобы пользователи не удаляли рекламу.

[VoidVolker]

Константин Мельников, дык это легко исправляется - достаточно изучить его. Синтаксис JS похож на C# - так что в вашем случае будет проще.

[Константин Мельников]

VoidVolker, ну когда я смотрю на примеры скриптов tampermonkey которые я нахожу в интернете то синтаксис действительно выглядит очень похоже. Но я даже как в C# не знаю как парсить сайты.
Нет не так, я немного знаю как парсить текст через регулярные выражения. И немного знаю как парсить страницы используя AngleSharp. Я писал простенькую програмку для себя что б в один клик вытаскивать со страницы всю нужную информацию.

Но вот как подобное делать в tampermonkey с использованием JS понятия не имею

Вот экспериментирую с консолью. Пытаюсь изменить фон текста

document.querySelector(#responsive_page_template_content > div.page_content_ctn > div > div > div > div > div > div > div > div> div > span).style.color = background-color: #FF0000;

И селектор тут я явно неправильно использую...

[Константин Мельников]

Константин Мельников, вот так получается

const element = document.querySelector("#responsive_page_template_content > div.page_content_ctn > div > div > div > div > div > div > div > div > div > span");
element.style.color = "red";

Это еще не то что я хотел но хоть что-то. При вводе этого в консоль получается изменить цвет текста превого вхождения. Но если я просто вставляю этот код в скрипт ниже // Your code here..., то ничего не происходит...