Настройка Firefox через userChrome.css

Скриншот интерфейса Firefox с вкладками и панелью инструментов

Что такое userChrome.css и как это работает

userChrome.css — это каскадная таблица стилей (CSS), применяемая не к веб‑страницам, а к пользовательскому интерфейсу Firefox (иногда называемому «chrome» браузера). Она позволяет менять оформление, скрывать элементы, перемещать панели и переопределять некоторые встроенные правила отображения. Важно: userChrome.css не добавляет новые функции — он изменяет только уже существующие элементы интерфейса.

Ключевая идея: вы не пишете расширение, вы даёте браузеру инструкции по стилю. Если вы знакомы с CSS и с DOM интерфейса Firefox, это даёт гибкость, близкую к изменению темы, но гораздо более детализированную.

Важно: начиная с Firefox 69 необходимо явно включить поддержку пользовательских таблиц стилей через about:config, иначе браузер будет игнорировать userChrome.css и userContent.css.

Быстрый обзор шагов

Включите настройку в about:config: toolkit.legacyUserProfileCustomizations.stylesheets → true.
Откройте папку вашего профиля Firefox (Меню → Справка → Информация для решения проблем → Открыть папку).
Создайте папку chrome в корне профиля, если её ещё нет.
Внутри chrome создайте файл userChrome.css (текстовый файл с расширением .css).
Добавьте правила CSS, перезапустите все окна Firefox.

Где искать готовые правки и вдохновение

Если вы не хотите писать CSS с нуля, готовые правки часто публикуют сообщество и отдельные репозитории. Примеры источников:

Коллекции и архивы готовых userChrome.css‑правок.
Подреддит FirefoxCSS для обсуждений и обмена правками.
Репозитории авторов классических расширений, которые теперь работают через правки CSS.

Учтите: старые правки могут не работать в новых версиях Firefox. Всегда проверяйте комментарии и дату обновления.

Как найти нужные селекторы: инструменты разработчика для интерфейса

Чтобы корректно изменить элемент интерфейса, полезно узнать его id/class. Включите «инструменты браузера» (Browser Toolbox) в настройках разработчика и инспектируйте элементы интерфейса так же, как вы инспектируете веб‑страницы.

Короткая инструкция:

Откройте about:config и включите devtools.chrome.enabled → true.
Откройте меню Разработка веб‑страниц → Browser Toolbox.
Наведите курсор и посмотрите структурные имена элементов, id и классы.

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

Как создать файл userChrome.css (подробно)

Откройте Меню → Справка → Информация для решения проблем.
Нажмите «Открыть папку» рядом с Profile Folder (Папка профиля). На macOS кнопка будет называться «Show in Finder», на Linux — «Open Directory».

Панель Информация для решения проблем с кнопкой Открыть папку профиля

Если в папке профиля нет папки chrome — создайте её (New → Folder → имя chrome).

Создание папки chrome в профиле Firefox

На Windows включите отображение расширений файлов, чтобы переименовать New Text Document.txt в userChrome.css. На macOS и Linux создайте пустой текстовый файл с именем userChrome.css.

Переименование текстового документа в userChrome.css в Проводнике Windows

Откройте файл в любом текстовом редакторе и добавляйте правки.

Открытие userChrome.css для редактирования в Notepad

Совет: если вы часто редактируете файл, создайте ярлык на рабочем столе на папку chrome или добавьте её в быстрый доступ.

Примеры простых правок

Скрыть кнопку Pocket:

#read-pocket-button { display: none !important; }

Переместить таббар под адресную строку (пример концепции — имена селекторов могут отличаться в разных версиях Firefox):

#TabsToolbar { order: 2 !important; }
#nav-bar { order: 1 !important; }

Две строки на панели закладок (приближённый пример):

#PersonalToolbar { max-height: 40px !important; }
#PlacesToolbarItems { display: flex; flex-wrap: wrap !important; }

После внесения правок закройте все окна Firefox и откройте заново, чтобы увидеть изменения.

userContent.css — когда его использовать

Файл userContent.css применяется не к chrome (интерфейсу), а к «контентным» страницам браузера: внутренним страницам, таким как about:newtab, about:preferences и другим встроенным страницам. Если правка относится к содержимому этих страниц (например, изменить внешний вид страницы настроек), используйте userContent.css в той же папке chrome.

Советы по разработке и тестированию правок (мини‑методология)

Работайте в отдельном профиле Firefox для тестов, чтобы не сломать основной профиль.
Пишите маленькие инкрементальные правки и тестируйте после каждой.
Комментируйте секции в файле: / — описание — /.
Используйте инструменты Browser Toolbox для точной идентификации селекторов.
Применяйте !important только при необходимости и осознанно.
Храните резервную копию userChrome.css в системе контроля версий (git) или просто копируйте файл с датой.

Критерии приёмки правки

Правка применена после перезапуска Firefox и видна в UI.
Никакие стандартные функции браузера не перестали работать (кнопки кликаются, контекстное меню доступно).
Правка не ухудшает читаемость (контраст, размеры шрифтов).
Правка применима только к ожидаемым разрешениям экрана и не ломает мобильные/узкие окна.

Руководство по устранению проблем и откату изменений

Если интерфейс перестал работать как ожидается:

Удалите или закомментируйте последнюю секцию в userChrome.css, перезапустите браузер.
Если не помогло, временно переместите или переименуйте файл userChrome.css и перезапустите Firefox.
Запустите Firefox в безопасном режиме (с отключёнными расширениями) через меню Справка → Перезапустить с отключёнными дополнениями, чтобы исключить конфликт с расширением.
Если ошибка сохраняется, создайте новый профиль и проверьте, проявляется ли проблема там.
Для восстановления профиля можно вернуть файл userChrome.css из резервной копии.

Советы по совместимости и версии Firefox

Начиная с Firefox 57 (Quantum) архитектура интерфейса изменилась, поэтому старые правки могут не работать.
С релиза Firefox 69 и далее обязательно включать toolkit.legacyUserProfileCustomizations.stylesheets.
Иногда имена селекторов меняются между версиями — проверяйте актуальность через Browser Toolbox.

Совет для команд и организаций: фиксируйте поддерживаемые версии Firefox и тестируйте правки при обновлениях браузера.

Роли и чеклисты

Чеклист для продвинутого пользователя:

Включил toolkit.legacyUserProfileCustomizations.stylesheets.
Создал chrome/userChrome.css в профиле.
Сделал резервную копию оригинального файла.
Протестировал правки в отдельном профиле.

Чеклист для администратора (деплой в организации):

Задокументировал список правок и назначение каждой.
Подготовил инструкции по откату и восстановлению.
Проверил правки на базовом наборе расширений и политик.

Чеклист для разработчика расширений:

Использует Browser Toolbox для поиска селекторов.
Минимизирует использование !important.
Проверяет правки на разных темах (светлая/тёмная).

Примеры сценариев тестирования и критерии приёмки

Тест 1 — скрыть кнопку: после перезапуска кнопка не отображается и контекстные функции не сломаны.

Тест 2 — переставить панель: элементы панели доступны кликом, клавиатурная навигация работает.

Тест 3 — многорядная панель закладок: не перекрывает содержимое страницы, элементы кликаются корректно.

Часто встречающиеся ошибки и как их исправить

Символы BOM в начале файла. Решение: сохраняйте файл в UTF‑8 без BOM.
Неправильное имя файла (userChrome.css.txt). Решение: убедитесь, что расширение именно .css.
Ошибки селектора. Решение: используйте Browser Toolbox для проверки точных id/классов.

Мини‑глоссарий

userChrome.css — файл стилей для интерфейса Firefox.
userContent.css — файл стилей для встроенных страниц браузера.
Browser Toolbox — инструменты разработчика для интерфейса браузера.
about:config — внутренняя страница настроек Firefox.

Решение в виде диаграммы для начинающих (Mermaid)

flowchart TD
  A[Нужно изменить интерфейс?] --> B{Да или Нет}
  B -- Нет --> C[Используйте тему или расширение]
  B -- Да --> D[Включить toolkit.legacyUserProfileCustomizations.stylesheets]
  D --> E[Открыть папку профиля и создать chrome/userChrome.css]
  E --> F[Добавить правило и перезапустить Firefox]
  F --> G{Работает?}
  G -- Да --> H[Сохранить резервную копию]
  G -- Нет --> I[Откатить правило или удалить файл]
  I --> J[Проверить в новом профиле]

Безопасность и приватность

Правки userChrome.css не посылают никаких данных и не влияют на конфиденциальность, потому что это локальные изменения интерфейса. Однако при копировании чужих правок будьте внимательны: некоторые правки могут скрывать важные элементы интерфейса (например, индикаторы безопасности), что приведёт к снижению удобства или безопасности. Не применяйте правки, которые скрывают индикаторы HTTPS или управление расширениями.

Примеры готовых наборов и шаблонов

Ниже — шаблон начального файла с комментированными секциями, который удобно хранить в git:

/* userChrome.css — шаблон
   Разделы:
   1) Скрыть элементы
   2) Переставить панели
   3) Стили панели закладок
*/

/* 1) Скрыть Pocket */
#read-pocket-button { display: none !important; }

/* 2) Пример перестановки панелей (проверять селекторы через Browser Toolbox) */
/* #TabsToolbar { order: 2 !important; } */
/* #nav-bar { order: 1 !important; } */

/* 3) Закладки: многострочный режим */
/* #PersonalToolbar { max-height: 44px !important; } */
/* #PlacesToolbarItems { display: flex; flex-wrap: wrap !important; } */

Когда правки не подходят — альтернативы

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

Частые вопросы

Вопрос: Нужно ли перезапускать Firefox после правок?

Ответ: Да, изменения в userChrome.css и userContent.css применяются только после полного закрытия всех окон и перезапуска браузера.

Вопрос: Могу ли я использовать SASS/LESS?

Ответ: Нет. Firefox ожидает чистый CSS в userChrome.css. Препроцессор можно использовать локально для генерации итогового CSS, но в профиль необходимо поместить обычный CSS.

Вопрос: Могу ли я распространять свои правки?

Ответ: Да, но сопровождайте их инструкциями по установке, совместимости и откату.

Итог и рекомендации

userChrome.css даёт мощный способ тонкой настройки интерфейса Firefox. Это инструмент для тех, кто не боится CSS и готов тестировать изменения. Всегда храните резервные копии, работайте в тестовых профилях и документируйте правки. Если вы ищете простые изменения, сначала проверьте доступные расширения и темы — иногда это быстрее и надёжнее.

Ключевые действия: