Adding to browser context menu?

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


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


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.