Set the bookmark Icon for a Javascript Bookmark in Firefox

Problem

The problem we're solving here is that Firefox does not store a page icon when a bookmark is created which launches a Javascript to e.g. open a pop-up. Specifically, while the Google Bookmarks script is handy and functional, there is no icon stored for it, which means that if we - as some are wont to do - put the Google Bookmarks shortcut on the tool bar without a Name (in the Name: field of the Properties dialog), a generic icon is used which is difficult to differentiate from the rest of the toolbar icons at a glance.

To give you an idea of how annoying this is, here's a screen-shot of typical our FF Links toolbar on a typical day:

Where is the Bookmark Icon Stored?

In looking at the Firefox bookmarks.html file we find that bookmark icons are stored as non-standard attributes of HTML A elements, each of which contain a bookmark URL as an HREF attribute.

We haven't been able to find this documented anywhere, but if we look at the Firefox bookmark file [Firefox 2.0.0.5], the bookmark for the Firefox Start Page looks something like this:

  <DT><A HREF="http://en-us.start.mozilla.com/firefox"
  LAST_VISIT="1162959544"
  ICON="data:image/png;base64,
  iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/
  9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJ
  ZTwAAAHWSURBVHjaYvz//z8DJQAggJiQOe/fv2fv7Oz8rays/N+VkfG/iYnJfyD/1+rVq7
  ffu3dPFpsBAAHEAHIBCJ85c8bN2Nj4vwsDw/8zQLwKiO8CcRoQu0DxqlWrdsHUwzBAAIGJ
  mTNnPgYa9j8UqhFElwPxf2MIDeIrKSn9FwSJoRkAEEAM0DD4DzMAyPi/G+QKY4hh5WAXGf
  8PDQ0FGwJ22d27CjADAAIIrLmjo+MXA9R2kAHvGBA2wwx6B8W7od6CeQcggKCmCEL8bgwx
  YCbUIGTDVkHDBia+CuotgACCueD3TDQN75D4xmAvCoK9ARMHBzAw0AECiBHkAlC0Mdy7x9
  ABNA3obAZXIAa6iKEcGlMVQHwWyjYuL2d4v2cPg8vZswx7gHyAAAK7AOif7SAbOqCmn4Ha
  3AHFsIDtgPq/vLz8P4MSkJ2W9h8ggBjevXvHDo4FQUQg/kdypqCg4H8lUIACnQ/SOBMYI8
  bAsAJFPcj1AAEEjwVQqLpAbXmH5BJjqI0gi9DTAAgDBBCcAVLkgmQ7yKCZxpCQxqUZhAEC
  CJ4XgMl493ug21ZD+aDAXH0WLM4A9MZPXJkJIIAwTAR5pQMalaCABQUULttBGCCAGCnNzg
  ABBgAMJ5THwGvJLAAAAABJRU5ErkJggg=="
  LAST_CHARSET="ISO-8859-1"
  ID="rdf:#$.vPhC3">Firefox Start Page</A>

The example above has been line-wrapped and HTML encoded, but clearly, the icon used for this bookmark is defined by the content of the [non-standard] ICON attribute of the A element. Furthermore, we may deduce a few things from the definition shown:

• data: - this implies that something besides data might be stored here. Since we don't have a specification for this attribute value, we'll pass over this for the moment and just plan on using it "as is" - that is, we will create a bookmark that uses this same format for the ICON attribute
• image/png;base64 - This appear to be a MIME-type/encoding specification - we're guessing that the 'base64' goes with the [more obviously a MIME-type] 'image/png' since it is separated by a semi-colon instead of a comma...
• The string after the comma is obviously uuencoded data - the image itself, stored as ASCII characters pto avoid the problems inherent with trying to put binary image data in a text file]

Solution

Since

1. we don't have a base64 encoder handy,
2. we want to avoid manual editting of bookmarks.html
3. the Firefox bookmark property sheet doesn't provide a means to set the icon to use for the bookmark
4. we want to do this as much as possible within Firefox

we propose to follow the following steps to accomplish the goal of setting the ICON attribute of a bookmark which launches a Javascript target:

1. Create a Shortcut Icon Image to use in the bookmark
2. Create a webpage that has the bookmark/page icon we created
3. Navigate Firefox to the page we created
4. Boomark the page in Firefodx
5. Edit that bookmark, removing the page URL, and adding the Javascript
6. Clear the 'Name' property of the bookmark

Create an Shortcut Icon Image

Here is a link to the shortcut icon we created for the 'Add Google Bookmark' script: star-gold+16.png

This icon was created using The GIMP - a description of creating the PNG image is beyond the scope of this post.

Create a Web Page that Uses the Shortcut Icon

This is pretty simple, but assumes access to a web server - for some reason it doesn't seem to work with file:// URLs.

Here is the code for the HTML file we use:

  <html>
    <head>
      <title>example</title>
      <link rel="shortcut icon"
      href="star-gold+16.png" />
    </head>
    <body>
      <p>Example of shortcut icon META element</p>
    </body>
  </html>

This file is a here: http://blogs.earthside.org/earth_tech/uploads.html

Creating the Bookmark

Here is a screen shot of the browser showing the newly created toolbar icon - a plain file icon with labeled 'example'.

Note that you will need to click the newly created shortcut once to get the new icon to show up on the toolbar - for some reason the icon doesn't load when the shortcut is created [this can be seen if you watch the bookmarks.html file - it doesn't update until you click the new shortcut for the first time and the icon loads - it may be that the shortcut would update if FF closed, but...].

Here is a screenshot of the browser after the toolbar shortcut icon has loaded:

Next we open the properties page for the old Gmark shortcut and copy the Jacascript out of the Location field.

Below is a copy of the the Javascript - this all has to go on one line for in the bookmark Properties dialog Location field:

 javascript:(function(){var
 a=window,b=document,
 c=encodeURIComponent,
 d=a.open(
 %22http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk=%22
 +(b.location)+%22&title=%22+c(b.title),%22bkmk_popup%22,
 %22left=%22+((a.screenX||a.screenLeft)+10)+%22,
 top=%22+((a.screenY||a.screenTop)+10)+%22,height=420px,width=550px,
 resizable=1,alwaysRaised=1%22);a.setTimeout(function(){d.focus()},
 300)})();

Here is a link to a text file which contains the Javascript shown above, but all on one line, so it can be easily copied and pasted [the line is 392 characters in length]: gmark.js

1. Open the properties dialog for the 'example' shortcut
2. Clear the 'Name' field
3. Paste the Javascript code into the 'Location' field
4. Hit the 'OK' button to save the bookmark

Here is a screen-shot of the 'example' properties after the above changes have been made:

The DT element line from the bookmarks.html file with the Javascript target and the custom icon [saved to a text file]: http://blogs.earthside.org/earth_tech/uploads/gmark.txt

The toolbar with the new shortcut icon which launches the Javascript to add a Google Bookmark:

Notes:

1. In the screenshot above, the button labeled "Gmark" has the script to add the current browser page to Google Bookmarks stored in its "Location" property - the script is launched when the button is clicked.
2. This functionality [add Google Bookmark] exists in the IE Google toolbar, but not in the Firefox version.
3. The Gmark button is the only button currently on the toolbar that contains a Javascript, but it's so ugly that it would be nice to have a way to add an icon to the buttons which launch Javascript before any more are added.
4. The Firefox bookmark property sheet does not provide a way to set the icon to be displayed for a given bookmark.
5. The Firefox bookmark property sheet does allow a blank "Name" property field, unlike IE, which treats the bookmark name as a filename, and hence will not allow the bookmark to exist without a filename.
6. There are almost certainly others [e.g. manually Base-64 encoding the icon image], but this solution will work for trivial cases, since it leverages the "built-in" Firefox icon storage functionality - this has the advantage of not requiring you to edit the bookmarks.html file.
7. Based on the previous note, above, it should be possible to create a PHP or CGI scripted server page which will allow this process to be somewhat automated [e.g. allow the user to select a favicon from a list, then return a page which has that image as a page icon - the Javascript could be added to the bookmark created for the generated page, preserving the ICON attribute of the bookmark A element...
8. Various of the attribute names used in the Firefox bookmarks file are not defined in HTML, and so are not properly speaking "legal" HTML - we don't really care about that here, but it's worth noting if you are interested in manipulating the bookmarks.html file directly [ignoring the instructions from mozilla to the contrary].
9. Comletely unrelated, but handy: If you click a button on the toolbar while holding down the Shift key, the target URL opens in a new window. Ctrl+<click> opens the target in a new tab.