Как настроить пользовательский интерфейс Firefox с помощью userChrome.css

Интерфейс Firefox Quantum по-прежнему чрезвычайно настраиваемый благодаря файлу userChrome.css. Вы можете отредактировать этот файл, чтобы скрыть ненужные элементы меню, переместить панель вкладок под панелью инструментов навигации, просмотреть несколько строк на панели инструментов закладок и выполнять другие действия, которые обычно не были бы возможны.

Как это работает

Файл userChrome.css в Firefox - это файл каскадных таблиц стилей (CSS), который использует Firefox. Хотя таблицы стилей обычно применяются к веб-страницам, эта конкретная таблица стилей применяется к пользовательскому интерфейсу Firefox. Это позволяет вам изменять внешний вид и макет всего, что окружает веб-страницу. Вы не можете добавить какие-либо функции; Вы можете изменить только то, что уже есть, чтобы изменить, скрыть или переместить это.

Это не имеет ничего общего с Google Chrome. «Chrome» относится к пользовательскому интерфейсу веб-браузера, так в честь Google Chrome.

Файл userChrome.css существует в Firefox в течение долгого времени, но он приобрел новое значение в Firefox Quantum. Многие изменения, которые раньше могли быть выполнены надстройками браузера, теперь могут быть выполнены только путем редактирования файла userChrome.css..

Где найти твики

Хотя вы можете создавать свои собственные настройки, если вы понимаете код CSS и то, как был разработан интерфейс Firefox, вы также можете просто найти настройки в Интернете. Если вы хотите внести определенное изменение, возможно, кто-то другой уже понял, как это сделать, и написал код.

Вот несколько ресурсов, с которых можно начать:

Пример твиков от userChrome.org: краткий список интересных твиков, демонстрирующих мощь userChrome.css.
Классические настройки CSS: репозиторий userChrome.css от автора расширения Classic Theme Restorer, которое больше не работает в Firefox Quantum.
userChrome Tweaks: коллекция интересных твиков Firefox.
FirefoxCSS на Reddit: это subreddit - сообщество для обсуждения твиков. Вы можете искать в подредитах, чтобы найти настройки других людей, посмотреть, что люди делятся, и даже попросить ввода, если вы не можете найти настройку, которую вы действительно хотите.
Руководство по редактированию вашего контекстного меню: инструкции по удалению элементов из контекстного меню Firefox и изменению их порядка в списке, взятые из субреддита FirefoxCSS.

Имейте в виду, что старые версии Firefox имели другой интерфейс. Старые настройки userChrome.css, которые вы можете найти в Интернете, могут не работать в Firefox 57 и более поздних версиях, также известных как Firefox Quantum..

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

Как создать свой файл userChrome.css

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

Чтобы запустить папку профиля Firefox, нажмите меню> Справка> Информация об устранении неполадок в Firefox..

Нажмите кнопку «Открыть папку» справа от папки профиля, чтобы открыть ее. (В macOS или Linux вместо этого вы увидите кнопку «Показать в Finder» или «Открыть каталог». Следующие инструкции показывают процесс в Windows, но в основном он одинаков в Mac и Linux - вы просто будете использовать другой файловый менеджер и текстовый редактор.)

Если в появившейся папке профиля отображается папка с именем «chrome», дважды щелкните ее. Тем не менее, вы, вероятно, не будете, так как эта папка не создана современными версиями Firefox.

Чтобы создать папку, щелкните правой кнопкой мыши на правой панели и выберите «Создать»> «Папка». Назовите его «хром», нажмите Enter, а затем дважды щелкните его.

Вам нужно будет указать Windows, чтобы показать вам расширения файлов, если вы этого еще не сделали. Windows по умолчанию скрывает расширения файлов, чтобы упростить задачу. Этот шаг не является обязательным в MacOS или Linux, которые показывают эту информацию по умолчанию.

В Windows 8 или 10 вы можете просто щелкнуть вкладку «Вид» на ленте и установить флажок «Расширения имен файлов», чтобы сделать их видимыми. В Windows 7 нажмите «Организовать»> «Параметры папки и поиска», перейдите на вкладку «Вид» и снимите флажок «Скрыть расширения для известных типов файлов»..

Теперь вы создадите файл userChrome.css, который на самом деле является пустым текстовым файлом с расширением .css вместо расширения .txt..

Для этого щелкните правой кнопкой мыши на правой панели и выберите «Создать»> «Текстовый документ». Назовите его «userChrome.css», убедившись, что удалите расширение файла .txt.

Windows предупредит вас, что вы изменяете расширение файла, и это может быть проблемой для определенных типов файлов. Нажмите «Да», чтобы подтвердить изменения.

В macOS или Linux создайте пустой текстовый файл с тем же именем.

Как редактировать файл userChrome.css

Вы можете использовать любой текстовый редактор для редактирования файла userChrome.css. Текстовый редактор Notepad, включенный в Windows, работает просто отлично. Если вы хотите более мощный текстовый редактор с большим количеством функций, нам нравится Блокнот++.

Чтобы отредактировать файл в Блокноте, щелкните его правой кнопкой мыши и выберите «Редактировать»..

Добавьте любые изменения, которые вы хотите, в файл, скопировав и вставив их. Если вы добавляете несколько настроек, обязательно добавьте их все в свои строки.

Когда вы закончите, сохраните файл, нажав Файл> Сохранить в блокноте.

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

Если вы часто возвращаетесь в папку «chrome» для редактирования файла userChrome.css, вы можете создать ярлык на рабочем столе для папки или добавить его в папки «Быстрый доступ» в проводнике..

Файл userContent.css

Firefox также имеет файл userContent.css, который вы можете редактировать, и вы можете наткнуться на некоторые хитрости, которые говорят, что они для файла userContent.css.

Чтобы использовать этот файл, просто создайте файл с именем «userContent.css» в той же папке, что и ваша папка Chrome. Настройки, которые вы размещаете в этом файле, влияют на внутренние «страницы контента» Firefox, такие как страницы «Новая вкладка» и «Параметры».

Помогите, я что-то сломал!

Если вы когда-нибудь столкнулись с проблемой настройки, вы можете просто удалить ее из файла userChrome.css и перезапустить Firefox. Если это не сработает, вы можете полностью удалить файл userChrome.css и перезапустить браузер, чтобы стереть все ваши изменения и получить новый интерфейс Firefox..