Curiosity is bliss    Archive    Feed    About    Search

Julien Couvreur's programming blog and more

Custom context menu entry in IE and Mozilla

 

I use a simple online bookmark manager of mine to keep a stack of all the pages that I want to look at later. My eBookmarks page doesn't look good or offer a lot of functionality (no categories or grouping), but allows me to have my stack of links available on a single page. It only supports pushing an entry and deleting entries (although you can't access these features, as some authentication is required).

A bookmarklet (a bookmark with a javascript: url) can be used to conveniently add the current page to this online stack (here is the bookmarklet). This bookmarklet simply opens a small popup where the querystring contains the URL and DESCRIPTION of the link to be eBookmarked. The popup closes itself if the operation was successful.
But a context menu entry is even more convenient and efficient, as it saves space in your bookmarks toolbar and requires less mouse movement.

Here are the steps I used to simply customize the context menu in IE and Mozilla, to give it some eBookmark functionality.

In Mozilla

To add a custom context menu entry to the browser component of Mozilla (in my case Phoenix), two things are needed: UI and code. The UI describing the entry goes in browser.jar/content/browser/browser.xul and the additionnal handler function goes in browser.jar/content/browser/browser.js.

The change in browser.xul goes next to the existing "Bookmark This Page" entry:

<menuitem id="context-ebookmarkpage"
  label="eBookmark This Page"
  accesskey="E"
  oncommand="gContextMenu.eBookmarkPage();"/>

The change in browser.js (extra linebreaks where added for layout purpose in this article, they are marked with a backslash at the end of the line):

eBookmarkPage : function () {
 var x = prompt('Description for the eBookmark',
   this.target.ownerDocument.title);
 if(x && x != '') {
   void(open('http://.../bookmark_add.php?user=dumky&url='+ \
   escape(this.target.ownerDocument.location.href).replace(/\+/g,'%2b')+ \
   '&desc='+escape(x).replace(/\+/g,'%2b'), 'easyadd', \
   'height=10,width=10,left=10,top=10,location=no,scrollbars=yes, \
   menubars=no,toolbars=no,resizable=yes'));
  }
},

The problem with doing the change directly in browser.jar is that it needs to be maintained at each release of the browser. Luckily Phoenix hasn't released since I did this change... ;-) There is a way to add the context menu entry without modifying the main distribution, by bundling both the UI and code in a separate addon file and using the overlay technique. Here is a project that uses this technique. I didn't explore this option a lot because I also wanted remove the context menu entries that I don't use, which I don't believe is possible using an overlay.

Here is the result in Phoenix:
ebookmark-context-phoenix.JPG


In Internet Explorer

In IE, the simplest way of adding a extra context menu entry is by creating a registry key with the label of the new entry. This registry key will also point to an html file containing script that will be executed when the new context entry is clicked.

To add a context menu labelled "eBookmark This Page", a registry key has to be created with this path: HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\MenuExt\eBookmark This Page.
Download the sample registry file.

In this key, the (Default) value should point to the html file containing the code, like "file://e:\ebookmark.html".
A binary value also needs to be added to this key, with Contexts as the name and 21 00 00 00 as the data. This Contexts value controls when the entry is displayed or not (right-click on text, an image, a link or a selection....). You'll find more details about these registry settings in the references below.

If you have the googlebar installed, then you'll have similar entries at this location in your registry, except that the html is kept locally, inside a resource file (res://c:\winnt\downloaded program files\GoogleToolbar_en_1.1.70-big.dll/cmcache.html for example).

A nice trick is that you can also host the html file remotely (the registry key may then read http://enotes.monstuff.com/ebookmark.html). That allows you to minimize the installation on the client machine (only a registry key change is needed). The only problem is security, since you now execute code from a remote location. I need to investigate whether in this solution the remote code has any unusuable trust associated with it or if it respects the security and domain restrictions from IE.

Here is the html file I used (ebookmark.html). The parent window is available through a special variable external.menuArguments.

<html>
<script language="JavaScript" defer>
   var parentwin = external.menuArguments;
   var doc = parentwin.document;
   var x = parentwin.prompt('Description for the eBookmark', doc.title);
   if(x&&x!='') {
    // Same code as in previous sample but use
    // parentwin.open() to open the popup, and
    // parentwin.location.href to get the location of the current window
}
</script>
</html>

Here is the result in IE:


Conclusion
... to be completed ...
Another feature of Mozilla that I use for my eBookmarks is the bookmark access by keyword. The "Open eBookmarks" bookmark has books as keyword and "Add eBookmark" has book. This way I can view and add eBookmarks using the keyboard only (Type Alt-D or Ctrl-L to edit the location bar and type the keyword). I like to have alternatives and not be stuck with the mouse. But obviously the mouse approach fits better the input model of the Tablet PC, which I use a lot to browse...

One more little trick: if you add an eBookmark while your eBookmark page is opened in another tab in Mozilla (or window in IE), you want your eBookmark list to refresh itself. For this I use a loop in the main page that checks for a time cookie. This time cookie gets updated when you add an entry...

More
Controlling the Context Menu on MSDN.
Adding Entries to the Standard Context Menu on MSDN.
All you want to know about bookmarklets at bookmarklets.com.
Simon's article on bookmarklets.

______________________________________

Thanks for the tip! Saved me added frustration.

Posted by: lyrical warfare at August 19, 2003 03:02 PM

I can't find the browser.jar file in Mozilla 1.7RC2.

Posted by: Shailesh Humbad at June 5, 2004 08:04 AM

Shailesh, I'm using Firefox and some files are not named the same way in Mozilla. It looks like the files you want to check out are "navigator.xul", "navigator.js" and "contentAreaContextOverlay.xul" in comm.jar.

Posted by: Julien at August 11, 2004 12:23 PM

I think that is is not realizable. Because we need to modify the browser.jar file of Mozilla or Registry entry (IE). This thing cannot complete in Client side...especially in WEb Application.
Any way to migration the setting to Server side?

Posted by: Khoa Phuc Thien Cai at September 22, 2004 01:14 AM

i'd like to add an entry to the popupu menu in IE so that i can zoom in an image on a web page, or maybe open it in, say, ACDSEE. I'd appreciate your help.

Posted by: hadi at July 2, 2005 11:54 PM

The IE was support many modules, included
translators, for example PRMT. I like that!

Posted by: Mikel at March 26, 2006 08:02 PM
comments powered by Disqus