Add items to the browser's menu system.

This API is modeled on Chrome's "contextMenus" API, which enables Chrome extensions to add items to the browser's context menu. The browser.menus API adds a few features to Chrome's API.

Before Firefox 55 this API was also originally named contextMenus, and that name has been retained as an alias, so you can use contextMenus to write code that works in Firefox and also in other browsers.

To use this API you need to have the "menus"  permission (or "contextMenus" for the alias).

Creating menu items

To create a menu item call the menus.create() method. You pass this method an object containing options for the item, including the item ID, item type, and the contexts in which it should be shown.

Listen for clicks on your menu item by adding a listener to the menus.onClicked event. This listener will be passed a menus.OnClickData object containing the event's details.

You can create four different types of menu item, based on the value of the type property you supply in the options to create():

  • "normal": a menu item that just displays a label
  • "checkbox": a menu item that represents a binary state. It displays a checkmark next to the label. Clicking the item toggles the checkmark. The click listener will be passed two extra properties: "checked", indicating whether the item is checked now, and "wasChecked", indicating whether the item was checked before the click event.
  • "radio": a menu item that represents one of a group of choices. Just like a checkbox, this also displays a checkmark next to the label, and its click listener is passed "checked" and "wasChecked". However, if you create more than one radio item, then the items function as a group of radio items: only one item in the group can be checked, and clicking an item makes it the checked item.
  • "separator": a line separating a group of items.

If you have created more than one context menu item or more than one tools menu item, then the items will be placed in a submenu. The submenu's parent will be labeled with the name of the extension. For example, here's an extension called "Menu demo" that's added two context menu items:

Icons

If you've specified icons for your extension using the "icons" manifest key, your menu item will display the specified icon next to its label. The browser will try to choose a 16x16 pixel icon for a normal display or a 32x32 pixel icon for a high-density display:

Only for items in a submenu, you can specify custom icons by passing the icons option to menus.create():

Example

Here's a context menu containing 4 items: a normal item, two radio items with separators on each side, and a checkbox. The radio items are given custom icons.

You could create a submenu like this using code like:

browser.menus.create({
  id: "remove-me",
  title: browser.i18n.getMessage("menuItemRemoveMe"),
  contexts: ["all"]
}, onCreated);

browser.menus.create({
  id: "separator-1",
  type: "separator",
  contexts: ["all"]
}, onCreated);

browser.menus.create({
  id: "greenify",
  type: "radio",
  title: browser.i18n.getMessage("menuItemGreenify"),
  contexts: ["all"],
  checked: true,
  icons: {
    "16": "icons/paint-green-16.png",
    "32": "icons/paint-green-32.png"
  }
}, onCreated);

browser.menus.create({
  id: "bluify",
  type: "radio",
  title: browser.i18n.getMessage("menuItemBluify"),
  contexts: ["all"],
  checked: false,
  icons: {
    "16": "icons/paint-blue-16.png",
    "32": "icons/paint-blue-32.png"
  }
}, onCreated);

browser.menus.create({
  id: "separator-2",
  type: "separator",
  contexts: ["all"]
}, onCreated);

var checkedState = true;

browser.menus.create({
  id: "check-uncheck",
  type: "checkbox",
  title: browser.i18n.getMessage("menuItemUncheckMe"),
  contexts: ["all"],
  checked: checkedState
}, onCreated);

Types

menus.ContextType
The different contexts a menu can appear in.
menus.ItemType
The type of menu item: "normal", "checkbox", "radio", "separator".
menus.OnClickData
Information sent when a menu item is clicked.

Properties

menus.ACTION_MENU_TOP_LEVEL_LIMIT
The maximum number of top level extension items that can be added to a menu item whose ContextType is "browser_action" or "page_action".

Functions

menus.create()
Creates a new menu item.
menus.getTargetElement()
Returns the element for a given info.targetElementId.
menus.refresh()
Update a menu that's currently being displayed.
menus.remove()
Removes a menu item.
menus.removeAll()
Removes all menu items added by this extension.
menus.update()
Updates a previously created menu item.

Events

menus.onClicked
Fired when a menu item is clicked.
menus.onHidden
Fired when the browser hides a menu.
menus.onShown
Fired when the browser shows a menu.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxOperaFirefox for Android
ACTION_MENU_TOP_LEVEL_LIMITChrome Full support Yes
Alternate Name
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.ACTION_MENU_TOP_LEVEL_LIMIT
Edge Full support 14
Alternate Name
Full support 14
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.ACTION_MENU_TOP_LEVEL_LIMIT
Firefox Full support 55
Full support 55
Full support 48
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.ACTION_MENU_TOP_LEVEL_LIMIT
Opera Full support Yes
Alternate Name
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.ACTION_MENU_TOP_LEVEL_LIMIT
Firefox Android No support No
ContextTypeChrome Full support Yes
Alternate Name
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.ContextType
Edge Full support 14
Alternate Name
Full support 14
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.ContextType
Firefox Full support 55
Notes
Full support 55
Notes
Notes 'The 'editable' context does not include password fields. Use the 'password' context for this.
Full support 48
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.ContextType
Opera Full support Yes
Alternate Name
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.ContextType
Firefox Android No support No
ItemTypeChrome Full support Yes
Alternate Name
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.ItemType
Edge Full support 14
Alternate Name
Full support 14
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.ItemType
Firefox Full support 55
Full support 55
Full support 48
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.ItemType
Opera Full support Yes
Alternate Name
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.ItemType
Firefox Android No support No
OnClickDataChrome Full support Yes
Alternate Name
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.OnClickData
Edge Full support 14
Alternate Name
Full support 14
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.OnClickData
Firefox Full support 55
Full support 55
Full support 48
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.OnClickData
Opera Full support Yes
Alternate Name
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.OnClickData
Firefox Android No support No
createChrome Full support Yes
Notes Alternate Name
Full support Yes
Notes Alternate Name
Notes Items that don't specify 'contexts' do not inherit contexts from their parents.
Alternate Name Uses the non-standard name: contextMenus.create
Edge Full support 14
Notes Alternate Name
Full support 14
Notes Alternate Name
Notes Items that don't specify 'contexts' do not inherit contexts from their parents.
Alternate Name Uses the non-standard name: contextMenus.create
Firefox Full support 55
Full support 55
Full support 48
Notes Alternate Name
Notes Before version 53, items that don't specify 'contexts' do not inherit contexts from their parents.
Alternate Name Uses the non-standard name: contextMenus.create
Opera Full support Yes
Notes Alternate Name
Full support Yes
Notes Alternate Name
Notes Items that don't specify 'contexts' do not inherit contexts from their parents.
Alternate Name Uses the non-standard name: contextMenus.create
Firefox Android No support No
getTargetElementChrome No support NoEdge No support NoFirefox Full support 63Opera No support NoFirefox Android No support No
onClickedChrome Full support Yes
Alternate Name
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.onClicked
Edge Full support 14
Alternate Name
Full support 14
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.onClicked
Firefox Full support 55
Full support 55
Full support 48
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.onClicked
Opera Full support Yes
Alternate Name
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.onClicked
Firefox Android No support No
onHiddenChrome No support NoEdge No support NoFirefox Full support 60
Full support 60
Full support 60
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.onHidden
Opera No support NoFirefox Android No support No
onShownChrome No support NoEdge No support NoFirefox Full support 60
Full support 60
Full support 60
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.onShown
Opera No support NoFirefox Android No support No
refreshChrome No support NoEdge No support NoFirefox Full support 60
Full support 60
Full support 60
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.refresh
Opera No support NoFirefox Android No support No
removeChrome Full support Yes
Alternate Name
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.remove
Edge Full support 14
Alternate Name
Full support 14
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.remove
Firefox Full support 55
Full support 55
Full support 48
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.remove
Opera Full support Yes
Alternate Name
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.remove
Firefox Android No support No
removeAllChrome Full support Yes
Alternate Name
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.removeAll
Edge Full support 14
Alternate Name
Full support 14
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.removeAll
Firefox Full support 55
Full support 55
Full support 48
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.removeAll
Opera Full support Yes
Alternate Name
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.removeAll
Firefox Android No support No
updateChrome Full support Yes
Alternate Name
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.update
Edge Full support 14
Alternate Name
Full support 14
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.update
Firefox Full support 55
Full support 55
Full support 48
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.update
Opera Full support Yes
Alternate Name
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: contextMenus.update
Firefox Android No support No

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
Uses a non-standard name.
Uses a non-standard name.

Example extensions

Acknowledgements

This API is based on Chromium's chrome.contextMenus API. This documentation is derived from context_menus.json in the Chromium code.

Document Tags and Contributors

Last updated by: irenesmith,