Chrome Extension Development: Lessons Learned

 I recently took an evening to make basic Chrome extension, and streamed the whole thing on my Twitch Coding Channel while I did it.

I made Preach! — A simple extension to help you get 👏 your 👏 point 👏 across👏.

https://twitter.com/samjarman/status/831788666695610370

Here are some things I learned along the way, that seemed non-obvious to a reasonably novice JavaScript developer. Enjoy.

You can debug extensions

It’s actually possible to debug extensions by using the “background page”. To do this, use the same Extensions page as you are for loading your extension, and simply click background page.

Once that’s open, you have the full Chrome inspector to find that semicolon you definitely didn’t forget.

Only content scripts can modify the DOM

This totally makes sense, and it’s reasonably easy to do this. Simply add the permissions to your extension manifest. This will define what pages these run on, what file to embed in the page and when to run the JS associated

https://gist.github.com/samjarman/35314425daf139e8790eda394df35dec

Use JS message passing to pass the message from one to another

So how do I make DOM changes from my background.js or popout.js to the page DOM? Use JavaScript Messaging. This technique lets you publish messages in contexts and have them received in other context. For my extension, I wanted to receive the modified text the extension generates and display an alert on the screen (modifying the DOM).

The success dialog of Preach!

Here’s an example of how it works in Preach!

https://gist.github.com/samjarman/a39e344539a521b428317ff5d2f9cf25

Chrome Web Store listings aren’t free

Nope. Joining the Google developer programme is $5 USD. Not surprising really, and a lot cheaper than say, the Apple developer Programme. I suspect the $5 fee helps remove spam and low quality extensions. Didn’t stop me though 😏😅.

Chrome Extension listing is easy

Seriously, the whole listing process for an extension is super easy. Excluding making the Chrome Web Store assets (3 images), the whole process for listing a free extension (preaching is free) is really easy.

Chrome Extension stats take a while

The statistics on Chrome extensions (if you don’t use Google Analytics) can take a few days to come through and they’ll remain on a similar delay. It’s annoying. I’d recommend GA if you really do care about the speed of these.


Overall, Chrome extension dev is really fun. If you’re new to coding, it’s a great way to get something small written, publish it to many countries, up to 1 billion people and see who likes it. If you’re an old hat, it’s a great and easy way to scratch that “I want to ship something” itch. Sure was for me.


Watch me code on Twitch here — Twitch.tv/Samjarman. You can also follow me on Twitter — @samjarman

Finally, thanks to Ben and Jacob for their help with this one. Couldn’t have done it without you.

The Must-Follow Best Practices for Your Push Notifications

I’ve been working at Carnival.io a while now, and I’ve worked with many fortune 500 companies and startups to help them get set up with push notifications, and advising on their stragies for content. I’ve seen some great strategies, and I’ve seen some less great strategies. So in this post, I want to discuss what those great strategies, these best practices, are, and how you, a developer or marketer, can use them in your app.

Push is important. Push is probably as important or even more important than the rest of your app’s UX. Why?

71% of all app uninstalls are triggered by a push notification! 🚫📲 pic.twitter.com/T75cIpqTcl

— Chris Maddern (@chrismaddern) July 22, 2016

The good thing about notifications is they remind your users that your app is installed. A bad thing about notifications is they remind your users that your app is installed.

Get that touchpoint wrong, and you’ve lost that user, perhaps for life. Usage, feedback and revenue are all gone. Bad push practices can really harm your bottom line.

Secondly, it’s important to remember this simple truth:

Push Notifications go to people, not devices.

So here they are, my best practices for push notifications. These can be thought of as four pillars*:

  • When: Make them timely
  • Who: Make them relevant
  • What: Make them precise
  • Tech: Implement them correctly

When: Make them Timely

So my first tip is make push notifications timely. And what I mean by this is to try predict the right time to contact your user. Can you be more flexible than just when you want?

Respect Local Timezone

Respect their timezone. It might be easy to say “Oh it’s 6 PM here in New Zealand, lets send out a push to all commuters”, only to have your audience asleep in other parts of the world. If you have a sale or time-sensitive event, try send in the local timezone for the user. This will stagger the pushes over a window and might even reduce load on your server, if that’s required. A decent push service should give you this option.

Use Backoff Times

Sometimes you might want to send multiple pushes per day, or different services that interact with your app with to inform the user. Consider having a hard limit on this. The limit is relative to the value, but something like a 5–10 max per day would suit most applications. Chat apps for example, won’t have a limit, but 25 marketing messages in a day is probably (read: definitely) going to annoy your users. Consider developing internal priority for some notifications types over the other, perhaps favouring transactional pushes over generic.

People Sleep

While I imagine most people have their phones on do-not-disturb overnight, or at least on silent. But consider this: do you read all your notifications in the morning? Or do you clear them all immediately maybe after reading the important ones?

If you’re part of that overnight noise, you have a lower chance of standing out. Perhaps restrict the amount of pushes you send over night and send a summary style push in the morning, a few hours after waking up.

Who: Make them Relevant

The most important thing is to keep pushes relevant to the user.

Don’t send content for anyone

Ultimately the most valuable pushes are the pushes for me. Chats, deals based on history, or news alerts based on preferences. Don’t send me junk and certainly don’t something that can’t apply to me, for whatever reasons.

Personalize based on Journey

Many services offer personalization based on journey. This could be anything to do with the context of the app. What level of the game you’re on, which items you have in your cart, which news stories you’ve read. How long you’ve had the app installed, or how long it’s been since you’ve last used it. There’s a bunch of marketing and engagement automation possible based off just some basic data points — have a think what could be awesome inside your app!

Use Transactional Push

Alternatively, but not mutually exclusively with audience segmentation, is transactional push. These are the 1:1 pushes that go to a single users only. Perhaps their package is shipping, or they have a chat, or they’ve got a new like. These sorts of notifications are perfectly personalized by definition, but still must adhere to the other best practices, such as timeliness.

Personalize with Names

Use the persons name in a push, if you have it (and your users would remember where they gave it to you — don’t be creepy). For example: “Sam, we have new Doctor Who toys. Tap here”. Oh, and don’t ever say “click” if you’re on mobile. We don’t click there. /peeve

What: Make them Precise

The rule is simple here and there’s only one.

10 Words

Generally speaking, you have about 10 words to make your impact, so use precise language. Be obvious what you want. Make the call to action clear. “You have a new chat from Ben”. “A new deal for you. Tap here for more” “Sam sent you a friend request”. 10 words. Use them wisely.

The Tech: Implement Them Correctly

Notifications are quite tricky to implement, beyond the confusing mess of provisioning and certificates, but taking the time to do them right further helps with reducing the scary 71% stat above.

Ask for Permission Carefully

That alert box that pops up for notification permission may be one of the most important dialogs for your apps. Preempt it. Onboard your user well. Explain “Hey, here’s why we want to send you pushes and here’s what you get out of it. Are you in?” If you explain the value before you present that alert, you’ll get a much higher opt in rate. I’ve seen rates go from 20–30% opt jump to 70–90% with these techniques. This also applies to all other dialogs such as location or bluetooth as well. Explain the value, then ask the user to give up some privacy.

Use a 3rd Party Service

Don’t try do this yourself. 3rd party services are all relatively cheap for the value they provide. They worry about scaling, reliability and have good feature sets. Just use another service.

Preload Content

If your push drives a user to some in app content, you should really be pre-loading that with the available API first. This will delay the push by 20 seconds or so, but when they open the app, the UI should be ready to go. No one wants to be taken to a loading screen.

Duplicate Notifications Inside Your App

It’s almost too easy to clear notifications. You should always try and duplicate the notification content inside the app. This could be an activity log, a chat history or a notifications log. Make it so users can always re-read the alert text of a notification. I really like Tweetbot’s implementation of this.

Expose Settings

If your app has different scenarios in which to send push, let the user turn off hearing about certain situations. Additionally, You can also use the Notifications API on iOS or Android to see which alerts your user has enabled. For example; if they have turned off push, you can detect that and present the benefits again, and if they say yes, you can deep link them to the Settings app. This, over time, will slowly increase your opt in rate again.

Rich Push

In additions to notifications with Actions or Text Input, iOS 10 and Android forever lol brings Rich Push, which allows you to show a selection of Images, GIFs and Videos in your push previews. In iOS 10 you can even do arbitrary views too, and you can learn more about that here.

So that’s my best practices for Push Notifications. Remember:

  • Push Notifications go to people, not devices
  • Who. What. When. Get the Tech Right.
  • Get them right or your bottom line will suffer

And that’s my thoughts so far. If you have any best practices, please comment or tweet me — I’m @samjarman, I’d love to hear them!

Content also inspired from this Google IO talk by Pete LePage.

Developers, it’s time to take a second look at Microsoft

For those of us in the open source, trendy, node, rails, iOS, Android lands it’s easy to forget that there is a whole developer ecosystem out there centred around C#, .Net, Azure and much more.

 

We, and I include myself in this group, have forgotten about the MS ecosystem. Maybe we were burnt by VB or by Windows Vista being... Whatever it was, we moved away to other, newer tools and didn’t really look back.

But I think now, 2016, is the time to take a second look. In case you missed it, there’s a new guy in charge, and he appears to have his head screwed on properly. In just a few years he and his team has lead the charge on some super cool stuff. Let’s take a look at these.

C#

C# is like Java, but fixed. It’s got similar syntax but has got so much more. It’s a superset of C, with classes, inheritance, interfaces (protocols) and much more. If you’re thinking that’s a bit dull now, and you’re a functional programmer now, then F# is also just as cool. If you’re somewhere in between, the LINQ framework will do that for you. It’s also not new either, so it’s pretty stable and theres no week long migration to the next version. (👀 Swift)

.Net Core

.Net Core is a cross platform, open source, free, cut down version of .Net for on Linux, Mac, Windows and even IoT embedded devices. It’s got all the fun of C# and a sensible collection of foundation classes for building whatever you’re building. Oh, and it’s super fast. Not like Node or Ruby fast, actual fast. After talking to a local company, they were able to replace a node.js server doing 800 requests per second with a .Net server doing 20,000+requests per second. Nice.

VS Code and VS for Mac

In case you haven’t seen it, Microsoft released VS Code and it’s pretty darn cool. Once again, open source, cross platform and free. You can think of it like Atom or Sublime, and like those two, they have many extensions for things like Git or other languages. And then we got a preview version of Visual Studio for Mac in the last couple of weeks too. The awesome IDE on Windows is starting to make it’s way over to us now which is pretty neat. It’ll only get better, too.

Azure Machine Learning

Azure, which is pretty much Microsoft’s AWS, now has a bunch of cool AI tools. All tied in with other services, it’d be a trivial add on to your application. A lot of AI algorithms and bayesian math is implemented for you and wizards to help you choose the right one for your application.

Bot Framework

The same goes for the MS Bot Framework. You can create interfaces to Skype, Facebook, Slack and More. It even can run serverless, where you pay for only the resources you consume.

Hololens

The hololens is freakin’ amazing. Read my thoughts here. Also, if your app works on Windows 10 Desktop or Phone, it’ll probably just work on Hololens.

Microsoft Surface Studio

This is one for the designers, the Surface Studio is basically a what happens if you turn a drafting table into a computer. It’s something that I think will actually work super well for designers.

 


These are just some of the cool things Microsoft has to offer. There’s so much more to look at. Universal Windows Apps for write once(ish) run everywhere, Microsoft Surface Hub for meetings, Azure DevTest Labs, Xamarin, Azure IoT Hub, Power BI and much more!

In conclusion, it’s time to take a second look. No solution is perfect, and to suggest tech from “the other side” won’t be the best solution is pure stubbornness and arrogance. Take a second look. Have an open mind. They’ve come a long way, and for your future applications and endeavors, it could be the right way.

So go do it, go to a .Net meetup, or check our your local Ignite conference. Heck, go to Build!


Thanks for reading. I’m also @samjarman on Twitter if you wanna chat — I’d love to see you there.