userchrome_如何使用userChrome.css自定义Firefox的用户界面

userchrome

Firefox Quantum‘s interface is still extremely customizable thanks to its userChrome.css file. You can edit this file to hide unwanted menu items, move the tab bar below the navigation toolbar, view multiple rows on your bookmarks toolbar, and do other things that normally wouldn’t be possible.

凭借其userChrome.css文件， Firefox Quantum的界面仍可高度自定义。 您可以编辑此文件以隐藏不需要的菜单项，将标签栏移动到导航工具栏下方，查看书签工具栏上的多行，以及执行通常无法执行的其他操作。

运作方式 (How This Works)

Firefox’s userChrome.css file is a cascading style sheet (CSS) file that Firefox uses. While style sheets are normally applied to web pages, this particular style sheet is applied to Firefox’s user interface. It allows you to change the appearance and layout of everything surrounding the webpage iteslf. You can’t actually add any features; you can only modify what’s already there to change, hide, or move it.

Firefox的userChrome.css文件是Firefox使用的级联样式表(CSS)文件。 通常将样式表应用于网页，而将这种特定的样式表应用于Firefox的用户界面。 它使您可以更改iteslf网页周围所有内容的外观和布局。 您实际上无法添加任何功能； 您只能修改已存在的内容以进行更改，隐藏或移动。

This has nothing to do with Google Chrome. “Chrome” refers to the user interface of the web browser, which is what Google Chrome was named after.

这与Google Chrome无关。 “ Chrome”是指网络浏览器的用户界面，这就是Google Chrome的名字。

The userChrome.css file has existed in Firefox for a long time, but it’s taken on renewed importance with Firefox Quantum. Many tweaks that could previously be accomplished by browser add-ons can now only be accomplished by editing the userChrome.css file.

userChrome.css文件在Firefox中已经存在很长时间了，但是随着Firefox Quantum的出现，它变得更加重要。 以前只能通过浏览器插件完成的许多调整现在只能通过编辑userChrome.css文件来完成。

在哪里找到调整 (Where to Find Tweaks)

While you could create your own tweaks if you understand CSS code and how Firefox’s interface was designed, you can also just find tweaks online. If you want to make a certain change, someone else has probably already figured out how to do it and written the code.

如果您了解CSS代码以及Firefox界面的设计方式，就可以创建自己的调整项，但是您也可以在线查找调整项。 如果要进行某些更改，可能已经有人想出了办法并编写了代码。

Here are some resources to get you started:

以下是一些入门资源：

• Sample Tweaks from userChrome.org: A short list of interesting tweaks that demonstrate the power of userChrome.css.

  来自userChrome.org的示例调整：简短的有趣调整列表，展示了userChrome.css的功能。

• Classic CSS Tweaks: A repository of userChrome.css tweaks from the author of the Classic Theme Restorer extension, which no longer functions on Firefox Quantum.

  Classic CSS Tweaks ：来自Classic Theme Restorer扩展的作者的userChrome.css调整库，该扩展库在Firefox Quantum上不再起作用。

• userChrome Tweaks: A collection of interesting Firefox tweaks.

  userChrome调整：有趣的Firefox调整的集合。

• FirefoxCSS on Reddit: This subreddit is a community for discussing tweaks. You can search the subreddit to find other people’s tweaks, see what people are sharing, and even ask for input if you can’t find a tweak you really want.

  FirefoxCSS on Reddit ：这个subreddit是讨论调整的社区。 您可以搜索subreddit来查找其他人的调整，查看其他人在分享什么，甚至还可以输入是否找不到您真正想要的调整。

• Guide to Editing Your Context Menu: Instructions for removing items from Firefox’s context menu and changing their order in the list, taken from the FirefoxCSS subreddit.

  编辑上下文菜单指南：从Firefox的上下文菜单中删除项目并更改列表中的顺序的说明，摘自FirefoxCSS subreddit。

Bear in mind that older versions of Firefox had a different interface. Older userChrome.css tweaks you find online may not function on Firefox 57 and later, also known as Firefox Quantum.

请记住，较早版本的Firefox具有不同的界面。 您在网上发现的旧版userChrome.css调整可能无法在Firefox 57及更高版本(也称为Firefox Quantum)上运行。

If you know what you’re doing with CSS, you can enable the browser toolbox to inspect the Firefox browser’s chrome. This will provide the information you need to customize various browser interface elements with your own CSS code.

如果您知道CSS的用途，则可以启用浏览器工具箱来检查Firefox浏览器的Chrome。 这将提供您使用自己CSS代码来自定义各种浏览器界面元素所需的信息。

如何创建您的userChrome.css文件 (How to Create Your userChrome.css File)

The userChrome.css file does not exist by default, so once you have a tweak or two you want to try out, you first have to create the file in the appropriate location inside your Firefox profile folder.

默认情况下，userChrome.css文件不存在，因此，如果要进行一两次调整，就必须先在Firefox配置文件文件夹内的适当位置创建该文件。

To launch your Firefox profile folder, click menu > Help > Troubleshooting Information in Firefox.

要启动Firefox配置文件文件夹，请在Firefox中单击菜单>帮助>故障排除信息。

Click the “Open Folder” button to the right of Profile Folder to open it. (On macOS or Linux, you’ll see a “Show in Finder” or “Open Directory” button instead. The following instructions show the process on Windows, but it’s basically the same on Mac and Linux—you’ll just be using a different file manager and text editor.)

单击配置文件文件夹右侧的“打开文件夹”按钮以将其打开。 (在macOS或Linux上，您将改为看到“在Finder中显示”或“打开目录”按钮。以下说明显示了Windows上的过程，但在Mac和Linux上基本上相同，您将使用不同的文件管理器和文本编辑器。)

If you see a folder named “chrome” in the profile folder that appears, double-click it. However, you probably won’t, as this folder isn’t created by modern versions of Firefox.

如果在出现的配置文件文件夹中看到一个名为“ chrome”的文件夹，请双击它。 但是，您可能不会，因为此文件夹不是由现代版本的Firefox创建的。

To create the folder, right-click in the right pane and select New > Folder. Name it “chrome”, press Enter, and then double-click it.

要创建文件夹，请右键单击右窗格，然后选择“新建”>“文件夹”。 将其命名为“ chrome”，按Enter，然后双击它。

You’ll need to tell Windows to show you file extensions, if you haven’t already. Windows hides file extensions by default to simplify things. This step isn’t necessary on macOS or Linux, which show this information by default.

如果还没有，请告诉Windows显示文件扩展名。 Windows默认情况下隐藏文件扩展名以简化操作。 在macOS或Linux(默认情况下会显示此信息)上，此步骤不是必需的。

On Windows 8 or 10, you can simply click the “View” tab on the ribbon and check the “File name extensions” box to make them visible. On Windows 7, click Organize > Folder and search options, click the “View” tab, and uncheck “Hide extensions for known file types”.

在Windows 8或10上，您只需单击功能区上的“查看”选项卡，然后选中“文件扩展名”框以使其可见。 在Windows 7上，单击组织>文件夹和搜索选项，单击“查看”选项卡，然后取消选中“隐藏已知文件类型的扩展名”。

You will now create the userChrome.css file, which is really just a blank text file with the .css extension instead of the .txt extension.

现在，您将创建userChrome.css文件，该文件实际上只是具有.css扩展名而不是.txt扩展名的空白文本文件。

To do so, right-click in the right pane here and select New > Text Document. Name it “userChrome.css” making sure to remove the .txt file extension.

为此，右键单击此处的右窗格，然后选择“新建”>“文本文档”。 将其命名为“ userChrome.css”，以确保删除.txt文件扩展名。

Windows will warn you that you’re changing the file’s extension and this may be a problem for certain types of files. Click “Yes” to confirm your change.

Windows将警告您您正在更改文件的扩展名，这对于某些类型的文件可能是个问题。 单击“是”确认更改。

On macOS or Linux, create an empty text file with the same name.

在macOS或Linux上，创建一个具有相同名称的空文本文件。

如何编辑userChrome.css文件 (How to Edit the userChrome.css File)

You can use any text editor to edit the userChrome.css file. The Notepad text editor included with Windows works just fine. If you want a more powerful text editor with more features, we like Notepad++.

您可以使用任何文本编辑器来编辑userChrome.css文件。 Windows附带的记事本文本编辑器工作正常。 如果您想要功能更强大的文本编辑器，我们喜欢Notepad ++ 。

To edit the file in Notepad, right-click it and select “Edit”.

要在记事本中编辑文件，请右键单击它，然后选择“编辑”。

Add whatever tweaks you want to the file by copying and pasting them in. If you add multiple tweaks, be sure to add them all on their own lines.

通过复制和粘贴将所需的任何调整添加到文件中。如果添加多个调整，请确保将它们全部添加在自己的行上。

Once you’re done, save the file by clicking File > Save in Notepad.

完成后，通过单击文件>保存在记事本中来保存文件。

Whenever you edit your userChrome.css file, you will have to close all open Firefox windows and relaunch Firefox for your changes to take effect.

每当您编辑userChrome.css文件时，都必须关闭所有打开的Firefox窗口，然后重新启动Firefox才能使更改生效。

If you find yourself coming back to the “chrome” folder frequently to edit your userChrome.css file, you may want to create a desktop shortcut to the folder or add it to the “Quick access” folders in File Explorer.

如果您发现自己经常回到“ chrome”文件夹来编辑userChrome.css文件，则可能要创建该文件夹的桌面快捷方式，或将其添加到文件资源管理器中的“快速访问”文件夹中。

userContent.css文件 (The userContent.css File)

Firefox also has a userContent.css file you can edit, and you may stumble across some tweaks that say they’re for the userContent.css file.

Firefox也有一个userContent.css文件，您可以编辑它，您可能会偶然发现一些调整，说它们是针对userContent.css文件的。

To use this file, just create a file named “userContent.css” in the same folder as your Chrome folder. Tweaks you place in this file affect Firefox’s internal “content pages”, like the New Tab and Options pages.

要使用此文件，只需在与Chrome文件夹相同的文件夹中创建一个名为“ userContent.css”的文件。 您在此文件中进行的调整会影响Firefox的内部“内容页面”，例如“新建选项卡”和“选项”页面。

救命，我坏了！ (Help, I Broke Something!)

If you ever encounter a problem with a tweak, you can just remove it from your userChrome.css file and restart Firefox. If that doesn’t work, you can completely delete the userChrome.css file and restart the browser to erase all your changes and get a fresh Firefox interface.

如果您遇到调整问题，只需将其从userChrome.css文件中删除，然后重新启动Firefox。 如果那不起作用，则可以完全删除userChrome.css文件，然后重新启动浏览器以清除所有更改并获得新的Firefox界面。

翻译自: https://www.howtogeek.com/334716/how-to-customize-firefoxs-user-interface-with-userchrome.css/

userchrome