Six strategies for building a great Chrome extension

SEPT. 11, 2012
Author Photo
This guest post was written by , CTO of Ecquire

Even though the words "browser extension" connote a one-trick feature, today’s browser extensions allow developers to accomplish some pretty amazing things. Entire companies are being funded and sold as extensions and providing serious value to users.

Here’s how you can make your browser extension a formidable product.

1. Use Your Superpowers

Developing an extension gives you advantages you may not have been aware of. Think of your extension as an abnormally powerful front end. I'll name a few features we've especially enjoyed:
Extensions are your chance to hack with any site you've wanted to improve beyond the limits of their API. There are many more very powerful advantages browser extensions have - these are just the lesser known ones.

Check out examples and look at what other apps (even silly ones) have done. If you find yourself asking “how did they do that?”, check out the source code.

2. Know What's Going On Inside Your App
ant farm

source: AntFarmsForKids.com

Because extensions are front ends on steroids, you have your pick of almost any web analytics software you choose. We recommend choosing an event-based, not a page view-based model because the definition of a page view is hard to interpret in most extensions. Instead, track specific interactions.

We chose Mixpanel, but there's an official Chrome tutorial on using Google Analytics in an extension. The principles of implementation are the same no matter what you choose.

Solid analytics help you answer questions about what's going on inside your app using hard data instead of intuition and opinions. It will also undoubtedly reveal a few unexpected surprises about user behavior.

3. Connect to Third-Party APIs

Good apps avoid reinventing the wheel, and great apps connect users to the services they already like using. Extensions can request permission to connect with any domain. Just because you're an extension doesn't mean you can't use OAuth to authorize those requests.

If your extension has a server backend, then fantastic, you have plenty of resources to help you. If you want to directly make requests from the user's computer, that is completely possible. The initial handshake and exchange of access token is done from a light server, but after that you can save the tokens locally. This allows your extension to run all of its interactions client-side if you'd like to keep things simple.

4. Make Money

Accepting credit cards and making financial transactions via an extension can be just as ironclad and secure as anywhere else. There's no shortage of billing management services that provide hosted payment pages and APIs.

Simply direct users to secure hosted payment pages to accept credit card information, letting the billing service deal with compliance. We use Recurly, which conveniently allows our users to use coupon codes, receive invoices by email, and manage their billing info directly, saving us even more development time and headache.

Hosted payment pages may be simple to implement, but they are pretty powerful (see also Chargify and CheddarGetter). They allow very specific management of your paying customers. Hosted payment pages can make your extension aware of the user's subscription status, to deactivate or activate as appropriate. Your customers’ payment statuses can be accessed with APIs behind the scenes throughout the lifetime of your extensions.

If you prefer a super-streamlined flow for your customers - one where they potentially do not need to enter their credit card information - using a hosted payment page from Paypal or the recently announced Google Wallet for digital goods are your best bets for maximum coverage and quickest checkout.

Using hosted payment systems affords maximum functionality with the least amount of coding and testing - or any server-side billing logic. Most importantly, you have peace of mind that your customer's financial information is secure and compliant. No compromises.

5. Use Frontend Frameworks

Anywhere there's JavaScript, you can use JQuery, BackboneJS and CoffeeScript: any JS library or plugin you love. This applies across the extension architecture, from injected UI in content scripts to any background code. The entire platform is web frontend - you can run anything you would use in a web application.

6. Test All the Freaking Time

Okay, I admit it's a more fun motto to say than to do, but if you're a TATFTer, I have good news for you. Adrian Unger provides a how-to on using Jasmine BDD in browser extensions even in the sub-cockles of your content scripts, even in the context of a live, logged-in webpage.

Peace of mind about your code is important, but it's even more crucial in extensions where you don't control the webpages you may be injecting into. You can use Jasmine to assert that the DOM of your target web sites hasn't changed too much and that your code is still valid out in the wild web.

In summary, just when you thought you knew everything you could do on the web, new doors open up. This is just a small taste of our lessons learned about what puts browser extensions in the league of extraordinary platforms. Like any new platform, I can’t even imagine the innovation that has yet to launch.


is the CTO of Ecquire, a maker of CRM workflow automation software. Capture contacts from anywhere and Ecquire puts it in the right account for you. Read Tal’s guides on Chrome development and startup experiences on the Ecquire blog.

Posted by Scott Knaster, Editor
posted in:
Previous
Next