How to disable right click on certain websites

Question

I am not asking this question from a web developer but from an end-user.

I am using several web sites (google drive, evernote and so on) that have context menu that activates upon a right click event. However, on my browser (Firefox), if I right click it opens my navigator context menu on top of the context menu implemented by the web developer(s) of the website. If I right click a second time, then the navigator context menu disapears, leaving space for the web app context menu.

How can I, as an end-user, disable right clicks on specific websites? And if possible, I would like to have this possibility "on-demand", ie being able to reactivate right clicks when I want to.

Is there an existing addon or a javascript tricks somewhere for this? And if not, which direction should I follow to code something like this?

Answer 1

I am not aware of any extensions to achieve this but creating one wouldn't be hard. You could use the Add-on SDK, most easy to be used via Add-on Builder that is a web application to create SDK-based extensions. The high-level SDK modules don't give you direct access to the browser window however, you have to use the largely undocumented window-utils module for that. The following code in main.js works:

var icons = {
  "enabled": "http://www.mozilla.org/favicon.ico",
  "disabled": "http://www.mozilla.org/media/img/favicon.ico"
};

function disableContextMenu(event)
{
  event.preventDefault();
}

require("widget").Widget({
  id: "disable-context-menu",
  label: "Disable Context Menu",
  contentURL: icons.enabled,
  onClick: function(view)
  {
    var window = require("window-utils").activeBrowserWindow;
    var menu = window.document.getElementById("contentAreaContextMenu");
    if (this.contentURL == icons.enabled)
    {
      menu.addEventListener("popupshowing", disableContextMenu, false);
      this.contentURL = icons.disabled;
    }
    else
    {
      menu.removeEventListener("popupshowing", disableContextMenu, false);
      this.contentURL = icons.enabled;
    }
  }
});

It's really as simple as that - adding this event handler to the context menu disables it, removing that event handler switches it back on. The extension also switches icons to indicate its state. That's it. Of course, if you want to keep the state per-tab then you will need a more elaborate logic. Good luck!

Answer 2

Go to the Content tab under Tools > Options. Click on the Advanced... button next to the Enable JavaScript checkbox. This opens the Advanced JavaScript Settings dialog box. Toggle the checkbox option Disable or replace context menus in the list presented.