65

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

6 Answers 6

47

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

Sign up to request clarification or add additional context in comments.

Comments

40

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

10 Comments

This is really neat. Do you know if it can be made to work for Chrome, too?
I searched, I think it can't (at least for now)
Chrome is the new IE6... for now, many things are left unsupported -> caniuse.com/#search=menu
I never dared to speak it out loud, but I have been thinking that for a while now
This has been deprecated and removed from the HTML specification.
|
3

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>

Comments

2

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.

Comments

0

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.

1 Comment

I don't understand what you are writing. But this sounds just like a bad initial (and rejected) API. I can see now reason why a webpage extended context menu would be a problem.
0

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.

5 Comments

You can query keystrokes and mouse events and replace them with your own functions, why would a context menu be different?
@wubbewubbewubbe, The OP wants to add to Browser's Context menu. Have you read about that? And the example is am linking to, does exactly what your comment is saying. So the downvoters aren't even reading the question or the answer now? And downvoting based on your comment? How Amusing!!
@Starx, According to what I see,@wubbewubbewubbe was questioning your security concerns by raising the fact that you can already disable the default context menu and make your own. He was not questioning the fact that you tried to answer the correct question. I also believe the downvotes are related to you saying "you can't", and given the upvoted answers above, in certain cases, it seems that you "can".
@ImShogun, The up voted answer above are talking about experimental features which is not yet fully supported, and when they do, they will be a browser support, but my point is you cannot modify client's application. For what is not experimental till now, You cannot modify client's application, so you can't add to the browser's context menu. The custom menu which you can show is by tampering the event propagation when someone right clicks. So, I still stand by my answer.
Since you can show whatever menu you want by replacing the default, if you want to hack the user, you can replace the default menu with a custom one that looks the same. Therefore allowing sites to add custom actions to the default context menu wouldn't allow them to do anything that they can't already do; it would merely make it possible to add custom actions without preventing the user from also using the default actions.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.