The author's views are entirely his or her own (excluding the unlikely event of hypnosis) and may not always reflect the views of Moz.

At our recent Searchlove conferences, Mat Clayton from Mixcloud gave a tip I really liked. He pointed out that because his company competes with Spotify and others who have installable desktop applications, they need to do extra legwork to stay front-of-mind with their users. One of the ways they thought to do this was by creating a Chrome app (you can get the Mixcloud app here):

By placing their brand right on the new tab screen of Chrome, they get a little bit of mind-share every time a user opens a new tab. They advertise their app throughout the site using remnant ad inventory any time you visit the site using Chrome - and Mat told us it's had a big take-up.

Great. I thought. Smart. Sounds hard.

Not so.

Mat made an off-hand comment that the entire app was "11 lines of code or something."

"I can do that" I thought

...and with that, Mat won the prize for having the first Searchlove tip I implemented when I got back to the office. I built a DistilledU app to put my brand right there next to Mixcloud:

[Side note: you might look at that logo and think it looks a little different to the one you've seen on our website and you'd be right. Call this a sneak preview of some brand revitalization work we are doing - I'd love to hear your feedback!]

What's the point? Isn't this just a bookmark?

Essentially, yes. But it's a bookmark that comes with great branding benefits for early movers. Most people don't have that many Chrome apps installed, if you have a great product that people use frequently, users on Chrome seem to be responsive to suggestions that they should install an app for "rapid access to <brandname>."

You can see this in action in the reviews of Mixcloud's app - notice how they are all reviews of the Mixcloud service rather than of the Chrome "bookmark".

I'll talk a bit more below about the ways you can take this further, but for now, let's learn...

How you can do the same for your brand

I like to learn new things, so I didn't bug Mat for his code. Now, I want to show you how you could have the same thing for your brand in literally the next 10 minutes regardless of your coding skills. You'll need $5 on a credit card, a Google account, your logo, coffee, and a stopwatch? Ready? Go!

Guide to packaged apps (the app we built above is a "hosted web app" which means it's essentially the same as a regular web app that can get access to some additional Chrome APIs for things like local storage, notifications etc. Packaged apps use the Chrome environment to build full-on apps like those you find on the Chromebook)

I thought I would end with a little story about where I went next after I'd shipped the simple DistilledU app above. Warning: I'm not a developer yet I'm about to show you some code snippets. Don't trust my code - take all of this as a starting point for doing your own research into what works for your business.

We are building notifications into our site

After I built the app above, I got thinking about how I'd love to expose those notifications in the browser. Thinking about it a bit more, I thought I could go further than that and build an extension through which we could curate industry news alerts (a combination of things we've written and stuff we rate from around the rest of the web). So I built one (you can get it from the Chrome store here):

...and get curated cool stuff from Distilled:

This is a few more lines of code and is a little more technically complicated than the app above. You'll need some HTML / JS experience to follow along, and I'm not going to walk through every mouse-click, but here's the high-level view:

Let's build a browser action

I want my notifier to appear all the time, so we're building a browser action. This leads to a manifest.json that looks like this:

The popup box is basic HTML and JavaScript

The security restrictions of building extensions means that there are some slight bits of weirdness, but we start by essentially just writing some HTML and JS.

Let's start by looking at background.js - which runs permanently in the background fetching updates so that we can (a) display an alert when there are new notifications and (b) we don't have to wait for the notifications to load when we click on the icon. Background.js looks like this (click for larger version):

When you click on the icon, it displays popup.html in a little drop-down window. Popup.html looks like this:

The observant among you will notice that there is essentially no content in here - it's added by jQuery in popup.js (click for full size version):

I found that building a notification took (unsurprisingly) a lot more debugging than building the simple app. There are two debugging tips if you plan to try this at home:

1. You can access the console for the background page via the extensions page:

2. You can debug the popup with "inspect element":

This gives you access to all the regular debugging tools like the JavaScript console and the ability to force refresh of assets like the .js files (I found that some of these were cached aggressively which made debugging tricky).

I hope you've found something useful in all my learning efforts. At the very least, you can make a simple app to link to your site. I'd love to hear about anyone who takes the extension side of things further. To make all this effort worthwhile, I'd love it if you would check out:

I was surprised how super-easy creating the chrome extensions were, totally not as scary as it looks! With a small amount of javascript i've even managed to semi-automate some of my daily SEO tasks - no more looking for contact details on a web page for me!

WellIt's later now and tried to create one but got stuck at step 5. I keep getting the following error when trying to extension in chrome (with web developer setting). 'invalid value for 'app.launch.web_url' '

Is anybody familiar with this error? Am i doing something really dumb here to cause this error?

I'm not 100% sure what's causing this - can you paste the manifest file here (or send it to me - will.critchlow at distilled.net)?Are you creating an app for a website registered to you in Google? I built mine for distilled.net which I'm a validated admin of...

Great post, Will.So why not go a step further and create this "App" for other relevant companies/websites for free in exchange for a link? Like you said...no need to "publish" it, just send over the 10-20 lines of code to the web developer and let them publish it themselves. By the law of reciprocity, maybe you'll get a "thank you" link on their blog :)

This is awesome. I got as far as uploading it to the app store and I kept getting this error message when I try to upload my file: "An error occurred: The 128x128 icon file is missing." I have double and triple checked to make sure my image is indeed in the zipped file, named correctly and the right size. Can you help? It appears fine all the way up to the "upload" part and I can't seem to get it to go. Thanks in advance!

It was a little difficult to find a good "category" since it's really just functioning as a bookmark right now.

One note: Don't copy Will's Google Analytics tracking "appendage" to your URL. the App Store will tell you you need to verify the URL in GWT (and of course you can't because it's a URL with tracking code appended). Just scroll down to the bottom of the screen as you are filling out your app's information and you'll be given the opportunity to enter your Google Analytics Account number.

So thats how it works, I have installed some apps which shows icons but just does nothing like how an app works, it simply opens a website. Can you name the software you are using to edit the screenshots and place arrows?

Chrome extensions are very easy to set up; this is a great idea for building brand awareness.

I think it took a total of 30 minutes to read through the "Hello World!" guide and get a simple Google Search app written to provide a quick and easy way to search for promo codes (Danny Sullivan tweeted he would like something like this so I built it just to see if I could do it). I installed it myself (though I'm the only person who's installed it so far though heh...) and use it when I need to renew domain names (Registrars have promo codes pretty much all of the time).

Why we do ditto copy! We have to give stuff which our community
needs; every site has its own audience and required different things. I will
not create this same add-on but pick this idea and use it my own way.

This idea is so amazing so why not we use this to build
relationship. Create some add-on for your prospect and share it to them.

I love learning new things too! Fortunately, SEOMoz is constantly awash in new things for me to learn and try...just like this. Thanks Will. How fun, easy and totally awesome. I bet there's going to be a boatload of new apps in the Chrome pipeline tomorrow, lol! They'll wonder "What the hell happened?" Then they'll realize it was your fault, lol. Seriously, I love this stuff. Can't wait to roll up my sleeves in the AM and try it out. BTW...who on earth gives great posts like this one "thumbs down?" I just can't figure that out! Thanks again Will,Dana

Great Stuff - I just need some help.I tried this and when I tried to "unpacked extension", I got the following message - Invalid value for 'app.launch.web_url'.I edited the code in Dreamweaver and made sure the file was save properly. Any ideas as to what went wrong.

Yes, you can do this with a website. That is essentially what Will did with their first rendition. Start with your website (essentially a bookmark like Will described) and then build from there if you want to add more functionality.

I too had to go through this a couple of weeks ago when I built the Share on Inbound chrome extension. Which BTW has almost 200 users already. It was fun, I can tell you that!

The only problem is that when you want to go beyond the basics, you find yourself face to face with JavaScript, which is not that simple, especially if you're not a programmer or have an inclination for it.

Thanks for the post Will! Hope more people are going to experiment with this and come up with some great ideas.