This guest post was written by Tal Raviv, CTO of EcquireEven 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 SuperpowersDeveloping 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:
- Let your users install very slickly directly from your home website to increase conversions.
- List on the Chrome Web Store for tens of thousands of free impressions. (Tip: For maximum exposure and traffic, invest time in beautiful graphic assets.)
- Use localStorage as a super-easy store. Unlike in regular web applications, localStorage for extensions remains untouched even if users clear their cookies. (For more structured, asynchronous, client-side storage of large amounts of objects, take a look at IndexedDB.)
- Let Chrome sync your extension across devices, including data you store in chrome.storage.sync.
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 AppBecause 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 APIsGood 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 MoneyAccepting 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 FrameworksAnywhere 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 TimeOkay, 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.
Tal Raviv 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
By Pete LePage, Developer Advocate and Boardwalk King
By Paul Kinlan, Chrome Developer Relations
By Christian Stefansen, Native Client Team
By Lars Bak, Software Engineer
