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:
![[toolbar screenshot 1]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uq9zr9Ybaz5UPdrIWdwXx34nQrBm7bfGjJLKRsHzZeflGz19vIDg1lN0Sqv9IQZDATILotS9ynq-J7o9bv-p0AQm4y9O_BNidecn0X0FHFpxZ6q_OP2V1n3rg6b4WekgtjtjnoBn-lc_H9tAplRJIm=s0-d)
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
- we don't have a base64 encoder handy,
- we want to avoid manual editting of bookmarks.html
- the Firefox bookmark property sheet doesn't provide a means to set the icon to use for the bookmark
- 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:
- Create a Shortcut Icon Image to use in the bookmark
- Create a webpage that has the bookmark/page icon we created
- Navigate Firefox to the page we created
- Boomark the page in Firefodx
- Edit that bookmark, removing the page URL, and adding the Javascript
- 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
- Open the properties dialog for the 'example' shortcut
- Clear the 'Name' field
- Paste the Javascript code into the 'Location' field
- 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:
- 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.
- This functionality [add Google Bookmark] exists in the IE Google toolbar, but not in the Firefox version.
- 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.
- The Firefox bookmark property sheet does not provide a way to set the icon to be displayed for a given bookmark.
- 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.
- 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.
- 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...
- 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].
- 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.
![[toolbar screenshot 1]](http://blogs.earthside.org/earth_tech/uploaded_images/ff-toolbar-1-780371.png)
