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.

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.

Hands on with Microsoft HoloLens

At the recent Microsoft Ignite conference, I got the opportunity to try the Microsoft HoloLens. CvpEnq4VUAA-4sc

All I'd seen up to that point were videos like these:

[embed]https://www.youtube.com/watch?v=aThCr0PsyuA[/embed]

Sure, marketing videos will always look better than the real thing. I'd been bitten once before - by Google Glass. Google Glass had great marketing but really just sucked once on your face.

But once I put on the HoloLens it was completely different. It was totally legit.

First, a bit of knowledge. Back at university, during my honours year, I did a great course on Augmented Reality. It was taken by well respected researcher Dr Mark Billinghurst. He taught us the concepts required to understand AR. To sum it up, for an AR system, a computer must recognize points of interest in an image (corners, edges, etc) and then place the object, scale it, and orientate it correctly. This is quite computationally complex, and expensive. Oh, and it must be done every frame, roughly 25 times a second.

With that in mind, I expected HoloLens to suck at that, but to my sheer and utter delight, it freaking nailed it.  We later learned that the HoloLens has a dedicated processing chip for the above process, and that's what allows it to be so fast.

That being said I did have some gripes. Firstly, the field of view (eg how much of your field of view that could possibly contain holograms was small. I suspect this is just a V1 thing, and the ability to expand that is coming. However, this might be easier said than done, due to the above process. But for now, for example, you'll not see a floating space ship in your peripheral vision.

Secondly the unit was a bit heavy. I'd say after an hour of playing/watching/using the HoloLens your neck might be a bit sore. Once again, V1, once again, probably fixable.

The gestures worked well, but took a couple of gos to get used to them. Watching the Microsoft employees (who had been using it for a while) use it, they were able to have their hand movements recognised first time. Right now it supports just a few, but I'd really like to see some gesture inference going on, and then it could get really cool.

Overall, a great first start. I'm looking forward to see where they take it next.

Developers: If you're keen to start writing apps for this (hey, it's just Windows 10 Apps or Unity), then go here. Developers can buy up to five devices with shipping to the US, UK, Canada, France, Ireland, Germany and New Zealand (woo!).