Написал и разместил в репозитории браузера оперы, браузерное расширение StyleMaster.
Скачать https://addons.opera.com/ru/extensions/details/stylemaster/
Работает на браузерах Яндекса и Оперы. На гугл хроме тоже работает, но нужно уметь установить, если интересно расскажу, хотя в интернете масса инструкций.
Не забываем про телегу softblg. Там много интересного, хотя сейчас темп снизился сильно, времени катастрофически не хватает.
О приложении
StyleMaster
StyleMaster — это простое и удобное расширение для настройки внешнего вида веб-сайтов. Оно позволяет добавлять собственные CSS-правила, которые автоматически применяются при посещении указанных сайтов. Это идеальный инструмент для тех, кто хочет персонализировать внешний вид страниц, скрыть ненужные элементы или улучшить удобство работы с веб-ресурсами.
Что умеет StyleMaster?
- Применение CSS-правил к определённым сайтам. Укажите URL сайта и добавьте собственные стили. Например, измените цвет текста, фон страницы или спрячьте рекламу.
- Поддержка всех страниц на указанном домене. Достаточно указать основной домен сайта, чтобы правила применялись ко всем его страницам.
- Экспорт и импорт настроек. Сохраняйте ваши стили в файл и загружайте их на другом устройстве.
- Автоматическое применение стилей. Все указанные правила применяются сразу при загрузке страницы.
Для кого пригодится?
- Дизайнеров и разработчиков. Чтобы быстро протестировать изменения дизайна прямо в браузере.
- Пользователей с особыми предпочтениями. Если вас не устраивает стандартный вид сайта — измените его под себя. Например, сделайте текст крупнее или удалите лишние блоки.
- Тех, кто заботится о комфорте чтения. Улучшите читаемость сайтов: настройте контраст, цвета или шрифты.
Как пользоваться CustomCSS?
- Установка стилей: Откройте настройки расширения.
В поле URL укажите адрес сайта (например, www.youtube.com).
В поле CSS добавьте правила. Например:
body {
background-color: black;
color: white;
}
Нажмите Сохранить, и стили начнут применяться. - Экспорт и импорт: Чтобы сохранить текущие настройки, нажмите кнопку Экспорт натроек, и они будут скачаны в файл css_settings.json.
Для загрузки настроек нажмите Импорт настроек и выберите файл css_settings.json.
Где смотреть исходный код страницы?
- Используйте инструменты разработчика браузера (DevTools): Нажмите F12 или Ctrl+Shift+I (Windows/Linux) / Cmd+Option+I (Mac).
Перейдите на вкладку Elements, где вы увидите HTML-код страницы.
На вкладке Styles справа отображаются текущие CSS-правила для выбранного элемента. - Редактирование в реальном времени: Выберите любой элемент на странице (щелчок правой кнопкой → Inspect).
В разделе Styles добавьте или измените CSS-правила.
После проверки изменений скопируйте свои стили и добавьте их в StyleMaster.
Как использовать исходный код страницы в StyleMaster?
- Найдите элементы, которые вы хотите изменить, в инспекторе браузера.
- Определите их селекторы (например, .header, #main-content, p.article).
- Напишите CSS-правила и сохраните их в расширении:.
header {
display: none; /* Убирает шапку сайта */
}
p {
font-size: 18px; /* Увеличивает размер шрифта текста */
} - Перезагрузите страницу, чтобы увидеть изменения.
Пример использования
Допустим, вы хотите изменить фон и текстовый цвет на YouTube:
- URL: www.youtube.com
- CSS:body {
background-color: #121212;
color: #ffffff;
}
#contenteditable-textarea {
color: #ffffff;
}
После сохранения расширение автоматически применит эти изменения на всех страницах YouTube.
Важно! Вложенность имеет большое значение. К примеру есть блоки
<div id="1"><div id="2"></div></div>
Для блока <div id="2"></div> указаны стили css:
#2 {color: #000;}
Чтобы ваши стили добавленные в расширении для этого блока сработали, необходимо указать вложенность:
#1 #2 {color: #ССС;}
Заключение
CustomCSS — это мощный инструмент для тех, кто хочет сделать Интернет более удобным для себя. Персонализируйте сайты, улучшайте их внешний вид и работайте с комфортом. Ваше мнение и идеи по улучшению всегда приветствуются. Пишите, кричите, ругайте....