Anyway, over the course of this past year I added a few new features to ColorZilla (mainly because I needed them for my own work ), but because 2007 has been a very busy year for me, I just couldn’t find the time to properly test and release the new stuff to the public. Now, with Firefox 3 just around the corner, I finally took a bit of time to put everything together and release ColorZilla v2.

So, here’s what’s new in ColorZilla v2:

Webpage DOM Color Analyzer
Basically, this feature started with several simple questions – what colors are in use on any given Web page? What HTML elements use them and what CSS rules define those colors? So, Webpage DOM Color Analyzer analyzes a Web page and produces a palette of all the colors on that page. By hovering on any color, you can see what elements use that color, and by clicking on a color you can see a detailed listing of all the CSS rules that apply that color to DOM elements. You can even click on a CSS rule have ColorZilla open the corresponding style sheet file with the rule highlighted.

You can save the page colors as a ColorZilla palette, or open the palette in ColorZilla Online Viewer.

ColorZilla Online Palette Viewer
The online palette viewer is a simple webapp that can be used to view a color palette, bookmark it and share it using any number of bookmarking services such as del.icio.us, Google Bookmarks etc.

It works by providing a simple semantic URL that describes a set of colors:
http://colorzilla.com/colors/COLOR_1+COLOR_2...COLOR_N[/PALETTE_NAME]

Each color should be specified in a hex notation similarly to CSS, so for example red is FF0000 and yellow is FFFF00. The ‘palette name’ portion of the URL is optional.
Here’s an example of a palette URL:
http://colorzilla.com/colors/ff0000+00ff00+0000ff/Simple+RGB+Palette

Click here for an additional example.

When viewing palettes online, you get an online eyedropper (that works in all browsers!) that displays color information in many different formats for any color in the palette.

The online viewer can be opened from the ColorZilla Webpage Color Analyzer, or from the ColorZilla Palette Viewer dialog. The simple format of its URL also allows using it with any other application or Web service – all the application has to do is to generate a list of colors, append it to colozilla.com URL and launch that URL in a browser.

Additional features

1. Firefox 3 has a new Full Page Zoom functionality that allows viewing pages at any zoom level and handles both text and images very nicely. With Firefox 3 ColorZilla will use this new functionality for its internal zoomer.
2. Firebug support – until now, ColorZilla allowed you to quickly open the selected element in Dom Inspector. Now, if you have Firebug installed, it will also allow you to quickly open it in Firebug.
3. Ubuntu support was added. Basically, because Ubuntu’s Firefox was compiled using a slightly different compiler, ColorZilla eyedropper didn’t work unless you installed an official Firefox build from Mozilla. This version solves this problem by providing two versions of the eyedropper module, one built with the newer compiler (gcc4) and one with the older one.
4. ColorZilla is now compatible with Firefox 3
5. 3 new languages were added – Indonesian, Korean, Norwegian. Thanks to the BabelZilla team!

ColorZilla v2 (v1.9) is still in beta, but should be stable enough for everyone to try. Check it out and let me know what you think

PlainOldFavorites 1.0.1

• Compatible with Firefox 3
• Catalan, Czech, Danish, Greek, Portuguese translations – thanks to the BabelZilla team!

FirefoxView 1.0

• Firefox 3 compatibility
• 24 new translations: Catalan, Czech, Danish, German, Greek, Persian, Finnish, Galician, Gujarati, Hebrew, Croatian, Hungarian, Italian, Japanese, Korean, Dutch, Polish, Portuguese (Portugal), Russian, Slovak, Turkish, Ukrainian, Chinese (Simplified), Chinese (Traditional) – thanks to the BabelZilla team!
• Graduates to version 1.0!

So, check the new versions out and let me know if you see any issues.

Also, stay tuned for the new version of ColorZilla coming soon – unlike its two siblings above, ColorZilla’s new version will be a bit more major

A few days ago, Google released Google Gears – it’s a browser add-on that allows various Web apps to work offline by providing them with ways to store and retrieve information locally. As one of its first implementations, Google Gears allows Google Reader to work offline.

While Google Gears installs and works seamlessly with Google Reader in Firefox, there are a few things that need to be tweaked in order to make it work in WebRunner or any other XulRunner application. The actions below are somewhat Windows specific, but something very similar can be done on any platform.

1. Register as a global extension – by default, Google Gears installs itself as a Firefox global extension in Windows registry:
   
[HKEY_LOCAL_MACHINE\SOFTWARE\Mozilla\Firefox\Extensions]
{000a9d1c-beef-4f90-9363-039d445309b8}=C:\\Program Files\\Google\\Google Gears\\Firefox\\

   In order to add it to WebRunner we need to add the following key to the registry:
   
   [HKEY_LOCAL_MACHINE\SOFTWARE\WebRunner\Extensions]
   {000a9d1c-beef-4f90-9363-039d445309b8}=C:\\Program Files\\Google\\Google Gears\\Firefox\\

   The exact registry path is different for every XulRunner application, but the basic structure is “HKLM\Software\VENDOR\APP_NAME\Extensions”. In WebRunner case there is no “Vendor”, so it’s just “HKLM\Software\APP_NAME\Extensions”.

2. Add WebRunner compatibility to Gears manifest. Locate the Gears extension manifest install.rdf file (typically in C:\Program Files\Google\Google Gears\Firefox), and add the following lines:
   
   <em:targetApplication>
   <Description>
   <em:id>webrunner@webapps.org</em:id>
   <em:minVersion>0.1</em:minVersion>
   <em:maxVersion>10.0</em:maxVersion>
   </Description>
   </em:targetApplication>

   “webrunner@webapps.org” is the ID of your WebRunner XulRunner application. For other XulRunner apps, you can find out the correct ID in their application.ini file.

3. Add Extension Manager support to WebRunner. Locate the main WebRunner application manifest file – application.ini (typically found in C:\Program Files\WebRunner) and add the following lines:
   
[XRE]
EnableExtensionManager=1


Basically, the first step makes sure that WebRunner detects the extension, the second one makes Gears compatible with WebRunner and the third makes WebRunner load the Google Gears extension. Once you complete these three steps, Google Reader and any other supported Web app will detect and use Google Gears for offline functionality.

The problem

I used SharpReader and RSS Bandit and encountered very similar problem with both of them. Once the number of feed items starts to grow (I hate deleting old items), so does the memory and CPU consumption. Last time I looked before uninstalling, my SharpReader used 800Mb of memory. RSSBandit would use 100% CPU for minutes…

Additionally, because I use at least 3 computers almost daily (home/office/laptop) – synchronizing my feeds between all of them was very cumbersome, if not impossible with these apps.

Google Reader? A few problems still…

Enter Web based RSS readers. I tried both Bloglines and Google Reader in the past, but something in their interface just wasn’t working for me. The latest version of Google Reader introduced a truly convenient Web RSS reading experience but I still couldn’t use it. Why? Here’re several reasons:

• Developing, testing and installing extensions requires constant browser restarts. Having to open Google Reader each and every time is just not very convenient
• Having Google Reader open requires being logged in with my Google login. This has several downsides – first, I often use different logins for different Google apps – Gmail, Analytics and so on – and logging in with a different user in some Google app kills the Google Reader login as well. Then there is the privacy concern – I search using Google tens if not hundreds times a day, and I just prefer to do it while not being logged in with my Google credentials. Being logged in into Google Reader obviously means I’m logged in when searching and basically everywhere.

The solution

To solve this problem I thought about ways I could create two separate ‘spaces’ – one would be my browser space in which I could be logged out from Google and periodically log-in into various Google apps, and a ‘Google Reader’ space in which I would be constantly logged in into Google Reader.

It occurred to me that XulRunner would be a perfect candidate for this. I thought about creating some custom solution using XulRunner, but then remembered that Mark Finkle has already created something very similar – WebRunner. Basically, it’s a ‘Site Specific Browser’ a simple XULRunner program that displays a single Web application in a simplified interface.

Here’re a few advantages of using Google Reader in WebRunner:

• Completely solves Google login problems and my privacy concerns. I’m always logged in into Google Reader in WebRunner, and logged out in my Firefox
• WebRunner being a separate process means that my Google Reader is always running like a regular desktop application, and obviously survives browser restarts
• It has minimal UI that fits perfectly for Google Reader and similar Web apps – there is no need for ‘back/forward’ buttons, browser toolbars and so on. So almost all the screen real-estate is allocated to the Web app, and there is no unneeded and distracting UI elements

So, with the help of WebRunner and XulRunner, Google Reader has become my main RSS Reader. I get all the advantages of a desktop RSS reader and all the conveniences of a Web app – synchronization across machines, performance, storage and so on.

A few quirks

There are still a few disadvantages to using Google Reader over a desktop RSS reader:

• No ‘new items’ alerts. Desktop readers can show an alert window once new items are published. While there are extensions that can accomplish something similar with Google Reader, their functionality is still fairly limited.
• No search – I know, this is very ironic, but Google Reader still has no search functionality that would allow me to search within feeds.
• New item delays – it can take Google Reader several hours to display new items after they are published. I really hope Google would solve this one.

Conclusion

Overall, I’m really enjoying my transition to Google Reader and would really recommend checking out WebRunner for this.

One thing missing from the ‘recommended’ page is the ability to sort the list to find out which extensions are the most popular, which are top rated and so on.

So, I decided to create these charts manually and share the results. The numbes are from March 3, 2007.

The complete list: Adblock Plus, Answers, BlueOrganizer, ChatZilla, Clipmarks, Cooliris, del.icio.us, Download Statusbar, Firebug, FireFTP, FlashGot, Forecastfox, Foxmarks, FoxyTunes, Greasemonkey, JAJAH, Jeteye, Kodak EasyShare Gallery Companion, LinkedIn Companion, Map+, Performancing, Pronto, Sage, StumbleUpon, Web Developer, Yoono

Sorted by average user rating:

1. Web Developer – 4.83
2. FoxyTunes – 4.79
3. FlashGot – 4.76
4. Adblock Plus – 4.73
5. StumbleUpon – 4.71
6. Firebug – 4.54
7. Performancing – 4.48
8. Download Statusbar – 4.42
9. ChatZilla – 4.37
10. Clipmarks – 4.27
11. Cooliris – 4.21
12. Foxmarks – 4.21
13. Sage – 4.13
14. Answers – 4.12
15. FireFTP – 4.12
16. Yoono – 4.00
17. Greasemonkey – 3.82
18. Forecastfox – 3.81
19. LinkedIn Companion – 3.23
20. BlueOrganizer – 3.05
21. Jeteye – 2.89
22. Map+ – 2.73
23. JAJAH – 2.71
24. del.icio.us – 2.54
25. Pronto – 2.50
26. Kodak EasyShare Gallery Companion – 1.56

Sorted by number of downloads per week:

1. Download Statusbar – 228,236
2. Adblock Plus – 198,518
3. Forecastfox – 182,349
4. FlashGot – 176,414
5. FireFTP – 133,702
6. FoxyTunes – 109,253
7. Web Developer – 88,574
8. StumbleUpon – 85,772
9. Firebug – 83,103
10. Cooliris – 78,784
11. Clipmarks – 68,892
12. del.icio.us – 65,745
13. Foxmarks – 65,093
14. Map+ – 64,969
15. Greasemonkey – 57,842
16. Answer – 52,858
17. Kodak EasyShare Gallery Companion – 43,555
18. Sage – 41,962
19. Yoono – 40,459
20. ChatZilla – 39,333
21. JAJAH – 38,697
22. BlueOrganizer – 37,715
23. Performancing – 33,938
24. Jeteye – 26,476
25. Pronto – 26,460
26. LinkedIn Companion – 18,772

Sorted by number of user comments:

1. Forecastfox – 3354
2. StumbleUpon – 1810
3. Web Developer – 1138
4. FlashGot – 1123
5. FoxyTunes – 1105
6. FireFTP – 703
7. Download Statusbar – 626
8. Adblock Plus – 592
9. Sage – 337
10. Greasemonkey – 320
11. Foxmarks – 296
12. Firebug – 279
13. Cooliris – 237
14. del.icio.us – 231
15. Answers – 169
16. Performancing – 160
17. ChatZilla – 156
18. JAJAH – 99
19. Clipmarks – 67
20. Yoono – 63
21. Jeteye – 55
22. Map+ – 52
23. BlueOrganizer – 37
24. LinkedIn Companion – 26
25. Kodak EasyShare Gallery Companion – 18
26. Pronto – 10

Obsviously, if an extension is new it will probably have less user comments, which brings us to the last chart.

Sorted by seniority (from older to newer):

1. ChatZilla – 16
2. Download Statusbar – 26
3. Web Developer – 60
4. Sage – 77
5. StumbleUpon – 138
6. FoxyTunes – 219
7. FlashGot – 220
8. Forecastfox – 398
9. FireFTP – 684
10. Answers – 735
11. Greasemonkey – 748
12. Clipmarks – 1407
13. Jeteye – 1508
14. LinkedIn Companion – 1512
15. Performancing – 1730
16. Yoono – 1833
17. Firebug – 1843
18. Adblock Plus – 1865
19. Cooliris – 2207
20. Map+ – 2394
21. Foxmarks – 2410
22. JAJAH – 2577
23. Pronto – 3348
24. BlueOrganizer – 3481
25. del.icio.us – 3615
26. Kodak EasyShare Gallery Companion – 4441

The number to the right of each extension is its id in Mozilla database – newer extensions have bigger ids.

It’s great to see that FoxyTunes is doing well compared to its peers – and what a great company this is!

Yesterday I received my Author’s copy of the new “Hacking Firefox” book published by Wiley. The book was written by Mel Reyes and several contributing writers. It has tons of useful information, hacks, tips and tricks on just about every aspect of Firefox.

I wrote the chapters on Mozilla Programming and specifically on Firefox Extension Programming. I worked very hard on making the material both easy to follow and comprehensive. If you are interested in creating Firefox extensions, the book should provide you with everything you’ll need – starting with basic understanding of the technologies and all the way to writing your own extensions, packaging them and deploying them on the Internet.

Now, when a friend asks me something like “What is this XUL thing I’ve been hearing about?” or “Where should I start if I want to hack something for Firefox?” I can just hand him a copy of this book, instead of pointing him to various bits of information scattered around the Web

More information about the book can be found on my Hacking Firefox page.

The sample extension we create in the book and its full source code can be found on the SiteLeds Extension page.

• Mozilla cannot correctly handle filenames that contain Unicode characters (on Windows). See bug 162361 for more details.
  
  Unicode issues seem to haunt many products and frameworks, and as I found out, Mozilla is no exception. If this is issue is important to you (and if you are located in a non-English environment, it should be), please vote for this bug, provide some useful feedback or even consider contributing some code for solving the problem.
• I found no way to sort an XPCOM array (nsIMutableArray) from JavaScript. I’ve solved this issue by first creating a regular JavaScript array (Array class). Once I’ve added all the wanted elements to the JavaScript array, I called its ‘sort’ method and then added the elements in their sorted order to the nsIMutableArray. If anyone knows a better way to do this, please let me know. Otherwise, I believe that the interface should be expanded to allow this important functionality.

I’ll quote the extension home page to explain what it does and why I created it:

Firefox has a great Bookmarks system. It has many wonderful and useful features, and the bookmarks can be exported and imported from many bookmark formats. There are even several extensions out there that allow you to synchronize your bookmarks with a remote server, the Windows Favorites folder and so on. Some users still wish to keep some or all their bookmarks in the Windows Favorites folder. There can be several reasons for this. First, some new Firefox users might find the transition to Firefox smoother if they can still use their familiar Favorites folder. Also, a link to the Favorites folder can be found in several places throughout Windows, which makes it a convenient option for storing links. PlainOldFavorites allows using the Favorites folder directly from Firefox without needing to import or synchronize the bookmarks first.

I’ve managed to find a work around for this:

1. Install an unload event handler in your overlay Javascript:
   
   addEventListener("unload", overlayUnloaded, false);
   
   The overlayUnloaded function will be called each time the user closes the browser window.
2. In the overlayUnloaded function, ask the extension manager (nsIExtensionManager) whether your extension is in toBeUninstalled state.
3. If so, the user has uninstalled your extension – go ahead and run your clean-up code.

A related technique is determining that your extension has been updated, and something went wrong.

I can provide the complete source code (in Javascript) for this technique on request.

Every Firefox extension consists of several parts. It often has a UI part, typically written in XUL and some scripts typically written in Javascript. More advanced extensions have compiled XPCOM components in form of .dll or .so files.

While the XUL and the Javascript parts can often be used on all platforms (Windows, Linux etc.) without modification, the XPCOM components need to be platform specific (for obvious reasons).

I wanted to have a single extension package (XPI), which included the XPCOM components for all the platforms. When the extension is installed, it should detect the user platform and load only the appropriate components.

The first thing I noticed is that the extension manager mechanism doesn’t allow conditional installations (install different components depending on user’s platform).

Next, I tried the following reasoning: package both .dll and .so files with the extension. Firefox on Windows will load only the .dll files while ignoring the .so files, and on Linux only the .so files, while ignoring the .dll files. It was only logical to me that the Windows version of Firefox will not try to load the .so files.

It didn’t work. Windows Firefox did try to load the .so file and popped up and ugly message box saying something about wrong file format. Looking through Mozilla source code, I saw that there is a list of all the dynamic libraries extensions (.dll, .so etc.) and Mozilla will try to load all the file types on all the platforms.

After posting a question on the mozillazine.org forums, I got an answer saying that I should provide several different packages for the different platforms. I wasn’t ready to go that way. Managing several packages, when all that is different between them is a single file seemed unreasonable.

So I came up with a work-around. I had only Windows and Linux versions, but the technique can be extended further to support more platforms. Here it is:

1. Package the Windows version of the component as MyComponent.dll
2. Package the Linux version of the component as MyComponent.dll.linux
3. Windows will load the .dll file while ignoring the .dll.linux file (because its extension is not a valid dynamic library extension). Nothing else should be done here.
4. On Linux – the first time the extension is loaded, it will try to load MyComponent.dll file and fail (because the file is a Windows DLL). It will fail gracefully, without popping up any message boxes.
5. During the startup of my extension I check whether the user platform is Linux and if MyComponent.dll.linux file exists.
6. If so, this means that this is the first run. The script moves (renames) MyComponent.dll.linux to MyComponent.dll, removes the components registry files, compreg.dat and xpti.dat, so they are rebuilt the next time Firefox is started
   and inform the user that an additional restart is needed.
7. When the browser is restarted, the MyComponent.dll is loaded successfully (because it is now a valid .so file) and the registry files are rebuilt to reflect its contents.
8. The extension is now fully functional.

One little question needs to be answered – why do I rename MyComponent.dll.linux to MyComponent.dll and not to something more Linux-like as MyComponent.so.
The answer is – uninstall. If I created a new file named MyComponent.so, when my extension got uninstalled the file wouldn’t have been deleted, because it was never installed. Moving MyComponent.dll.linux to MyComponent.dll leaves all the files with exactly the same names, so when uninstall comes, they are removed.

I can provide the complete source code (in Javascript) for this technique on request.