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