Course info
Apr 30, 2018

Play by Play is a series in which top technologists work through a problem in real time, unrehearsed, and unscripted. In this course, Play by Play: Extending the Browser, Brian Clark and John Papa explore the tools you can use to build and publish your own browser extensions. Learn the different types of extensions you could create, how to mask extensions, and finally how to share extensions. By the end of this course, you’ll have all the knowledge necessary to build and publish your own browser extension with JavaScript, HTML, and CSS.

About the author
About the author

Brian is a Solution Architect Specialist who has been building and architecting software for many years now. His initial focus was on ASP.NET, C#, SQL and WPF, but has since been leveraging technologies such as Angular, Node.js, JavaScript, HTML and CSS. You can find Brian on twitter @_clarkio or at

More from the author
About the author

John Papa is a Principal Developer Advocate with Microsoft and an alumnus of the Google Developer Expert, Microsoft Regional Director, and MVP programs.

More from the author
More courses by John Papa
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
(Music) Hi, I'm John Papa, and welcome to this Play by Play on Extending the Browser. In this Play by Play, myself and, Brian Clark, we're going to go through how we can extend the browser and publish your own extensions using Chrome. We're going to walk through the experience of building an extension from scratch. Awesome. So we hope that you enjoy this opportunity to learn how to extend the browser.

The Problem
Hi. I'm John Papa, I'm a web developer, and today we're going to do a Play by Play about Extending the Browser by Writing Extensions, in this case with Chrome. And I'm Brian Clark, I'm a web developer at Microsoft as well, and I'm excited to show you what we're capable of doing by extending the browser, and it's very simple.

Creating a Mask Extension
So now we're all set and we can load it in the browser. How do we do that? Well, we come over to Chrome. I already have the tab open here, but the way you would get to this is the little three dots, or what do you like to call them? The three pimples. The three pimples. We go to More Tools, Extensions. And being that I have it opened already, it's saying what are you talking about, Brian? Now, the other thing I had enabled already was the Developer mode. That allows you to load in custom Chrome extensions, so you check this little box here and it gives you these three options where you can Load unpacked extension, Pack extension, or Update extensions now. What we want to do is load an unpacked extension because we haven't packed it yet. Packed is some kind of a bundling process? Yes. That will kind of compile it to be a Chrome extension. We'll check that out later. So I click on Load unpacked, I find the right folder, which is hello-world, I go into the src folder, and --- So you find the manifest. json basically. Yes. Well, you find all the source files at the root level. So now the way I know that worked is it loaded here, we can see Hello World with version 1, everything is good to go. And by default since I don't have an icon, what Chrome does is it kind of creates this little icon up here for you with the first letter of the name of your extension, and then if we click on that we can see there's Hello World. Amazing! Fantastic! Alright, so we just created our first Hello World extension. Next step is we're going to take a look at how you built the Mask one and kind of walk through those steps. Yeah, let's do it.

Sharing the Extension
Mr. Clark. Mr. Papa. We've just gone through and created a couple extensions. Something's bugging me. We load it as a developer, but there was another option to pack it. I wanted to kind of understand when would I do that, and then ultimately, yeah, it's great that I can do this here, but how do I get this thing up in the store? Great questions, John. I don't have the answers for you. Oh, good. Just kidding. So, I have, as we saw before we can load the unpacked extension, and that's one way you can kind of distribute it. If you put your source code up on GitHub, people can pull it down and do it that way. Fun stuff, but not ideal. Another way we can is through this Pack extension option. In that case you click on it, you choose where the files are, make sure you choose the root folder that it's in that has the manifest. json --- That's the same so far as what we did with the other process, right? Yes, exactly. Hit Select. The other option you have is if you wanted to help the consumers of your extension know that it's actually source code that came from you, you can have a private key to sign it and verify it that way. We'll skip that for now, and then you just click Pack Extension. And what it does is it ends up putting the pack extension with a. crx file extension, extension, extension, in the same folder where you had it packed from. So if we come back over to VS Code, we can see it ended up creating a certificate to sign automatically for us, but if you had one already you wanted to keep using, so like if we were to repack this again, we could use that same certificate. And then here's the CRX extension. So now what you could do is you could put this up on your website and let people download it from there if you want. But, the more ideal way to go is through the Chrome Web Store, this was you can use that marketplace to distribute your extension. Yeah, let's see that.