Adding to browser context menu?

Question

Is it possible to add item to the default browser right button click menu?

Answer 1

There isn't any way for a web application to alter the context menu as of writing, but you can write a chrome extension using the chrome.contextMenus API: https://developer.chrome.com/docs/extensions/reference/contextMenus.

Answer 2

You could suppress the default browser menu and add your own ... Pure JS and css solution for a truly dynamic right click context menu, albeit based on pre-defined naming conventions for the elements id, links etc. jsfiddle and the code you could copy paste into a single static html page:

var rgtClickContextMenu = document.getElementById('div-context-menu');

/** close the right click context menu on click anywhere else in the page*/
document.onclick = function(e){
   rgtClickContextMenu.style.display = 'none';
}

/**
present the right click context menu ONLY for the elements having the right class
by replacing the 0 or any digit after the "to-" string with the element id , which
triggered the event
*/
document.oncontextmenu = function(e){
  //alert(e.target.id)
  var elmnt = e.target
  if ( elmnt.className.startsWith ( "cls-context-menu")) {
     e.preventDefault();
     var eid = elmnt.id.replace(/link-/,"")
     rgtClickContextMenu.style.left = e.pageX + 'px'
     rgtClickContextMenu.style.top = e.pageY + 'px'
     rgtClickContextMenu.style.display = 'block'
     var toRepl = "to=" + eid.toString()
     rgtClickContextMenu.innerHTML = rgtClickContextMenu.innerHTML.replace(/to=\d+/g,toRepl)
     //alert(rgtClickContextMenu.innerHTML.toString())
  }
}

.cls-context-menu-link {
   display:block;
   padding:20px;
   background:#ECECEC;
}

.cls-context-menu { position:absolute; display:none; }

.cls-context-menu ul, #context-menu li {
   list-style:none;
   margin:0; padding:0;
   background:white;
}

.cls-context-menu { border:solid 1px #CCC;}
.cls-context-menu li { border-bottom:solid 1px #CCC; }
.cls-context-menu li:last-child { border:none; }
.cls-context-menu li a {
   display:block;
   padding:5px 10px;
   text-decoration:none;
   color:blue;
}
.cls-context-menu li a:hover {
   background:blue;
   color:#FFF;
}

<!-- those are the links which should present the dynamic context menu -->
<a id="link-1" href="#" class="cls-context-menu-link">right click link-01</a>
<a id="link-2" href="#" class="cls-context-menu-link">right click link-02</a>

<!-- this is the context menu -->
<!-- note the string to=0 where the 0 is the digit to be replaced -->
<div id="div-context-menu" class="cls-context-menu">
   <ul>
       <li><a href="#to=0">link-to=0 -item-1 </a></li>
       <li><a href="#to=0">link-to=0 -item-2 </a></li>
       <li><a href="#to=0">link-to=0 -item-3 </a></li>
   </ul>
</div>

Answer 3

You can't modify a client's browser with a web page, thus you won't be able to add anything to the browser's menu.

What you can do, is define your own custom menu, while user right clicks.

There are several example online which will show you how this can be achieved.

Answer 4

Quoting @alex, only firefox still supports it. BUT it has issues that you would not notice unless you delved deeper into it.

Much like the image map element, it shares state across multiple elements it has been assigned to. As a result, it is very hard to work with when you want to have samey actions but with different arguments for multiple elements that you can right click on. As a result, you must generate uniquely named menu element for each "unique" HTML node that you want to assign it to. For example if you want to add share feature to each comment in page, you would have to add a menu tag for each comment in that page even if only the argument for sharing function is different.

All in all, you will need to evaluate whether or not you want to go deep on firefox only support on this one.

Answer 5

Update 28/8/18 - This is Obsolete

---

On modern browsers you can manipulate the built-in context menu like so:

<menu type="context" id="supermenu">
 <menuitem label="trial" onclick="alert('Smile please')"></menuitem>
  <menuitem label="rotate" onclick="rotate()" icon="http://cdn1.iconfinder.com/data/icons/silk2/arrow_rotate_clockwise.png"></menuitem>
  <menuitem label="resize" onclick="resize()" icon="http://cdn3.iconfinder.com/data/icons/fugue/icon/image-resize.png"></menuitem>
  <menu label="share">
    <menuitem label="twitter" onclick="alert('foo')"></menuitem>
    <menuitem label="facebook" onclick="alert('bar')"></menuitem>
  </menu>
</menu>

<a href='#' contextmenu="supermenu">Right click me</a>

For further reading: http://www.w3.org/wiki/HTML/Elements/menu

demo: https://bug617528.bugzilla.mozilla.org/attachment.cgi?id=554309

Answer 6

One option is to replace the context menu with your own JavaScript triggered equivalent.

Firefox implemented the menu element where you can add to the existing context menu. It was also implemented in Chrome behind a flag. Unfortunately this feature has been removed from the W3C standard due to a lack of implementation interest.

<menu type="context" id="mymenu">
    <menuitem label="Refresh Post" onclick="window.location.reload();" icon="/images/refresh-icon.png"></menuitem>
    <menuitem label="Skip to Comments" onclick="window.location='#comments';" icon="/images/comment_icon.gif"></menuitem>
    <menu label="Share on..." icon="/images/share_icon.gif">
        <menuitem label="Twitter" icon="/images/twitter_icon.gif" onclick="goTo('//twitter.com/intent/tweet?text=' + document.title + ':  ' + window.location.href);"></menuitem>
        <menuitem label="Facebook" icon="/images/facebook_icon16x16.gif" onclick="goTo('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem>
    </menu>
</menu>

To make an element use this context menu, add the contextmenu="mymenu" attribute to it. You can see here that mymenu matches the id attribute of the menu element.

Source

Demo