User CSS — браузерное расширение для добавления пользовательских стилей к сайтам

Представляю вашему вниманию свое расширение для браузеров, работающих на движке chromium / blink /webkit, суть которого заключается в возможности изменять оформление просматриваемого сайта «на лету» путем добавления собственного CSS-кода.

Расширение для браузера «User CSS»

к содержанию ↑

Предыстория

Когда-то давно я был пользователем браузера Opera, тогда еще работающего на движке Presto. И присутствовала в нем одна замечательная технология, называемая UserCSS. Она позволяла создавать CSS-файлы, в которых прописывались желаемые стили для каких-то конкретных сайтов, и затем эти файлы легко подключались к соответствующим сайтам.

После вынужденного отказа от пользования Opera Presto (когда движок поменяли на Blink), потребность в применении пользовательских стилей к сайтам никуда не пропала, поэтому я решил данный вопрос путем создания расширения к браузеру. И назвал его одноименно — User CSS (только добавился пробел).

к содержанию ↑

Особенности расширения

  • Изменения на сайте наблюдаются мгновенно при добавлении ваших стилей.
  • Возможности редактора (основан на библиотеке CodeMirror):

    • Менять полупрозрачность.
    • Менять положение: вертикально справа или горизонтально снизу.
    • Менять ширину и высоту «на лету», двигая за левый или верхний край.
    • Включать/отключать пользовательские стили для сайта.
    • Настраиваемая гарнитура и размер шрифта.
    • Множество цветовых схем оформления кода.
    • Подключен инструмент Emmet для ускорения написания CSS.
  • Все пользовательские стили можно найти в одном месте на странице настроек.
  • CSS можно менять как в выдвигающемся на сайте редакторе, так и на странице настроек.
  • Возможность импорта/экспорта данных (стили и настройки).
  • Кнопка расширения показывает зеленый индикатор, если на сайте есть пользовательский CSS.

Стоит отметить, что данное решение — не 100%-я замена технологии UserCSS. Последняя работает на уровне движка браузера, расширение же срабатывает только после загрузки страницы, поэтому можно наблюдать «мигание» стилей сайта — сначала оригинальных, потом с вашими изменениями. С этим, к сожалению, невозможно ничего сделать.

Расширение я протестировал в браузерах Chrome, Opera (Blink) и Vivaldi. По логике оно должно работать и во многих других браузерах на том же движке, однако я не гарантирую это.

к содержанию ↑

Установить

Расширение для браузера «User CSS»

Версия: 2.1 | Дата последнего обновления: 28.05.2016

к содержанию ↑

История изменений

  • v2.1 (28.05.2016)
    • Добавлено: импорт/экспорт.
    • Добавлено: возможность менять стили прямо на странице настроек.
    • Изменено: некоторые сайты очищают локальное хранилище при загрузке страниц, поэтому стили теперь загружаются из хранилища расширения, а не просматриваемого сайта.
  • v2.0 (17.01.2016)
    • Добавлено: настройки перенесены на отдельную страницу.
    • Добавлено: стили для всех сайтов теперь собираются в одном месте на странице настроек.
    • Добавлено: больше цветовых схем.
    • Добавлено: новая опция — «Tab size».
    • Добавлено: возможность менять полупрозрачность редактора.
    • Добавлено: возможность включать/выключать свои стили на текущем сайте.
    • Добавлено: возможность переключать положение редактора (справа или снизу).
    • Добавлено: возможность менять ширину или высоту редактора «на лету».
    • Исправлено: не отображалась вертикальная полоса прокрутки.
  • v1.1 (06.11.2013)
    • Добавлена кнопка на панели расширений вместо горячей клавиши.
    • На кнопке присутствует зеленый индикатор, если для текущего сайта добавлены пользовательские стили.
  • v1.0 (29.10.2013)
    • Исходная версия.
Комментарии (11)
  1. 1

    Opera Presto → FF + Stylish
    Кастомизация в хромиумах на порядок хуже в принципе, имхо.
    FF ближе к старой Опере, чем сама Опера теперь))

  2. 2
    kanonir

    В фф есть такая штука, которая не плохо работает:
    https://yadi.sk/i/30GdiPCusBgCD

  3. 3

    Спасибо. Действительно крутое расширение.
    Скрыл в CRM-ке для сотрудников все ненужное, что нельзя удалить настройками.

  4. 4

    Настроил стили, но мне нужно периодически использовать сайт и без этих стилей. Как быстро переключать «ВКЛ/ВЫКЛ» настроенные стили для конкретного сайта?

  5. 8

    В FF есть такой функционал. Но в любом случае спасибо! Потестирую с хроме.

  6. 9

    Спасибо. Очень полезная штука

  7. 10
    User

    Так ведь есть же Stylish, и отлично работает на Webkit/Blink. У вас разве не то же самое получилось в основном?