10 June 2011 - 19:05(Colorful) Search Tabs to search selected/typed text

Continuing yesterday’s initial add-on for a Restartless Dominant Color, I’ve taken some ideas from the Firefox UX team to associate search engines with a color.

Colorful tabs appear along the whole bottom edge on install

Here I’ve used the dominant color to add search engine tabs to the bottom of the screen. Normally they’re hidden away, but when you first install the restartless add-on, all the tabs appear for a few seconds. You can also see that all installed search engines are available, such as the one for Twitter Address Bar Search.

Selecting text shows colored tips

When you select some text or start typing in a text box (including those in the Firefox interface like the AwesomeBar!), the tabs will peek up from below only to show their transparent color-filled tips. If you do point at one of the tabs, it’ll become fully opaque and pop up to show the icon. Clicking it will let you search for whatever you have selected or typed.

Install Search Tabs on Firefox 4 without needing a restart. Just reply back in comments if you have any feedback. Or check the code on GitHub and file suggestions or issues!

2 Comments | Tags: Add-on, AwesomeBar, Development, Mozilla

9 June 2011 - 13:33Restartless Dominant Color

I’ve packaged Margaret’s getDominantColor code into a restartless add-on and put the source up on GitHub for people to try out and tweak the logic.

After installing the add-on, hold shift while pointing at an image to have it report the color and show it behind the image. One slight difference from Margaret’s code is that color and transparency values are rounded down to a multiple of 16.

Pointing at an image in about:addons

Download the add-on and check out the code!

10 Comments | Tags: Add-on, Development, Mozilla

15 February 2011 - 2:22Great time to use Firefox 4

If you’ve previously tried a Firefox 4 beta and ran into problems on some websites, I’m glad to report that everything is now working! (At least for the websites I use, and hopefully the sites that you use are working too.) Below is a list of the websites that I’ve run into problems in the past but are working great now. :)

YouTube, Pandora, Gmail

  • Problem: Video/music/flash keeps crashing when clicking links, e.g., related videos or skipping songs
  • Plugin: Upgrade to Flash (Feb. 8 update)
  • Context: Firefox on Windows added Crash Protection with 3.6, and OS X users will no longer worry about plugins taking down Firefox in 4. But there was something different in Flash for Mac that was tickling Firefox in just the wrong way at the wrong time that resulted in many more plugin crashes. (Good thing Firefox could keep running and others tabs were unaffected.)
  • Learn more: Adobe security bulletin, bug 572134


  • Problem: Trying to watch a movie always shows “Once installation is complete please restart your browser to watch this movie.”
  • Plugin: Upgrade to Silverlight 4.0.60129.0 (Feb. 14 update)
  • Context: One major feature in Apple’s latest operating system is 64-bit Snow Leopard, and Firefox 4 combines that with its speed improvements to go even faster. Unfortunately, existing 32-bit code, e.g., Silverlight plugin, doesn’t always play well with the new 64-bit code.
  • Learn more: Silverlight 4 update, bug 598406


  • Problem: Lightning deals don’t show up on various pages like Gold Box pages
  • Context: Firefox 4 supports ECMAScript 5 "strict mode", which makes writing JavaScript code easier and cleaner. Amazon.com combines multiple files, e.g., its own code and jQuery, into a single file to speed up the site; however, jQuery uses strict mode, which applies to the whole file, and some of other other code was no longer valid.
  • Learn more: bug 579119


  • Problem: User-submitted photos, map navigation, search filters don’t appear or don’t work
  • Context: Firefox 4 implements many parts of HTML5 from the <video> tag all the way down to the nitty-gritty details of what properties exist on certain HTML elements. Yelp’s code was counting on "style" in HTMLElement.prototype to be false, but HTML5 browsers will now give true instead.
  • Learn more: bug 608651

So if you haven’t tried Firefox 4 recently because your favorite sites weren’t working, download Firefox 4 beta or have Firefox update itself and try again now. Thanks to the excellent work from all the teams involved to make sure Firefox 4 works great when the release candidates and official release appear in the coming weeks.

7 Comments | Tags: Development, Mozilla

25 January 2011 - 0:39Restartless add-on example code

mfinkle’s recent posts [starkravingfinkle.org] on restartless add-ons reminded me that I was going to write a more detailed post about my restartless GitHub repository, but I’ve been distracted with another project. ;)

So briefly, I’ve put together some helper functions [github.com] that have been useful for developing various restartless add-ons. I’ve organized the repository to have a bunch of “examples/” branches that build on top of other named branches that implement helper functions.

These first few are very simple examples:

- examples/autoReload: saves a step when developing a restartless addon by automatically re-enabling when you disable the add-on from about:addons

- examples/ensureEnabled: the install method always gets executed even when disabled, so this code makes sure the add-on runs on install; useful when combined with the following..

- examples/oneTime: run once and disable itself; useful for debugging problems on other people’s Firefox without doing the usual “copy/paste this into the Error Console”

The next couple helper functions have been incredibly useful for the restartless add-ons I’ve written:

- unload: add a callback to run when the add-on is disabled by calling unload(callback). This function makes it easy to ensure Firefox returns to its original state when a restartless add-on is disabled (which is very important for developing as you’re likely to disable and re-enable many times!) (example)

- watchWindows: add a callback to run when the main Firefox browser window is open (navigator:browser) by calling watchWindows(callback). The callback will be called immediately for existing windows and future windows, so put whatever browser UI modification code you want inside the callback. (example)

One last helper in the repository is the getString function that adds some l10n support to get the correct .properties file for the current locale. It shows off getting additionally packaged files and picking the right locale and some plural forms. I’ve put together a silly example at examples/l10nDialogs.

Silly l10n example

With all these helper functions, Erik Vold and Nils Maier helped put together some code that loads packaged scripts. We ended up with some code that makes use of getResourceURI so that it correctly works if the addon is .xpi packaged or an extension proxy file. Separating out the code this way lets you better organize the code and makes it easier to share.

3 Comments | Tags: Add-on, Development, Mozilla