Last year I had the opportunity to work on the development of a browser extension for multiple browsers. As I wanted to minimize the amount of browser-specific code and wanted to avoid duplicating my extension for every browser, I used the Crossrider framework. This post provides an overview of my experiences with developing a cross-browser extension using the framework.
The extension I had to create was meant to search through web pages as the user visited them and then add some extra functionality to certain keywords on the page. I won’t go into details here, but it’s something similar as Skype’s Click to Call, which does the same with phone numbers: Click to Call recognizes phone numbers and adds a button to the webpage to easily call this number through Skype:
Some high-level requirements for the extension were:
- Support multiple browsers (without having to maintain completely different versions of the extension)
- Easy distribution channels for installing the extension and pushing out updates to your users.
- Support for background processing. Scraping a web page takes time, this processing should be done without affecting the browsing experience for the user.
Support for multiple browsers
- Write a common codebase and write some browser-specific glue code to wire everything up for each individual browser.
- Use one of the cross-browser extension frameworks that take care of the browser-specifics for you and provide a single API to develop against.
The first option did not appeal to me because I had limited time and little interest to learn each browser’s specifics, so I decided to go for the latter. I investigated several options (KangoExtensions, FireBreath and Crossrider) and Crossrider came up on top for my specific needs.
Setting up your Crossrider development environment
Getting your code under version control
Crossrider does however offer nice support for offline development. All you have to do is:
- Host a local web server that grants local http access to your source code (I used the lightweight and easy to use mongoose).
- Install a “local development” version of your browser extension in your favourite browser. This special version uses the scripts hosted by the web server you set up in the previous step.
Supporting automated testing
Other issues I faced
Here is a non-exhaustive list of issues I faced:
- Browsers do not allow cross-domain requests out of the box. You can call this secure, but it’s also painful to work with. This is especially the case when you’re developing a browser extension that will be making cross-domain requests by design, as any calls to your own web server will be coming from the site you’re visiting. If you are having problems with cross-domain requests, you might want to check out my post on that topic here.
- The look and feel of your HTML/CSS can be inconsistent across different browsers. What I recommend: don’t use any esotheric CSS (examples and their compatibility in different browsers can be found here) and at least check the visual end result in all of your supported browsers.
On Crossrider itself
With Crossrider being a relatively young framework it has the same problems all startup-technologies face: an unstable API (optional method parameters suddenly became required in some browsers), some minor regressions, etc. I can understand where these issues come from (and as a result I can live with them): supporting several browsers, each of which develops rapidly, is no mean feat. These issues have however greatly improved in the last year (i.e. I did not run into any Crossrider-specific issues lately). This also brings me to one of the major benefits of using Crossrider: their great support. You can ask the development staff direct questions on their support site and they will assist you swiftly. Of all the issues I logged, most of them were resolved in a mere couple of days.
Like jQuery, Crossrider provides a nice layer of abstraction for several browser quirks like the cross-domain requests I mentioned above. The problem is, you have to know these quirks exist first. I remember when I first scrolled through the Crossrider API and saw functionality for accessing local storage and performing Ajax requests. My first thoughts were “Why would they provide an API for this default behaviour?”. After having experienced web development on multiple browsers first-hand, I can now relate and appreciate these kinds of things.
As for using Crossrider: If it covers all your cross-browser requirements I can only recommend it. It provides a nice abstraction for different browser implementations and offers easy distribution of your extension and a near painless installation procedure for your users out of the box. If you want to take the responsible route -by which I mean versioning your code and adding automated tests- it’s possible but it will take some setting up.