Adding to browser context menu?
Solution 1:
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
Solution 2:
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