How To Edit Your Context Menu-firefox-怎样编辑firefox的右键菜单

 

A few words before you start.

• If you break something you can always delete everything in the userChrome.css or the file itself and everything will be back to normal.
• It is possible that a regular Firefox update will break your CSS. It's your responsibility to remember that you have made changes to the browser and that you yourself will have to fix it. Don't make bug reports because your CSS broke. That's on you.

---

Step by step guide on how to edit the context menu of Firefox 57+

First, get the CSS selectors of the elements you want to edit.

Here is a chart and list of most CSS selectors (see edit for more selectors) of the context menu:

right click menu

right click on selected link

List for copy/paste

If an element is missing from the list or you want to know how to get the selectors by hand:

1. Enable Browser Toolbox if you haven't done so already. How to enable: setting-more tools-web developer tools-setting-enable addon debug-enable remote.
   
2. For debugging popups, click the icon that looks like 4 squares or 4 points on the top right. This will make the context menu stay visible. "Disable popup auto hide".
   
3. Switch to the browser window, right click somewhere to make the context menu show up.
4. Switch back to the Browser Toolbox, click the icon on the top left that looks like a pointer over a rectangle. This will show you the CSS for the element you point at.
5. Now move your pointer to the context menu item whose ID you want to find out. It should get highlighted with a red border. Click the highlighted item. you will see the menuitem id.
   
6. Switch back to the Browser Toolbox. The left hand pane should have a selected entry. You can right click > copy > CSS Selector to get the right selector.

You can use this way to get the CSS selector for every element of the browser you want to style or hide.

---

To remove entries from the context menu you need to

1. Create userchrome.css if you haven't already
2. Open the userchrome.css for your current profile with a text editor.
3. Write an entry with your CSS selectors (separated by commas) and hide them.

Like so

#context-navigation, #context-sep-navigation { 
    display: none !important 
}

---

To change the position of a context menu entry you have to:

Give the item you want on the very top a -moz-box-ordinal-group: 0, without doing anything for any other item.

This example will put the search of selected text on top of the context menu.

#context-searchselect {
    -moz-box-ordinal-group: 0 !important;
} 

If you want to move an item to the very bottom, use -moz-box-ordinal-group: 2 (or any number >1), again, without doing anything for any other item.

If you want to move multiple items to the very bottom, then give only these items increasing -moz-box-ordinal-group e.g. 2, 3, 20 and so on. The highest number will be at the bottom. If you give all of these the same number, then while they will stick together at the bottom, they might rearrange amongst themselves depending on when and how they are being added / removed.

You could give each menu entry a distinct ordinal number to exactly put them where you want them but I found I only really needed to move my context search to the top of the menu for maximum convenience.

---

Thanks and credit to u/BatDogOnBatMobile for his comment here that inspired this post

---

Edit:

Template of a userChrome.css file (with even more selectors!) to remove context menu entries. Modify how you see fit:

userChrome.css (Click!)

---

Thanks to /u/NicholasSteele for creating and sending me this file!

采用该法找到menuitem对应的代码行，右键单击目标则可出现menuitem id，然后在simplemenuwizard修改即可，

https://old.reddit.com/r/firefox/comments/7dvtw0/guide_how_to_edit_your_context_menu/