Firefox Extension Development: Context Menu

In this article, I will show you how to create a Firefox extension that adds a custom action to the context menu (right-click menu). Our extension will allow the user to open a link in a new muted tab. The context menu option will appear anytime a user right-clicks on a link.

Step 1: Manifest.json

As with the last Firefox extension tutorial, the first step is to create the manifest.json that defines basic information about the extension, gives the necessary permissions, and tells Firefox where to find the JS code for our extension. Place this manifest.json in the same folder as other extension files.

{
  "manifest_version": 2,
  "name": "YT Open in Muted Tab",
  "version": "1.0",

  "description": "Presents a right-click menu option to open a link in a new muted tab.",

  "background": {
    "scripts": ["background.js"]
  },

  "permissions": ["menus"]
}

You will note that the extension uses the menus permission. For better compatibility with Chrome, you could also use the contextMenus permission. If you do, you will need to replace menus with contextMenus in the JavaScript in the next step. The manifest.json also defines a single background script which is where we will place the code to add the menu item and respond to its use.

Step 2: background.js

The following background.js file contains a small amount of code to add the context menu to the link context menu and open a new muted tab with the link when it is clicked.

browser.menus.create({
  id: "muted-tab",
  title: "Open Link in New Muted Tab",
  contexts: ["link"]
});

browser.menus.onClicked.addListener(async function (info, tab) {
  if (info.menuItemId == "muted-tab") {
    if (info.linkUrl) {
      let newTab = await browser.tabs.create({ 'active': false, 'url': info.linkUrl, 'index': tab.index+1 });
      browser.tabs.update(newTab.id, { 'muted': true });
    }
  }
});

This code first creates the context menu item, and places it on the context menu for links. Note that Firefox has many different right-click menus available to add actions to, so think carefully about which context(s) your action is applicable to and add them to the contexts array. The menu item also has an id, which allows us to filter onClicked events to only those from our item. The title is self-explanatory. For other properties available for menu items, such as icons, refer to Mozilla’s documentation on menus.

The onClicked listener code adds an async function as a listener. It first checks if the menu item that was clicked is our own and then opens the linkUrl in a new tab. Finally, the tab is updated to be muted.

Step 3: Test

Add the extension in about:debugging. Find a website with links to open, and right-click. You should see the menu option pop up at the bottom of the context menu with other extension items. When clicked, it should open the link in a muted tab to the right of the current tab.

Conclusion

That’s how you create a context menu item! Firefox has many context menus available to customize so this is a broad technique that would improve many extensions.