INFO 343 Web Technologies

Targeting the page context menu

With Firefox, if you right click on an HTML page, you provoke a context menu. You can target this context menu and place your own items there.

install.rdf

<?xml version="1.0" encoding="UTF-8"?>
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#">
  <Description about="urn:mozilla:install-manifest">
    <em:id>contextMenu@tabrooks.edu</em:id>
    <em:name>Context menu</em:name>
    <em:version>1.0</em:version>
    <em:creator>T.A. Brooks</em:creator>
	<em:description>Adds right-click menu option.</em:description>
    <em:targetApplication>
      <Description>
        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <!-- Firefox -->
        <em:minVersion>3.5b4pre</em:minVersion>
        <em:maxVersion>4.0.*</em:maxVersion>
      </Description>
    </em:targetApplication>
  </Description>
</RDF>

chrome.manifest

content   contextMenu                 chrome/content/
locale    contextMenu   en-US         chrome/locale/en-US/

overlay   chrome://browser/content/browser.xul   chrome://contextMenu/content/ff-overlay.xul

ff-overlay.xul

<?xml version="1.0" encoding="UTF-8"?>
<overlay id="contextMenuOverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  <popup id="contentAreaContextMenu">
    <menuitem id="contextMenu" label="Terry"
              insertafter="context-stop"
              />
  </popup>
</overlay>

contextMenu.xpi

Download contextMenu.zip and EDIT THE RDF FILE TO REFLECT YOUR VERSION OF FIREFOX. Compress all the files as "contextMenu.xpi". Point Firefox at contextMenu.xpi and restart.

Clickable context menu items

You can drive a JavaScript function at the click of the context menu item.

ff-overlay.xul

<?xml version="1.0" encoding="UTF-8"?>
<overlay id="contextMenuOverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <script src="browser.js" />
  <popup id="contentAreaContextMenu">
    <menuitem id="contextMenu" label="Terry"
              insertafter="context-stop"
              oncommand="HelloWorld.onCommand(event)"
              />
  </popup>
</overlay>

browser.js

HelloWorld = {
  onCommand: function(event) {
    alert("Hello Terry!\n");
  }
};