Blog
Six strategies for building a great Chrome extension
Tuesday, September 11, 2012
This guest post was written by
Tal Raviv
, 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:
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 App
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.
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
Labels
#freeandopen
#GooglePlay #AndroidDevStory #PlayStore #DeveloperConsole #StoreListingExperiments
#io12
#io13
#io14
#io15
#io16
#io17
#io2012
#io2013
#io2014
+1
20% project
3d
about.com
accelerator
accessibility
actions
actions on google
Administrative APIs
AdMob
adobe
Ads
adsense
advogato
AdWords
africa
agpl
AI
AIY
AIY Projects
AIYProjects
ajax
ajax apis
ajax search
ajax search books news apis
all for good
amarok
AMP
AMP Cache
analytics
android
Android Studio
Android Things
android wear
Announcement
apache
api
apis
apis console
apis explorer
apis. charts
app engine
app indexing
app indexing api
App Invites
apple
apps
apps script
area 120
Artificial Intelligence
asia
assistant
atom publishing protocol
Auth
authentication
authsub
awards
axsjax
barcodes
beacon
beacons
bespin
best practices
bigquery
Blockly
blogger
book search
books API
bootcamp
british english
Brotli
browser
building ajax apps
business
buzz
c++
Cache
caja
caldav
calendar
camino
campfire one
caption
cardboard
CardDAV
cast
Certification
channel
chinese
chrome
chrome apps
chrome dev summit
chrome devtools
chrome experiment
chrome extensions
chrome os
chrome web store
chromecast
chromium
chronoscope
cifs
classes
classroom api
client libraries
closure tools
cloud
cloud datastore
cloud functions for firebase
cloud platform
cloud portability
cloud services
cloud sql
cloud storage
cms
CocoaPods
code for educators
code jam
code review
code-in
codeedu
codelabs
coffee with a googler
collada
color
commerce
community
competition
compression
compressorhead
computing heritage
conferences
contacts api
contest
contextual gadgets
conversations
couchdb
countdown to I/O 2012
courses
Crash Reporting
creative commons
cricket
crisis response
cryptography
css
css3
custom search
custom search api
danish linux forum
dart
Data Compression
datastore
design
devart
develop
developer
developer expert
Developer Keynote
developers
developers. meetup
devfest
devfest developer chrome maps social wave apps
DFP
discovery service
diversity
django
dns
docs
documentation
documents list api
dojo
doodles
dot net
doubleclick
dreamweaver
Drive
drupal
earn
earth
eclipse
eclipsecon
eddystone
education
email
EMEA
enterprise
Europe
event
events
evolution
execution api
extensions
Fabric
faster web
featured
feeds
finance
Firebase
Firebase Analytics
Firebase Cloud Messaging
Firebase Dynamic Links
firebug
firefox
firevox
fitness
flutter
font api
fosdem
freebsd
freenet
Fridaygram
fusion tables
G Suite
gadgets
Game Developers Conference
games
gcc
gci
GCP
GDA
gdata
GDC17
GDD
gdd07
gdd08
gdd09
GDD11
GDE
gdg
gdl
gdl weekly
gears
geo
geolocation
geoserver
getpaid
ghop
git
github
gmail
Gmail APIs
gnome
gnome women's summer outreach program
Go
goo.gl
Google
Google APIs
google apps
google apps api
google apps for your domain
google apps marketplace
google assistant
google assistant sdk
google buzz
google cast
google chart api
google checkout
google chrome
Google Cloud Messaging
Google Cloud Platform
google cloud storage
google code
google code project hosting
google code search
google code university
google compute engine
google data apis
google data protocol
google developer day
google developer days
google developers
Google Developers Academy
Google Developers Live
Google Developers site
Google Developers University Consortium
google docs
Google Docs API
google doctype
Google Drive
Google Drive SDK
google earth
google fit
Google Fonts
google friend connect
google gadgets
google gears
google grants
google health
Google I/O
Google Identity Platform
google io
google mashup editor
Google Noto fonts
Google Play
google play services
Google Science Fair
Google sheets
Google Sheets API
Google Slides
Google Slides API
Google Spreadsheets API
google storage
google summer of code
Google tech talk
google technoloy user groups
google tv
google visualization api
google wallet
Google Wave
google web elements
google web toolkit
google.org
google+
googlecast
googleio
googlenew
GooglePlay
googlewebelements googleio
GPE
GPT
green linux
grow
gsoc
GSuite
gtags
gtug
guest post
guice
gulp
GWSOP
gwt
gzip
hackathon
hacking
hackthon
hamilton
hangouts
haproxy
hg
hibernate
howto
hpux
html
html5
I/O
I/O 17
I/O 2017
I/O Extended
I/O Live
ical
identity
ietf
ignite
igoogle
iguanas
iiw
Image Compression
image search
Imara
in-app payments
incubator
India
indie
internationalization
internet explorer
internet of things
interviews
IO17
IO2017
ios
iOS SDK
IoT
ipad
iphone
israel
Issue Tracker
jaiku
japanese
java
javascript
jetpack
joomla
joomladayus2007
joomladayusa
karaoke
KDE
KDE 4.0
kernel
kernel summit
keynote
khronos
kids
kids coding team
kml
korean
Krakow
labs
lanchpad
languages
latitude
launch
launchpad
launchpad studio
lca
Leadership
lessons
licenses
linux
linux foundation
linux summit
linux virtual server
linuxconf eu
localization
LoCo
london
mac
MacFuse
machine learning
Makers
malware
maps
maps apis
Marketplace
material
material components
material design
MDL
meetup
mercurial
MIT CSAIL
mobile
mobile sites
mobile speed
mobile UX
mod_pagespeed
Moderator
monetize
MOOC
mozilla
mylar
myspace
MySQL
mythtv
named
narratives
native ads
native client
nearby
netbsd
non-profit
nonsense
nosql
notifications
Noto Serif CJK
nss
O3D
oauth
OAuth playground
OAuth2
objective-c
OCaml
ocr
ODF
office hours
oha
OOXML
open data
open source
open source blog
open web
openajax alliance
opengl
openid
opensocial
openssh
openssl
oreilly
orkut
oscon
oscon2007
osi
oss devs
ossjam
osx
pactester
page speed
PageSpeed
palette
payments
performance
phone
photos
picasa
picasa web
places API
play services
playground
plone
plone sprint
podcast
polymer
Polymer Summit
portugal
posix
PowerMeter API
prediction api
preview
prizes
programming
Progressive Web App
project hosting
Project Loon
Project Tango
proximity
pubsubhubbub
PWA
py3k
python
python sprint
rails
random hacks of kindness
Rasberry Pi
reader
Remote Config
research
result snippets
Rewarded Ads
Rewarded Video Ads
rhino
Saatchi
salesforce
samba
sandbox
Santa Tracker
scalability
scholarship
Scratch
screencast
sdk
sdks
search
security
serif
service worker
sessions
Sheets API
shindig
shopping
Shoreline Amphitheatre
showcase
sidewiki
sign-in
silverstripe
sitemaps
sites api
sixapart
sketchup
Slides API
Smart Lock for Passwords
soap search api
soc
social
social graph
solaris
souders
spa2007
spdy
speakers
speed
speed tracer
standards
startup
startups
storage
Street View
student programs
students
stuff
subscribed links
subversion
summer of code
Sundar Pichai
SVG
sxsw
syndication
tasks API
Team Drives (new)
techmakers
templates
TensorFlow
TensorFlow Research Cloud
Test Lab
testing
themes
tool
tools
topp
training
tranparency
transit
translate
translation
tutorials
tv
ubiquitous computing
ubiquity
ubucon
ubuntu
Udacity
UI
unicode
unit test
Unity
Universal App Campaigns
unix
URLs
video
videos
Vim
virtual keyboard
virtual reality
visualization
VR
wattpad
Wearables
Weave
web animations api
web apps
web components
web designer
web exponents
web fonts
web performance
web platform docs
webfonts
webgl
webmaster
WebP
website optimizer
weekly roundup
WhiteHouse.gov
Who's at Google I/O
win
windows
windows programming
Winter of Code
Women Tech Makers
women techmakers
wtm
xauth
yahoo
youtube
zlib
zurich
ZXing
Archive
2017
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2016
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2015
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
2014
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2013
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2012
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2011
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2010
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2009
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2008
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2007
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2006
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2005
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Subscribe
Google
on
Follow @googledevs
Visit
Google Developers
for docs, event info, and more.
